Skip to content

Commit c12063d

Browse files
techniqtechniq
committed
Add civiliation timeline examples
1 parent 46f97c3 commit c12063d

4 files changed

Lines changed: 181 additions & 0 deletions

File tree

‎packages/layerchart/src/routes/docs/examples/Duration/+page.svelte‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
};
2828
});
2929
30+
function formatYear(number: number): string {
31+
return Math.sign(number) === -1 ? Math.abs(number) + ' BC' : number + ' AD';
32+
}
33+
3034
let renderContext = $derived(shared.renderContext as 'svg' | 'canvas');
3135
</script>
3236

@@ -345,3 +349,108 @@
345349
</BarChart>
346350
</div>
347351
</Preview>
352+
353+
<h2>Civilization timeline</h2>
354+
355+
<Preview data={data.civilizationEvents}>
356+
<div class="h-[700px] p-4 border rounded-sm">
357+
<BarChart
358+
data={data.civilizationEvents}
359+
x={['start', 'end']}
360+
y="civilization"
361+
c="region"
362+
cRange={[
363+
'var(--color-danger)',
364+
'var(--color-warning)',
365+
'var(--color-success)',
366+
'var(--color-info)',
367+
]}
368+
rule={false}
369+
orientation="horizontal"
370+
padding={{ left: 200, bottom: 36 }}
371+
props={{
372+
xAxis: {
373+
format: formatYear,
374+
},
375+
yAxis: {
376+
tickLabelProps: {
377+
width: 300,
378+
truncate: { position: 'middle' },
379+
},
380+
},
381+
}}
382+
{renderContext}
383+
>
384+
{#snippet tooltip({ context })}
385+
<Tooltip.Root {context}>
386+
{#snippet children({ data })}
387+
<Tooltip.Header>{data.civilization}</Tooltip.Header>
388+
<Tooltip.List>
389+
<Tooltip.Item label="region" value={data.region} />
390+
<Tooltip.Item label="timeline" value={data.timeline} />
391+
<!-- <Tooltip.Item label="start label" value={data.startLabel} />
392+
<Tooltip.Item label="end label" value={data.endLabel} /> -->
393+
<Tooltip.Item label="start" value={data.start} format={formatYear} />
394+
<Tooltip.Item label="end" value={data.end} format={formatYear} />
395+
</Tooltip.List>
396+
{/snippet}
397+
</Tooltip.Root>
398+
{/snippet}
399+
</BarChart>
400+
</div>
401+
</Preview>
402+
403+
<h2>Civilization timeline (dense)</h2>
404+
405+
<Preview data={applyLanes(data.civilizationEvents)}>
406+
<div class="h-[500px] p-4 border rounded-sm">
407+
<BarChart
408+
data={applyLanes(data.civilizationEvents)}
409+
x={['start', 'end']}
410+
y="lane"
411+
c="region"
412+
cRange={[
413+
'var(--color-danger)',
414+
'var(--color-warning)',
415+
'var(--color-success)',
416+
'var(--color-info)',
417+
'var(--color-primary)',
418+
'var(--color-secondary)',
419+
'var(--color-accent)',
420+
]}
421+
rule={false}
422+
axis="x"
423+
orientation="horizontal"
424+
padding={{ left: 20, bottom: 36, right: 20 }}
425+
props={{
426+
xAxis: {
427+
format: formatYear,
428+
},
429+
yAxis: {
430+
tickLabelProps: {
431+
width: 300,
432+
truncate: { position: 'middle' },
433+
},
434+
},
435+
tooltip: { context: { mode: 'bounds' } },
436+
}}
437+
{renderContext}
438+
>
439+
{#snippet tooltip({ context })}
440+
<Tooltip.Root {context}>
441+
{#snippet children({ data })}
442+
<Tooltip.Header>{data.civilization}</Tooltip.Header>
443+
<Tooltip.List>
444+
<Tooltip.Item label="region" value={data.region} />
445+
<Tooltip.Item label="timeline" value={data.timeline} />
446+
<!-- <Tooltip.Item label="start label" value={data.startLabel} />
447+
<Tooltip.Item label="end label" value={data.endLabel} /> -->
448+
<Tooltip.Item label="start" value={data.start} format={formatYear} />
449+
<Tooltip.Item label="end" value={data.end} format={formatYear} />
450+
</Tooltip.List>
451+
{/snippet}
452+
</Tooltip.Root>
453+
{/snippet}
454+
</BarChart>
455+
</div>
456+
</Preview>

‎packages/layerchart/src/routes/docs/examples/Duration/+page.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { csvParse, autoType } from 'd3-dsv';
22
import pageSource from './+page.svelte?raw';
33
import type { USEvents } from '$static/data/examples/date/us-events.js';
4+
import type { CivilizationTimeline } from '$static/data/examples/date/civilization-timeline.js';
5+
import { sortFunc } from '@layerstack/utils';
46

57
export async function load() {
68
return {
@@ -17,6 +19,15 @@ export async function load() {
1719
};
1820
});
1921
}),
22+
civilizationEvents: await fetch('/data/examples/date/civilization-timeline.csv').then(
23+
async (r) => {
24+
return csvParse<CivilizationTimeline>(
25+
await r.text(),
26+
// @ts-expect-error
27+
autoType
28+
).sort(sortFunc('start'));
29+
}
30+
),
2031
meta: {
2132
pageSource,
2233
supportedContexts: ['svg', 'canvas'],

‎packages/layerchart/static/data/examples/date/civilization-timeline.csv‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
civilization,start,end,startLabel,endLabel,region,timeline
2+
Aegean civilization,-2000,-1200,,,Europe (and colonial offshoots),ANCIENT WORLD
3+
"Age of pre-colonial civilization (Christian, Islamic, and traditional kingdoms)",650,1880,,,Sub-Saharan Africa,MEDIEVAL WORLD
4+
Age of Turkic empires,500,1200,,,Middle East,MEDIEVAL WORLD
5+
Age of united Caliphate,650,900,,,Middle East,MEDIEVAL WORLD
6+
Ancient Andean region,-1000,500,,,pre-colonial Americas,ANCIENT WORLD
7+
Ancient China,-2000,500,,,East Asia,ANCIENT WORLD
8+
Ancient Steppe empires,-1000,500,,,the Steppe,ANCIENT WORLD
9+
British India,1800,1945,,WWII,South Asia,MODERN WORLD
10+
Classic age of Mesoamerica,100,900,,,pre-colonial Americas,ANCIENT WORLD
11+
Colonial Africa,1880,1980,,,Sub-Saharan Africa,MODERN WORLD
12+
Colonial United States,1500,1776,,,Europe (and colonial offshoots),MODERN WORLD
13+
Early Islamic period,1200,1500,,,South Asia,MEDIEVAL WORLD
14+
Early modern China,1500,1918,,WWI,East Asia,MODERN WORLD
15+
Early modern Europe,1500,1800,,,Europe (and colonial offshoots),MODERN WORLD
16+
Early Nubian civilization,-2000,-1000,,,Sub-Saharan Africa,ANCIENT WORLD
17+
Egyptian civilization,-3000,-550,,,Middle East,ANCIENT WORLD
18+
First Persian Empire,-550,-330,,,Middle East,ANCIENT WORLD
19+
Formative age of Mesoamerica,-1500,100,,,pre-colonial Americas,ANCIENT WORLD
20+
Formative Japan (age of Yamato rule),500,800,,,East Asia,MEDIEVAL WORLD
21+
Formative US,1776,1865,,,Europe (and colonial offshoots),MODERN WORLD
22+
Fractured Islamic world,900,2018,,present,Middle East,MODERN WORLD
23+
Great power US,1865,1945,,WWII,Europe (and colonial offshoots),MODERN WORLD
24+
Greek age,-1200,0,,,Europe (and colonial offshoots),ANCIENT WORLD
25+
Heian age,800,1200,,,East Asia,MEDIEVAL WORLD
26+
Imperial Japan,1870,1945,,WWII,East Asia,MODERN WORLD
27+
Indian kingdom age,-500,1200,,,South Asia,ANCIENT WORLD
28+
Indus civilization,-2500,-1500,,,South Asia,ANCIENT WORLD
29+
Inter-Persian period,-330,200,,,Middle East,ANCIENT WORLD
30+
Kush,-1000,300,,,Sub-Saharan Africa,ANCIENT WORLD
31+
Medieval Andean region,500,1530,,,pre-colonial Americas,MEDIEVAL WORLD
32+
Medieval China,500,1500,,,East Asia,MEDIEVAL WORLD
33+
Medieval Europe,500,1500,,,Europe (and colonial offshoots),MEDIEVAL WORLD
34+
Mesopotamian civilization,-3500,-550,,,Middle East,ANCIENT WORLD
35+
Modern Africa,1980,2018,WWII,present,Sub-Saharan Africa,MODERN WORLD
36+
Modern Europe,1800,2018,,present,Europe (and colonial offshoots),MODERN WORLD
37+
Modern India,1945,2018,,present,South Asia,MODERN WORLD
38+
Modern Japan,1945,2018,,present,East Asia,MODERN WORLD
39+
Mongol Empire,1200,1300,,,the Steppe,MEDIEVAL WORLD
40+
Mughal Empire,1500,1800,,,South Asia,MODERN WORLD
41+
Peak of Aksum,300,650,,,Sub-Saharan Africa,MEDIEVAL WORLD
42+
People's Republic of China,1945,2018,WWII,present,East Asia,MODERN WORLD
43+
Postclassic age of Mesoamerica,900,1520,,,pre-colonial Americas,MEDIEVAL WORLD
44+
Ptolemaic Egypt,-330,0,,,Middle East,ANCIENT WORLD
45+
Republic of China,1918,1945,,,East Asia,MODERN WORLD
46+
Roman > Byzantine Egypt,0,650,,,Middle East,ANCIENT WORLD
47+
Roman Empire,0,500,,,Europe (and colonial offshoots),ANCIENT WORLD
48+
Roman Republic,-500,0,,,Europe (and colonial offshoots),ANCIENT WORLD
49+
Second Persian Empire,-200,650,,,Middle East,ANCIENT WORLD
50+
Shogunate,1200,1870,,,East Asia,MEDIEVAL WORLD
51+
Superpower US,1945,2018,,present,Europe (and colonial offshoots),MODERN WORLD
52+
Vedic age,-1500,-500,,,South Asia,ANCIENT WORLD

‎packages/layerchart/static/data/examples/date/civilization-timeline.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export type CivilizationTimeline = {
2+
civilization: string;
3+
start: number;
4+
end: number;
5+
startLabel: string;
6+
endLabel: string;
7+
region: string;
8+
timeline: string;
9+
};

0 commit comments

Comments
 (0)