Skip to main content
100%

ICE-6_PY_DATA_VIZ: Rendering Marks and Channel w/React

✓ Published1🌍 Public
PPY09052021
Last edited Mar 6, 2022
Created on Mar 4, 2022
Forked from React Starter

This example shows a horizontal bar chart comparing the horsepower of ten cars, using SVG marks and channels rendered through React components. It imports data from a CSV file with d3.csv, then uses d3.scaleBand and d3.scaleLinear to map car names and horsepower values to screen positions. The code generates axis ticks and gridlines manually with JSX, while React’s useState and useEffect manage asynchronous data loading. D3 v5 and React 16.13.1 work together to produce the visualization.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes