Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Bar Chart with Axes

Public visualization

Viewing a saved revision (read-only)

9b33de751c1c4c2ebdcbbe2d99f386f4

D3 Bar Chart with Axes

0 stars1🌍 Public
ZZoe Ferencova
Last edited Mar 8, 2023
Created on Mar 8, 2023

This example shows a horizontal bar chart of the top 10 countries by projected 2020 population, with country names on the y-axis and population counts on the x-axis. The chart uses React to manage state and the D3 v7 library’s `csv` loader to fetch United Nations population data from a GitHub gist. Scales are created with `scaleBand` and `scaleLinear`, while axes are drawn manually using SVG `<line>` and `<text>` elements, with gridlines derived from `xScale.ticks()`.

AI-generated description

Half way towards a smiley face.