Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering data with React & D3

Public visualization

Viewing a saved revision (read-only)

f1b2e026f7eb4a31bd11df205e1dc1a3

Rendering data with React & D3

0 stars1🌍 Public
CChaz
Last edited Jan 18, 2022
Created on Jan 18, 2022

This example shows a color field of CSS named colors rendered as stacked horizontal bars, each bar’s background set to its corresponding hex value from a CSV dataset. Built with React and D3, it loads the data via D3’s `csv` function, stores it in React state, and maps each row to a `<div>` element. The code uses React’s `useState`, `useEffect`, and `useCallback` hooks, along with `ReactDOM.render` from React 16.9 and D3 v7.3, creating a simple data-driven visualization where each color occupies a 960-pixel-wide strip.

AI-generated description

A program that load in data about CSS named colors using D3 utilities, and uses React state to render the data.