Tutorial Sunburst Datavisualisation

100%

Tutorial Sunburst Datavisualisation

✓ Published1🌍 Public

Last edited Nov 14, 2019

Created on Nov 11, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Tutorial Sunburst Datavisualisation

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.

MManoukK

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

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

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

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

82% match

Loading thumbnail…

Fork of Sunburst

This example visualizes a hierarchical dataset of network infrastructure using a sunburst diagram. Each ring represents a level in the hierarchy, from geographic regions down to individual server racks, with arc lengths proportional to the value counts. The visualization is built with D3 v5 and React, using `d3.partition()` to compute the layout and `d3.arc()` to generate the SVG paths. Colors are assigned per top-level branch via `d3.scaleOrdinal` and `d3.interpolateRainbow`, with labels shown for larger segments. The data is loaded from a JSON file and rendered into an SVG element.

Jjimmyjs1607

80% 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 learning demo

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.

GGabriel Munteanu

79% match