Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Jjeremypatio
Last edited Feb 26, 2020
Created on Feb 26, 2020

A zoomable sunburst diagram displays hierarchical data from the Flare library, partitioned into concentric rings that represent the root, categories, and leaf nodes. Clicking a sector re-centers the visualization on that branch, animating the arcs and labels to reveal deeper levels of the hierarchy. Built with D3 v5, the code uses `d3.partition` for the layout, `d3.arc` for rendering SVG paths, `d3.select` and `d3.transition` with `attrTween` for smooth updates, and `d3.scaleOrdinal` for color encoding. The visualization is rendered as SVG elements with a `g` group translated to the center, and the interactive zoom is triggered by click events on each path.

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 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`.

JJuan Sebastian Prieto
94% 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
94% 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
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the Flare dataset, with concentric rings representing nested categories such as analytics, animate, and query. The visualization uses D3 v5's partition layout to render the sunburst as SVG, with each sector's arc length proportional to its value. Users can click on any arc to zoom in and explore that branch of the hierarchy, with the root label and title updating to reflect the current focus. The code implements this interactivity using D3's `d3.partition`, `d3.hierarchy`, and event handling on the SVG elements.

Pprincit
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

An interactive zoomable sunburst chart visualizes the hierarchical structure of the Flare data set. The radial layout partitions the root node into concentric rings, with arc segments representing each category and subcategory; the color of each leaf is inherited from its top-level group. Clicking on an arc zooms into that subtree, expanding its children while hiding others. Built with D3 v5, the visualization uses `d3.partition` for layout, `d3.arc` for path generation, and animated transitions via `transition.attrTween` to smoothly update arc shapes and labels.

MMohammad Jabr
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare data set, visually encoding each category's size through the arc's angular width. The visualization is rendered as SVG via D3 v5, with the root hierarchy partition built using `d3.hierarchy`, `d3.partition`, and the `d3.arc` generator. Clicking a node triggers a smooth animation using D3's `.transition().duration(750)` with `.attrTween` to interpolate arc positions, while fill colors for top-level categories are assigned using a quantized rainbow interpolation via `d3.scaleOrdinal`.

JJESN2
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare dataset, with each ring representing a level of hierarchy and arc length proportional to size. Clicking a sector zooms into that subtree, re-centering and re-scaling the visualization with a smooth 750-millisecond animation. Built with D3 v5, the SVG rendering uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates the path geometry and label transforms. The color scale assigns distinct hues to top-level categories based on the data's children.

PPekingWaldo
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive visualization displays the hierarchical structure of the Flare data as a sunburst diagram, partitioned into concentric rings where each ring represents a level of the hierarchy and arc angles encode numeric values. Clicking a segment zooms the view to focus on that subtree, using animated transitions that smoothly rescale and reposition arcs via `d3.interpolate` and `d3.attrTween`, with colors assigned by `d3.scaleOrdinal` and `d3.interpolateRainbow`. Rendered as SVG with D3 v5, it loads hierarchical JSON data and relies on the Observable stdlib’s `d3.partition` and `d3.arc` generators, adapting Bostock’s original example for vanilla JavaScript.

OOleg Russkin
94% match