Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

activity 6_Task 1

Public visualization

Viewing a saved revision (read-only)

236d2c5a5e06490fa43a708c0365dc08

activity 6_Task 1

0 stars1🌍 Public
Cchandrikachowdary867@gmail.com
Last edited Apr 14, 2024
Created on Apr 11, 2024

This visualization displays the 2020 population estimates for 30 countries as a horizontal bar chart, with the x-axis formatted in billions using D3’s `format` function. The bars are rendered as SVG rectangles scaled by `scaleLinear` and `scaleBand`, while custom `AxisBottom` and `AxisLeft` components generate the tick marks and labels. The data is loaded from a CSV file via `d3.csv`, and hover tooltips show exact values through the native SVG `<title>` element. The chart is built with React and D3 v5, using `useState` and `useEffect` for data fetching.

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.