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)

7056b26ac78e4bbdb71e2f859b84aee5

Open

activity 6_Task 1

0 stars0🌍 Public
NNagalakshmi Thota
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, with bars sorted by population. It renders as an SVG using React and D3 v5, loading data from a CSV file via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with tooltips formatted using `d3.format`. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the SVG elements.

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.