Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

6de605fda4b446d3a4ab97b85f57b2d2

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

0 stars289🌍 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.