Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactoring - Barchart with margins and axes

Public visualization

Refactoring - Barchart with margins and axes

0 stars1🌍 Public
SShane Carey
Last edited Jan 26, 2021
Created on Jan 26, 2021

This example shows a horizontal bar chart of population data for the top 10 countries, using React to render SVG elements. The bars are created with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while custom components `AxisBottom` and `AxisLeft` generate the ticks and labels. Margins around the chart are defined in the main App component, and the data is loaded asynchronously from a CSV file using d3’s `csv` method. The bars include a tooltip via the SVG `title` element.

AI-generated description

loads data with d3 and react

Comments

Sign in to join the discussion.

MIT Licensed