Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity 6 Tutorial 1

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

31b6f596a7a24b99880a81532b0c4f1c

Open

Activity 6 Tutorial 1

0 stars0🌍 Public
BBamanGayathri
Last edited Oct 18, 2024
Created on Oct 18, 2024
Forked from Hello VizHub

This example presents a horizontal bar chart showing the 2020 population for 30 countries. The visualization uses D3 v5 for data loading and scaling, with React components for rendering each SVG element. D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions, while custom `AxisBottom`, `AxisLeft`, and `Marks` components generate the tick marks and bar rectangles. The data is fetched from a CSV file using D3’s `csv` function, and tooltips display formatted population values.

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.