Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published3🌍 Public
Jjessand4
Last edited Nov 17, 2019
Created on Nov 17, 2019

This zoomable sunburst chart visualizes hierarchical data, displaying restaurant categories (fast food, pizza, Mexican, etc.) across multiple cities, with each arc segment representing a portion of the total. The visualization uses D3 v5's hierarchical layout and partition functions to compute the arc geometry, rendering the sunburst as SVG paths with animated transitions. Clicking on a segment zooms into that subtree, using `d3.interpolate` and `transition.attrTween` to smoothly animate the arc angles and radii. The data originates from the Observable `@observablehq/flare` dataset, loaded dynamically via the Observable standard library's `require` function.

AI-generated description

Mike Bostock's D3 Zoomable Sunburst example

<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

A zoomable sunburst visualization displays hierarchical data with a fictional dataset of restaurant categories across six North American cities. Users click arcs to zoom and transition between hierarchy levels, with smooth 750ms animated rotations and resizing. The example uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, with `transition.attrTween` handling the interpolation between view states. Labels and arc opacity dynamically adjust based on visibility. Data is loaded from the `@observablehq/flare` module via the Observable standard library in vanilla JavaScript.

RRashid Iqbal
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst chart visualizes a hierarchical dataset of restaurant categories across multiple U.S. cities, with each ring segment representing a food type and its relative value. Users can click on any segment to re-center the visualization on that node, smoothly animating the repositioning and scaling of all arcs and labels over 750 milliseconds. Built with D3 v5, the implementation uses the `d3.hierarchy` and `d3.partition` APIs to compute the layout, `d3.arc` for rendering paths, and `d3.interpolate` within a `transition.attrTween` for seamless zoom transitions. Colors are assigned via a rainbow-interpolated ordinal scale, and the flare dataset is loaded asynchronously from the Observable stdlib.

MMartin Lauf
93% match
Loading thumbnail…

D3 v5 Zoomable and loadable Sunburst

This interactive sunburst chart visualizes hierarchical data from the flare dataset, displaying restaurant categories and subcategories as concentric arcs. Clicking a segment zooms in to reveal that branch's children, while clicking the center circle navigates back up the hierarchy. Built with D3 v5, it uses custom partition layouts, arc interpolation, and CSS transitions to animate the zooming effect. The visualization loads data asynchronously via the Observable stdlib and renders everything as SVG with animated color and opacity changes.

Aallanagabindhu
93% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data, showing the proportion of food categories across multiple cities. The data is loaded from the `@observablehq/flare` dataset and rendered as an SVG with animated transitions. Users can click on arcs or the central circle to zoom in and out. The code uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and `d3.scaleOrdinal` with an interpolated rainbow color scheme, along with `transition.attrTween` for smooth updates.

Jjessand4
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset of restaurant categories across multiple cities, using concentric rings to represent nesting levels. Built with D3 v5, it renders as SVG with animated transitions triggered by clicking any arc to zoom into that subtree. The code loads data from the `@observablehq/flare` module and applies `d3.partition` with a radial layout, while `d3.arc` and `transition.attrTween` handle the smooth path interpolations between zoom states. Color is assigned via `d3.scaleOrdinal` with an interpolated rainbow palette.

SSumittiwari654
92% match
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.

Hhirowhite
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show it as the new root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout, with a color scale based on `d3.interpolateRainbow`. Clicking triggers a smooth 750ms transition via `transition.attrTween`, animating arc paths and labels. The hierarchy comes from the Observable `@observablehq/flare` dataset, rendered as SVG with interactive hover tooltips.

Qqazwsxedcrfvtgbyhnujmikol1234
91% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes hierarchical data from the Observable `@observablehq/flare` dataset. The visualization displays nested segments as arcs, with each ring representing a level in the hierarchy. Clicking any segment zooms into that part of the hierarchy, making it the new root. The code uses the `d3.arc()` generator (with start/end angles and inner/outer radii) to draw paths, and `d3.partition()` to compute the layout. Interactivity relies on `transition.attrTween` (interpolating between arc geometries over 750ms) and `d3.interpolate` to smoothly animate data positions. Color mapping uses `d3.scaleOrdinal()` with a quantized rainbow interpolator, while labels are rotated and positioned via `labelTransform()`. The SVG rendering is driven by D3 v5's selection and join APIs.

RRenan Barbosa
90% match