Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Barchart v2 w/ React & D3

Public visualization

Barchart v2 w/ React & D3

0 stars1🌍 Public
SSophia Cofone
Last edited Jun 29, 2022
Created on May 20, 2022

This example shows a horizontal bar chart of the top ten countries by projected 2020 population, with labeled axes and gridlines drawn as SVG elements. It uses React hooks (useState, useEffect) to fetch and transform CSV data from a GitHub gist, then leverages d3.scaleBand and d3.scaleLinear for positioning and scaling. The chart renders entirely through React’s declarative JSX, while d3 provides the data parsing (csv) and scale/domain calculations. Loading state is shown with a large “Loading…” text until data arrives.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed