Created
March 15, 2023 08:10
-
-
Save janwillemtulp/9e3e9f1ae4236205ba432c16001feb5d to your computer and use it in GitHub Desktop.
AXPO workshop COMMON GROUND
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>This is the layout</h1> | |
| <slot /> | |
| <footer>This is the footer</footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import { range } from 'd3-array'; | |
| import Chart from '../Chart.svelte'; | |
| import { setContext } from 'svelte'; | |
| let data; | |
| $: console.log(data); | |
| const width = 800; | |
| const height = 400; | |
| const margin = { | |
| top: 50, | |
| right: 50, | |
| bottom: 50, | |
| left: 50 | |
| }; | |
| setContext('app', { width, height, margin }); | |
| const h = height - margin.top - margin.bottom; | |
| let count = 25; | |
| $: data = range(count).map((_, i) => ({ | |
| x: i, | |
| y: Math.random() * h | |
| })); | |
| </script> | |
| <Chart {data} title="This is overridden" /> | |
| <input type="range" min={1} max={50} bind:value={count} step={1} /> | |
| <style> | |
| input[type='range'] { | |
| width: 400px; | |
| display: block; | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import { extent } from 'd3-array'; | |
| import { scaleLinear } from 'd3-scale'; | |
| import { line, curveCardinal } from 'd3-shape'; | |
| import { getContext } from 'svelte'; | |
| export let title = 'Chart'; | |
| export let data = []; | |
| const { width, height, margin } = getContext('app'); | |
| const w = width - margin.left - margin.right; | |
| $: xScale = scaleLinear() | |
| .domain(extent(data, (d) => d.x)) | |
| .range([0, w]); | |
| let active = false; | |
| const l = line() | |
| .x((d) => xScale(d.x)) | |
| .y((d) => d.y) | |
| .curve(curveCardinal); | |
| </script> | |
| <h1>{title}</h1> | |
| <svg {width} {height}> | |
| <g transform="translate({margin.left}, {margin.top})"> | |
| <path d={l(data)} /> | |
| {#each data as d, i} | |
| <circle cx={xScale(d.x)} cy={d.y} r={3} /> | |
| {/each} | |
| </g> | |
| </svg> | |
| <style> | |
| svg { | |
| border: 1px solid black; | |
| } | |
| circle { | |
| fill: red; | |
| stroke: black; | |
| stroke-width: 2; | |
| } | |
| .active { | |
| fill: blue; | |
| } | |
| path { | |
| fill: none; | |
| stroke: black; | |
| stroke-width: 3; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment