d3 zoomable sunburst

100%

d3 zoomable sunburst

✓ Published0🌍 Public

Last edited Jan 4, 2021

Created on Jan 4, 2021

This example visualizes a hierarchical dataset of plant classifications, organizing species into a zoomable sunburst layout that displays taxonomic relationships from kingdom down to species. Users can click on arcs to zoom into deeper levels of the hierarchy. The visualization uses d3.v5, leveraging the d3.partition and d3.hierarchy APIs to compute the sunburst layout and render it as SVG paths. The data consists of plant entries with taxonomic fields, which are transformed into a nested tree structure for display.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes a hierarchical taxonomy, allowing users to click on any arc to zoom into that branch and explore its nested categories. Each ring segment represents a node, with size encoding the accumulated value of its descendants. Built with D3 v5, the visualization uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and draw the layout, while a `transition.attrTween` smoothly animates the arcs and labels during zoom transitions. The SVG rendering and color scales are applied directly through D3 selections.

AAdam Detrick

86% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data from the flare dataset. Clicking a node zooms into that subtree, while a central circle returns to the parent level. The chart uses D3 v5’s `d3.partition` layout and `d3.hierarchy`, rendering arcs as SVG paths with `d3.arc`. Interactive transitions animate via `transition.attrTween`, updating arc geometry and label rotations with color scales from `d3.interpolateRainbow`.

Hhardypatel1

86% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset, encoding each node’s value as the arc’s angular width. Clicking a slice zooms into that subtree, dynamically rescaling the partition layout and re-centering the view. Built with D3 v5 and SVG, the example uses `d3.partition`, `d3.hierarchy`, and `d3.interpolate` to animate transitions, reading hierarchical data from a CSV file with id and value fields. The rendered output includes a breadcrumb trail showing the current path.

Tthanhtrant219

86% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from a JSON file using a radial partition layout. Clicking any arc smoothly zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with color mapping via `d3.scaleOrdinal` and animation through `transition.attrTween`. SVG rendering with interactive transitions highlights the relationships between nested data categories.

Llucaele

85% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical Flare dataset, showing relative sizes of its categories through nested arcs. Clicking a node smoothly zooms into its subtree, while a center circle returns to the root. The example uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and shapes, with `transition.attrTween` and `d3.interpolate` animating arc positions. Labels rotate and fade based on visibility, and the color scale applies `d3.interpolateRainbow` per top-level branch, rendered as an SVG with user interaction.

TTravy Trav

85% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the Flare dataset, with concentric rings representing nested categories such as analytics, animate, and query. The visualization uses D3 v5's partition layout to render the sunburst as SVG, with each sector's arc length proportional to its value. Users can click on any arc to zoom in and explore that branch of the hierarchy, with the root label and title updating to reflect the current focus. The code implements this interactivity using D3's `d3.partition`, `d3.hierarchy`, and event handling on the SVG elements.

Pprincit

85% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes a hierarchical dataset, where clicking on a ring segment zooms in to reveal that branch as the new root. The visualization uses a radial partition layout, with arc segments representing nodes and their sizes proportional to values. Implemented with D3’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, it renders as an interactive SVG with smooth 750-millisecond transitions. Node colors derive from a quantized rainbow scale, and labels rotate along the arcs, with click handlers on parent circles enabling navigation. The data originates from the Observable “flare” library, which is loaded asynchronously.

MMohammad Jabr

85% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays hierarchical data from the Flare dataset, with each ring segment representing a category and its value. The visualization uses D3 v5's partition layout to render the tree structure as an interactive SVG, allowing users to click on any arc to zoom into that branch. The code builds the sunburst from a JSON file using d3.partition and d3.hierarchy, with the root node always visible at the center. The implementation is ported from an Observable notebook and uses the D3.js library with the SVG rendering approach.

Ccmsodi

85% match