Zoomable Sunburst with Labels

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

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

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

Sunburst

Mmobssite

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data from the flare library, displaying nested categories as concentric rings where arc size encodes value. Clicking a node zooms into that subtree, with smooth transitions animated via `d3.transition` and `transition.attrTween`. The chart is built with D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`, using SVG rendering with rainbow color scales. Labels rotate and fade based on visible arc size, and a central circle returns to the root view.

BBhaveshSolanki794

D3 v5 Zoomable Sunburst

BBhaveshSolanki794

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

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