Fork of Fork of Bar Chart - React & D3 (Part 24) - Stylised
✓ Published0🌍 Public
Cchandrakalavanukuri
Last edited Mar 12, 2022
Created on Mar 12, 2022
This interactive bar chart visualizes student marks by name, with data drawn from estimated UN population statistics. Users can select a year and the number of top countries to display via dropdown menus. The visualization uses React with D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, which are animated on load using the `<animate>` element. Bars are stylized with linear gradients, drop shadows, and continent-based coloring, while tooltips appear via `<title>` elements.
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