Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

Viewing a saved revision (read-only)

ce1a8bba2f594b5ca636f8949b26b96a

The Margin Convention

0 stars1🌍 Public
Llefat92
Last edited Aug 15, 2023
Created on Aug 14, 2023
Forked from Making a Bar Chart

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 10 most populous countries from a UN population dataset (2020 estimates). The code uses D3’s `csv` loader, `scaleBand`, and `scaleLinear` to position and size the bars within an inner plotting area defined by explicit margins, while React’s `useState` and `useEffect` manage data fetching and component state. All SVG elements are generated declaratively through React, with the root group translated by the margin values to align the chart inside the fixed 960×500 viewport.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities and uses React to render the data.