Apollonius’ ProblemTreemapSunburstTidy treeCluster treeRadial cluster treeIcicleRadial tidy treeBubble chartd3.groups as a hierarchyRandom TreeHierarchy traversal, animatedBilevel Edge BundlingIndented treeZoomable treemapHierarchical edge bundling IIMarimekkod3.packEncloseHierarchical bar chartForce-directed treed3.stratifyVisiting a d3.hierarchyd3.hierarchyCascaded treemapNested treemapTreemap by countStretched TreemapCollapsible treeHierarchical edge bundlingZoomable circle packingZoomable sunburstZoomable icicleBubble chart componentCircle packing component
Circle packing
chart = {
// Specify the dimensions of the chart.
const width = 928;
const height = width;
const margin = 1; // to avoid clipping the root circle stroke
// Specify the number format for values.
const format = d3.format(",d");
// Create the pack layout.
const pack = d3.pack()
.size([width - margin * 2, height - margin * 2])
.padding(3);
// Compute the hierarchy from the JSON data; recursively sum the
// values for each node; sort the tree by descending value; lastly
// apply the pack layout.
const root = pack(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-margin, -margin, width, height])
.attr("style", "width: 100%; height: auto; font: 10px sans-serif;")
.attr("text-anchor", "middle");
// Place each node according to the layout’s x and y values.
const node = svg.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.x},${d.y})`);
// Add a title.
node.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
// Add a filled or stroked circle.
node.append("circle")
.attr("fill", d => d.children ? "#fff" : "#ddd")
.attr("stroke", d => d.children ? "#bbb" : null)
.attr("r", d => d.r);
// Add a label to leaf nodes.
const text = node
.filter(d => !d.children && d.r > 10)
.append("text")
.attr("clip-path", d => `circle(${d.r})`);
// Add a tspan for each CamelCase-separated word.
text.selectAll()
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.35}em`)
.text(d => d);
// Add a tspan for the node’s value.
text.append("tspan")
.attr("x", 0)
.attr("y", d => `${d.data.name.split(/(?=[A-Z][a-z])|\s+/g).length / 2 + 0.35}em`)
.attr("fill-opacity", 0.7)
.text(d => format(d.value));
return svg.node();
}
data = FileAttachment("flare-2.json").json()
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.
