Fork of Bar Chart - React & D3 (Part 24) - Stylised
✓ Published0🌍 Public
RRahulSai05
Last edited Mar 10, 2022
Created on Mar 10, 2022
Forked from Bar Chart - React & D3 (Part 24) - Stylised
This interactive bar chart displays estimated UN population levels for the top N countries in a selected year, with bars color-coded by continent to reveal global population distribution. Users can dynamically adjust both the year (1950–2020) and the number of countries shown via dropdown menus. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for layout, SVG `<rect>` elements with linear gradients and drop-shadow filters for a stylized 3D effect, and loads data from a CSV file processed through D3's `csv` method.
AI-generated descriptionA 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