Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Lesson 7: Rendering data with React & D3

Public visualization

Lesson 7: Rendering data with React & D3

0 stars1🌍 Public
MMarcin Stepniak
Last edited May 11, 2021
Created on May 10, 2021

This example renders the MDN CSS named colors dataset as a pie chart, with each slice filled by its corresponding color hex value. Using React hooks, the code loads CSV data with `d3.csv` and stores it in state, while D3’s `pie` generator and `arc` function compute the slice geometry. The chart draws SVG `<path>` elements inside a `<g>` group, showing how React manages the component lifecycle and D3 handles the layout calculations.

AI-generated description

Loading data with React & D3

Data source: A dataset from MDN CSS colors: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Uses react to render data

Comments

Sign in to join the discussion.

MIT Licensed