Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of activity 6_Task 1

Public visualization

Viewing a saved revision (read-only)

c353c2100be2452d88550351346cac1e

Fork of activity 6_Task 1

0 stars0🌍 Public
Ggouthamigongidi2457@gmail.com
Last edited Nov 15, 2024
Created on Nov 15, 2024

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, ranked by country name along the y-axis. The chart uses React to render SVG marks, with D3 v5’s `scaleBand` and `scaleLinear` to position bars and axes, and `format` to abbreviate population values (e.g., “B” for billions). Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with raw population values multiplied by 1,000. Axis components (`AxisBottom`, `AxisLeft`) and `Marks` are built as React components, and each bar includes a native SVG `<title>` tooltip.

AI-generated description

A demonstration of how to start using D3 version 6.