{group.title}

28:null 29:["$","title",null,{"children":"Svelte chord diagram | lounjukk | Observable"}] 2e: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 }; }2f:T1267,chordDiagram = svelte` {#if title}

{@html title}

{/if} `;30:[{"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}] 2c:{"id":"3c7d8f0a102967fc","slug":"svelte-chord-diagram","title":"Svelte chord diagram","thumbnail":"5561a51e583e8a4a07c7399c5ab73ef408ac9010cd4873eeae1b4e4512e537f3","access_level":"public","create_time":"$D2020-04-17T18:05:01.671Z","update_time":"$D2020-04-23T10:10:35.300Z","view_time":null,"first_public_time":"$D2020-04-23T09:29:48.603Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"d6b5b4e12a4de94e","login":"lounjukk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e580fd54f17b81051d7dede2005cfe2fe98aacc21eb243b07933fee3a560bb4f","tier":"starter_2024"},"version":688,"publish_version":688,"role":null,"authored":false,"authors":[{"type":"individual","id":"0c16fd1dced45f5a","login":"lounjukk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e580fd54f17b81051d7dede2005cfe2fe98aacc21eb243b07933fee3a560bb4f","tier":null}],"members":[{"type":"individual","id":"0c16fd1dced45f5a","login":"lounjukk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e580fd54f17b81051d7dede2005cfe2fe98aacc21eb243b07933fee3a560bb4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"flightData = FileAttachment(\"flights-during-covid-19-pandemic@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"outerRadius = Math.min(width, height) * 0.5 - 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"innerRadius = outerRadius - 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"height = Math.min(640, width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`## Component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"chord = svelte`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"d3 = require(\"d3-shape@1.3\", \"d3-chord@1.0\", \"d3-scale-chromatic@1.5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"internal = _require(`svelte@${svelteVersion}/internal/index`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"easing = _require(`svelte@${svelteVersion}/easing/index`, {\n '../internal': internal\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"