Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

44bfc60945b740f9a1b167273f90586b

D3 v5 Zoomable Sunburst

0 stars0🌍 Public
RRenan Barbosa
Last edited Mar 12, 2020
Created on Mar 12, 2020

This interactive sunburst chart visualizes hierarchical data from the Observable `@observablehq/flare` dataset. The visualization displays nested segments as arcs, with each ring representing a level in the hierarchy. Clicking any segment zooms into that part of the hierarchy, making it the new root. The code uses the `d3.arc()` generator (with start/end angles and inner/outer radii) to draw paths, and `d3.partition()` to compute the layout. Interactivity relies on `transition.attrTween` (interpolating between arc geometries over 750ms) and `d3.interpolate` to smoothly animate data positions. Color mapping uses `d3.scaleOrdinal()` with a quantized rainbow interpolator, while labels are rotated and positioned via `labelTransform()`. The SVG rendering is driven by D3 v5's selection and join APIs.

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