D3 v5 Zoomable Sunburst 1216

100%

D3 v5 Zoomable Sunburst 1216

✓ Published0🌍 Public

Last edited Dec 16, 2021

Created on Dec 16, 2021

This zoomable sunburst visualization displays the hierarchical structure of the Flare data, showing nested categories as concentric arcs whose angular width and radius encode the relative sizes of branches and leaf nodes. Clicking a segment zooms into that subtree, smoothly animating the layout as the clicked node becomes the new root. The D3 v5 code uses `d3.partition` and `d3.hierarchy` for layout, `d3.arc` for path geometry, and `d3.transition` with `attrTween` to interpolate arc positions and angles during zoom animations. A sequential rainbow color scale assigns hues to top-level branches.

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 zoomable sunburst visualizes the hierarchical Flare dataset, showing relative sizes of its categories through nested arcs. Clicking a node smoothly zooms into its subtree, while a center circle returns to the root. The example uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and shapes, with `transition.attrTween` and `d3.interpolate` animating arc positions. Labels rotate and fade based on visibility, and the color scale applies `d3.interpolateRainbow` per top-level branch, rendered as an SVG with user interaction.

TTravy Trav

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

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, using colored arcs to represent categories and nested segments for subcategories. Clicking a segment smoothly zooms into that branch, animating the radial layout via `d3.transition` and `attrTween`. Rendered with SVG, it leverages `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, while `d3.scaleOrdinal` and `d3.interpolateRainbow` drive the color scheme, with labels and tooltips (`<title>`) providing details on demand.

55FEKO

95% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, displaying nested arcs whose size and color encode node values and category. Users click any arc to zoom into that subtree, with smooth 750-millisecond transitions animating arc paths and labels via `d3.transition` and `transition.attrTween`. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG layout, while a rainbow color scale distinguishes top-level branches. Data loads asynchronously from the Observable Flare module using `observablehq/stdlib`.

TTravy Trav

95% match

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

95% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare software class library, showing relative sizes of modules and submodules through nested arcs. Clicking a segment zooms into that branch, while the center circle returns to the root. Built with D3 v5, it uses `d3.hierarchy` and `d3.partition` to compute the layout, `d3.arc` for path geometry, and `d3.interpolateRainbow` for coloring. Animated transitions rely on `transition.attrTween` and `transition.tween` to smoothly update paths and labels during zoom.

FFrancisco Salema

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

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