Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

the margin convensiion

Public visualization

Viewing a saved revision (read-only)

db2b8cb26b61477a95128ed229b95578

the margin convensiion

0 stars1🌍 Public
Sseanowh
Last edited Sep 1, 2021
Created on Sep 1, 2021

This example displays a horizontal bar chart of the top 10 countries by population in 2020. The view encodes population values as bar lengths using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical country labels on the y-axis. Data loads asynchronously from a CSV via `d3.csv`, with React’s `useState` and `useEffect` managing the fetching and rendering cycle. The SVG output respects a fixed margin convention by translating a `<g>` element to offset the chart area.

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.