D3 v5 Zoomable Sunburst

100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public

Last edited Apr 8, 2020

Created on Apr 8, 2020

This example demonstrates a zoomable sunburst visualization of the Flare dataset using D3 v5. It uses `d3.hierarchy` and `d3.partition` to compute the layout, with `d3.arc` for path generation. Interactive zoom transitions are implemented through click handlers and `transition.attrTween` to animate arcs and labels. The visualization renders as SVG with color scales from `d3.scaleOrdinal` and `d3.interpolateRainbow`. The data is loaded asynchronously via an Observable notebook library, with the dataset containing hierarchical filesystem-like size values.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of hierarchical data from the Observable Flare dataset. Users click on arcs to zoom into deeper levels, and a central circle returns to the root. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout, with `d3.scaleOrdinal` and `d3.interpolateRainbow` for coloring. Transitions animate arc paths and labels via `transition.attrTween` and `d3.interpolate`. The SVG renders with clickable paths and a reset circle.

Ppratamamp

94% match

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.

AAlex Levitt

94% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This example presents a zoomable sunburst visualization of hierarchical data from the Flare dataset, rendered as an interactive donut chart in SVG. The visualization uses D3 v5’s `d3.partition` and `d3.hierarchy` to compute angular and radial layouts, with `d3.arc` drawing each segment. Users click a node to zoom into that subtree, triggering a 750ms animated transition where `transition.attrTween` interpolates arc geometries and label transforms. The color scale uses `d3.interpolateRainbow`, and data is loaded via the Observable Stdlib `require` function.

SSumittiwari654

94% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the Flare software package’s class hierarchy, with arc size encoding class value and color assigned by top-level category. Clicking an arc zooms into that subtree, animating the radial layout transitions. The code uses D3 v5’s `d3.partition`, `d3.hierarchy`, `d3.scaleOrdinal`, `d3.interpolateRainbow`, and `d3.arc`, with transitions driven by `transition.attrTween` and `tween` on path data. Data loads via the Observable stdlib `require` for `@observablehq/flare`. Rendering uses SVG paths and text labels.

FfaRriaN

94% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the hierarchical flare dataset, where clicking a ring zooms into that subtree and clicking the center returns to the root. The code uses D3 v5’s `d3.partition` and `d3.arc` to compute and draw the arcs, with `d3.interpolateRainbow` for color mapping and `transition.attrTween` for smooth animated zooms. Labels rotate and fade based on visibility criteria, and the data is loaded via the Observable `@observablehq/flare` package with the page rendered as SVG.

苏苏巨亮

94% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, showing parent-child relationships and relative sizes through concentric arcs. Built with D3 v5, it uses `d3.partition` to compute the layout, `d3.arc` for path generation, and `d3.scaleOrdinal` with an interpolated rainbow palette for coloring. Clicking any node triggers an animated transition via `transition.attrTween` and `transition.attr`, zooming to that subtree while labels adjust their rotation and opacity based on visibility thresholds. The dataset loads from the `@observablehq/flares` package, and all rendering is done in SVG.

Yyarosus

93% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical Flare dataset as concentric arcs, with clickable parent nodes that smoothly zoom into deeper levels of the hierarchy. Built with D3 v5, it renders arcs using `d3.arc` and computes the layout with `d3.partition` on a hierarchy created by `d3.hierarchy`. Animations are driven by `transition.attrTween`, interpolating between arc positions with `d3.interpolate`, while labels fade and rotate using `labelTransform` based on visible arc bounds. The example loads the Flare JSON data via the Observable standard library's `require` function and uses a `d3.scaleOrdinal` with an interpolated rainbow palette.

MMustafa-Esoofally

93% match

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.

AAlex Levitt

93% match