Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
JJuan Sebastian Prieto
Last edited Jun 27, 2019
Created on Jun 27, 2019

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, where each ring segment represents a category and its size corresponds to its value. Users click a segment to zoom into that branch, re-centering the visualization and smoothly animating the arcs and labels. Built with D3 v5, the example uses `d3.hierarchy`, `d3.partition`, and a custom `d3.arc` to compute geometry, while `transition.attrTween` animates the changing path data. The color scheme assigns hues to top-level categories using `d3.scaleOrdinal` and `d3.interpolateRainbow`.

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

This interactive sunburst diagram shows the hierarchical structure of the Flare dataset, with each ring segment representing a category and its value. Users can click on any segment to zoom in and focus on that branch, while clicking the central circle returns to the parent level. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and animated SVG transitions to smoothly interpolate arc paths and labels via `transition.attrTween`. Data is loaded from the `@observablehq/flare` module, and colors are assigned using `d3.scaleOrdinal` with a quantized rainbow palette.

Ddon-alberto
97% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, allowing users to click on any segment to zoom in and explore nested categories. Built with D3 v5, the visualization uses an arc partition layout with a radial layout, where the inner ring represents the root and outer rings show deeper levels. The code leverages `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, and employs `d3.interpolateRainbow` for color coding. Animations are handled via `d3.transition` and `transition.attrTween`, smoothly interpolating arc positions and labels during zoom transitions.

BBhavyatulasi
97% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, where each ring segment represents a category and its size corresponds to a numeric value. Clicking a segment smoothly transitions the chart to focus on that node’s subtree, using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and render the circular layout. The animation relies on `transition.attrTween` and `d3.interpolate` to morph arc geometry and label transforms between states, with colors assigned per top-level branch via `d3.scaleOrdinal`.

MMustafa-Esoofally
96% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst visualizes the hierarchical structure of the Flare dataset, where each ring segment represents a node and its size corresponds to a value. Users can click on any segment to zoom in, revealing its children and re-centering the view, or click the central circle to zoom back out. Built with D3 v5, the visualization uses SVG for rendering and employs animated transitions via `transition.attrTween` to smoothly interpolate arc paths and labels as the view changes. The hierarchical data is processed using `d3.hierarchy`, `d3.partition`, and `d3.arc`, with colors assigned via a quantized rainbow interpolator.

LLal Singh Dhaila
96% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare data set, showing the relative size of each category and subcategory through the angle and radius of its arc segments. Users can click on any segment to zoom in and explore deeper levels of the hierarchy, with smooth animated transitions between views. The visualization is built with D3 v5, using the `d3.partition` layout algorithm and `d3.arc` for generating the arc paths, while `d3.interpolate` and `transition.attrTween` handle the animated zooming. The color scheme is generated from a rainbow interpolation across the root categories.

PPeter S
96% match
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.

AAlex Levitt
96% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare dataset, with nodes sized by value and colored by top-level category. Clicking a ring zooms into that subtree while decreasing visible depth. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout and rendering, with transitions via `transition.attrTween` to animate arc geometry and labels. The SVG visualization imports data through the Observable stdlib and includes interactive hover tooltips.

MMohamed-Khchiou
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, using colored arcs to represent categories and nested segments for subcategories. Clicking a segment smoothly zooms into that branch, animating the radial layout via `d3.transition` and `attrTween`. Rendered with SVG, it leverages `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, while `d3.scaleOrdinal` and `d3.interpolateRainbow` drive the color scheme, with labels and tooltips (`<title>`) providing details on demand.

55FEKO
95% match