31:Tcde,sliderOverlay = svelte`

`32:Tdd2,chart = svelte`\

{#if title}

{@html title}

{/if}

{#if !scale || !path || !series}

{:else}

{#if cursorInstructions && interactive && instructionShown} {/if} {/if}

`33:[{"id":"862587e7954e1440105151b24f215831a6ea739e1597c8027654946133ffb07ed4671a8c290085f616ce80b5a7c02a1a4b59486de5bbe3a3e3794db9bb626ba7","href":"https://static.observableusercontent.com/files/862587e7954e1440105151b24f215831a6ea739e1597c8027654946133ffb07ed4671a8c290085f616ce80b5a7c02a1a4b59486de5bbe3a3e3794db9bb626ba7","name":"example-data@2.csv","type":"text/csv","lastModified":1585177078910.468,"size":3582},{"id":"202295d10abe3ca97ab61b257aae43b514a574c6666c2b8043d265f90519394b72c90115e0ca3fd988de11cdabeeaa7a67d73f268a2da53aae21035a858f5e3a","href":"https://static.observableusercontent.com/files/202295d10abe3ca97ab61b257aae43b514a574c6666c2b8043d265f90519394b72c90115e0ca3fd988de11cdabeeaa7a67d73f268a2da53aae21035a858f5e3a","name":"example-data-fleets.csv","type":"text/csv","lastModified":1587638047859.723,"size":4478}] 2f:{"title":"Svelte Scrubbable Chart","cells":[{"id":0,"value":"md`# Svelte Scrubbable Chart\n\nCreated using [Svelte](https://svelte.dev).\n\n### Used in\n* [Covid-19 (corona virus) deaths per 1,000,000 people](https://observablehq.com/@lounjukk/covid-19-corona-virus-deaths-per-1-000-000-people)\n* [Flights during COVID-19 pandemic](https://observablehq.com/@lounjukk/flights-during-covid-19-pandemic)\n* [European fleets on map, 1750-1850](https://observablehq.com/@lounjukk/european-fleets-on-map-1750-1850)\n\n### Usage\n~~~js\nimport {\n create as createChart,\n bindProps as bindChartProps \"@lounjukk/date-slider-chart\";\n\nconst chart = createChart('chart-id', { ...initialParams });\nbindChartProps(chart, { ...changingParams });\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"example = create('example-slider', {\n cursorInstructions: 'Click or drag to change date',\n getTooltip: date => new Date(date).toLocaleDateString(locale, { year: 'numeric', month: 'short' }),\n axisConfig: {\n x: {\n tickFormat: date => new Date(date).toLocaleDateString(locale, { year: 'numeric' }),\n }\n }\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"bindProps(example, {\n series,\n scale,\n path: area,\n date: runningDate,\n dragStart() {\n mutable paused = true;\n },\n dragEnd() {\n mutable paused = false;\n },\n setDate(date) {\n mutable currentDate = date;\n },\n getStyle: ({ key }) => `fill: ${scale.color(key)};`,\n width,\n height,\n margin,\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`## Svelte components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"loader = svelte`\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"cursorInstructions = svelte`\n\n\n\n\n

\n {@html cursorInstructions}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"axis = svelte`\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"md`## Create, bind`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"bindProps = (rendered, props) => {\n const component = getComponent(rendered);\n Object.keys(props).forEach(key => {\n component.$set({ [key]: props[key] });\n });\n if (props.series) {\n component.$$.dirty.series = true;\n };\n return true;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"create = async (id, properties) => {\n const defaults = {\n d3: await d3,\n id,\n title: '',\n width: '100%',\n height: 150,\n margin: {top: 20, right: 40, bottom: 30, left: 60},\n series: [],\n style: '',\n path: () => '',\n scale: null,\n axisConfig: {\n x: {\n tickFormat: d => d.toString()\n },\n y: {\n ticks: 2\n }\n },\n getStyle: () => '',\n date: null,\n setDate: null,\n getTooltip: () => '',\n cursorInstructions: 'Click or drag to change date'\n };\n return render(chart, { ...defaults, ...properties });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`## Data and helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"locale = {\n if (window.navigator.languages) {\n return window.navigator.languages[0];\n } else {\n return window.navigator.userLanguage || window.navigator.language;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"area = d3.area()\n .curve(d3.curveBasis)\n .x(d => scale.x(d.data.date))\n .y0(d => scale.y(d[0]))\n .y1(d => scale.y(d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"margin = ({top: 20, right: 40, bottom: 30, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"rawData = d3.csvParse(await FileAttachment(\"example-data-fleets.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"data = Object.assign(rawData, {y: \"Region\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"columns = rawData.columns.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"series = d3.stack().keys(columns)(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"scale = ({\n x: d3.scaleUtc()\n .range([margin.left, width - margin.right])\n .domain(dates)\n .clamp(true),\n y: d3.scaleLinear()\n .range([height - margin.bottom, margin.top])\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice(),\n color: d3.scaleOrdinal()\n .domain(columns)\n .range(d3.schemeTableau10)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"mutable paused = false;","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"runningDate = {\n const allDates = data.map(({ date }) => date);\n let i = 0;\n try {\n const newD = currentDate.getTime();\n const date = allDates.reduce((prevDate, currDate) => {\n const prev = prevDate.getTime();\n const curr = currDate.getTime();\n return Math.abs(curr - newD) < Math.abs(prev - newD) ? currDate : prevDate;\n }, allDates[0]);\n i = allDates.indexOf(date);\n } catch (err) {}\n while (allDates.length) {\n if (paused) {\n yield currentDate;\n } else {\n i++;\n if (i >= allDates.length) {\n i = 0;\n }\n yield await Promises.delay(1000/60, allDates[i]);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"mutable currentDate = dates[dates.length - 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"dates = d3.extent(data, d => d.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"import { svelte, render, getComponent } from '@ajbouh/svelte@1066'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3-scale@3.2\", \"d3-selection@1.4\", \"d3-shape@1.3\", \"d3-axis@1\", \"d3-array@2.4\", \"d3-dsv@1.2\", \"d3-scale-chromatic@1.5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}