Fork of D3 v5 Zoomable Sunburst

100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public

Last edited Jan 6, 2021

Created on Jan 5, 2021

This fork of a D3.js v4 zoomable sunburst chart displays a donut (or pie) diagram built from a static, hard-coded dataset containing five named values. The visualization encodes each categorical value as an arc segment, using a custom ordinal color scale for distinct fills and black strokes with partial opacity for clarity. The implementation relies on the `d3.select`, `d3.pie`, `d3.entries`, `d3.scaleOrdinal`, and `d3.arc` APIs from the D3 v4 library to compute and render the paths inside an SVG container, with a fixed width and height of 450 pixels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of D3 v5 Sunburst diagram

This example shows a static, semi-circular sunburst or donut-style visualization of five categorical values (A–E), displayed as colored arcs radiating from a bottom-center origin. It uses D3 v4’s `d3.pie()` and `d3.arc()` to compute angular segments, with labels placed via `arc.centroid()` and colored using `d3.scaleOrdinal` with the `schemeTableau10` palette. The data is hardcoded as simple values in the script, and the SVG is scaled responsively via a viewBox.

LLiml

89% match

Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

This example visualizes a hierarchical dataset as a zoomable sunburst diagram. It displays the flare visualization toolkit's class hierarchy, where the size of each arc corresponds to a numeric value, and clicking on a segment zooms into that branch. The code uses D3 v5's `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `d3.scaleOrdinal` and `d3.interpolateRainbow` handle color encoding. Smooth zooming and panning animations are implemented via D3 transitions and `attrTween`, rendering the result as SVG.

JJonathan

85% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset using D3 v5. The visualization partitions data into a radial layout, with arcs representing nodes and their sizes proportional to values. Clicking an arc transitions the view to zoom into that node, re-scaling the partition layout and updating arc paths and labels. The code uses d3.hierarchy, d3.partition, and d3.arc for the layout and rendering, with d3.transition and attrTween animating the zoom. Colors are assigned via d3.scaleOrdinal with an interpolateRainbow range, and SVG text labels rotate and reposition dynamically.

SShdnShmli

85% match

Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through concentric ring segments. Clicking a node smoothly animates and re-scales the chart to focus on that branch, with the central circle resetting the view. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering, while `transition.attrTween` and `d3.interpolate` drive the animated transitions between zoom states. Color mapping uses `d3.scaleOrdinal` with `d3.interpolateRainbow`.

DDeclan Naughton

84% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset as concentric arcs, with clickable parent nodes that smoothly re-scale the layout for detailed exploration. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, while `transition.attrTween` animates arc geometry and label rotations over 750ms. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and node tooltips show ancestor paths and formatted values.

CChristianABeier

84% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst chart visualizes the hierarchical structure of the Flare dataset, with arcs color-coded by top-level category and sized by value. Clicking a segment rotates and scales the visualization to focus on that subtree, using D3 v5 transitions and `transition.attrTween` to animate arc geometry and label positions. The chart renders with SVG, leveraging `d3.hierarchy`, `d3.partition`, and `d3.arc`, while loading data asynchronously via the Observable standard library and `require`.

Bblueyjuice

84% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset, the Flare software package, with each arc segment sized proportionally to its value. Users click any arc to zoom in and explore nested categories, while a central circle resets the view. Built with D3 v7, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, with smooth transitions animated via `transition.attrTween` and `transition.tween`. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow` to distinguish top-level branches.

KKamal Bahadur Rana

83% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through nested arcs. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG, with an ordinal color scale based on `d3.interpolateRainbow`. Clicking a node triggers smooth animated transitions via `transition.attrTween` and `d3.interpolate`, rescaling arcs and labels to zoom into the selected branch. Labels rotate and reposition based on arc angles, and tooltips via `title` show full paths and numeric values.

Kksookdeo

83% match