Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

Viewing a saved revision (read-only)

f1462299dacb474e9974ce69b0ee50e2

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.