Partition

100%

Partition - Icicle

✓ Published0🌍 Public

Last edited Jul 6, 2018

Created on Jul 6, 2018

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.

AI-generated description

Built with blockbuilder.org

mit 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

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

92% match

Loading thumbnail…

Partition - Icicle

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.

Mmbostock

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

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

85% match

Loading thumbnail…

Example Icicile

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.

JJonathan Kurniawan

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

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

83% match