The SVG element containing the D3 icicle.
Configuration specifying the selector and data accessors.
A D3BinderResult with the MAIDR data and generated layer.
const root = d3.partition().size([height, width])(
d3.hierarchy(data).sum(d => d.population),
);
svg.selectAll('rect.band').data(root.descendants().slice(1)).join('rect')…;
bindD3Icicle(svgElement, {
selector: 'rect.band',
title: 'World population by region',
axes: { x: 'Region', y: 'Population, millions' },
});
Binds a D3.js icicle to MAIDR.
An icicle is the sunburst's partition drawn in cartesian coordinates: the same
d3.partition()over the samed3.hierarchy(), laid out as depth-ordered bands rather than concentric arcs. Nothing about the tree changes, so the extraction is that of bindD3Sunburst —selectormatches the<rect>bands the partition produced, and whatever you joined (leaves alone, ordescendants()with its interior nodes) is what the reader navigates.