chart = {
const root = pack(data);
const svg = d3.select(DOM.svg(width, height))
.style("font", "10px sans-serif")
.style("width", "100%")
.style("height", "auto")
.attr("text-anchor", "middle");
const node = svg.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
node.append("circle")
.attr("r", d => d.r)
.attr("fill", d => color(d.data.skills+1 || 0));
const leaf = node.filter(d => !d.children);
leaf.select("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("stroke", "#000");
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.text(d => d);
node.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\nAantal: ${format(d.value)}\nSkills ${format(d.data.skills)}`);
return svg.node();
}
data = d3.json("https://gist.githubusercontent.com/bwbroersma/381d208e3b650413b73a2fa38281a4ea/raw/119f9112a2fb3630ccbba42dcd301cde35defd5c/test.json")
// data from LibreOffice copy paste (gives tabs) to JSON:
// xsel | jq 'split("\n")|map(split("\t"))|map(select(length>0))|group_by(.[0])|map({name:.[0][0],children:map({name:.[1],value:(.[2]|tonumber),skills:.[3]|tonumber})})' -Rs
pack = data => d3.pack()
.size([width - 2, height - 2])
.padding(3)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
width = 975
height = width
format = d3.format(",d")
color = d3.scaleSequential([12, 0], d3.interpolateMagma);
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.
