🌍 Public
Dataviz 2020_Ep20 - 12. Rendering Data Basics (with React and D3)
MMinwoo Pak
Last edited Jun 10, 2021
Created on Jun 10, 2021
This example renders a horizontal striped chart of CSS named colors, with each row displaying the RGB hex value directly as its background color. The visualization loads the data from a CSV file hosted as a GitHub gist using D3’s `csv` utility, while React manages the component state and conditional rendering. A `useEffect` hook triggers the asynchronous data fetch, showing a loading message until the data arrives, then maps each color entry to a div with fixed dimensions and a backgroundColor style. The code demonstrates a basic integration of React and D3 for data loading and DOM rendering.
AI-generated descriptionA program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.
MIT Licensed
Comments
Sign in to join the discussion.