Element Color Schemes

svelte<script lang="ts">
  import { element_data, PeriodicTable, TableInset } from 'matterviz'
  import { ELEMENT_COLOR_SCHEMES } from 'matterviz/colors'

  // Create multi-scheme color data - each element gets an array of 3 colors
  const multi_scheme_colors = element_data.map((element) => [
    ELEMENT_COLOR_SCHEMES.Jmol[element.symbol] ?? '#666666',
    ELEMENT_COLOR_SCHEMES.Vesta[element.symbol] ?? '#666666',
    ELEMENT_COLOR_SCHEMES.Alloy[element.symbol] ?? '#666666',
  ])
</script>

<PeriodicTable
  tile_props={{ show_name: false, show_number: false }}
  heatmap_values={multi_scheme_colors}
  tooltip={false}
  style="margin: 1em auto; max-width: 800px"
>
  {#snippet inset()}
    <TableInset>
      <div class="scheme-legend">
        <div class="legend-item">
          <div class="color-sample jmol"></div>
          <span>Top: Jmol/CPK</span>
        </div>
        <div class="legend-item">
          <div class="color-sample vesta"></div>
          <span>Middle: VESTA</span>
        </div>
        <div class="legend-item">
          <div class="color-sample alloy"></div>
          <span>Bottom: Alloy</span>
        </div>
      </div>
    </TableInset>
  {/snippet}
</PeriodicTable>

svelte<script lang="ts">
  import { PeriodicTable } from 'matterviz'
  import { ELEMENT_COLOR_SCHEMES } from 'matterviz/colors'
  import { ELEM_SYMBOLS } from 'matterviz/labels'

  const subtitles: Partial<Record<keyof typeof ELEMENT_COLOR_SCHEMES, string>> = {
    Vesta:
      'From the <a href="https://jp-minerals.org/vesta/en/" target="_blank" rel="noopener">VESTA</a> crystallographic visualization software',
    Jmol: 'From the <a href="http://jmol.sourceforge.net/" target="_blank" rel="noopener">Jmol</a> molecular visualizer, based on <a href="https://en.wikipedia.org/wiki/CPK_coloring" target="_blank" rel="noopener">CPK coloring</a> (Corey-Pauling-Koltun)',
    Alloy:
      'Custom high-contrast scheme optimized for contrast between elements commonly co-occurring in metal alloys',
    Pastel: 'Custom pastel scheme with bright, less saturated colors',
    Muted:
      'Custom desaturated scheme for reduced visual strain but still trying to maintain some contrast',
    'Dark Mode':
      'Custom bright colors optimized for dark backgrounds and dark theme interfaces',
  }
</script>

{#each Object.entries(ELEMENT_COLOR_SCHEMES) as [identifier, scheme] (identifier)}
  {@const color_overrides = Object.fromEntries(
    ELEM_SYMBOLS.map((key) => [key, scheme[key] ?? 'transparent']),
  )}
  <section>
    <h3 id={identifier}>{identifier}</h3>
    <p class="subtitle">{@html subtitles[identifier]}</p>
  </section>
  <PeriodicTable {color_overrides} labels={scheme} />
{/each}