Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Pie Chart with React

Public visualization

Viewing a saved revision (read-only)

2ff6ec0e164146deafa081f8934f51d4

Pie Chart with React

0 stars2🌍 Public
CCurran Kelleher
Last edited Apr 15, 2025
Created on Apr 15, 2025

This example demonstrates how to build an interactive pie chart using React and D3.js. It visualizes categorical data from a CSV file, showing the distribution of letters A through G with corresponding count values. The chart displays colored pie segments with letter labels, alongside a legend that shows each letter and its count. Users can click on either pie segments or legend items to highlight a specific category, dimming the others. The implementation uses D3's `pie` and `arc` generators for creating the pie geometry, `scaleOrdinal` for color mapping, and React's `useRef` and `useState` hooks for managing state and rendering with the `ResizeObserver` to handle responsive dimensions.

AI-generated description