chart = {
const width = 960; // Increased for extra legend space
const height = 640;
const outerRadius = Math.min(width, height) * 0.5 - 30;
const innerRadius = outerRadius - 20;
const {names, colors} = data;
const sum = d3.sum(data.flat());
const tickStep = d3.tickStep(0, sum, 100);
const tickStepMajor = d3.tickStep(0, sum, 20);
const formatValue = d3.formatPrefix(",.0", tickStep);
const chord = d3.chord()
.padAngle(20 / innerRadius)
.sortSubgroups(d3.descending);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
const ribbon = d3.ribbonArrow()
.radius(innerRadius)
.headRadius(25);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
// Widened viewBox to include chart + legend
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "max-width: 100%; height: auto; font: 12px sans-serif; background: white;");
const chords = chord(data);
const group = svg.append("g")
.selectAll()
.data(chords.groups)
.join("g");
// Arcs
group.append("path")
.attr("fill", d => colors[d.index])
.attr("d", arc)
.append("title")
.text(d => `${d.value.toLocaleString("en-US")} ${names[d.index]}`);
// Tick marks
const groupTick = group.append("g")
.selectAll()
.data(d => groupTicks(d, tickStep))
.join("g")
.attr("transform", d => `rotate(${d.angle * 180 / Math.PI - 90}) translate(${outerRadius},0)`);
groupTick.append("line")
.attr("stroke", "currentColor")
.attr("x2", 6);
groupTick
.filter(d => d.value % tickStepMajor === 0)
.append("text")
.attr("x", 8)
.attr("dy", ".35em")
.attr("transform", d => d.angle > Math.PI ? "rotate(180) translate(-16)" : null)
.attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
.text(d => formatValue(d.value));
// Ribbons
svg.append("g")
.attr("fill-opacity", 0.85)
.selectAll()
.data(chords)
.join("path")
.attr("d", ribbon)
.attr("fill", d => colors[d.source.index])
.attr("stroke", "white")
.append("title")
.text(d => `${d.source.value.toLocaleString("en-US")} ${names[d.source.index]} → ${names[d.target.index]}${d.source.index !== d.target.index ? `\n${d.target.value.toLocaleString("en-US")} ${names[d.target.index]} → ${names[d.source.index]}` : ``}`);
// Manual Legend: placed to the right of chart
const legend = svg.append("g")
.attr("transform", `translate(${outerRadius + 60}, ${-outerRadius + 20})`);
names.forEach((name, i) => {
const y = i * 22;
legend.append("rect")
.attr("x", 0)
.attr("y", y)
.attr("width", 16)
.attr("height", 16)
.attr("fill", colors[i])
.attr("stroke", "black");
legend.append("text")
.attr("x", 22)
.attr("y", y + 12)
.attr("font-size", "13px")
.text(name);
});
return svg.node();
}
function groupTicks(d, step) {
const k = (d.endAngle - d.startAngle) / d.value;
return d3.range(0, d.value, step).map(value => {
return {value: value, angle: value * k + d.startAngle};
});
}
data = Object.assign([
[57, 2, 10, 6, 13, 4],
[0, 10, 8, 4, 2, 1],
[6, 4, 130, 17, 16, 23],
[12, 2, 20, 56, 17, 10],
[11, 4, 11, 16, 75, 6],
[8, 2, 19, 11, 7, 57]
], {
names: ['D. Support', 'Logistics', 'Manufacturing', 'Other', 'P. Support', 'Retailing'],
colors: ['#B6E4FA', '#EFCBF5', '#FCDCC2', '#C6C6C6', '#DDF6D4', '#F6F2B3']
})
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.
