ExamplesColorBar.svelte
Here’s a ColorBar with tick labels, using the new tick_align prop:
<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}   tick_align={tick_align}   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:
<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 title=top
tick=secondary title=top
tick=inside title=bottom
tick=primary title=bottom
tick=secondary title=bottom
tick=inside title=left
tick=primary title=left
tick=secondary title=left
tick=inside title=right
tick=primary title=right
tick=secondary title=right
tick=inside <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()).
<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>