Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity 6_Task 1

Public visualization

Viewing a saved revision (read-only)

5a36340809374249a6da111f54ed749f

Activity 6_Task 1

0 stars1🌍 Public
Kkamalini.ponnuru11@gmail.com
Last edited Oct 16, 2024
Created on Oct 16, 2024
Forked from Hello VizHub

This example shows a horizontal bar chart of the 2020 populations for the top 30 countries, using a dataset of country-level population values from a CSV hosted on GitHub. The bars are drawn as SVG `<rect>` elements, with axes rendered using custom components that leverage D3’s `scaleBand` and `scaleLinear` to map country names and population numbers to screen coordinates. The visualization is built with React, using D3 v5 for data loading and scaling, and follows a tidy narrative. Tooltips reveal the exact population value (in billions) when hovering over each bar.

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.