Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity_6Task_1

Public visualization

Viewing a saved revision (read-only)

9deb17e22b374ec9a5228e4272475e03

Activity_6Task_1

0 stars0🌍 Public
AAbrarb702@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This example shows a horizontal bar chart of the populations of 30 countries in 2020, ordered by country name along the y-axis. Each bar’s length encodes the population value, with an axis label reading “POPULATION-2020” and formatted tick values using D3’s `format` function to abbreviate billions as “B”. The visualization uses React components (AxisBottom, AxisLeft, Marks) to render SVG elements, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded asynchronously from a remote CSV file using `d3.csv` in the custom `useData` hook, and countries are sliced to the first 30 rows.

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.