Icicle

100%

✓ Published0🌍 Public

Last edited Nov 13, 2023

Created on Nov 13, 2023

This icicle chart visualizes the population hierarchy of Xinjiang, China, using a d3.partition layout. The data is loaded from a JSON file and structured with d3.hierarchy, with node sizes proportional to population values. Each rectangle is colored by its top-level region using a d3.scaleOrdinal with the schemeCategory10 palette, while text labels appear on larger nodes. The visualization renders in SVG, with both rectangles and labels positioned according to the partition’s computed coordinates.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Tree

This example visualizes the hierarchical structure of Xinjiang’s administrative divisions and their populations using a vertical tree layout. Each node is a circle colored by its top-level prefecture, with links drawn via `d3.linkVertical` and text labels rotated vertically. The code uses `d3.hierarchy` and `d3.tree` to compute positions, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders output as SVG. Population data comes from the embedded `xinjiang.json` file.

Vvivianaaai@qq.com

82% match

Loading thumbnail…

SunBurst

This sunburst chart visualizes the population distribution of Xinjiang’s administrative regions, using nested arcs to show hierarchy from the province level down to districts and counties. The code relies on d3.arc for the ring segments, d3.partition with a size of [2*Math.PI, 500] to compute the layout, and d3.hierarchy to structure the JSON data. Each segment’s fill color is derived from the top-level region via a scaleOrdinal palette, and text labels are rotated and positioned to fit within the arcs.

Vvivianaaai@qq.com

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

75% match

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb

This interactive visualization displays hierarchical data as a zoomable icicle chart, using rectangles sized by value and colored by category. Users can click any rectangle to zoom into that branch, while a breadcrumb trail above shows the current path and percentage of the total. The example uses d3.partition, d3.hierarchy, and d3.scaleOrdinal to build the layout, with SVG rect and foreignObject elements for rendering. Breadcrumb polygons are dynamically generated from the ancestor sequence. The code loads data from either biodiversityData.json or data.json, and includes animated transitions via rect.transition and fo.transition.

Aarun-subba

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

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

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

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

71% match