Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bar Chart - 02 [Margins & Axis]

Public visualization

Viewing a saved revision (read-only)

be5bdc95d6e04d9f8d850e43309a4bda

Bar Chart - 02 [Margins & Axis]

0 stars1🌍 Public
EEhtisham UL Hassan
Last edited Nov 28, 2021
Created on Nov 28, 2021

This example presents a horizontal bar chart of the top 10 countries by population in 2020, encoded as SVG rectangles with margins applied around the plot area. It uses React to manage state and D3’s `scaleBand` and `scaleLinear` for positioning, plus `csvParse` to process UN population data fetched from a GitHub gist. A custom `loadData` function loads the CSV, while D3’s `ticks()` generates axis ticks and gridlines, with text labels for both x and y axes.

AI-generated description

Margins and Axis.