chart = {
const root = tree(d3.hierarchy(data));
const map = new Map(root.leaves().map(d => [d.data.id, d]));
const svg = d3.select(DOM.svg(width, width))
.attr("viewBox", `${-width / 2} ${-width / 2} ${width} ${width - 40}`)
.style("max-width", "100%")
.style("height", "auto")
.style("display", "block")
.style("margin", "auto")
.style("font", "10px sans-serif");
svg.append("g")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-opacity", 0.5)
.selectAll("path")
.data(d3.merge(root.leaves().map(d => d.data.targetIds.map(i => d.path(map.get(i))))))
.join("path")
.style("mix-blend-mode", "multiply")
.attr("d", line);
svg.append("g")
.selectAll("text")
.data(root.leaves())
.join("text")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)${d.x >= Math.PI ? `
rotate(180)` : ""}
`)
.attr("dy", "0.31em")
.attr("font-size", "1.2em")
.attr("x", d => d.x < Math.PI ? 3 : -3)
.attr("text-anchor", d => d.x < Math.PI ? "start" : "end")
.text(d => d.data.id);
return svg.node();
}
data = {
const {nodes, links} = await d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json");
const groupById = new Map;
const nodeById = new Map(nodes.map(node => [node.id, node]));
for (const node of nodes) {
let group = groupById.get(node.group);
if (!group) groupById.set(node.group, group = {name: node.group, children: []});
group.children.push(node);
node.targetIds = [];
}
for (const {source: sourceId, target: targetId} of links) {
const source = nodeById.get(sourceId);
source.targetIds.push(targetId);
}
return {name: "miserables", children: [...groupById.values()]};
}
width = 640
radius = width / 2
line = d3.radialLine()
.curve(d3.curveBundle.beta(0.85))
.radius(d => d.y)
.angle(d => d.x)
tree = d3.cluster().size([2 * Math.PI, radius - 100])
d3 = require("d3@5")
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.
