Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React and D3

Public visualization

Viewing a saved revision (read-only)

a204b570bda14cba9f9b3550f75fb600

Axes with React and D3

0 stars0🌍 Public
MMaciek Sitkowski
Last edited Sep 23, 2020
Created on Sep 23, 2020

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered as SVG inside a React component. The visualization uses React state and hooks to load CSV data from a GitHub gist, then applies D3’s `scaleBand` and `scaleLinear` to position bars and generate axis ticks. Manually drawn grid lines and tick labels for both axes are created by mapping over `xScale.ticks()` and the y-scale’s domain, with a fixed margin convention shaping the inner chart area.

AI-generated description
  • D3 Margin Convention