Example Icicile

100%

Example Icicile

✓ Published0🌍 Public

Last edited Oct 4, 2022

Created on Oct 4, 2022

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.

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…

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

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

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

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

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

90% match

Loading thumbnail…

zoomable-icicle-ccia-js

This interactive visualization is a zoomable icicle chart that displays the hierarchical structure of the "flare" dataset. Users can click on rectangular segments to drill down into nested categories, with the chart smoothly animating the expansion and contraction of branches. The visualization is built with React and D3.js v7, using the `partition` layout to compute rectangle positions and sizes. Each node's rectangle area is proportional to its value, and the color scheme distinguishes different top-level categories.

RRasike Abeyratne

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

88% match

Loading thumbnail…

Untitled

This interactive zoomable icicle chart visualizes the hierarchical Flare-2 dataset through animated rectangular partitions. Users click nodes to zoom, with smooth SVG transitions recalibrating the layout to focus on the selected subtree. Built with React and D3’s `partition` layout, it uses `scaleOrdinal` and `interpolateRainbow` for color encoding, while `transition.attr` animates rectangle and text positions. The visualization loads JSON data via `d3.json` and renders entirely in SVG, with tooltips showing ancestor paths and numerical values.

BBen McCarty

87% match