Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Placing text within a arc year calendar

Public visualization

Viewing a saved revision (read-only)

65686aaa4431481eabaaa67e49a9ed38

Fork of Placing text within a arc year calendar

0 stars0🌍 Public
LLiml
Last edited Apr 20, 2024
Created on Apr 16, 2024

This example shows a donut chart displaying twelve months of the year as colored arcs, with month names placed along the curved paths of the arcs. The code uses D3.js v3 with d3.svg.arc and d3.layout.pie to generate the chart, while d3.scale.linear with d3.interpolateHcl creates a color gradient from blue to dark teal. Labels are positioned using SVG textPath elements along invisible arcs, with a JavaScript conditional that flips the arc direction for labels below the horizontal midpoint so they read upright. The chart uses placeholder data with each month having a value of 12, rendered as an SVG in a React context.

AI-generated description

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

See also React Starter.