Skip to main content
Log in
A

Alex Levitt

@ahlev·3 public vizzes

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes the hierarchical structure of the flare dataset, showing file sizes across categories and subcategories. The visualization uses a radial layout where each ring represents a level of the hierarchy, with arc lengths proportional to values. Clicking on any segment zooms in, while clicking the central circle returns to the root. The implementation leverages `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute geometry, with transitions animated via `transition.attrTween`. Color encoding uses `d3.scaleOrdinal` with interpolated rainbow colors based on top-level category names.

Apr 21, 2019
Loading thumbnail…

D3 v5 Zoomable Sunburst

The D3 v5 Zoomable Sunburst shows a hierarchical dataset of the Flare visualization library (loaded via the @observablehq/flare module) as a multi-ring sunburst chart. Clicking an arc zooms in to reveal its children, with smooth transitions applied to the arcs and labels via `transition.attrTween` and `d3.interpolate`. The visualization is rendered as SVG, uses `d3.hierarchy` and `d3.partition` for layout, and `d3.scaleOrdinal` with a rainbow palette for coloring top-level categories.

Apr 21, 2019
Loading thumbnail…

D3 v5 Zoomable Sunburst

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.

Apr 21, 2019