31:T4a0,bar = svelte` {title} `32:T4e6,axis = svelte` `33:T7f1,chart = svelte`\

{#if title}

{@html title}

{/if}

{#if !scale || !data}

{:else}

{/if}

`34:T4b8,values = rawData.map(d => { const values = Object.keys(d) .filter(key => key !== 'date') .map(id => ({ id, title: id, value: d[id] })) return { date: d.date, values } }) /* [ { date: 0, series: [ { id: 0, title: 'Foo', value: 1 }, { id: 1, title: 'Bar', value: 1 }, { id: 2, title: 'Baz', value: 2 } ], }, { date: 1, series: [ { id: 0, title: 'Foo', value: 1 }, { id: 1, title: 'Bar', value: 2 }, { id: 2, title: 'Baz', value: 2 } ], }, { date: 2, series: [ { id: 0, title: 'Foo', value: 3 }, { id: 1, title: 'Bar', value: 2 }, { id: 2, title: 'Baz', value: 2 } ], }, { date: 3, series: [ { id: 0, title: 'Foo', value: 5 }, { id: 1, title: 'Bar', value: 3 }, { id: 2, title: 'Baz', value: 3 } ], }, { date: 4, series: [ { id: 0, title: 'Foo', value: 7 }, { id: 1, title: 'Bar', value: 4 }, { id: 2, title: 'Baz', value: 3 } ], }, { date: 5, series: [ { id: 0, title: 'Foo', value: 10 }, { id: 1, title: 'Bar', value: 6 }, { id: 2, title: 'Baz', value: 4 } ] } ] */35:[{"id":"202295d10abe3ca97ab61b257aae43b514a574c6666c2b8043d265f90519394b72c90115e0ca3fd988de11cdabeeaa7a67d73f268a2da53aae21035a858f5e3a","href":"https://static.observableusercontent.com/files/202295d10abe3ca97ab61b257aae43b514a574c6666c2b8043d265f90519394b72c90115e0ca3fd988de11cdabeeaa7a67d73f268a2da53aae21035a858f5e3a","name":"example-data-fleets.csv","type":"text/csv","lastModified":1591357101368.973,"size":4478}] 2f:{"title":"Svelte Horizontal Bar Chart","cells":[{"id":0,"value":"md`# Svelte Horizontal Bar Chart\n\nSimple horizontal bar chart created 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\n### Usage\n~~~js\nimport {\n create as createChart,\n bindProps as bindChartProps\n} from \"@lounjukk/svelte-horizontal-bar-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 title: 'Example chart',\n animationDuration: interval,\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"bindProps(example, {\n data,\n scale: {\n y: scale.y,\n x: scale.x.domain([0, d3.max(data, d => d.value)])\n },\n getStyle: ({ id }) => `fill: ${scale.color(id)};`,\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":802,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"$33","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 data: [],\n animationDuration: 150,\n style: '',\n scale: null,\n axisConfig: {\n x: {\n tickFormat: d => d.toString()\n }\n },\n getStyle: () => ''\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":42,"value":"margin = ({top: 20, right: 40, bottom: 30, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"height = 250","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":723,"value":"data = {\n runningDate;\n return values\n .find(d => d.date === runningDate)\n .values\n .sort((a, b) => b.value - a.value)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"columns = rawData.columns.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"scale = ({\n y: d3.scaleBand()\n .rangeRound([margin.top, height - margin.bottom])\n .domain(d3.range(data.length))\n .padding(0.1),\n x: d3.scaleLinear()\n .range([margin.left, width - margin.right])\n .domain([0, d3.max(data, d => d.value)]).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":795,"value":"interval = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"runningDate = {\n const allDates = values.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(interval, allDates[i]);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"currentDate = dates[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"dates = d3.extent(values, 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, _require, getComponent, CSSTag, VERSION as svelteVersion, core, store } with { internal, load } from '@ajbouh/svelte@1066'","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"load = {\n const requires = ({\n \"svelte/internal\": internal,\n \"svelte\": core,\n \"svelte/store\": store,\n \"svelte/motion\": motion,\n \"svelte/easing\": easing\n })\n return function(compiled) {\n const css = compiled.css\n const bundledRequires = compiled.requires || {}\n const fn = new Function('require', 'exports', compiled.js.code)\n const exports = {}\n fn.call(\n window,\n name => requires[name] || bundledRequires[name],\n exports,\n )\n exports[CSSTag] = css\n return exports\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"internal = _require(`svelte@${svelteVersion}/internal/index`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"easing = _require(`svelte@${svelteVersion}/easing/index`, {\n '../internal': internal\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"motion = _require(`svelte@${svelteVersion}/motion/index`, {\n '../internal': internal,\n '../store': store,\n '../easing': easing\n})","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":"$W35","stdlib":"1","titling":"auto"}