hirowhite

@hirowhite·2 public vizzes

Fork of D3 v5 Zoomable Sunburst

This sunburst visualization displays the hierarchical structure of the Flare data set, with each arc representing a node and its size proportional to the node’s value. Clicking an arc zooms in to show that node’s children, while clicking the center circle returns to the previous level. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with smooth transitions animated via `transition.attrTween`. Color is assigned using `d3.scaleOrdinal` with a rainbow palette, and the SVG is rendered from the `flare.json` data file.

Dec 30, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data, displaying nested nodes as concentric arcs with color-coded categories and interactive labels. Clicking an arc zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.partition` layout, `d3.arc` for path generation, and `d3.transition` with `attrTween` for smooth animated updates. Data is loaded from the `@observablehq/flare` dataset via the Observable stdlib, which the code fetches using `require()` before rendering the SVG.

Jul 29, 2020