Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

componentizing react bar 2 margins w/ axis

Public visualization

Viewing a saved revision (read-only)

b9fbe7309aba4b6eb8847e55016e8466

componentizing react bar 2 margins w/ axis

0 stars1🌍 Public
MMalcolm Mead
Last edited Jan 19, 2022
Created on Jan 19, 2022

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG using React components. It demonstrates how to decompose a visualization into reusable pieces: the bottom axis, left axis, and bars are each separate React functions. The code uses D3's `scaleBand` for the categorical country axis and `scaleLinear` for the continuous population axis, with data fetched from a CSV URL. The margins and inner plot area are explicitly calculated, and the axes are drawn with white gridlines and blue text labels.

AI-generated description

A bare minimum HTML page.