Zoomable Icicle

100%

Zoomable Icicle

✓ Published0🌍 Public

Last edited Mar 1, 2017

Created on Mar 1, 2017

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.

AI-generated description

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

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1005873'>Zoomable Icicle</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Zoomable Icicle (d3 v4)

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.

TThanaporn-sk

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

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…

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

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

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

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

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

88% match