Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of D3 v5 Zoomable Sunburst

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

9b9f145a8d3848b2a79b0eff9d95c3d2

Open

Fork of Fork of D3 v5 Zoomable Sunburst

0 stars0🌍 Public
JJonathan
Last edited Mar 3, 2021
Created on Mar 3, 2021

This example visualizes a hierarchical dataset as a zoomable sunburst diagram. It displays the flare visualization toolkit's class hierarchy, where the size of each arc corresponds to a numeric value, and clicking on a segment zooms into that branch. The code uses D3 v5's `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `d3.scaleOrdinal` and `d3.interpolateRainbow` handle color encoding. Smooth zooming and panning animations are implemented via D3 transitions and `attrTween`, rendering the result as SVG.

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