Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Ccmsodi
Last edited May 25, 2020
Created on May 24, 2020

A zoomable sunburst visualization displays hierarchical data from the Flare dataset, with each ring segment representing a category and its value. The visualization uses D3 v5's partition layout to render the tree structure as an interactive SVG, allowing users to click on any arc to zoom into that branch. The code builds the sunburst from a JSON file using d3.partition and d3.hierarchy, with the root node always visible at the center. The implementation is ported from an Observable notebook and uses the D3.js library with the SVG rendering approach.

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 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
95% 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
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 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
Loading thumbnail…

D3 v5 Zoomable Sunburst - PD

This zoomable sunburst diagram displays the hierarchical structure of the Flare data set, with each ring segment representing a category and its size proportional to a numeric value. Users can click on any segment to re-center the visualization on that node, with smooth animated transitions between views. The example is built with D3 v5, using the `d3.arc`, `d3.partition`, `d3.hierarchy`, and `d3.transition` APIs, and renders as an SVG with labels rotated and positioned via `d3.interpolate`. The data is loaded from the Observable Flare JSON dataset.

Llucaele
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

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.

Jjeremypatio
93% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset of the Flare software project, with each arc segment representing a category or leaf node whose angular width encodes its relative value. Clicking a segment transitions the view to center on that branch while shrinking others, enabling navigation through multiple levels of the tree. The visualization is rendered as SVG using D3 v5’s `d3.partition` layout, `d3.arc` for path generation, and D3 transitions for smooth zooming animations. Data is provided as an inline JSON object.

Ssrinvas35
93% match
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
93% match