Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity_6_Task1

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

ab0a9cf237cc439da0a70ba962e98c0e

Open

Activity_6_Task1

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

This visualization displays the top 30 countries by 2020 population using a horizontal bar chart rendered as SVG within a React application. The chart uses d3.scaleBand for the categorical country axis and d3.scaleLinear for the population values, with d3.format abbreviating numbers to billions. Data loads from a GitHub-hosted CSV file via d3.csv, and React hooks manage the asynchronous data fetching. Custom AxisBottom and AxisLeft components generate the axes, while Marks renders each bar with a tooltip showing the formatted population value.

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.