Jonathan Kurniawan

@jkurn·2 public vizzes

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.

Oct 4, 2022

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.

Oct 4, 2022