Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ZF Entities Fork

Public visualization

Viewing a saved revision (read-only)

f050ef0cce5e474982789f839eaf4681

ZF Entities Fork

0 stars0🌍 Public
JJoe Vidmar
Last edited Aug 9, 2021
Created on Aug 9, 2021

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, with each ring level representing a branch of the data and arc size proportional to value. Users click arcs to zoom, rotating and scaling the view via smooth transitions that animate the visible portion of the hierarchy. The D3 v5 code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and draw the paths, while `transition.attrTween` interpolates arc geometry during zoom. Color is assigned per top-level category using a rainbow scale, and data is loaded asynchronously from the `@observablehq/flare` module.

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