Skip to main content
SimilarExport ZIP
100%

Tutorial Sunburst Datavisualisation

✓ Published0🌍 Public
MManoukK
Last edited Nov 18, 2019
Created on Nov 18, 2019

This sunburst chart visualizes a categorical dataset of weapon types, showing hierarchical proportions through concentric arcs. The D3.js v4 code uses `d3.partition` and `d3.arc` with a `d3.hierarchy` structure, rendered as SVG paths from a sample dataset defining topics and sub-items. A dark background provides contrast for the color-coded segments. The example primarily demonstrates how to construct a sunburst layout programmatically rather than displaying the full provided data.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Tutorial Sunburst Datavisualisation

This tutorial demonstrates a sunburst chart built with D3.js (v4), visualizing hierarchical data where each node is represented as a ring segment. The visualization uses the `d3.partition()` layout and `d3.arc()` to compute angular and radial positions for each slice, with colors assigned via `d3.scaleOrdinal` and a Category20b color scheme. Node data, including topics and sub-topics, is hardcoded in the script, and rendered as SVG paths within a group element. The example also includes a CSV file with weapon-type counts, though the chart currently displays the static nodeData structure rather than loading that external data.

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

D3 sun-burst graph

This example shows a sunburst visualization built from a small hierarchical dataset, where each ring segment represents a node in the tree and its angular width is proportional to the node’s value. The code uses D3 v7’s `d3.hierarchy`, `d3.partition` layout, and `d3.arc` to generate the radial paths, with semi-transparent dark fills and white strokes separating segments. While labels are commented out, the structure (root A1 with children B1 and B2, and nested leaves C1–D1) is clearly visible. The SVG is sized to the container and translated to center the chart.

SSubhendu Karmakar
80% 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…

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

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays a hierarchical dataset from the Observable “flare” library. The circular treemap partitions data by category and subcategory, with each arc’s size reflecting the value. Clicking an arc smoothly zooms to that node, re-centering the layout and fading out unrelated segments, using `d3.hierarchy`, `d3.partition`, and `d3.arc` for geometry and `transition.attrTween` for animation. The SVG output is styled with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color, while labels and tooltips are generated via D3 selections.

Ccochis
79% match