Timeline
Этот коммит содержится в:
Maarten
родитель
24e4092947
Коммит
cb19c26b9f
94
package-lock.json
сгенерированный
94
package-lock.json
сгенерированный
@ -14,7 +14,10 @@
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"archieml": "^0.5.0",
|
||||
"d3-array": "^3.2.4",
|
||||
"d3-fetch": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-time-format": "^4.1.0",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.36.0",
|
||||
@ -1207,6 +1210,27 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-dsv": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
|
||||
@ -1244,6 +1268,67 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
|
||||
"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||
@ -1751,6 +1836,15 @@
|
||||
"node": ">=0.8.19"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/is-extglob": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
|
||||
@ -17,7 +17,10 @@
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"archieml": "^0.5.0",
|
||||
"d3-array": "^3.2.4",
|
||||
"d3-fetch": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-time-format": "^4.1.0",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.36.0",
|
||||
|
||||
72
src/lib/components/Timeline.svelte
Обычный файл
72
src/lib/components/Timeline.svelte
Обычный файл
@ -0,0 +1,72 @@
|
||||
<script>
|
||||
import { scaleUtc } from "d3-scale"
|
||||
import { extent } from "d3-array"
|
||||
import { utcFormat } from "d3-time-format"
|
||||
|
||||
export let cases
|
||||
|
||||
const margins = {
|
||||
top: 24,
|
||||
right: 24,
|
||||
bottom: 24,
|
||||
left: 24
|
||||
}
|
||||
|
||||
let width
|
||||
let height = 120
|
||||
|
||||
cases.forEach(d => d.attribution_date = new Date(d.attribution_date))
|
||||
|
||||
$: xScale = scaleUtc(extent(cases.map(d => d.attribution_date)), [0, width - margins.right - margins.left])
|
||||
$: ticks = xScale.ticks(5)
|
||||
|
||||
</script>
|
||||
|
||||
<div class="timeline-container" bind:clientWidth={width}>
|
||||
<svg {width} {height}>
|
||||
{#if xScale}
|
||||
<g transform={`translate(${margins.left},${margins.top})`}>
|
||||
<line
|
||||
x1={0}
|
||||
x2={width}
|
||||
y1={0}
|
||||
y2={0}
|
||||
stroke={'#000000'}
|
||||
stroke-width={2}
|
||||
></line>
|
||||
{#each ticks as tick}
|
||||
<line
|
||||
x1={xScale(tick)}
|
||||
x2={xScale(tick)}
|
||||
y1={0}
|
||||
y2={12}
|
||||
stroke={'#000000'}
|
||||
stroke-width={2}
|
||||
></line>
|
||||
<text
|
||||
x={xScale(tick)}
|
||||
y={32}
|
||||
text-anchor={'middle'}
|
||||
>{utcFormat("%b")(tick)}</text>
|
||||
{/each}
|
||||
{#each cases as attrCase}
|
||||
<circle
|
||||
cx={xScale(attrCase.attribution_date)}
|
||||
cy={0}
|
||||
r={6}
|
||||
fill={'#000000'}
|
||||
stroke={'#ffffff'}
|
||||
stroke-width={2}
|
||||
></circle>
|
||||
{/each}
|
||||
|
||||
</g>
|
||||
{/if}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.timeline-container {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -5,6 +5,7 @@
|
||||
import { base } from '$app/paths';
|
||||
import CaseCard from "$lib/components/CaseCard.svelte";
|
||||
import CaseTable from "$lib/components/CaseTable.svelte";
|
||||
import Timeline from "$lib/components/Timeline.svelte";
|
||||
|
||||
let cases = []
|
||||
|
||||
@ -13,11 +14,10 @@
|
||||
const response = await csv(`${base}/Demo_Attribution_Data.csv`);
|
||||
cases = response
|
||||
})
|
||||
$: console.log(cases)
|
||||
</script>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="is-size-1">{copy.meta.title}</h1>
|
||||
{#each copy.content as block}
|
||||
{#if block.type == "text"}
|
||||
@ -27,6 +27,12 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div>
|
||||
<Timeline {cases}></Timeline>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="grid is-col-min-16">
|
||||
|
||||
Загрузка…
x
Ссылка в новой задаче
Block a user