Public
Edited
Apr 14, 2024
{
const matrix = [
[0, 5, 10, 15, 5, 10, 5, 10],
[5, 0, 20, 25, 5, 10, 5, 10],
[10, 20, 0, 30, 5, 10, 5, 10],
[15, 25, 30, 0, 5, 10, 5, 10],
[5, 5, 5, 5, 0, 20, 5, 5],
[10, 10, 10, 10, 20, 0, 30, 30],
[5, 5, 5, 5, 5, 30, 0, 20],
[10, 10, 10, 10, 5, 30, 20, 0]
];
const names = ["Entity 1", "Entity 2", "Entity 3", "Entity 4", "Entity 5", "Entity 6", "Entity 7", "Entity 8"];
const outerRadius = Math.min(w, h) / 2 - 40;
const innerRadius = outerRadius - 30;
// Create chord and arc generators
const chord = d3.chord()
.padAngle(0.01)
.sortSubgroups(d3.descending)(matrix);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
const ribbon = d3.ribbon()
.radius(innerRadius);
const color = d3.scaleOrdinal(d3.schemeCategory10);
const svg = d3.create("svg")
.attr("viewBox", [-w / 2, -h / 2, w, h]);
svg.append("g")
.selectAll("path")
.data(chord.groups)
.join("path")
.style("fill", d => color(d.index))
.style("stroke", d => d3.rgb(color(d.index)).darker())
.attr("d", arc);
svg.append("g")
.selectAll("path")
.data(chord)
.join("path")
.attr("d", ribbon)
.style("fill", d => color(d.target.index))
.style("stroke", d => d3.rgb(color(d.target.index)).darker())
.style("opacity", 0.67);
svg.append("g")
.selectAll("text")
.data(chord.groups)
.join("text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("transform", d => `
rotate(${(d.angle * 180 / Math.PI - 90)})
translate(${outerRadius + 10})
${d.angle > Math.PI ? "rotate(180)" : ""}
`)
.style("text-anchor", d => d.angle > Math.PI ? "end" : null)
.text(d => names[d.index])
.style("font-family", "sans-serif")
.style("font-size", 12)
.style("fill", d => d3.rgb(color(d.index)).darker());
return svg.node();
}
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.
