Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

activity 6 task 1

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

8bf2aebe5c5a4b9da5ff6df12f63315a

Open

activity 6 task 1

0 stars0🌍 Public
AAamani Chamarthi
Last edited Oct 23, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This horizontal bar chart displays the 2020 populations of 30 countries, sorted from largest to smallest. The visualization loads data from a CSV file via `d3.csv`, processes it with React state management, and renders the chart using SVG. D3’s `scaleBand` and `scaleLinear` map countries to horizontal bars, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the ticks and rectangles. The x-axis labels are formatted using `d3.format` with a custom function that converts gigabytes to billions.

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.