Interested in data visualisation, maps, JavasScript, and geology
root = d3.hierarchy(components).count()
componentsPack = d3
.pack()
.size([width - 2, height - 2])
.padding(3)(root)
chart = {
const svg = d3
.create("svg")
.attr("title", "Packed circle chart")
.attr("viewBox", [0, 0, width, height])
.style("font-family", "sans-serif")
.attr("text-anchor", "middle");
const node = svg
.selectAll("g")
.data(d3.group(componentsPack.descendants(), (d) => d.height))
.join("g")
.selectAll("g")
.data((d) => d[1])
.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.height));
const leaf = node.filter((d) => !d.children);
leaf.select("circle").attr("id", (d) => (d.leafUid = DOM.uid("leaf")).id);
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) // Remove this if you want labels to extend outside circles
// .attr("display", d => d.r < 80 ? 'none' : 'inherit') // Uncomment this if you want to hide labels in small circles
.selectAll("tspan")
.data((d) => d.data.name.split(/(?=[A-Z][a-z])|\s+/g)) // Split words into their own tspans and lines
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.attr("fill", "#40081C")
.text((d) => d)
.clone(true)
.lower()
.attr("aria-hidden", "true")
// .style("text-shadow", "1px 1px 2px #40081C, -1px 1px 2px #40081C") // This doesn't export well
.attr("fill", "none")
.attr("stroke", "#FAEBF0")
.attr("stroke-width", 2)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
node.append("title").text(
(d) =>
`${d
.ancestors()
.map((d) => d.data.name)
.reverse()
.join(" / ")}\nValue: ${d.value}`
);
const groupLabel = svg
.append("g")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants())
.join("text")
.text((d) => (d.height === 1 ? d.data.name : ""));
groupLabel
.attr("transform", (d) => `translate(${d.x}, ${d.y - d.r})`)
.attr("dy", "-0.25em")
.attr("class", "repo-name")
.attr("fill", "#fff")
.clone(true)
.lower()
.attr("aria-hidden", "true")
// .style("text-shadow", "1px 1px 2px #40081C, -1px 1px 2px #40081C") // This doesn't export well
.attr("fill", "none")
.attr("stroke", "#6A1131")
.attr("stroke-width", 2)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
// svg
// .append("text")
// .attr("id", "byline")
// .attr("x", width)
// .attr("y", height)
// .attr("dy", "-1em")
// .attr("text-anchor", "end")
// .text("@DiDoesDigital");
return svg.node();
}
components = FileAttachment("components.json").json()
// 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))
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.
