Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Bar Chart - React & D3 (Part 24) - Stylised

Public visualization

Viewing a saved revision (read-only)

0635082a4606428b912b229e5ac3f381

Fork of Bar Chart - React & D3 (Part 24) - Stylised

0 stars1🌍 Public
RRahulSai05
Last edited Mar 12, 2022
Created on Mar 10, 2022

A stylized bar chart displays estimated UN population data by country for selectable years, ranking a user-chosen number of countries by population. The chart uses React hooks to manage state and CSS transitions for animated bar growth. Built with D3 v5 scales and SVG rendering, bars are colored by continent and given a 3D shadow effect via SVG filters and linear gradients. Population values are formatted with d3.format abbreviations, and data comes from a CSV loaded using d3.csv.

AI-generated description

A program that creates a bar chart based on estimated UN Population levels.


Extras:

  • Dynamic Selection
    • Select any year between 1950 and 2020
    • Select a variable number of countries to return
  • The continents of the countries are drawn in different colors to show how the global population is roughly distributed
  • Bars formatted to look 3D and border effects (as per the previous fork)

Potential Improvements for later:

  • Formatted tooltip on multiple lines
  • Animation when the dropdowns are selected rather than only happening on initial loading

Tutorials:

Other Documentation: