Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactored Bar Chart

Public visualization

Refactored Bar Chart

0 stars1🌍 Public
PPeter Krevenets
Last edited Mar 16, 2021
Created on Mar 14, 2021

This example shows a horizontal bar chart of United Nations world population data for 2020, listing the top 11 countries sorted by population. The visualization uses React to render SVG elements, with D3.js v6 providing the `scaleBand` and `scaleLinear` functions to map data to coordinates. The `useData` hook asynchronously fetches and parses a CSV file via D3’s `csv` method, while separate components (`Marks`, `AxisBottom`, `AxisLeft`) encapsulate the bars, x-axis, and y-axis. A minimal loading state appears until the data is ready.

AI-generated description

Using United Nations World Population Data 2019 and React to render a bar chart with margins, axes & labels - all refactored.

Comments

Sign in to join the discussion.

MIT Licensed