Web Datavis researcher by day, Indie Game designer by night
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");
let txt = node.append("text")
.attr("dy", "0.32em")
.attr("x", d => d.depth * nodeSize + 12)
txt.append('tspan')
.text(d => d.data.label);
txt.append('tspan')
.attr('fill', '#777')
.text(d => ' ' + (d.data.id ? d.data.id : ''));
node.append("title")
.text(d => d.ancestors().reverse().map(d => d.data.label).join("/"));
return div.node();
}
format = d3.format(",")
root = { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }
nodeSize = 24
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.
