Zoomable Icicle with Labels and Breadcrumb (d3v4)

100%

Zoomable Icicle with Labels and Breadcrumb (d3v4)

✓ Published0🌍 Public

Last edited Mar 17, 2017

Created on Mar 17, 2017

A zoomable icicle chart displays a hierarchical dataset of the Flare software project, partitioning rectangular cells by value and color-coding branches. Clicking any cell zooms into that subtree while updating a breadcrumb trail above, which shows the current path and percentage of the total. The visualization uses d3.partition, d3.hierarchy, and d3.scaleOrdinal with d3.schemeCategory20c, rendering rectangles and foreignObject labels in SVG. Breadcrumb polygons and animated transitions via d3.transition respond to clicks, with data loaded from a JSON file.

AI-generated description

The code recreates a breadcrumb on top of a zoomable icicle in d3v4.

Code based off of tophtucker and breadcrumb code from kerryrodden.

forked from <a href='http://bl.ocks.org/timelyportfolio/'>timelyportfolio</a>'s block: <a href='http://bl.ocks.org/timelyportfolio/e2e1cad2c8d0aaad98d4b8c516d7d0aa'>Zoomable Icicle with Labels and Breadcrumb (d3v4)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Zoomable Icicle (d3 v4)

This zoomable icicle chart displays the hierarchical structure of the Flare dataset, with rectangles sized and colored by category. Clicking a rectangle zooms in to reveal its children, while clicking the top bar returns to the previous level. Built with D3 v4, it uses `d3.partition()` to compute the layout, `d3.hierarchy()` for data nesting, and `d3.scaleOrdinal` with `d3.schemeCategory20c` for coloring. Transitions are animated over 750 milliseconds, adjusting the x and y scales to focus on the selected node.

TThanaporn-sk

93% match

Loading thumbnail…

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.

Aarun-subba

92% match

Loading thumbnail…

Zoomable Icicle

This interactive visualization displays a hierarchical dataset using an icicle chart, where nested rectangles represent the flare data’s categories and subcategories. Clicking a rectangle zooms into that level, while clicking the top bar returns to the previous view. The chart is built with D3 v3, using `d3.layout.partition` to compute the layout and `d3.scale.linear` for the x and y coordinates. Animated transitions, driven by `rect.transition()` with a 750-millisecond duration, smoothly rescale the rectangle positions and sizes, with colors assigned via `d3.scale.category20c()` based on parent keys.

TThanaporn-sk

91% match

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb

This example presents an interactive zoomable icicle chart that visualizes hierarchical biodiversity data, with a breadcrumb trail showing the current path and percentage of the total. The visualization uses D3.js v4 to render SVG rectangles, with foreignObject elements for labels that can be clicked to zoom into a subtree. The breadcrumb trail updates dynamically on click, displaying each ancestor node and the proportion of the total value it represents. The chart uses d3.partition to compute the layout and d3.scaleOrdinal with the Category20c color scheme to differentiate nodes.

Aarun-subba

91% match

Loading thumbnail…

Example of zoomable icicle

This zoomable icicle chart displays hierarchical data from the Flare-2 dataset, with rectangles colored by top-level category and sized by value. Users click any rectangle to zoom into that subtree, smoothly animating the layout’s scale and position. Built with D3 v7, it uses `d3.partition()` to compute the icicle layout, `d3.scaleOrdinal` with `interpolateRainbow` for colors, and `d3.json()` to load data. The SVG rendering uses transitions to animate rectangle heights, transforms, and label opacity, with tooltips showing the full ancestor path and formatted values.

JJonathan Kurniawan

90% match

Loading thumbnail…

Zoomable Icicle

This example shows a zoomable icicle chart visualizing the Flare-2 dataset, where clicking a cell zooms in to reveal its nested hierarchy and clicking again returns to the parent. Built with D3 v7, it uses `d3.partition` to compute the layout, `d3.scaleOrdinal` with an interpolated rainbow color scale for categorical coloring, and `d3.transition` to animate the repositioning and resizing of SVG rectangles and text labels over 750 milliseconds. The data is loaded asynchronously via `d3.json` from a remote gist.

CCurran Kelleher

90% match

Loading thumbnail…

Zoomable Icicle

This zoomable icicle chart displays a hierarchical dataset of file sizes from the Flare visualization library. Users click any rectangle to zoom in and explore deeper levels, or click the top bar to zoom out. The visualization uses d3.layout.partition to compute the layout and d3.scale.linear for positioning, with smooth transitions animating the rescaling of rectangles over 750 milliseconds. The data is loaded from a JSON file and rendered as SVG rectangles with a categorical color scale.

Mmbostock

89% match

Loading thumbnail…

Fork of Zoomable Icicle

This interactive icicle chart displays the hierarchical structure of the Flare-2 dataset, with rectangles whose height and width encode the data hierarchy. Clicking a rectangle zooms the view to that node, animating the layout with a 750ms transition. Built with vanilla JavaScript and D3 v7, the code uses the `partition` layout, `scaleOrdinal` with `interpolateRainbow` colors, and SVG `<g>` elements with smooth `transition` attrs. The visualization is rendered directly into the body, featuring cursor-pointer feedback and tooltips showing path and value.

Jjonathangohjj

89% match