Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity6_Task1

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

0b1da997bf3547cd813847cd55d223fc

Open

Activity6_Task1

0 stars0🌍 Public
Ggnanendra097@gmail.com
Last edited Apr 5, 2024
Created on Apr 3, 2024
Forked from Hello VizHub

This visualization shows the top 30 countries by population in 2020 using a horizontal bar chart built with React and D3 v5. Each bar’s length encodes population via a linear scale (`d3.scaleLinear`), while countries are positioned along a band scale (`d3.scaleBand`). The code fetches CSV data from a GitHub repository, formats population values, and renders SVG rectangles with tooltips. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle axes and marks, with axis tick formatting converting values to billions using `d3.format`.

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.