Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

rendering Data with React & D3 with mouse over

Public visualization

Viewing a saved revision (read-only)

a2aabd06e3b44e8486942a8fad8bb77e

rendering Data with React & D3 with mouse over

0 stars0🌍 Public
Sseanowh
Last edited Aug 31, 2021
Created on Aug 31, 2021

This example renders CSS named color data as a donut chart using React and D3. It loads the dataset with `d3.csv` and stores it in React state, then uses a `pie` layout and `arc` generator to draw SVG paths. Mouse over and move handlers on the SVG update a tooltip via `d3.select` and `d3.pointer`, though the tooltip text and visibility behavior are only partially implemented. The chart positions each slice by its color’s hexadecimal value, with all slices given equal weight.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.