Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React and D3

Public visualization

Viewing a saved revision (read-only)

45fc23c3ed914ad9ba32642d79cf8cd7

Axes with React and D3

0 stars1🌍 Public
Fforcox43
Last edited Sep 8, 2020
Created on Sep 4, 2020

This example visualizes the top 10 countries by 2020 population as horizontal bars, displaying the data as text labels and bars using React components and D3 scales. The code builds SVG elements from scratch, using `scaleBand` for the y-axis country labels and `scaleLinear` for the x-axis population values, with axis ticks rendered manually. It loads UN population data from a CSV file via `d3.csv` and uses React hooks like `useState` and `useEffect` to fetch and render the data, with the final chart presented as an interactive SVG graphic.

AI-generated description

A program that loads and parses some CSV data: CSS Named Colors.