Skip to main content
SimilarExport ZIP
100%

Fork of Zoomable Icicle

✓ Published0🌍 Public
BBen McCarty
Last edited Jan 31, 2022
Created on Jan 31, 2022
Forked from 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.

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 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
92% match
Loading thumbnail…

Zoomable Icicle - react

This example shows a zoomable icicle chart for navigating hierarchical data. The visualization presents a treemap-like layout where each category is a vertical slice, and clicking a rectangle zooms into that branch while smoothly animating the view. Built with React and D3 v7, it uses `d3.partition` for layout, `d3.scaleOrdinal` and `d3.interpolateRainbow` for color, and D3’s `transition` API for animated transforms. Data comes from a JSON file hosted on GitHub Gist.

RRasike Abeyratne
92% 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
92% 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…

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…

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