Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Pie Chart with Overlapping Labels

Public visualization

Viewing a saved revision (read-only)

90d43c8b02d842d89af77770a544620d

Pie Chart with Overlapping Labels

0 stars0🌍 Public
Uubl2
Last edited Mar 28, 2022
Created on Mar 23, 2022
Forked from HTML Starter

This pie chart displays the GDP of ten countries, with each slice labeled directly on the chart. The labels, however, overlap when slices are narrow or adjacent. The visualization uses D3 v4 with SVG rendering. It creates the pie layout with `d3.pie()` and draws slices using `d3.arc()`. Text labels are positioned via `arc.centroid()` and styled with Arial font. Countries and their GDP values are hardcoded, and slice colors come from a `d3.scaleOrdinal()` with a predefined color range.

AI-generated description

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

See also React Starter.