Two-Layer Donut Chart
✓ Published0🌍 Public
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 descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
MIT Licensed