Skip to main content
100%

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

✓ Published289🌍 Public
Hhailiwang@my.unt.edu
Last edited Feb 28, 2022
Created on Feb 21, 2022
Forked from HTML Starter

This example shows the top 10 most populous countries in 2019 as horizontal bars, using React and D3 to render SVG marks and channels. The data is loaded from a CSV via `d3.csv`, then visualized with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes are drawn manually with `xScale.ticks()`, while `rect` elements encode population values by length. The React component uses `useState` and `useEffect` to fetch and manage the data asynchronously.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes