Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ACT6-TUTORIAL1

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

524c55933d8f4a969de39c74e7b5b2c1

Open

ACT6-TUTORIAL1

0 stars1🌍 Public
RRayabarapu Nikhitha
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This bar chart displays the population of 30 countries for the year 2020, using horizontal bars ranked by country name. The visualization, built with React and D3 v5, loads CSV data via `d3.csv` and scales the bar lengths with `scaleLinear`, while `scaleBand` positions the categorical y-axis. Custom `AxisBottom` and `AxisLeft` components render SVG ticks and labels, with population values formatted in billions using `d3.format`. Tooltips appear on hover through SVG `<title>` elements, and the chart includes a green bar fill with blue axis lines.

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.