Sunburst Partition

100%

Sunburst Partition

✓ Published0🌍 Public

Last edited May 3, 2017

Created on May 3, 2017

A sunburst diagram displays the hierarchical structure of the Flare visualization library as a set of concentric, radial arcs. The center represents the root, with each ring deeper in the hierarchy and each arc’s angle reflecting a node’s value. Interactive radio buttons switch the partition’s metric between node count and node size. Built with D3.js v3, the visualization uses `d3.layout.partition` to compute the layout and `d3.svg.arc` for path geometry. Animated transitions between metrics are achieved with `transition().attrTween()`, which interpolates arc positions in data space. Data comes from the `flare.json` file.

AI-generated description

A sunburst is similar to the treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063423'>Sunburst Partition</a>

forked from <a href='http://bl.ocks.org/LauraCortes/'>LauraCortes</a>'s block: <a href='http://bl.ocks.org/LauraCortes/0b98ce4f186ad389ced2c372db3e221d'>Sunburst Partition</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Sunburst Partition

A sunburst diagram displays the hierarchical structure of the Flare dataset, with the root at the center and leaves on the circumference. The visualization uses a radial layout where the angle of each arc encodes the value of the corresponding node. The code employs `d3.layout.partition` and `d3.svg.arc` to compute and draw the arcs, with color assigned by the `category20c` scale. A radio button toggles between sizing arcs by node size or by leaf count, triggering a smooth animated transition via `attrTween` and `d3.interpolate`.

Mmbostock

95% match

Loading thumbnail…

Sunburst Partition

This sunburst visualization uses a radial partition layout to display hierarchical data from a custom `flare.json` dataset, with the root node at the center and leaves on the circumference. The interface offers two modes—Count and Size—that recompute arc angles based on either a uniform value or the `size` property, animating transitions between them via `transition.attrTween` and a custom `arcTween` interpolation. Built with d3.v3, the code employs `d3.layout.partition`, `d3.svg.arc`, and a `d3.scale.category20c` color scale, with SVG paths styled by parent node names.

LLauraCortes

93% match

Loading thumbnail…

Sunburst

A sunburst chart displays the hierarchical structure of the Flare dataset, with each ring segment representing a category and its subcategories, sized by numeric value. The visualization uses D3 v5’s `d3.partition` and `d3.arc` to compute and draw the radial layout, with SVG paths filled by a rainbow scale applied to top-level branches. Labels are rotated and placed conditionally based on arc size, and each segment includes a hover tooltip showing the full ancestor path and value.

苏苏巨亮

86% match

Loading thumbnail…

Sunburst with Distortion

This sunburst chart displays a hierarchical dataset (flare) using a radial partition layout. It shows the data’s structure as nested arcs, where each node’s arc size reflects its value. The chart supports interactive distortion: clicking a node repositions its siblings and rescales the clicked node to occupy 80% of its parent’s arc, with a 750-millisecond animated transition via `transition.attrTween`. The visualization is built with D3 v3, using `d3.layout.partition` and `d3.svg.arc` for geometry, and it renders as SVG.

Mmbostock

86% match

Loading thumbnail…

Bilevel Partition

A zoomable sunburst visualizes hierarchical data from the Flare visualization library. The root node sits at the center, with nested arcs extending outward; each arc’s angle encodes its value, and color indicates the parent category. Clicking an arc zooms in on that subtree, while clicking the center circle returns to the previous level. The example uses d3.layout.partition, d3.svg.arc, and d3.transition with arcTween to animate path changes, rendering with SVG.

Mmbostock

86% match

Loading thumbnail…

Sunburst 2

This interactive sunburst diagram displays hierarchical data from the flare dataset, with each ring representing a level of the hierarchy and arc size proportional to node value. Clicking a node zooms into that branch, animating the layout through an SVG transition. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, with `transition.attrTween` handling the zoom animation and `d3.interpolate` for smooth arc morphing. Labels rotate and fade based on visibility, while a central circle resets the view.

HHgeginat

85% 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

85% 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

84% match