Partition

100%

✓ Published0🌍 Public

Last edited Mar 7, 2019

Created on Mar 17, 2016

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.

AI-generated description

Each pixel represents approximately one byte.

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

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

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

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

81% match

Loading thumbnail…

pack layout

This visualization uses a packed circle layout to display the hierarchical structure of the Flare codebase. Each circle represents a node in the tree, with circle size encoding the node's numeric value and color mapping to depth in the hierarchy. The visualization is built using D3 v4, leveraging the `d3.stratify` and `d3.pack` APIs. The data comes from a CSV file containing file IDs and values, and interactive hover highlighting is implemented via SVG elements and mouse events.

BBrunoDumas

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

Loading thumbnail…

Treemap

This treemap visualizes the hierarchical structure of the Flare codebase, using rectangular nested cells to represent file sizes and categories. Built with D3.js v4, it uses the `d3.stratify()` and `d3.treemap()` APIs to lay out nodes, with color assigned from a `d3.scaleOrdinal()` palette based on top-level branches. Leaf values from `flare.csv` are displayed inside each cell, while hovering reveals the full path and numeric value. The rendering uses HTML divs positioned absolutely, with nested labels and value text.

Mmbostock

81% match