Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

Viewing a saved revision (read-only)

5924ead779934df18616e190ae6c97f8

The Margin Convention

0 stars1🌍 Public
SShmuel Leider
Last edited Jun 3, 2021
Created on Jun 3, 2021

This example displays a horizontal bar chart of the top 10 countries by projected 2020 population, encoded as SVG rectangles. The chart uses D3's `scaleBand` and `scaleLinear` to map categorical country names and numerical population values to pixel coordinates. It loads data from a CSV file via `d3.csv` and renders the visualization with React, applying a margin convention to position the plot area within the SVG canvas. The bars are drawn using the `rect` SVG element, with dimensions derived from the scales.

AI-generated description

A program that loads and parses csv data about CSS named colred using D3 utilities, and uses React render the data.