Bilevel Partition

100%

Bilevel Partition

✓ Published0🌍 Public

Last edited Nov 1, 2018

Created on Jul 7, 2013

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.

AI-generated description

Click on any arc to zoom in. Click in the center to zoom out.

A sunburst is similar to a 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.

gpl-3.0 Licensed

Similar vizzes

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

88% match

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

88% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

An interactive zoomable sunburst chart visualizes the hierarchical structure of the Flare data set. The radial layout partitions the root node into concentric rings, with arc segments representing each category and subcategory; the color of each leaf is inherited from its top-level group. Clicking on an arc zooms into that subtree, expanding its children while hiding others. Built with D3 v5, the visualization uses `d3.partition` for layout, `d3.arc` for path generation, and animated transitions via `transition.attrTween` to smoothly update arc shapes and labels.

MMohammad Jabr

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

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

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

87% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst diagram visualizes the hierarchical structure of the Flare dataset, with nested arcs representing categories and subcategories. Clicking a node smoothly zooms and re-centers the view on that segment, while fading out irrelevant arcs and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, and `transition.attrTween` for animated interpolation between states. Data loads via the Observable standard library, with SVG rendering and a rainbow color scale for top-level branches.

JJ. Matthew Pryor

87% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst visualizes the hierarchical structure of the Flare dataset, with arcs sized by value and colored by top-level category. Clicking a node animates a zoom to that branch of the hierarchy. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute layout and paths, with `transition.attrTween` for smooth animated updates. Data originates from the `@observablehq/flare` module, rendered as SVG with rotating labels.

Rremyapk

87% match