Zoomable Sunburst with Labels

100%

Zoomable Sunburst with Labels

✓ Published0🌍 Public

Last edited Feb 9, 2018

Created on Feb 9, 2018

This interactive sunburst chart displays hierarchical data with arc labels, allowing users to click any arc to zoom into that subtree, click the center circle to zoom out, or click the canvas to reset. The visualization uses a D3.js v4 partition layout with linear and square-root scales, rendering SVG paths and text elements. It employs `d3.hierarchy`, `d3.arc`, and animated transitions via `transition.attrTween`, while labels are positioned along the arcs using `textPath` elements. The data comes from a JSON file of the Flare dataset, and text is hidden when it does not fit within an arc segment.

AI-generated description

Adapted from Mike Bostock's Zoomable Sunburst to include arc labels.

Click on any arc to zoom in. Click on the center circle to zoom out. Click on canvas background to reset zoom.

forked from <a href='http://bl.ocks.org/vasturiano/'>vasturiano</a>'s block: <a href='http://bl.ocks.org/vasturiano/12da9071095fbd4df434e60d52d2d58d'>Zoomable Sunburst with Labels</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Zoomable Sunburst with Labels

This zoomable sunburst chart uses D3.js (v3) to visualize hierarchical data from flare.json, with each arc sized by value and colored by parent category. The visualization features smooth animated transitions that zoom between hierarchy levels when clicking on arcs, with labels displayed for each node. Built with SVG rendering, the chart encodes the flare dataset's multi-level structure, allowing users to explore the relationships between top-level categories and their nested children through interactive zooming and a clean, labeled sunburst layout.

CCBasis

93% match

Loading thumbnail…

zoomable sunburst with sunlight colors

This zoomable sunburst diagram displays hierarchical data with arc labels, using the Flare dataset. Clicking an arc zooms into that subtree, the center circle zooms back out, and the background resets the view. The visualization uses D3 v4’s `d3.partition`, `d3.arc`, and `d3.scaleOrdinal` with a 30-color palette from the Sunlight Foundation Style Guide. Labels render along curved paths via `d3.path` and `textPath`, with animated transitions driven by `transition.attrTween` and interpolated scales. A white contour stroke improves label readability.

FFrissAnalytics

91% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data from the flare.json dataset, showing nested categories as concentric arcs. Users click a segment to zoom into that branch, with smooth animated transitions. Built with D3 v5, the visualization uses SVG paths and the d3.partition layout, d3.arc for arc geometry, and d3.transition with attrTween to animate between states. Colors derive from a scaleOrdinal with an interpolateRainbow palette.

BBhavyatulasi

89% match

Loading thumbnail…

Zoomable Sunburst

This zoomable sunburst chart displays the hierarchical file structure of the Flare visualization library, using a radial layout where the root node sits at the center and leaves occupy the circumference. Each arc's angle corresponds to its value, and the visualization uses a d3.layout.partition to compute the layout. Clicking an arc zooms in by reinterpolating the x and y scale domains and ranges over 750 milliseconds, while the d3.svg.arc component redraws the arcs via an attrTween on the path data. The color scale d3.scale.category20c assigns colors based on parent node names, and the data comes from a JSON file.

Mmbostock

89% match

Loading thumbnail…

Sunburst

A zoomable sunburst chart visualizes the hierarchical flare dataset, showing nested categories as concentric rings where each arc's angular width represents its value. The visualization collapses or expands levels when a user clicks on an arc or the central circle, with smooth transitions animating the radial layout. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` and `d3.interpolate` animate arc geometry during zoom. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow`, and data loads asynchronously via the Observable `require` API.

Mmobssite

89% match

Loading thumbnail…

Sunburst

Mmobssite

89% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data from the flare dataset. Clicking a node zooms into that subtree, while a central circle returns to the parent level. The chart uses D3 v5’s `d3.partition` layout and `d3.hierarchy`, rendering arcs as SVG paths with `d3.arc`. Interactive transitions animate via `transition.attrTween`, updating arc geometry and label rotations with color scales from `d3.interpolateRainbow`.

Hhardypatel1

89% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show its children while the central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG layout, with `transition.attrTween` animating arc positions and label transforms. The visualization loads the flare dataset via Observable’s stdlib and applies a rainbow color scale based on top-level categories.

Nnrcopeland

89% match