D3 v5 Zoomable Sunburst

100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public

Last edited Jun 30, 2020

Created on Jun 30, 2020

An interactive zoomable sunburst chart visualizes the hierarchical structure of the Flare data set. The radial layout partitions the root node into concentric rings, with arc segments representing each category and subcategory; the color of each leaf is inherited from its top-level group. Clicking on an arc zooms into that subtree, expanding its children while hiding others. Built with D3 v5, the visualization uses `d3.partition` for layout, `d3.arc` for path generation, and animated transitions via `transition.attrTween` to smoothly update arc shapes and labels.

AI-generated description

Mike Bostock's D3 Zoomable Sunburst example

with D3 v5 (based on the changes in v5)

<br></br> Ported from this Observable notebook for this forum thread. Many thanks to Bryan Gingechen who answered my question about the necessary steps to get from an (Observable) JavaScript notebook to a vanilla JavaScript index.html. He presented his solution on blockbuilder.org

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, allowing users to click on any segment to zoom in and explore nested categories. Built with D3 v5, the visualization uses an arc partition layout with a radial layout, where the inner ring represents the root and outer rings show deeper levels. The code leverages `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, and employs `d3.interpolateRainbow` for color coding. Animations are handled via `d3.transition` and `transition.attrTween`, smoothly interpolating arc positions and labels during zoom transitions.

BBhavyatulasi

96% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare data set, showing the relative size of each category and subcategory through the angle and radius of its arc segments. Users can click on any segment to zoom in and explore deeper levels of the hierarchy, with smooth animated transitions between views. The visualization is built with D3 v5, using the `d3.partition` layout algorithm and `d3.arc` for generating the arc paths, while `d3.interpolate` and `transition.attrTween` handle the animated zooming. The color scheme is generated from a rainbow interpolation across the root categories.

PPeter S

95% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare dataset, showing file sizes as angular arc lengths. Users navigate the hierarchy by clicking on any segment, which re-centers the visualization on that node's subtree. The implementation is built with D3 v5, using the `d3.arc` generator and `d3.partition` layout to compute segment geometry. Colors are assigned via `d3.scaleOrdinal` with a rainbow interpolation. Clicking triggers a smooth 750-millisecond transition, with `attrTween` and `d3.interpolate` animating the arcs and labels, while the view resets when clicking the innermost circle.

AAPPSWEBD

95% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, showing nested categories as concentric arcs. Clicking an arc zooms into that subtree, smoothly animating the radial layout over two seconds. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute geometry, while `d3.interpolate` and `transition.attrTween` animate the paths and labels. Color assignment uses `d3.scaleOrdinal` with `d3.interpolateRainbow`. The visualization renders as SVG, with tooltips displaying the full path and formatted values.

Aandrewomalley

95% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, with arc size proportional to leaf-node values and color encoding by top-level category. Clicking any arc zooms to that subtree via animated transitions using `d3.transition` and `transition.attrTween`, while an inner circle returns to the root. Built with D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`, labels rotate to remain readable. Data loads through the Observable standard library’s `require()` method, and rendering uses SVG with `fill-opacity` to indicate parent-child relationships.

SStella

95% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data from the flare.json dataset, showing nested categories as concentric arcs. Users click a segment to zoom into that branch, with smooth animated transitions. Built with D3 v5, the visualization uses SVG paths and the d3.partition layout, d3.arc for arc geometry, and d3.transition with attrTween to animate between states. Colors derive from a scaleOrdinal with an interpolateRainbow palette.

BBhavyatulasi

95% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare data set, visually encoding each category's size through the arc's angular width. The visualization is rendered as SVG via D3 v5, with the root hierarchy partition built using `d3.hierarchy`, `d3.partition`, and the `d3.arc` generator. Clicking a node triggers a smooth animation using D3's `.transition().duration(750)` with `.attrTween` to interpolate arc positions, while fill colors for top-level categories are assigned using a quantized rainbow interpolation via `d3.scaleOrdinal`.

JJESN2

95% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst diagram visualizes the hierarchical structure of the Flare dataset, with nested arcs representing categories and subcategories. Clicking a node smoothly zooms and re-centers the view on that segment, while fading out irrelevant arcs and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, and `transition.attrTween` for animated interpolation between states. Data loads via the Observable standard library, with SVG rendering and a rainbow color scale for top-level branches.

JJ. Matthew Pryor

95% match