Skip to main content
100%

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

✓ Published1🌍 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:

MIT Licensed

Similar vizzes