25:["$","title",null,{"children":"Directed chord diagram | gggtang's Workspace | Observable"}] 49:Ta91,chart = { const width = 640; const height = width; const innerRadius = Math.min(width, height) * 0.5 - 40; const outerRadius = innerRadius + 20; // Compute a dense matrix from the weighted links in data. const names = Array.from(d3.union(data.flatMap(d => [d.source, d.target]))); const index = new Map(names.map((name, i) => [name, i])); const matrix = Array.from(index, () => new Array(names.length).fill(0)); for (const {source, target, value} of data) matrix[index.get(source)][index.get(target)] += value*10; const chord = d3.chordDirected() .padAngle(12 / innerRadius) .sortSubgroups(d3.descending) .sortChords(d3.descending); const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); const ribbon = d3.ribbonArrow() .radius(innerRadius - 0.5) .padAngle(1 / innerRadius); // const colors = d3.schemeCategory10; const landUseColors = { "Verkehrsfläche": "#bab8e9", "Baulich geprägte Fläche": "#d99594", "Siedlungsfreifläche ": "#e5e084", "Abbau- und Haldenfläche": "#cbbba1", "Landwirtschaft": "#ded9c5", "Wald": "#76923d", "Unkultivierte Bodenfläche": "#d7e3bd", "Wasserfläche": "#dbe5f1" }; const formatValue = x => `${x.toFixed(0)} ha`; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); const chords = chord(matrix); const textId = DOM.uid("text"); svg.append("path") .attr("id", textId.id) .attr("fill", "none") .attr("d", d3.arc()({outerRadius, startAngle: 0, endAngle: 2 * Math.PI})); svg.append("g") .attr("fill-opacity", 0.9) .selectAll() .data(chords) .join("path") .attr("d", ribbon) .attr("fill", d => landUseColors[names[d.target.index]]) .style("mix-blend-mode", "multiply") .append("title") .text(d => ` ${formatValue(d.source.value)} of ${names[d.source.index]} transfers to ${names[d.target.index]}`); const g = svg.append("g") .selectAll() .data(chords.groups) .join("g"); g.append("path") .attr("d", arc) .attr("fill", d => landUseColors[names[d.index]]) .attr("stroke", "#fff"); g.append("text") .attr("dy", -3) .append("textPath") .attr("xlink:href", textId.href) .attr("startOffset", d => d.startAngle * outerRadius) .text(d => names[d.index]); g.append("title") .text(d => `${names[d.index]} losts ${formatValue(d3.sum(matrix[d.index]))} wins ${formatValue(d3.sum(matrix, row => row[d.index]))}`); return svg.node(); }4a:Tc04,customChordLayout = function() { var ε = 1e-6, ε2 = ε * ε, π = Math.PI, τ = 2 * π, τε = τ - ε, halfπ = π / 2, d3_radians = π / 180, d3_degrees = 180 / π; var chord = {}, chords, groups, matrix, n, padding = 0, sortGroups, sortSubgroups, sortChords; function relayout() { var subgroups = {}, groupSums = [], groupIndex = d3.range(n), subgroupIndex = [], k, x, x0, i, j; var numSeq; chords = []; groups = []; k = 0, i = -1; while (++i < n) { x = 0, j = -1, numSeq = []; while (++j < n) { x += matrix[i][j]; } groupSums.push(x); ////////////////////////////////////// ////////////// New part ////////////// ////////////////////////////////////// for(var m = 0; m < n; m++) { numSeq[m] = (n+(i-1)-m)%n; } subgroupIndex.push(numSeq); ////////////////////////////////////// ////////// End new part ///////////// ////////////////////////////////////// k += x; }//while k = (τ - padding * n) / k; x = 0, i = -1; while (++i < n) { x0 = x, j = -1; while (++j < n) { var di = groupIndex[i], dj = subgroupIndex[di][j], v = matrix[di][dj], a0 = x, a1 = x += v * k; subgroups[di + "-" + dj] = { index: di, subindex: dj, startAngle: a0, endAngle: a1, value: v }; }//while groups[di] = { index: di, startAngle: x0, endAngle: x, value: (x - x0) / k }; x += padding; }//while i = -1; while (++i < n) { j = i - 1; while (++j < n) { var source = subgroups[i + "-" + j], target = subgroups[j + "-" + i]; if (source.value || target.value) { chords.push(source.value < target.value ? { source: target, target: source } : { source: source, target: target }); }//if }//while }//while if (sortChords) resort(); }//function relayout function resort() { chords.sort(function(a, b) { return sortChords((a.source.value + a.target.value) / 2, (b.source.value + b.target.value) / 2); }); } chord.matrix = function(x) { if (!arguments.length) return matrix; n = (matrix = x) && matrix.length; chords = groups = null; return chord; }; chord.padding = function(x) { if (!arguments.length) return padding; padding = x; chords = groups = null; return chord; }; chord.sortGroups = function(x) { if (!arguments.length) return sortGroups; sortGroups = x; chords = groups = null; return chord; }; chord.sortSubgroups = function(x) { if (!arguments.length) return sortSubgroups; sortSubgroups = x; chords = null; return chord; }; chord.sortChords = function(x) { if (!arguments.length) return sortChords; sortChords = x; if (chords) resort(); return chord; }; chord.chords = function() { if (!chords) relayout(); return chords; }; chord.groups = function() { if (!groups) relayout(); return groups; }; return chord; }; 4b:[{"id":"fb478ddc59d580061fc5a6eb927e428912052c96cd4b44bbc4f484ff016ce6aace0409cf0bb8f172f46c41a9d41518e44e972c2136fa66b7e220329b9fbbf233","href":"https://static.observableusercontent.com/files/fb478ddc59d580061fc5a6eb927e428912052c96cd4b44bbc4f484ff016ce6aace0409cf0bb8f172f46c41a9d41518e44e972c2136fa66b7e220329b9fbbf233","name":"debt.csv","type":"text/csv","lastModified":1736773350845.773,"size":938},{"id":"f1b40ccd6c44eade83f216c6276d4021b03b3e20ecba6ab6854f5d67bedd6208de9884285acc001b969316f86d17f042951d67c4592d85d5a1811fe5a7d3c201","href":"https://static.observableusercontent.com/files/f1b40ccd6c44eade83f216c6276d4021b03b3e20ecba6ab6854f5d67bedd6208de9884285acc001b969316f86d17f042951d67c4592d85d5a1811fe5a7d3c201","name":"LanduseChangeFlow@1.csv","type":"text/csv","lastModified":1736785769963.668,"size":1745},{"id":"6c636492ccce8d2e51e32158ba44e26aeb490eb0ab6d730cd6c9726a73b730e2811e4242714ddba4b70bb9ef8eb4f8c19ae49016538cab0b111bed1195eb5731","href":"https://static.observableusercontent.com/files/6c636492ccce8d2e51e32158ba44e26aeb490eb0ab6d730cd6c9726a73b730e2811e4242714ddba4b70bb9ef8eb4f8c19ae49016538cab0b111bed1195eb5731","name":"LanduseChangeFlow@2.csv","type":"text/csv","lastModified":1736848915125.569,"size":1364}] 29:{"id":"8f206f1ff0dc3f82","slug":null,"title":"Directed chord diagram","thumbnail":"45c5a095334b5d204a4f9309dba2f03547b259f4fcf45e820b5ad8bee1c86a7c","access_level":"public","create_time":"$D2025-01-13T13:02:30.845Z","update_time":"$D2025-01-14T13:22:38.274Z","view_time":null,"first_public_time":"$D2025-01-13T13:02:30.845Z","has_unpublished_edits":null,"fork":{"id":"4067ea1327ab104e","slug":"directed-chord-diagram/2","title":"Directed chord diagram","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"24e0e283ab33affb","login":"gggtang-ws","name":"gggtang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/81504475c299cf4a50c43acdc7438610f426c04790930ed2142932a65d0f405e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":785,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa004d26992b00be","login":"gggtang","name":"gggtang","avatar_url":"https://avatars-next.observableusercontent.com/90c6fcb80a2344dd3954a3c881774bc21223a5688b2293958eb023aaec286497","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"fa004d26992b00be","login":"gggtang","name":"gggtang","avatar_url":"https://avatars-next.observableusercontent.com/90c6fcb80a2344dd3954a3c881774bc21223a5688b2293958eb023aaec286497","tier":null,"role":"editor"},{"type":"team","id":"24e0e283ab33affb","login":"gggtang-ws","name":"gggtang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/81504475c299cf4a50c43acdc7438610f426c04790930ed2142932a65d0f405e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Directed chord diagram","cells":[{"id":0,"value":"

Directed chord diagram

D3 › Gallery

\n\n# Directed chord diagram\n\nThis chord diagram, inspired by Bill Marsh’s [overview of the 2011 Euro crisis](http://archive.nytimes.com/www.nytimes.com/interactive/2011/10/23/sunday-review/an-overview-of-the-euro-crisis.html), visualizes debts between countries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"data = FileAttachment(\"LanduseChangeFlow@2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null