Skip to main content
100%

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 description
MIT Licensed

Similar vizzes