Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Animated and Stylized Bar Chart

Public visualization

Viewing a saved revision (read-only)

2ad0fb8b8a354c7bb8ea08e06a756ba0

Animated and Stylized Bar Chart

0 stars1🌍 Public
PPeter Maida
Last edited Oct 1, 2020
Created on Sep 30, 2020
Forked from Stylized Bar Chart

This visualization displays the top 10 most populous countries as an animated bar chart with a stylized, non-proportional aesthetic. Using React with D3 v5, the chart renders SVG bar marks via the `Marks` component and includes reusable `AxisBottom` and `AxisLeft` components. Moving the mouse triggers the `onMouseMove` handler, which randomly increments or decrements a `randomVal` state, subtly distorting each bar’s width. Data comes from the 2019 United Nations World Population Prospects, loaded via D3’s `csv` function, with populations scaled linearly and formatted using D3’s `format` utility.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.