Fork of Zoomable Icicle

100%

Fork of Zoomable Icicle

✓ Published0🌍 Public

Last edited Feb 12, 2022

Created on Feb 12, 2022

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.

AI-generated description

A port of Observable: Zoomable Icicle by Mike Bostock to vanilla JavaScript.

The content of this work is not original - I just ported it to vanilla JavaScript. That process includes:

Flattening the reactive data flow into a sequence of expressions,
uploading the dataset to a Gist: Flare-2 Dataset
renaming variables to avoid collisions with D3 imports (e.g. partition).
minor framing work such as removing margin and scrollbars on the body.

This port was done in response to this VizHub Forum Post: Zoomable Icicle in React.

ISC Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Fork of Zoomable Icicle

This interactive icicle chart visualizes the Flare-2 dataset, a hierarchical file directory structure. Users can click any rectangle to zoom into that branch, revealing its children while smoothly animating the layout. Built with D3 v7 and React, the visualization renders SVG elements, using a partition layout and an ordinal color scale based on the rainbow interpolator. Clicking a node triggers a 750-millisecond transition that recalculates the positions of all descendants, scaling and translating each rectangle while fading text labels in and out.

DDonald Bagwell

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

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

93% match

Loading thumbnail…

Fork of Zoomable Icicle

This example shows a zoomable, interactive icicle chart that visualizes a hierarchical dataset, allowing users to click on rectangular segments to drill down into nested categories. The visualization renders as an SVG with smooth animated transitions, where each cell is colored based on its top-level category. The code uses the D3.js v7 library, specifically `partition()`, `hierarchy()`, and `scaleOrdinal()`, along with a data file hosted on GitHub Gist. The JavaScript implementation handles the interactive zooming logic and uses SVG transitions for the 750-millisecond animated updates.

BBen McCarty

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

91% match

Loading thumbnail…

Example Icicile

This example presents a zoomable icicle chart, a space-filling visualization of hierarchical data where nested rectangles represent tree nodes. The visualization renders the Flare-2 dataset as an SVG and partitions it using `d3.partition`, then colors nodes by a quantized rainbow ordinal scale. Users animate transitions with `selection.transition` to zoom in on a clicked subtree, adjusting rectangle heights and label opacity along the way. The code also dynamically recomputes the target layout coordinates for each node during the zoom animation.

JJonathan Kurniawan

90% match

Loading thumbnail…

zoomable-icicle-ccia

This example shows the hierarchical structure of the Flare visualization library as an icicle chart, with rectangular bars representing nodes sized by their numeric value. The view is zoomable, allowing users to click on a bar to expand that node’s subtree, revealing its children. The visualization uses React for state management and D3.js for layout calculations and SVG rendering. The chart is rendered with animated transitions when navigating the hierarchy, implemented via D3’s transform and opacity interpolation.

RRasike Abeyratne

90% match