Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

Viewing a saved revision (read-only)

9ee46bd7562e4e9793f48b474b06920b

The Margin Convention

0 stars1🌍 Public
JJenna Hamza
Last edited Jan 3, 2023
Created on Jan 3, 2023
Forked from pathetic bar chart

This example visualizes the first ten countries from the UN Population 2019 dataset as a horizontal bar chart, showing each country’s population. The chart is rendered as an SVG within a React component, with the data loaded via `d3.csv`. The visualization uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis, while the layout respects a fixed margin convention with 20-pixel insets on all sides. A status message first displays the dataset’s row and column counts before the bars appear.

AI-generated description

Loads in data [data about CSS named colors] (https://gist.githubusercontent.com/jhamza91/65b9f2c695f1e802e483143f5eb1b73c/raw/cssNamedColors.csv) using d3 uses React to keep track of state of data as a radial burst.