🌍 Public
Viewing a saved revision (read-only)
572e7df3b5b645378aa2bb4b4230d9aa
Zoomable Icicle with Labels and Breadcrumb
This interactive visualization displays hierarchical data as a zoomable icicle chart, using rectangles sized by value and colored by category. Users can click any rectangle to zoom into that branch, while a breadcrumb trail above shows the current path and percentage of the total. The example uses d3.partition, d3.hierarchy, and d3.scaleOrdinal to build the layout, with SVG rect and foreignObject elements for rendering. Breadcrumb polygons are dynamically generated from the ancestor sequence. The code loads data from either biodiversityData.json or data.json, and includes animated transitions via rect.transition and fo.transition.
AI-generated descriptionKathleen Cachel