Skip to content

Instantly share code, notes, and snippets.

@Fil
Last active Mar 23, 2019
Embed
What would you like to do?
circle packing [UNLISTED]
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<svg width=975 height=975 />
<script>
(async function() {
const data = await d3.json("https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.json");
const color = d3.scaleSequential([8, 0], d3.interpolateMagma),
format = d3.format(",d"),
width = 975,
height = width;
const 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))
function chart() {
const root = pack(data);
const svg = d3.select("svg")
.style("font", "10px sans-serif")
.style("width", "100%")
.style("height", "auto")
.attr("text-anchor", "middle");
svg.append("filter")
.attr("id", "shadow")
.append("feDropShadow")
.attr("flood-opacity", 0.3)
.attr("dx", 0)
.attr("dy", 1);
const node = svg.selectAll("g")
.data(d3.nest().key(d => d.height).entries(root.descendants()))
.join("g")
.attr("filter", "url(#shadow)")
.selectAll("g")
.data(d => d.values)
.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,i) => (d.leafUid = "leaf"+i));
leaf.append("clipPath")
.attr("id", (d,i) => (d.clipUid = "clip"+i))
.append("use")
.attr("xlink:href", (d,i) => `#${d.leafUid}`);
leaf.append("text")
.attr("clip-path", (d,i) => `url(#${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("/")}\n${format(d.value)}`);
return svg.node();
}
chart()
})();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment