« home

elementari Examples

ColorBar.svelte

Here’s a ColorBar with tick labels:

Viridis
• tick side=top
• range=undefined
0 0.2 0.4 0.6 0.8 1
Magma
• tick side=center
• range=100,1631
0 500 1k 1.5k 2k
Cividis
• tick side=bottom
• range=-99.9812,-10
−100 −80 −60 −40 −20 0
<script>
  import { ColorBar } from '$lib'

  const bars = [
    [`Viridis`, `top`, [0, 0.25, 0.5, 0.75, 1]],
    [`Magma`, `center`, [], [100, 1631]],
    [`Cividis`, `bottom`, [], [-99.9812, -10]],
  ]
</script>

<div style="border: 0.1px dashed white;">
  {#each bars as [color_scale, tick_side, tick_labels, range, width]}
    <ColorBar
      label="{color_scale}<br>&bull; tick side={tick_side}<br>&bull; range={range}"
      {color_scale}
      {tick_side}
      {tick_labels}
      {range}
      label_style="white-space: nowrap; padding-right: 1em;"
      --cbar-width="100%"
      --cbar-padding="2em"
    />
  {/each}
</div>

ColorBar supports label_side = ['top', 'bottom', 'left', 'right']

    top
  • Blues
  • BrBG
  • BuGn
  • BuPu
  • Cividis
    bottom
  • Cool
  • CubehelixDefault
  • GnBu
  • Greens
  • Greys
    left
  • Inferno
  • Magma
  • OrRd
  • Oranges
  • PRGn
    right
  • PiYG
  • Plasma
  • PuBu
  • PuBuGn
  • PuOr
<script>
  import { ColorBar } from '$lib'
  import * as d3sc from 'd3-scale-chromatic'

  const names = Object.keys(d3sc).filter((key) => key.startsWith(`interpolate`))
</script>

<section>
  {#each [`top`, `bottom`, `left`, `right`] as label_side, idx}
    <ul>
      <code>{label_side}</code>
      {#each names.slice(idx * 5, 5 * idx + 5) as name}
        {@const color_scale = name.replace(`interpolate`, ``)}
        <li>
          <ColorBar
            label={color_scale}
            {color_scale}
            {label_side}
            label_style="min-width: 5em;"
          />
        </li>
      {/each}
    </ul>
  {/each}
</section>

You can make fat and skinny bars:


Viridis

<script>
  import { ColorBar } from '$lib'

  const wrapper_style = 'place-items: center;'
</script>

<ColorBar {wrapper_style} style="width: 10em; height: 1ex;" />
<br />
<ColorBar label="Viridis" {wrapper_style} style="width: 3em; height: 2em;" />
<br />
<ColorBar {wrapper_style} --cbar-width="8em" --cbar-height="2em" />

PeriodicTable.svelte heatmap example with ColorBar inside TableInset

<script>
  import {
    ColorBar,
    ColorScaleSelect,
    element_data,
    PeriodicTable,
    PropertySelect,
    TableInset,
  } from '$lib'

  let color_scale = `Viridis`
  let heatmap_key
  $: heatmap_values = heatmap_key
    ? element_data.map((el) => el[heatmap_key])
    : []
  $: heat_range = [Math.min(...heatmap_values), Math.max(...heatmap_values)]
  let cs_range = heat_range
</script>

<form>
  <ColorScaleSelect bind:value={color_scale} minSelect={1} />
  <PropertySelect bind:key={heatmap_key} />
</form>

<PeriodicTable
  {heatmap_values}
  style="margin: 2em auto 4em;"
  bind:color_scale
  color_scale_range={cs_range ?? heat_range}
  links="name"
  lanth_act_tiles={false}
>
  <TableInset slot="inset" style="place-items: center; padding: 2em;">
    <ColorBar
      {color_scale}
      range={heat_range}
      bind:nice_range={cs_range}
      tick_labels={5}
      tick_side="bottom"
      --cbar-width="100%"
      --cbar-height="15pt"
    />
  </TableInset>
</PeriodicTable>
1 H Hydrogen 2 He Helium 3 Li Lithium 4 Be Beryllium 5 B Boron 6 C Carbon 7 N Nitrogen 8 O Oxygen 9 F Fluorine 10 Ne Neon 11 Na Sodium 12 Mg Magnesium 13 Al Aluminium 14 Si Silicon 15 P Phosphorus 16 S Sulfur 17 Cl Chlorine 18 Ar Argon 19 K Potassium 20 Ca Calcium 21 Sc Scandium 22 Ti Titanium 23 V Vanadium 24 Cr Chromium 25 Mn Manganese 26 Fe Iron 27 Co Cobalt 28 Ni Nickel 29 Cu Copper 30 Zn Zinc 31 Ga Gallium 32 Ge Germanium 33 As Arsenic 34 Se Selenium 35 Br Bromine 36 Kr Krypton 37 Rb Rubidium 38 Sr Strontium 39 Y Yttrium 40 Zr Zirconium 41 Nb Niobium 42 Mo Molybdenum 43 Tc Technetium 44 Ru Ruthenium 45 Rh Rhodium 46 Pd Palladium 47 Ag Silver 48 Cd Cadmium 49 In Indium 50 Sn Tin 51 Sb Antimony 52 Te Tellurium 53 I Iodine 54 Xe Xenon 55 Cs Cesium 56 Ba Barium 57 La Lanthanum 58 Ce Cerium 59 Pr Praseodymium 60 Nd Neodymium 61 Pm Promethium 62 Sm Samarium 63 Eu Europium 64 Gd Gadolinium 65 Tb Terbium 66 Dy Dysprosium 67 Ho Holmium 68 Er Erbium 69 Tm Thulium 70 Yb Ytterbium 71 Lu Lutetium 72 Hf Hafnium 73 Ta Tantalum 74 W Tungsten 75 Re Rhenium 76 Os Osmium 77 Ir Iridium 78 Pt Platinum 79 Au Gold 80 Hg Mercury 81 Tl Thallium 82 Pb Lead 83 Bi Bismuth 84 Po Polonium 85 At Astatine 86 Rn Radon 87 Fr Francium 88 Ra Radium 89 Ac Actinium 90 Th Thorium 91 Pa Protactinium 92 U Uranium 93 Np Neptunium 94 Pu Plutonium 95 Am Americium 96 Cm Curium 97 Bk Berkelium 98 Cf Californium 99 Es Einsteinium 100 Fm Fermium 101 Md Mendelevium 102 No Nobelium 103 Lr Lawrencium 104 Rf Rutherfordium 105 Db Dubnium 106 Sg Seaborgium 107 Bh Bohrium 108 Hs Hassium 109 Mt Meitnerium 110 Ds Darmstadtium 111 Rg Roentgenium 112 Cn Copernicum 113 Nh Nihonium 114 Fl Flerovium 115 Mc Moscovium 116 Lv Livermorium 117 Ts Tennessine 118 Og Oganesson