{group.title}

31:T629,data = { const idToName = id => id .toLowerCase() .split('_') .map(sub => sub.replace(/^[a-z]/, c => c.toUpperCase())) .join(' '); const indexByName = new Map(); const nameByIndex = new Map(); let n = 0; let len = 0; flightData.forEach(({ from, to, flights }) => { if (!indexByName.has(from)) { nameByIndex.set(n, from); indexByName.set(from, n++); } if (!indexByName.has(to)) { nameByIndex.set(n, to); indexByName.set(to, n++); } len = Math.max(len, Object.keys(flights).length || 0); }); const baseMatrix = new Array(n) .fill(0) .map(() => new Array(n).fill(0)); const valuesMatrix = new Array(n) .fill(0) .map(() => new Array(n).fill(0).map(() => new Array(len).fill(0)) ); // Construct a square matrix counting package imports. flightData.forEach(({ from, to, max, flights }) => { const source = indexByName.get(from); const destination = indexByName.get(to); baseMatrix[source][destination] = max; baseMatrix[destination][source] = max; Object.keys(flights).forEach(key => { valuesMatrix[source][destination][key] = flights[key]; valuesMatrix[destination][source][key] = flights[key] }); }); const groups = [...nameByIndex.keys()] .map(index => { const id = nameByIndex.get(index); return { index, id, color: d3.schemeTableau10[index], title: idToName(id) }; }); return { baseMatrix, valuesMatrix, groups, length: len }; }32:T1267,chordDiagram = svelte` {#if title}

{@html title}

{/if} `;33:[{"id":"d5afdbeaf50a5a88f964447c7cb482e4c2eeb07c7105f4dd30b00903f01076aa503b11b270cc6122b5716c4305a307c6291ed82fdf280d25fe3742f47e80b3a1","href":"https://static.observableusercontent.com/files/d5afdbeaf50a5a88f964447c7cb482e4c2eeb07c7105f4dd30b00903f01076aa503b11b270cc6122b5716c4305a307c6291ed82fdf280d25fe3742f47e80b3a1","name":"flights-during-covid-19-pandemic@3.json","type":"application/json","lastModified":1587374484305.547,"size":16482}] 2f:{"title":"Svelte chord diagram","cells":[{"id":0,"value":"md`# Svelte chord diagram\nChord diagram for [Flights during COVID-19 pandemic](https://observablehq.com/@lounjukk/flights-during-covid-19-pandemic).\n\n### Usage\n~~~js\nimport {\n create as createChord,\n bindProps as bindChordProps\n} from \"@lounjukk/@lounjukk/svelte-chord-diagram\";\n\nconst chart = createChord('chart-id', { ...initialParams });\nbindChordProps(chart, { ...changingParams });\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"example = create('chord', {\n title: 'Flights',\n baseData: data.baseMatrix,\n groups: data.groups,\n animationDuration: 150,\n fontSize: 12\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"viewof index = slider({\n title: 'Current index',\n min: 0,\n max: data.length - 1,\n step: 1,\n value: data.length - 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"bindProps(example, {\n data: data.valuesMatrix.map(d => d.map(t => t[index])),\n outerRadius,\n innerRadius,\n width,\n height\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"flightData = FileAttachment(\"flights-during-covid-19-pandemic@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"outerRadius = Math.min(width, height) * 0.5 - 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"innerRadius = outerRadius - 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"height = Math.min(640, width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`## Component`","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"chord = svelte`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"bindProps = (rendered, props) => {\n const component = getComponent(rendered);\n Object.keys(props).forEach(key => {\n component.$set({ [key]: props[key] });\n });\n return true;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"create = (id, properties={}, dom) => {\n const defaults = {\n id,\n d3,\n width: 900,\n height: 900,\n outerRadius: 380,\n innerRadius: 360,\n padAngle: 0.05,\n animationDuration: 1,\n baseData: [],\n data: [],\n groups: [],\n chord: null,\n fontSize: 14\n };\n return render(chordDiagram, { ...defaults, ...properties });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"d3 = require(\"d3-shape@1.3\", \"d3-chord@1.0\", \"d3-scale-chromatic@1.5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"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":412,"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":505,"value":"internal = _require(`svelte@${svelteVersion}/internal/index`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"easing = _require(`svelte@${svelteVersion}/easing/index`, {\n '../internal': internal\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"motion = _require(`svelte@${svelteVersion}/motion/index`, {\n '../internal': internal,\n '../store': store,\n '../easing': easing\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}