Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Margin convention

Public visualization

Margin convention

0 stars1🌍 Public
Ssurikmeetr
Last edited Mar 8, 2021
Created on Mar 8, 2021

This example demonstrates a bar chart of the top 10 most populous countries in 2020, using a margin convention to offset the chart area within the SVG canvas. The visualization is built with React and D3 v6, where D3 utilities load the UN population data from a CSV and compute the band scale and linear scale for the axes. The SVG rendering positions the grouped `<rect>` elements inside a translated `<g>` element, with margins applied to keep the chart clear of the canvas edges.

AI-generated description

loading data about css colors with d3 utilities and using react to render data.

Comments

Sign in to join the discussion.

MIT Licensed