Skip to main content
SimilarExport ZIP
100%

Zoomable Sunburst

✓ Published0🌍 Public
Mmbostock
Last edited Feb 26, 2019
Created on Dec 20, 2012

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.

AI-generated description

Click on any arc to zoom in. Click on the center circle 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 interactive visualization displays a hierarchical sunburst chart of the Flare software package, with concentric rings representing nested categories and colored segments sized by node value. Clicking a segment animates the view to zoom into that node, expanding its children outward while receding other branches. Built with D3 v5, the example uses `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the layout, with smooth transitions driven by `transition.attrTween` and `d3.interpolate`. Data loads from the `@observablehq/flare` dataset.

Mmikefmc2005
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive visualization presents a hierarchical sunburst chart that displays the file structure of the Flare data. Users click on any arc to zoom in, re-centering the view on that node while smoothly animating the layout to reveal its children. Built with D3 v5, the chart uses the `d3.partition()` layout and `d3.arc()` for rendering, alongside `d3.hierarchy()` and `d3.interpolate()` for smooth transitions between zoom levels. The visualization fetches its data from the @observablehq/flare library and renders via SVG paths and text elements.

BBetty
92% 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
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive visualization displays a zoomable sunburst chart representing the hierarchical file structure of the Flare data. Using D3 v5's `d3.hierarchy` and `d3.partition`, the code computes the radial layout and renders it as SVG, with arcs colored by top-level category. Clicking a node triggers a 750ms animated transition via `g.transition()`, interpolating the arc geometry with `transition.attrTween`. The visualization loads the dataset through `observablehq.Library` from the `@observablehq/flare` module, with labels and arcs fading based on visibility thresholds.

MMKALM
91% 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
91% match
Loading thumbnail…

Zoomable Sunburst with Labels

This zoomable sunburst chart uses D3.js (v3) to visualize hierarchical data from flare.json, with each arc sized by value and colored by parent category. The visualization features smooth animated transitions that zoom between hierarchy levels when clicking on arcs, with labels displayed for each node. Built with SVG rendering, the chart encodes the flare dataset's multi-level structure, allowing users to explore the relationships between top-level categories and their nested children through interactive zooming and a clean, labeled sunburst layout.

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