Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React D3

Public visualization

Viewing a saved revision (read-only)

ae10906c7a6343eabb8d6f8245e9bbc2

React D3

0 stars0🌍 Public
DDom
Last edited Apr 6, 2021
Created on Apr 5, 2021
Forked from React Starter

This example visualizes the 15 countries with the largest Christian populations using a horizontal animated bar chart. The chart displays country names on the y-axis and population counts on the x-axis, with bars animating in sequence based on their respective values. Built with React and D3 v6, the code uses `useState` and `useEffect` hooks to fetch and process CSV data from the Pew Research Center via `d3.csv`, then applies `d3.scaleBand` and `d3.scaleLinear` for position encoding. SVG rectangles animate their widths using native `<animate>` elements with timing based on a custom `xScaleTime` mapping, while `d3.format` handles tick label abbreviations.

AI-generated description

React Starter code.