Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

The Margin Convention

0 stars1🌍 Public
JJun Suzuki
Last edited Nov 16, 2021
Created on Nov 16, 2021

This example shows the population of the top 20 countries as a horizontal bar chart, using a tidy margin convention to position the chart within an SVG. The React app fetches UN population data with d3.csv, parses the 2020 column, and scales the bars with d3.scaleLinear and d3.scaleBand. Bars are rendered as SVG `<rect>` elements inside a translated `<g>` group, with loading state handled by React state and useEffect. The code uses `d3.max` to set the x-domain and includes d3.v7 and React 17.0.2 via CDN.

AI-generated description

A program that loads in data about CSS named colors using React to visualize the data as a radial burst.

Comments

Sign in to join the discussion.

MIT Licensed