Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

Viewing a saved revision (read-only)

d91af933eb754276a74b033a4f0dfd11

The Margin Convention

0 stars1🌍 Public
Aalexandermodell
Last edited Feb 24, 2022
Created on Feb 24, 2022

This example presents a basic bar chart using a horizontal layout, displaying the top ten countries by population for 2020. The bars are drawn as SVG rectangles, with their lengths proportional to each country's population value. The chart's position within the viewport is controlled by a fixed margin on all sides, demonstrating the standard convention of reserving space for axes and labels. The code loads data from a CSV file using D3's `csv` utility, then uses D3's `scaleBand` for the categorical country axis and `scaleLinear` for the quantitative population axis. React manages the rendering of the SVG elements, while D3 handles the data loading and scaling.

AI-generated description

A program that loads in some data using D3 utilities, and uses React render the data.