Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

The Margin Convention

0 stars1🌍 Public
Ddiska432
Last edited Jul 5, 2023
Created on Jul 5, 2023

This example demonstrates a horizontal bar chart of the top 10 most populous countries in 2020, using D3 scales to map population counts to bar widths and country names to vertical positions. The chart applies the margin convention, translating the SVG group by a fixed margin so the bars fit within the inner chart area. React state manages the fetched CSV data, loaded asynchronously via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` handle the scales, and SVG `<rect>` elements render each bar.

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