Sunburst to icicle #2

100%

Sunburst to icicle #2

✓ Published0🌍 Public

Last edited Jun 24, 2017

Created on Jun 24, 2017

A sunburst chart smoothly morphs into an icicle chart, preserving overall dimensions by animating the perimeter difference between inner and outer arcs until it approaches zero. The transition uses d3.v4 with SVG paths, a `d3.transition()` and custom tween to interpolate the arc radii and angles, stopping at an 8-pixel perimeter gap due to a Chrome rendering bug. The visualization applies `d3.partition()` to hierarchical flare.json data, with `d3.arc()` generating the paths and `d3.scaleLinear()` driving the animation.

AI-generated description

Transitioning between a sunburst and an icicle chart while preserving the chart dimensions by interpolating the difference in perimeter between the inner section and outer section until the difference is near zero.

Chrome currently has a rendering bug once the arcs' radii get really extreme, so this stops at about an 8-pixel difference.

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/bd8d6a2f57dd8729da3437492fb9debd'>Sunburst to icicle #2</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Sunburst

A zoomable sunburst chart visualizes the hierarchical flare dataset, showing nested categories as concentric rings where each arc's angular width represents its value. The visualization collapses or expands levels when a user clicks on an arc or the central circle, with smooth transitions animating the radial layout. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` and `d3.interpolate` animate arc geometry during zoom. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow`, and data loads asynchronously via the Observable `require` API.

Mmobssite

82% match

Loading thumbnail…

Sunburst

Mmobssite

82% match

Loading thumbnail…

Sunburst with Distortion

This sunburst chart displays a hierarchical dataset (flare) using a radial partition layout. It shows the data’s structure as nested arcs, where each node’s arc size reflects its value. The chart supports interactive distortion: clicking a node repositions its siblings and rescales the clicked node to occupy 80% of its parent’s arc, with a 750-millisecond animated transition via `transition.attrTween`. The visualization is built with D3 v3, using `d3.layout.partition` and `d3.svg.arc` for geometry, and it renders as SVG.

Mmbostock

82% match

Loading thumbnail…

Sunburst 2

This interactive sunburst diagram displays hierarchical data from the flare dataset, with each ring representing a level of the hierarchy and arc size proportional to node value. Clicking a node zooms into that branch, animating the layout through an SVG transition. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, with `transition.attrTween` handling the zoom animation and `d3.interpolate` for smooth arc morphing. Labels rotate and fade based on visibility, while a central circle resets the view.

HHgeginat

82% match

Loading thumbnail…

Sunburst

A sunburst diagram uses nested arcs to display the hierarchical structure of the Flare software package, with each node’s angular and radial extent encoding its data size. The visualization, built with d3.v4 and the d3Kit framework, supports click-to-zoom animations that smoothly interpolate the radial and angular scales via `arcTweenZoom` and `transition.attrTween`. Colors are assigned using `d3.scaleOrdinal` with the `schemeCategory20` palette, and hover interactions dispatch custom mouse events through d3Kit’s dispatcher.

TThanaporn-sk

81% match

Loading thumbnail…

Zoomable Sunburst with Labels

This interactive sunburst chart displays hierarchical data with arc labels, allowing users to click any arc to zoom into that subtree, click the center circle to zoom out, or click the canvas to reset. The visualization uses a D3.js v4 partition layout with linear and square-root scales, rendering SVG paths and text elements. It employs `d3.hierarchy`, `d3.arc`, and animated transitions via `transition.attrTween`, while labels are positioned along the arcs using `textPath` elements. The data comes from a JSON file of the Flare dataset, and text is hidden when it does not fit within an arc segment.

TThanaporn-sk

80% match

Loading thumbnail…

Sunburst Tutorial (d3 v4), Part 3

This interactive sunburst diagram visualizes hierarchical data with smooth updates and sorting. Built with D3 v4, it renders an SVG-based sunburst where slices are sorted by value using `d3.hierarchy().sort()`. Users can switch between two modes—size and count—via radio buttons, triggering animated transitions that tween arc angles to reflect the new data aggregation. The visualization stores initial arc states (`d.x0s`, `d.x1s`) to enable fluid updates, and text labels are made non-selectable via CSS for a cleaner interaction.

GGerardoFurtado

80% match

Loading thumbnail…

Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare software project, using arc size to represent the relative quantity of nodes within each category. Built with D3 v3 and the d3Kit framework, the visualization employs `d3.layout.partition` and `d3.svg.arc` to generate the rings, with colors assigned by category name. Clicking any arc triggers a zoom animation via `transition.attrTween`, which smoothly interpolates the scale domains to focus on the selected subtree. The chart auto-resizes to maintain its aspect ratio and supports mouse events for additional interactivity.

TThanaporn-sk

80% match