D3 v5 Zoomable Sunburst

100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public

Last edited Mar 13, 2020

Created on Mar 12, 2020

This zoomable sunburst from Mike Bostock’s example, ported to D3 v5 by tdog8901, visualizes hierarchical data using an interactive radial layout with SVG and animated transitions. Clicking a node zooms into that subtree, smoothly re-scaling arcs via `transition.attrTween` and interpolated path data. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the rings, with a color scale based on top-level names. It loads data from a custom `flare.json` file and includes labels that fade in or out based on visibility thresholds.

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…

Fork of D3 v5 Zoomable Sunburst

This example presents a zoomable sunburst visualization of hierarchical data, where each ring segment represents a category and its size corresponds to a numerical value. Built with D3 v5, it uses the `d3.partition` layout to compute the angular and radial coordinates for the hierarchical structure. The visualization is rendered as SVG, with a click interaction on each arc that triggers a smooth animated zoom via `d3.transition` and `attrTween`. Node labels rotate to align with their segments. The example is an updated version of Mike Bostock's original, ported from Observable, and uses the `flare.csv` and `flare.json` datasets.

DDonald Bagwell

90% match

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

89% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data from the flare library, displaying nested categories as concentric rings where arc size encodes value. Clicking a node zooms into that subtree, with smooth transitions animated via `d3.transition` and `transition.attrTween`. The chart is built with D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`, using SVG rendering with rainbow color scales. Labels rotate and fade based on visible arc size, and a central circle returns to the root view.

BBhaveshSolanki794

89% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

BBhaveshSolanki794

89% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

The zoomable sunburst visualizes hierarchical data from the Observable Flare dataset as concentric arcs, where clicking a node recenters and rescales the view on that subtree. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout and rendering, with smooth 750ms transitions driven by `transition.attrTween` and interpolation of arc geometry. Color is assigned per top-level branch via a rainbow ordinal scale, and labels rotate radially with visibility filtering.

VVishnu Ch

89% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes a hierarchical dataset, where clicking on a ring segment zooms in to reveal that branch as the new root. The visualization uses a radial partition layout, with arc segments representing nodes and their sizes proportional to values. Implemented with D3’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, it renders as an interactive SVG with smooth 750-millisecond transitions. Node colors derive from a quantized rainbow scale, and labels rotate along the arcs, with click handlers on parent circles enabling navigation. The data originates from the Observable “flare” library, which is loaded asynchronously.

MMohammad Jabr

89% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the Flare dataset, using an interactive radial layout where each ring segment represents a node’s value. The chart supports click-to-zoom transitions with smooth animations, implemented in D3 v5 with SVG rendering. The dataset is loaded from a CSV and nested into a hierarchy, with color encoding by branch depth. Users can explore the hierarchy by clicking arcs to zoom into nested levels, with the animation providing a smooth transition between views. The example is a port of Mike Bostock’s Observable notebook and serves as a practical reference for adapting D3 v5 to vanilla JavaScript.

Eerickdau@gmail.com

89% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the Flare software hierarchy, rendering hierarchical data as concentric arcs with color-coded categories. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and draw the layout in SVG. Clicking an arc animates the view via `transition.attrTween`, interpolating arc angles and radii to zoom into the selected node, while labels fade based on visibility using `d3.interpolate`. Data loads from a remote JSON file.

AAlex Levitt

88% match