Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity 6_Task 1

Public visualization

Viewing a saved revision (read-only)

7c62428dc29a4cb98a4655b4d21b9522

Activity 6_Task 1

0 stars0🌍 Public
Nneerajreddyaluka@gmail.com
Last edited Apr 12, 2024
Created on Apr 12, 2024
Forked from Hello VizHub

This visualization displays the populations of 30 countries for the year 2020 as a horizontal bar chart, with each bar’s length proportional to its population value. The chart is rendered as an SVG using React components, with D3 v5’s `scaleBand` and `scaleLinear` handling the y-axis categories and x-axis scaling respectively. Population values are formatted with D3’s `format('.2s')` to abbreviate large numbers, converting gigabytes to billions for tick labels. The data is loaded via `d3.csv` from a GitHub-hosted CSV file, and axis ticks and bars are styled with custom CSS classes.

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.