Partition

100%

Partition - Icicle

✓ Published0🌍 Public

Last edited Dec 6, 2019

Created on Dec 20, 2012

This icicle diagram visualizes a hierarchical dataset as nested rectangles, where each node’s area is proportional to its numeric value, revealing the distribution of categories and subcategories. Built with D3.js v3, it uses `d3.layout.partition` to compute the layout from a JSON file (`flare.json`) and renders the result as SVG rectangles and rotated text labels. The root node is colored by category using `d3.scale.category20()`. The view is static, with no interaction or zooming.

AI-generated description

This “icicle” diagram uses d3.layout.partition to divide space with area proportional to the value of nodes in a tree. See also the zoomable icicle.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Partition - Icicle

This icicle diagram visualizes the hierarchical structure of the Flare dataset using a partition layout, where each node’s rectangular area is proportional to its value. The visualization is rendered with SVG and uses a categorical color scale to distinguish top-level categories. The layout is non-zoomable in this version, with labels centered on leaf nodes, and the tree is arranged from root at the left to leaves at the right, with depth shown horizontally and value shown vertically. The partition layout recursively subdivides the width based on each node's value relative to its siblings, creating a static, space-filling view of the hierarchy.

GGerardoFurtado

92% match

Loading thumbnail…

This visualization shows the hierarchical structure of the Flare codebase as an icicle partition layout, where each rectangle’s height represents the file size and its width corresponds to the value of the node. It uses d3.stratify to build the hierarchy from CSV data, d3.partition to compute the layout, and d3.scaleOrdinal with d3.schemeCategory10 for coloring leaf nodes by top-level category. The SVG rendering clips text labels to each rectangle and displays the node name and formatted value.

Mmbostock

90% match

Loading thumbnail…

Partition - Icicle

This icicle chart visualizes the hierarchical structure of the Flare dataset, using a partition layout where each node is represented as a rectangle whose width is proportional to its value. The visualization renders the tree from left to right, with root on the left and leaves extending rightward, and color-coded parent-child relationships. The chart is interactive: hovering over a node triggers a smooth animated transition that highlights the node and its ancestors while displaying its name and percentage in a sequence breadcrumb above. Built with D3.js v3 and rendered as SVG, it supports animated transitions between selections and is implemented with a modular, MIT-licensed codebase.

GGerardoFurtado

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

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

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

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

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

81% match