🌍 Public
Viewing a saved revision (read-only)
d4224b77ce734f8d810fc5f5f7d8d0fc
ICE-6: Rendering Marks and Channels with React & D3
This example renders a horizontal bar chart using React and D3 v5, displaying COVID-19 case counts for the top 20 countries. It loads CSV data via `d3.csv` and uses `scaleBand` for the categorical y-axis (country names) and `scaleLinear` for the quantitative x-axis (case numbers). React state manages the asynchronous data loading, while SVG `<rect>` marks are generated with JSX, and tick marks for both axes are manually built from `xScale.ticks()` and `yScale.domain()`. The chart is styled with green rectangles and red axis lines.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.