Skip to main content
100%

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

✓ Published0🌍 Public
Yyvarshachowdary@gmail.com
Last edited Mar 20, 2024
Created on Mar 20, 2024

This example visualizes the first 20 rows of a COVID-19 dataset, comparing countries by their population using a horizontal bar chart rendered with React and D3. It shows population values as the bar length and country names as the categorical y-axis labels, with a linear x-axis for the population scale. The code uses React hooks like `useState` and `useEffect` to fetch and parse the CSV data via `d3.csv`, then applies `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Grid lines are drawn as SVG elements, and bars are rendered as `rect` marks, with axes and ticks manually positioned using D3’s scale methods.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes