Skip to main content
SimilarExport ZIP
100%

SunBurst

✓ Published0🌍 Public
Vvivianaaai@qq.com
Last edited Nov 13, 2023
Created on Nov 13, 2023
Forked from D3.js 教程

This sunburst chart visualizes the population distribution of Xinjiang’s administrative regions, using nested arcs to show hierarchy from the province level down to districts and counties. The code relies on d3.arc for the ring segments, d3.partition with a size of [2*Math.PI, 500] to compute the layout, and d3.hierarchy to structure the JSON data. Each segment’s fill color is derived from the top-level region via a scaleOrdinal palette, and text labels are rotated and positioned to fit within the arcs.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Icicle

This icicle chart visualizes the population hierarchy of Xinjiang, China, using a d3.partition layout. The data is loaded from a JSON file and structured with d3.hierarchy, with node sizes proportional to population values. Each rectangle is colored by its top-level region using a d3.scaleOrdinal with the schemeCategory10 palette, while text labels appear on larger nodes. The visualization renders in SVG, with both rectangles and labels positioned according to the partition’s computed coordinates.

Vvivianaaai@qq.com
78% match
Loading thumbnail…

Tree

This example visualizes the hierarchical structure of Xinjiang’s administrative divisions and their populations using a vertical tree layout. Each node is a circle colored by its top-level prefecture, with links drawn via `d3.linkVertical` and text labels rotated vertically. The code uses `d3.hierarchy` and `d3.tree` to compute positions, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders output as SVG. Population data comes from the embedded `xinjiang.json` file.

Vvivianaaai@qq.com
77% 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
74% 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
74% match
Loading thumbnail…

Sunburst

A sunburst chart displays the hierarchical structure of the Flare dataset, with each ring segment representing a category and its subcategories, sized by numeric value. The visualization uses D3 v5’s `d3.partition` and `d3.arc` to compute and draw the radial layout, with SVG paths filled by a rainbow scale applied to top-level branches. Labels are rotated and placed conditionally based on arc size, and each segment includes a hover tooltip showing the full ancestor path and value.

苏苏巨亮
73% 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
73% 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
72% 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
72% match