Skip to main content
SimilarExport ZIP
100%

Nested Donut Chart Example

✓ Published0🌍 Public
KKamol Krishna Debnath
Last edited Jul 13, 2023
Created on Jul 8, 2023
Forked from HTML Starter

This example uses a hierarchical dataset of topics and subtopics to render a multi-level nested donut chart in SVG. The D3.js partition layout arranges arcs for each layer, with custom radius adjustments in the arc generator distinguishing depth levels; the outer month wheel uses a separate pie layout. Color fills vary per parent topic, while click handlers on each arc display names, and labels are positioned through a custom transform function.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Two-Layer Donut Chart

This example shows a two-layer donut chart made with D3.js v6 in an SVG, displaying two concentric rings that each represent different categorical data sets. The outer ring uses categories A, B, and C, while the inner ring shows categories D and E, with labels placed at each arc’s centroid. It works by applying `d3.pie()` to two distinct data arrays and generating arcs with `d3.arc()` using different inner and outer radius values. A categorical color scale (`d3.scaleOrdinal`) assigns distinct colors to each segment, and the chart is rendered entirely with SVG elements.

HHayat Hasan
81% match
Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans
80% match
Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza
80% match
Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07
80% match
Loading thumbnail…

Donut-Pie Chart

This donut-pie chart visualizes hierarchical data from a CSV file, showing current statuses in the outer donut ring and prior statuses in the inner pie, with color coding for New, Open, Reopened, and Closed categories. Built with d3.v3, it uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to aggregate and structure the data, rendering as SVG. The outer arc and inner wedge paths are styled with distinct radii, and labels are positioned via arc centroids.

TThanaporn-sk
78% match
Loading thumbnail…

Untitled

A donut chart displays the distribution of a small dataset with categories a through e, each rendered as a colored arc segment. The visualization uses D3's `pie` function to compute angular values from object entries, with `arc` paths using inner and outer radii. Label lines and text annotations are positioned via `arc.centroid` calculations and polar-coordinate adjustments. The SVG output is generated through a React rendering pipeline, using `scaleOrdinal` for categorical color mapping and `join` for declarative element creation.

Ssubratanp
77% match
Loading thumbnail…

Donut of Rendering Data with React & D3

A donut chart displays CSS named colors as equal-sized slices, with each slice filled by its corresponding hex value. The entire donut rotates continuously, creating a slow animation driven by a React interval updating state. D3’s `arc` and `pie` utilities compute the slice geometries from CSV data loaded via `d3.csv`, while React renders the SVG paths. The visualization uses React hooks (`useState`, `useEffect`, `useRef`) to manage the animation loop and data fetching from a gist URL.

HHarr
77% match
Loading thumbnail…

Donut Chart

This donut chart displays six categorical segments arranged in a circular ring, with each slice sized proportionally to its value and distinguished by a unique color. The visualization uses static SVG paths with hardcoded coordinates to define the arc shapes, and a white circle overlay to create the donut hole effect. Rendered as a standalone React component, the chart is built with native SVG elements rather than a charting library, making it a lightweight, dependency-free example of hand-crafted data visualization.

Xxyzcorrupt@gmail.com
77% match