Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of ICE-6: Rendering Marks and Channels with React & D3

Public visualization

Viewing a saved revision (read-only)

1bc7101e8d7f41a7a935ec3ea7cbdd87

Fork of ICE-6: Rendering Marks and Channels with React & D3

0 stars0🌍 Public
SSamanvitha1
Last edited Jun 26, 2022
Created on Jun 26, 2022

This bar chart displays COVID-19 case counts for the top 20 countries, ranked by their reported infections on January 28, 2020. Using React with D3 v5, the visualization renders SVG rectangles scaled by population data from a CSV file, with D3’s `scaleBand` and `scaleLinear` mapping country names and case values. Axis ticks and labels are generated manually via `.map()` and React elements, while the data is loaded asynchronously with `d3.csv`. The chart shows a horizontal bar layout with green rectangles and red gridlines, highlighting comparative case volumes across countries at that early pandemic date.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.