Web Datavis researcher by day, Indie Game designer by night
Published
Edited
May 12, 2020
Importers
chart = {
const nodes = root.descendants();
const div = d3.create("div")
.style("overflow-y", "scroll")
.style("max-height","500px")
.style("width","100%");
const svg = div.append("svg")
.attr("viewBox", [-nodeSize / 2, -nodeSize * 3 / 2, width, (nodes.length + 1) * nodeSize])
.attr("font-family", "sans-serif")
.attr("font-size", 14);
const link = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#999")
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d => `
M${d.source.depth * nodeSize},${d.source.index * nodeSize}
V${d.target.index * nodeSize}
h${nodeSize}
`);
const node = svg.append("g")
.selectAll("g")
.data(nodes)
.join("g")
.attr("transform", d => `translate(0,${d.index * nodeSize})`);
node.append("circle")
.attr("cx", d => d.depth * nodeSize)
.attr("r", 5)
.attr("fill", d => d.children ? null : "#999");
node.append("text")
.attr("dy", "0.32em")
.attr("x", d => d.depth * nodeSize + 12)
.text(d => d.data.label);
node.append("title")
.text(d => d.ancestors().reverse().map(d => d.data.label).join("/"));
for (const {label, value, format, x} of columns) {
svg.append("text")
.attr("dy", "0.32em")
.attr("y", -nodeSize)
.attr("x", x)
.attr("text-anchor", "end")
.attr("font-weight", "bold")
.text(label);
node.append("text")
.attr("dy", "0.32em")
.attr("x", x)
.attr("text-anchor", "end")
.attr("fill", d => d.children ? null : "#555")
.data(root.descendants())
.text(d => format(d.value, d));
}
return div.node();
}
format = d3.format(",")
root = { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++).sum(d => d.children ? 0 : population_map.get(+d.id)); }
nodeSize = 24
columns = [
{
label: "Population",
value: d => d.value,
format,
x: 480
}
]
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.
