« home

elementari Examples

ColorBar.svelte

Here’s a ColorBar with tick labels, using the new tick_align prop:

color_scale=Viridis   tick_align=primary   range=0,1
0.000.250.500.751.00
color_scale=Magma   tick_align=secondary   range=100,1631
0.00200.00400.00600.00800.001000.001200.001400.001600.001800.00
color_scale=Cividis   tick_align=primary   range=-99.9812,-10
−100.00−80.00−60.00−40.00−20.000.00
<script>
  import { ColorBar } from '$lib'
</script>

<div style="border: 0.1px dashed white;">
  {#each [
    // [color_scale, tick_align, tick_labels, range, label_text]
    [`Viridis`, `primary`, [0, 0.25, 0.5, 0.75, 1], [0, 1]],
    [`Magma`, `secondary`, 10, [100, 1631]],
    [`Cividis`, `primary`, 4, [-99.9812, -10]],
  ] as [color_scale, tick_align, tick_labels, range]}
    <ColorBar
      title="color_scale={color_scale} &emsp; tick_align={tick_align} &emsp; range={range}"
      {color_scale}
      {tick_align}
      {tick_labels}
      {range}
      tick_format=".2f"
      title_style="padding: 1em;"
      --cbar-padding="3em"
    />
  {/each}
</div>

You can make fat and skinny bars:

00.20.40.60.81

Viridis
00.20.40.60.81

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

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

<ColorBar {wrapper_style} style="width: 10em; height: 1ex;" />
<br />
<ColorBar title="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 = $state(`Viridis`)
  let heatmap_key = $state(``)
  let heatmap_values = $derived(heatmap_key ? element_data.map((el) => el[heatmap_key]) : [])
  let heat_range = $derived(heatmap_key ? [Math.min(...heatmap_values), Math.max(...heatmap_values)] : [0,1])
</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={heat_range}
  links="name"
  lanth_act_tiles={false}
>
  {#snippet inset()}
  <TableInset  style="place-items: center; padding: 2em;">
    <ColorBar
      {color_scale}
      title={heatmap_key}
      range={heat_range}
      tick_labels={5}
      tick_align="primary"
      --cbar-width="calc(100% - 2em)"
      />
    </TableInset>
  {/snippet}
</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

Example demonstrating title_side and tick_align interaction:

title=top
tick=primary
Label
0510
title=top
tick=secondary
Label
0102030
title=top
tick=inside
Label
10203040
title=bottom
tick=primary
Label
101520
title=bottom
tick=secondary
Label
10203040
title=bottom
tick=inside
Label
20304050
title=left
tick=primary
Label
202224262830
title=left
tick=secondary
Label
20253035404550
title=left
tick=inside
Label
30405060
title=right
tick=primary
Label
303234363840
title=right
tick=secondary
Label
30354045505560
title=right
tick=inside
Label
40506070
<script>
  import { ColorBar } from '$lib'

  const title_sides = [`top`, `bottom`, `left`, `right`]
  const tick_sides = [`primary`, `secondary`, `inside`]
</script>

<section>
  {#each title_sides as title_side, l_idx}
    {#each tick_sides as tick_side, t_idx}
      {@const orientation =
        title_side === `top` || title_side === `bottom` ? `horizontal` : `vertical`}
      {@const bar_style = orientation === `horizontal` ? `width: 150px; height: 20px;` : `width: 20px; height: 150px;`}
      {@const num_ticks = l_idx + t_idx + 2}
      {@const current_range = [l_idx * 10, (l_idx + 1) * 10 + t_idx * 20]}
      <div>
        <code>title={title_side}<br />tick={tick_side}</code>
        <ColorBar
          {title_side}
          {tick_side}
          {orientation}
          style={bar_style}
          title="Label"
          tick_labels={num_ticks}
          range={current_range}
          --cbar-tick-overlap-offset="10px"
          --cbar-tick-label-color="{tick_side === `inside` ? `white` : `currentColor`}"
        />
      </div>
    {/each}
  {/each}
</section>

Date/Time Ranges

You can format tick labels for date/time ranges by providing a D3 format string via the tick_format prop. The color bar accepts ranges as milliseconds since the epoch (standard JavaScript Date.getTime()).

Year 2024 (YYYY-MM-DD)
2023-11-142024-07-032025-02-19
Year 2024 (Month Day)
Nov 14Jan 11Mar 09May 06Jul 03Aug 30Oct 27Dec 24Feb 19
Year 2024 (Vertical - Mmm DD, YY)
Nov 14, '23Mar 09, '24Jul 03, '24Oct 27, '24Feb 19, '25
<script>
  import { ColorBar } from '$lib'

  // Example date range (e.g., start and end of 2024)
  const date_range = [
    new Date(2024, 0, 1).getTime(), // Jan 1, 2024
    new Date(2024, 11, 31).getTime(), // Dec 31, 2024
  ]
</script>

<div style="display: flex; column; gap: 2em; align-items: center;">
  <ColorBar
    title="Year 2024 (YYYY-MM-DD)"
    range={date_range}
    tick_format="%Y-%m-%d"
    tick_labels={2} />

  <ColorBar
    title="Year 2024 (Month Day)"
    range={date_range}
    style="width: 500px;"
    tick_format="%b %d"
    tick_labels={7} />

  <ColorBar
    title="Year 2024 (Vertical - Mmm DD, YY)"
    range={date_range}
    tick_format="%b %d, '%y"
    tick_labels={4}
    orientation="vertical"
    wrapper_style="height: 200px;" />
</div>