Zoomable Icicle (d3 v4)

100%

Zoomable Icicle (d3 v4)

✓ Published0🌍 Public

Last edited Mar 10, 2017

Created on Mar 10, 2017

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.

AI-generated description

Click anywhere to zoom in, or click on the top bar to zoom out.

Converting Bostock's classic to d3 v4. You may find the diff helpful in understanding the d3-hierarchy api changes! Note that I didn't touch the json.

forked from <a href='http://bl.ocks.org/tophtucker/'>tophtucker</a>'s block: <a href='http://bl.ocks.org/tophtucker/a35c0f4f32400755a6a9b976be834ab3'>Zoomable Icicle (d3 v4)</a>

gpl-3.0 Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb (d3v4)

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.

TThanaporn-sk

93% 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

93% 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

92% 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

91% 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

91% match

Loading thumbnail…

Fork of Zoomable Icicle

This example shows a zoomable icicle chart that visualizes the hierarchical Flare-2 dataset. A click on any rectangle zooms the view to that node, animating the layout and revealing the subtree; clicking the same node again zooms back out to its parent. The code uses React and the D3 v7 module, specifically `d3.hierarchy`, `d3.partition`, `d3.scaleOrdinal`, and `d3.quantize` to compute the layout and colors, while SVG elements are created and animated with `d3.select`, `.attr`, and `.transition`. The visualization renders in a full-window SVG with no margins or scrollbars.

TTony Brown

89% match

Loading thumbnail…

Fork of Zoomable Icicle

This interactive icicle diagram visualizes the hierarchical Flare dataset, allowing users to click any rectangle to zoom into that branch and explore its nested structure. Built with D3 v7, the visualization uses `d3.partition` to compute the layout and `d3.scaleOrdinal` for color encoding, rendering as animated SVG rectangles with click-driven transitions. The chart displays node names and formatted values, with tooltips showing the full ancestor path. It is a vanilla JavaScript port of an Observable notebook original.

BBen McCarty

89% match