Skip to main content
SimilarExport ZIP
100%

Sunburst learning demo

✓ Published0🌍 Public
GGabriel Munteanu
Last edited Dec 11, 2019
Created on Dec 11, 2019
Forked from Hello VizHub

A sunburst chart demonstrates hierarchical data, depicting budget allocations for two "Bucuresti" sectors with nested circular arcs. Built with D3.v5, it uses `d3.partition` with a radial layout, computing arcs via `d3.arc` and coloring sectors with `d3.scaleOrdinal` and `d3.interpolateRainbow`. The SVG rendering includes interactive click handlers and animated transitions of 10 seconds, recalculating the partition layout on each interaction. The example highlights D3's hierarchical layout and animation capabilities within the VizHub framework.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

Sunburst Tutorial (d3 v4), Part 3

This interactive sunburst diagram visualizes hierarchical data with smooth updates and sorting. Built with D3 v4, it renders an SVG-based sunburst where slices are sorted by value using `d3.hierarchy().sort()`. Users can switch between two modes—size and count—via radio buttons, triggering animated transitions that tween arc angles to reflect the new data aggregation. The visualization stores initial arc states (`d.x0s`, `d.x1s`) to enable fluid updates, and text labels are made non-selectable via CSS for a cleaner interaction.

GGerardoFurtado
81% match
Loading thumbnail…

Sunburst with Distortion

This sunburst chart displays a hierarchical dataset (flare) using a radial partition layout. It shows the data’s structure as nested arcs, where each node’s arc size reflects its value. The chart supports interactive distortion: clicking a node repositions its siblings and rescales the clicked node to occupy 80% of its parent’s arc, with a 750-millisecond animated transition via `transition.attrTween`. The visualization is built with D3 v3, using `d3.layout.partition` and `d3.svg.arc` for geometry, and it renders as SVG.

Mmbostock
80% match
Loading thumbnail…

Sunburst Tutorial (d3 v4), Part 1

This tutorial demonstrates a basic d3.v4 sunburst visualization, showing hierarchical data as concentric arcs that encode node size through angular width. It uses an inline JSON dataset describing topics and subtopics, rendered as SVG paths via the `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with an ordinal color scale from `d3.schemeCategory20b`. The code walks through HTML setup, data structure, variable initialization, and SVG group transforms to center the chart.

FFrissAnalytics
79% match
Loading thumbnail…

Sunburst 2

This interactive sunburst diagram displays hierarchical data from the flare dataset, with each ring representing a level of the hierarchy and arc size proportional to node value. Clicking a node zooms into that branch, animating the layout through an SVG transition. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, with `transition.attrTween` handling the zoom animation and `d3.interpolate` for smooth arc morphing. Labels rotate and fade based on visibility, while a central circle resets the view.

HHgeginat
79% match
Loading thumbnail…

Sunburst Tutorial (d3 v4), Part 3

This sunburst chart demonstrates smooth animated updates and sibling sorting based on user-selected metrics. Built with D3 v4, it renders hierarchical data as an interactive radial layout in SVG, with radio buttons letting viewers toggle between size- and count-based encodings. The example uses d3.arc to save starting angle states (x0s, x1s) for tweening, sorts nodes by value via `.sort()`, and adds CSS to make labels non-selectable.

GGerardoFurtado
79% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data from the flare.json dataset, showing nested categories as concentric arcs. Users click a segment to zoom into that branch, with smooth animated transitions. Built with D3 v5, the visualization uses SVG paths and the d3.partition layout, d3.arc for arc geometry, and d3.transition with attrTween to animate between states. Colors derive from a scaleOrdinal with an interpolateRainbow palette.

BBhavyatulasi
79% match