Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Margin Convention with React & D3

Public visualization

Viewing a saved revision (read-only)

f6ce4099d7694d34b40d66663b73e77b

Margin Convention with React & D3

0 stars1🌍 Public
JJohn Jeevasaeyan
Last edited Sep 9, 2021
Created on Sep 9, 2021

This example loads United Nations population data from a CSV file and renders it as a horizontal bar chart using React and D3. The visualization displays the top ten countries by 2020 population, with bar widths proportional to population values and y-axis positions determined by country names. The React component manages the data fetching and state, while D3 utilities handle CSV parsing, linear scaling for the x-axis, and band scaling for categorical y-axis placement. The SVG output respects a margin convention around the plot area.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!