« home

elementari Examples

ColorBar.svelte

Here’s a ColorBar with tick labels:

Viridis
• tick side=top
• range=
00.20.40.60.81
Magma
• tick side=center
• range=100,1631
05001k1.5k2k
Cividis
• tick side=bottom
• range=-99.9812,-10
−100−80−60−40−200
<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 Hydrogen2 He Helium3 Li Lithium4 Be Beryllium5 B Boron6 C Carbon7 N Nitrogen8 O Oxygen9 F Fluorine10 Ne Neon11 Na Sodium12 Mg Magnesium13 Al Aluminium14 Si Silicon15 P Phosphorus16 S Sulfur17 Cl Chlorine18 Ar Argon19 K Potassium20 Ca Calcium21 Sc Scandium22 Ti Titanium23 V Vanadium24 Cr Chromium25 Mn Manganese26 Fe Iron27 Co Cobalt28 Ni Nickel29 Cu Copper30 Zn Zinc31 Ga Gallium32 Ge Germanium33 As Arsenic34 Se Selenium35 Br Bromine36 Kr Krypton37 Rb Rubidium38 Sr Strontium39 Y Yttrium40 Zr Zirconium41 Nb Niobium42 Mo Molybdenum43 Tc Technetium44 Ru Ruthenium45 Rh Rhodium46 Pd Palladium47 Ag Silver48 Cd Cadmium49 In Indium50 Sn Tin51 Sb Antimony52 Te Tellurium53 I Iodine54 Xe Xenon55 Cs Cesium56 Ba Barium57 La Lanthanum58 Ce Cerium59 Pr Praseodymium60 Nd Neodymium61 Pm Promethium62 Sm Samarium63 Eu Europium64 Gd Gadolinium65 Tb Terbium66 Dy Dysprosium67 Ho Holmium68 Er Erbium69 Tm Thulium70 Yb Ytterbium71 Lu Lutetium72 Hf Hafnium73 Ta Tantalum74 W Tungsten75 Re Rhenium76 Os Osmium77 Ir Iridium78 Pt Platinum79 Au Gold80 Hg Mercury81 Tl Thallium82 Pb Lead83 Bi Bismuth84 Po Polonium85 At Astatine86 Rn Radon87 Fr Francium88 Ra Radium89 Ac Actinium90 Th Thorium91 Pa Protactinium92 U Uranium93 Np Neptunium94 Pu Plutonium95 Am Americium96 Cm Curium97 Bk Berkelium98 Cf Californium99 Es Einsteinium100 Fm Fermium101 Md Mendelevium102 No Nobelium103 Lr Lawrencium104 Rf Rutherfordium105 Db Dubnium106 Sg Seaborgium107 Bh Bohrium108 Hs Hassium109 Mt Meitnerium110 Ds Darmstadtium111 Rg Roentgenium112 Cn Copernicum113 Nh Nihonium114 Fl Flerovium115 Mc Moscovium116 Lv Livermorium117 Ts Tennessine118 Og Oganesson