Gist 11333614

100%

✓ Published0🌍 Public

Last edited Apr 26, 2014

Created on Apr 26, 2014

This interactive zoomable partition visualization displays a hierarchical dataset of the Flare visualization toolkit's code structure. The D3.js layout.partition() computes nested rectangle coordinates from a JSON hierarchy, with each rectangle colored using a categorical color scale and labeled via foreignObject elements. Users can click any rectangle to zoom into that node, triggering smooth 750ms transitions that re-scale the x and y ranges to focus on the selected subtree, with colors and labels updating accordingly.

AI-generated description

Click anywhere to zoom in! Click on the top bar to zoom out. Built with D3.js.

Similar vizzes

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…

Partition

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

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…

Bilevel Partition

A zoomable sunburst visualizes hierarchical data from the Flare visualization library. The root node sits at the center, with nested arcs extending outward; each arc’s angle encodes its value, and color indicates the parent category. Clicking an arc zooms in on that subtree, while clicking the center circle returns to the previous level. The example uses d3.layout.partition, d3.svg.arc, and d3.transition with arcTween to animate path changes, rendering with SVG.

Mmbostock

80% match

Loading thumbnail…

Bilevel Partition

This interactive sunburst diagram visualizes the hierarchical structure of the Flare data, where each arc’s angle corresponds to a node’s value and color encodes its category. Clicking an arc zooms into that subtree, while clicking the center zooms back out. Built with D3 v3, it uses the `d3.layout.partition` and `d3.svg.arc` to compute the radial layout, and `transition.attrTween` to animate path geometry between zoom states. Data comes from `flare.json`, a nested tree of software project metrics.

TTheShetland

80% match

Loading thumbnail…

Untitled

A zoomable partition layout depicts the hierarchical flare dataset, with each node’s slice sized by its aggregated value. Clicking a slice smoothly refocuses the view on that subtree, while the top-level view restores on canvas click. D3 v4’s `d3.partition`, `d3.hierarchy`, and `d3.arc` render SVG paths, with node labels placed along curved arcs via `textPath`. The zoom animation uses `transition.attrTween` and interpolated `d3.scaleLinear` and `d3.scaleSqrt` domains. Color comes from `d3.scaleOrdinal` with `d3.schemeCategory20`.

Jjsoudeer

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

80% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, showing parent-child relationships and relative sizes through concentric arcs. Built with D3 v5, it uses `d3.partition` to compute the layout, `d3.arc` for path generation, and `d3.scaleOrdinal` with an interpolated rainbow palette for coloring. Clicking any node triggers an animated transition via `transition.attrTween` and `transition.attr`, zooming to that subtree while labels adjust their rotation and opacity based on visibility thresholds. The dataset loads from the `@observablehq/flares` package, and all rendering is done in SVG.

Yyarosus

79% match