Fork of Zoomable Icicle

100%

Fork of Zoomable Icicle

✓ Published0🌍 Public

Last edited Jan 31, 2022

Created on Jan 31, 2022

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.

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

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

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

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…

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

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