Apollonius’ ProblemTreemapSunburstTidy treeCluster treeRadial cluster treeCircle packingRadial 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
Icicle
chart = {
// Specify the chart’s dimensions.
const width = 928;
const height = 2400;
const format = d3.format(",d");
// Create a color scale (a color for each child of the root node and their descendants).
const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
// Create a partition layout.
const partition = d3.partition()
.size([height, width])
.padding(1);
// Apply the partition layout.
const root = partition(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.height - a.height || b.value - a.value));
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif");
// Add a cell for each node of the hierarchy.
const cell = svg
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.y0},${d.x0})`);
cell.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
// Color the cell with respect to which child of root it belongs to.
cell.append("rect")
.attr("width", d => d.y1 - d.y0)
.attr("height", d => d.x1 - d.x0)
.attr("fill-opacity", 0.6)
.attr("fill", d => {
if (!d.depth) return "#ccc";
while (d.depth > 1) d = d.parent;
return color(d.data.name);
});
// Add labels and a title.
const text = cell.filter(d => (d.x1 - d.x0) > 16).append("text")
.attr("x", 4)
.attr("y", 13);
text.append("tspan")
.text(d => d.data.name);
text.append("tspan")
.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.
