Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ACTIVITY8

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

b0e269d34a3e48949907f912731537c9

Open

ACTIVITY8

0 stars0🌍 Public
Sshaiksajidali
Last edited Apr 10, 2024
Created on Apr 9, 2024
Forked from Hello VizHub

This interactive scatter plot ranks the top 30 countries by population in 2020, rendered as horizontal bars using SVG. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to screen positions, while custom `AxisBottom` and `AxisLeft` components generate tick marks. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values formatted in billions using `d3.format`. A tooltip appears on hover, displaying each bar’s population in abbreviated form.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.