Public
Edited
May 23, 2023
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
const chords = chord(matrix);
const group = svg.append("g")
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.selectAll("g")
.data(chords.groups)
.join("g");
group.append("path")
.attr("fill", d => color(names[d.index]))
.attr("d", arc);
group.append("text")
.each(d => (d.angle = (d.startAngle + d.endAngle) / 2))
.attr("dy", "0.35em")
.attr("transform", d => `
rotate(${(d.angle * 180 / Math.PI - 90)})
translate(${outerRadius + 5})
${d.angle > Math.PI ? "rotate(180)" : ""}
`)
.attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
.text(d => names[d.index]);
group.append("title")
.text(d => `${names[d.index]}
${d3.sum(chords, c => (c.source.index === d.index) * c.source.value)} outgoing →
${d3.sum(chords, c => (c.target.index === d.index) * c.source.value)} incoming ←`);
svg.append("g")
.attr("fill-opacity", 0.75)
.selectAll("path")
.data(chords)
.join("path")
.style("mix-blend-mode", "multiply")
.attr("fill", d => color(names[d.target.index]))
.attr("d", ribbon)
.append("title")
.text(d => `${names[d.source.index]} → ${names[d.target.index]} ${d.source.value}`);
return svg.node();
}
data = [
{ source: 'Strategy', target: 'Strategy', value: 171 },
{ source: 'Roadmaps', target: 'Roadmaps', value: 89 },
{ source: 'Features', target: 'Features', value: 53 },
{ source: 'Getting started wizard', target: 'Getting started wizard', value: 52 },
{ source: 'Settings', target: 'Settings', value: 19 },
{ source: 'Notebook', target: 'Notebook', value: 18 },
{ source: 'Features', target: 'Strategy', value: 16 },
{ source: 'Notebook', target: 'Strategy', value: 11 },
{ source: 'Releases', target: 'Releases', value: 10 },
{ source: 'Ideas', target: 'Ideas', value: 10 },
{ source: 'Releases', target: 'Strategy', value: 9 },
{ source: 'Getting started wizard', target: 'Strategy', value: 7 },
{ source: 'Roadmaps', target: 'Features', value: 5 },
{ source: 'Strategy', target: 'Roadmaps', value: 5 },
{ source: 'Ideas', target: 'Strategy', value: 5 },
{ source: 'Features', target: 'Roadmaps', value: 5 },
{ source: 'Getting started wizard', target: 'Features', value: 5 },
{ source: 'Strategy', target: 'Notebook', value: 4 },
{ source: 'Features', target: 'Notebook', value: 4 },
{ source: 'Features', target: 'Releases', value: 3 },
{ source: 'Settings', target: 'Strategy', value: 3 },
{ source: 'Work', target: 'Roadmaps', value: 3 },
{ source: 'Features', target: 'Settings', value: 3 },
{ source: 'Settings', target: 'Notebook', value: 3 },
{ source: 'No Page View Yet', target: 'Strategy', value: 3 },
{ source: 'Features', target: 'Ideas', value: 2 },
{ source: 'Work', target: 'Strategy', value: 2 },
{ source: 'Ideas', target: 'Getting started wizard', value: 2 },
{ source: 'Releases', target: 'Notebook', value: 2 },
{ source: 'Ideas', target: 'Features', value: 2 },
{ source: 'No Page View Yet', target: 'Features', value: 2 },
{ source: 'Notebook', target: 'Switched to DEMO', value: 2 },
{ source: 'Roadmaps', target: 'Strategy', value: 2 },
{ source: 'Roadmaps', target: 'Notebook', value: 2 },
{ source: 'Settings', target: 'Ideas', value: 2 },
{ source: 'Banner', target: 'Ideas', value: 2 },
{ source: 'Getting started wizard', target: 'Ideas', value: 1 },
{ source: 'Settings', target: 'Releases', value: 1 },
{ source: 'Notebook', target: 'Ideas', value: 1 },
{ source: 'Banner', target: 'Settings', value: 1 },
{ source: 'Banner', target: 'Releases', value: 1 },
{ source: 'Releases', target: 'Roadmaps', value: 1 },
{ source: 'No Page View Yet', target: 'Notebook', value: 1 },
{ source: 'Notebook', target: 'Settings', value: 1 },
{ source: 'Settings', target: 'Roadmaps', value: 1 },
{ source: 'Switched to DEMO', target: 'Notebook', value: 1 },
{ source: 'Banner', target: 'Features', value: 1 },
{ source: 'Banner', target: 'Roadmaps', value: 1 },
{ source: 'Ideas', target: 'Roadmaps', value: 1 },
{ source: 'No Page View Yet', target: 'Getting started wizard', value: 1 },
{ source: 'Releases', target: 'Features', value: 1 },
]
rename = name => name.substring(name.indexOf(".") + 1, name.lastIndexOf("."))
names = Array.from(new Set(data.flatMap(d => [d.source, d.target]))).sort(d3.ascending)
matrix = {
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;
return matrix;
}
chord = d3.chordDirected()
.padAngle(10 / innerRadius)
.sortSubgroups(d3.descending)
.sortChords(d3.descending)
arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
ribbon = d3.ribbonArrow()
.radius(innerRadius - 1)
.padAngle(1 / innerRadius)
color = d3.scaleOrdinal(names, d3.quantize(d3.interpolateRainbow, names.length))
outerRadius = innerRadius + 10
innerRadius = Math.min(width, height) * 0.5 - 90
width = 954
height = width
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
