Week-6: In Class Exercise: Rendering Marks and Channels with React & D3
✓ Published2🌍 Public
Nnithish-1999
Last edited Mar 7, 2022
Created on Mar 6, 2022
This example visualizes carbon dioxide emissions in thousand metric tonnes for the top ten U.S. states during electricity generation in 2019, using a horizontal bar chart rendered with React and SVG. The chart displays state names on the y-axis and emission values on the x-axis, with blue tick lines for the quantitative scale. The code loads CSV data via `d3.csv`, applies a row-parsing function to convert emissions to numbers, and constructs the visualization using `scaleBand`, `scaleLinear`, and `max` from D3 v5. React state management with `useState` and `useEffect` handles data loading, while React components generate the SVG marks and gridlines.
AI-generated descriptionMIT Licensed