Skip to main content
100%

Two-Layer Donut Chart

✓ Published0🌍 Public
HHayat Hasan
Last edited Jul 10, 2023
Created on Jul 10, 2023
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes