Bilevel Partition

100%

Bilevel Partition

✓ Published0🌍 Public

Last edited Jul 13, 2018

Created on Jul 13, 2018

This interactive sunburst diagram visualizes the hierarchical structure of the Flare data, where each arc’s angle corresponds to a node’s value and color encodes its category. Clicking an arc zooms into that subtree, while clicking the center zooms back out. Built with D3 v3, it uses the `d3.layout.partition` and `d3.svg.arc` to compute the radial layout, and `transition.attrTween` to animate path geometry between zoom states. Data comes from `flare.json`, a nested tree of software project metrics.

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.

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

gpl-3.0 Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Sunburst Partition

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.

LLauraCortes

90% 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…

Untitled

This interactive zoomable sunburst diagram visualizes the hierarchical structure of the Flare software package, using nested arcs sized by file metrics. Built with D3 v3 and SVG, it employs `d3.layout.partition` to compute the layout and `d3.svg.arc` for rendering. Clicking a node triggers `transition.attrTween` to smoothly zoom into that subtree, recalculating scales and updating text labels. The color scale `d3.scale.category20c` distinguishes parent categories, while labels rotate based on their angular position.

BBhavyatulasi

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

88% match

Loading thumbnail…

D3 v5

This zoomable sunburst chart visualizes the hierarchical Flare dataset, showing the size of each node through arc length and color-coded by top-level category. Clicking an arc zooms into that subtree, recomputing the partition layout and animating the transition. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `transition.attrTween` to smoothly interpolate arc geometry and label positions. The visualization renders as SVG with interactive animations, and data is loaded asynchronously from the Observable `@observablehq/flare` module.

Kkaga

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 interactive sunburst diagram displays the hierarchical structure of the Flare software package, with each arc segment representing a module and its angular size proportional to the module’s value. Users can click any segment to zoom into that subtree, smoothly animating the layout as the focus shifts. The visualization is built with D3 v5, using `d3.partition` to compute the layout and `d3.arc` for rendering SVG paths. Transitions are animated via `transition.attrTween` and `d3.interpolate`. The code loads data from the Observable standard library’s `@observablehq/flare` dataset and applies a rainbow color scale.

Ssyahidibnoe

86% match