Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

ec7b9aaca8fc44f68fb0d08c4c64b25d

Open

D3 v5 Zoomable Sunburst

0 stars0🌍 Public
AAlex Levitt
Last edited Apr 21, 2019
Created on Apr 21, 2019

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.

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