Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
RRockkmr
Last edited Apr 2, 2022
Created on Apr 2, 2022

This zoomable sunburst visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories in a radial layout. Users click on arcs to zoom into deeper levels, with smooth animated transitions between views. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `d3.interpolate` and `transition.attrTween` animate arc paths and label positions. The color scale maps top-level categories using `d3.scaleOrdinal` and `d3.interpolateRainbow`.

AI-generated description

Mike Bostock's D3 Zoomable Sunburst example

<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…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through radial arcs. Users can click on any arc to zoom into that portion of the hierarchy, with smooth animated transitions repositioning the layout. The visualization is built with D3 v5, using `d3.partition` to compute the layout, `d3.arc` for arc paths, and `transition.attrTween` to animate changes between states. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and labels rotate to remain readable at various depths.

DDonald Bagwell
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through nested arcs. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG, with an ordinal color scale based on `d3.interpolateRainbow`. Clicking a node triggers smooth animated transitions via `transition.attrTween` and `d3.interpolate`, rescaling arcs and labels to zoom into the selected branch. Labels rotate and reposition based on arc angles, and tooltips via `title` show full paths and numeric values.

Kksookdeo
96% match
Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through concentric ring segments. Clicking a node smoothly animates and re-scales the chart to focus on that branch, with the central circle resetting the view. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering, while `transition.attrTween` and `d3.interpolate` drive the animated transitions between zoom states. Color mapping uses `d3.scaleOrdinal` with `d3.interpolateRainbow`.

DDeclan Naughton
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset, the Flare software package, with each arc segment sized proportionally to its value. Users click any arc to zoom in and explore nested categories, while a central circle resets the view. Built with D3 v7, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, with smooth transitions animated via `transition.attrTween` and `transition.tween`. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow` to distinguish top-level branches.

KKamal Bahadur Rana
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare dataset, showing relative sizes of categories and subcategories as concentric arcs. Users click any segment to zoom into that branch, with smooth 750ms transitions animating the radial layout. Built with D3 v5, the visualization uses `d3.partition` for layout, `d3.arc` for path generation, and `d3.interpolateRainbow` for color coding. SVG rendering with `transition.attrTween` smoothly updates arc geometry and label positions during zoom interactions.

TTom Ellis
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, displaying the relative sizes of categories and subcategories as concentric arcs. Users can click on any arc to zoom into that branch, with smooth animated transitions between views. The visualization uses D3 v5’s `d3.partition` layout and `d3.arc` generator to compute arc geometry, while `transition.attrTween` and `d3.interpolate` animate changes. A categorical color scale assigns hues to top-level nodes, and labels rotate and fade based on arc visibility thresholds. The data is loaded from an Observable-hosted JSON module.

RRene
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, where each arc segment represents a node and its angular width encodes the node's value. Clicking a segment zooms in to show that node as the new root, with smooth animated transitions updating arcs and labels. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout, while `transition.attrTween` animates the changing arc paths during zoom. Color is assigned per top-level category using a rainbow scale.

Jjmmoser7
95% match
Loading thumbnail…

Fork of Fork of Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical flare dataset, showing nested categories as concentric arcs whose angular width encodes value. Clicking an arc zooms into that subtree with a smooth 750ms transition, while a central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and geometry, with `transition.attrTween` animating arc paths and label rotations. The data loads from the `@observablehq/flare` module via the Observable runtime and renders as SVG with a rainbow color scale.

Bblueyjuice
95% match