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 the top N countries by estimated population for a selected year, using a React front end with D3.js v5 for data processing and SVG rendering. Data comes from a UN population dataset loaded via `d3.csv`. The chart features horizontally oriented bars styled with CSS gradients and drop shadows, colored by continent, with dropdowns to change the year and number of countries shown. Axes are built with `d3.scaleBand` and `d3.scaleLinear`, and the bar widths stretch using an SVG `<animate>` element on load.
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