Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Mar 15
1 fork
rendered = eachBeforeTweaked(root)
chart = {
const svg = d3
.create("svg")
.attr("title", "Packed circle chart")
.attr("viewBox", [-50, -50, width + 50, width + 50])
.style("font-family", "sans-serif")
.attr("text-anchor", "middle");
// const node = svg
// .selectAll("g")
// .data(d3.group(sortedDescendants, (d) => d.height))
// .join("g")
// .selectAll("g")
// .data((d) => d[1])
// .join("g")
// .attr("transform", (d) => `translate(${d.x + 1},${d.y + 1})`);
const node = svg
.selectAll("g")
.data(rendered.elements)
.join("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))
.attr("stroke", "hsl(0deg 0% 90% / 4 0%");
// a host element
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(rendered.elements)
.join("text")
// .text((d) => d.data.name);
.text((d) => (d.children ? d.data.name : ""));
groupLabel
.attr("transform", (d) => `translate(${d.x}, ${d.y - d.r})`)
.attr("dy", "-0.25em")
.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");
return svg.node();
}
async function* walkPack() {
const renderedElements = [elementsPack];
for (const descendant of elementsPack) {
renderedElements.push(descendant);
await Promises.delay(delay);
yield renderedElements;
}
}
// just override this
// If capitalized: needs to be called
// if lowercase
// elementsPack[Symbol.iterator] = myCustomIteratorFunc
// default https://github.com/d3/d3-hierarchy/blob/75c84e80fe94f2aad4126fbcbc0e2975fd8f4b00/src/hierarchy/iterator.js
// export default function*() {
// var node = this, current, next = [node], children, i, n;
// do {
// current = next.reverse(), next = [];
// while (node = current.pop()) {
// yield node;
// if (children = node.children) {
// for (i = 0, n = children.length; i < n; ++i) {
// next.push(children[i]);
// }
// }
// }
// } while (next.length);
// }
root = d3.hierarchy(elements).count()
color = d3
.scaleLinear()
.domain([0, root.height])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl)
elementsPack = d3
.pack()
.size([width - 2, width - 2])
.padding(32)(root)
import { eachBeforeTweaked } from "92072ee06d8dc054"
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.
