chart = {
const format = d3.format(",");
const nodeHeight = 20;
const nodeWidth = 200;
let i = 0;
const root = d3.hierarchy(data).eachBefore((d => {
d.index = (!d.parent || d.parent.children.indexOf(d) === 0) ? i : ++i
}));
const nodes = root.descendants();
const width = 928;
const height = (i + 1) * nodeHeight;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-nodeHeight / 2, -10, width, height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif; overflow: visible;");
const link = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#999")
.selectAll()
.data(root.links())
.join("path")
.attr("d", d => `
M${d.source.depth * nodeWidth},${(d.source.index) * nodeHeight}
V${(d.target.index) * nodeHeight}
h${nodeWidth}
`);
const node = svg.append("g")
.selectAll()
.data(nodes)
.join("g")
.attr("transform", d => `translate(0,${(d.index) * nodeHeight})`);
node.append("circle")
.attr("cx", d => d.depth * nodeWidth)
.attr("r", 2.5)
.attr("fill", d => d.children ? null : "#999");
node.append("text")
.attr("dy", "0.32em")
.attr("x", d => d.depth * nodeWidth + 6)
.attr("y", -8)
.text(d => d.data.name);
node.append("title")
.text(d => d.ancestors().reverse().map(d => d.data.name).join("/"));
return svg.node();
}
data = FileAttachment("flare-2.json").json()
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.
