Untitled

100%

✓ Published1🌍 Public

Last edited Apr 20, 2020

Created on Apr 20, 2020

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.

AI-generated description

Mike Bostock's D3 Zoomable Sunburst example

with D3 v5 (based on the changes in v5)

<br></br> Ported from this Observable notebook for this forum thread. Many thanks to Bryan Gingechen who answered my question about the necessary steps to get from an (Observable) JavaScript notebook to a vanilla JavaScript index.html. He presented his solution on blockbuilder.org

MIT Licensed

Similar vizzes

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

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

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

91% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare software package, with each ring segment representing a directory or file and its area proportional to a numeric value. It uses D3 v5’s `d3.partition` layout and `d3.arc` generator to draw SVG arcs, with click interactions and smooth transitions (`transition.attrTween`) that recenter and rescale the hierarchy. A color scale from `d3.interpolateRainbow` distinguishes top-level categories, while labels rotate and fade based on visibility. Data loads asynchronously via the Observable standard library’s `require` function.

Ssupermoose

90% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare dataset, showing file sizes as angular arc lengths. Users navigate the hierarchy by clicking on any segment, which re-centers the visualization on that node's subtree. The implementation is built with D3 v5, using the `d3.arc` generator and `d3.partition` layout to compute segment geometry. Colors are assigned via `d3.scaleOrdinal` with a rainbow interpolation. Clicking triggers a smooth 750-millisecond transition, with `attrTween` and `d3.interpolate` animating the arcs and labels, while the view resets when clicking the innermost circle.

AAPPSWEBD

90% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart displays the hierarchical structure of the Flare software system, using segment size to encode file sizes and color to distinguish top-level categories. Built with D3 v5, it renders as SVG and responds to user clicks on segments to zoom in and out of the hierarchy. The visualization uses D3’s `d3.arc`, `d3.partition`, and `d3.hierarchy` APIs to compute the layout, with animated transitions handled through `d3.transition` and `transition.attrTween` for smooth rescaling of arcs and labels. The data originates from the Flare dataset’s JSON representation, sourced from Observable.

AAlbert

90% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare data set, showing the relative size of each category and subcategory through the angle and radius of its arc segments. Users can click on any segment to zoom in and explore deeper levels of the hierarchy, with smooth animated transitions between views. The visualization is built with D3 v5, using the `d3.partition` layout algorithm and `d3.arc` for generating the arc paths, while `d3.interpolate` and `transition.attrTween` handle the animated zooming. The color scheme is generated from a rainbow interpolation across the root categories.

PPeter S

90% match

Loading thumbnail…

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

90% match