Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
MMustafa-Esoofally
Last edited Dec 2, 2020
Created on Dec 2, 2020

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.

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 visualization displays the hierarchical structure of the Flare dataset, with arc size proportional to leaf-node values and color encoding by top-level category. Clicking any arc zooms to that subtree via animated transitions using `d3.transition` and `transition.attrTween`, while an inner circle returns to the root. Built with D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`, labels rotate to remain readable. Data loads through the Observable standard library’s `require()` method, and rendering uses SVG with `fill-opacity` to indicate parent-child relationships.

SStella
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes the hierarchically structured Flare dataset, showing the relative sizes of data clusters and their nested subcategories through concentric arcs. Users click on any parent arc to zoom into that subtree and recenter the visualization, with smooth animated transitions handled by D3 transitions and `transition.attrTween`. The example is implemented in D3 v5, using `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout, while `d3.interpolateRainbow` provides a categorical color scale. Data loads via the Observable standard library from the `@observablehq/flare` module, and all elements are drawn as SVG paths and text labels.

Eenoris75
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays hierarchical data from the Flare dataset, animating radial arcs and labels when clicking to zoom into nodes. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, with `d3.interpolate` and `transition.attrTween` for smooth 750ms animations. The color scale uses `d3.scaleOrdinal` with `d3.interpolateRainbow`, and labels rotate and flip based on arc position. Data loads asynchronously via an Observable stdlib `require` call, while a central circle returns to the root view.

YYash G
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, displaying nested arcs whose size and color encode node values and category. Users click any arc to zoom into that subtree, with smooth 750-millisecond transitions animating arc paths and labels via `d3.transition` and `transition.attrTween`. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG layout, while a rainbow color scale distinguishes top-level branches. Data loads asynchronously from the Observable Flare module using `observablehq/stdlib`.

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

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes hierarchical data from the Flare dataset, representing the size of each node through the arc’s angular width and radial extent. Users click any arc to zoom into that subtree, with smooth 750-millisecond transitions applied via `transition.attrTween` and `d3.interpolate`. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to generate SVG paths and labels, with `d3.scaleOrdinal` and `d3.interpolateRainbow` providing color encoding. The Observable HQ standard library’s `require` method loads the data from the `@observablehq/flare` module.

Aarvind75
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and their subcomponents through concentric, color-coded arcs. Users can click on any segment to zoom into that branch, with animated transitions expanding and rotating the view around the central circle. The code uses D3 v5's `d3.hierarchy`, `d3.partition`, and custom `d3.arc` generators to draw SVG paths, while `transition.attrTween` and `d3.interpolate` handle the smooth geometric morphing between views. Data loads from the `@observablehq/flare` package via the Observable stdlib's `require` module.

MMarwanElfatrani
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This visualization renders the Flare software package hierarchy as a zoomable sunburst, where each arc segment represents a node and its size encodes the node’s value. Users can click arcs or the central circle to drill down or back up through the hierarchy, with animated transitions handled by `d3.transition` and `transition.attrTween`. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and draw the layout in SVG, while `d3.scaleOrdinal` with `d3.interpolateRainbow` assigns colors to top-level branches. The data is loaded asynchronously from the `@observablehq/flare` module via the Observable standard library.

Ssyahidibnoe
95% match