Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Visualisng Data with React and D3

Public visualization

Visualisng Data with React and D3

0 stars1🌍 Public
SShane Carey
Last edited Jan 22, 2021
Created on Jan 22, 2021

This example visualizes the CSS named colors dataset, rendering each color as a thin horizontal strip stacked vertically to form a full spectrum. Using React for component state and rendering, it loads the CSV data with the `d3.csv` method. While the data is loading, a large “Loading” message displays; once loaded, each row maps to a div whose background color corresponds to the “RGB hex value” field, producing a 960-pixel-wide color gradient bar. The visualization demonstrates a straightforward integration of React’s `useState` and `useEffect` hooks with D3’s data-loading API, with all output as HTML divs rather than SVG.

AI-generated description

loads data with d3 and react

Comments

Sign in to join the discussion.

MIT Licensed