Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

The Margin Convention

0 stars1🌍 Public
AAlex Gomes
Last edited Mar 1, 2022
Created on Mar 1, 2022

This example demonstrates the margin convention for D3 visualizations in a React application. It displays a horizontal bar chart of the top 10 countries by 2020 population from UN data, loaded via d3.csv. The SVG rendering uses d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, with a margin object defining the inner plotting area. React state manages the async data loading, and the chart updates once the CSV parsing completes.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

Comments

Sign in to join the discussion.

MIT Licensed