🌍 Public
Viewing a saved revision (read-only)
28126001ced7409ea67521582df7ae84
Fork of Fork of Pathetic Bar Chart
This interactive bar chart displays the top 10 most populous countries in 2020 using data from the UN Population 2019 dataset. It uses React to manage the loading state and D3.js (v5) to render the SVG, with bars that animate to their final widths and population labels that slide in. The chart formats population numbers, includes grid lines, and sorts countries in descending order.
AI-generated descriptionUN Population Bar Chart
An interactive bar chart visualization showing the top 10 most populous countries based on 2020 UN population data.
Features
- Responsive Design: Clean, modern interface that works across devices
- Animated Bars: Smooth transitions when the chart loads
- Formatted Labels: Population numbers displayed with readable formatting (e.g., "1.4B" for billions)
- Grid Lines: Easy-to-read grid lines for better data interpretation
- Error Handling: Proper loading states and error messaging
- Sorted Data: Countries automatically sorted by population in descending order
Technologies Used
- React 16.9
- D3.js 5.11 for data visualization and DOM manipulation
- Modern ES6+ JavaScript
- CSS3 with modern styling
Data Source
Population data is sourced from the UN Population 2019 dataset, using the 2020 population projections.
Running the Project
- Serve the files using a local web server
- Open index.html in a modern web browser
- The chart will automatically load and display the data
Improvements Made
- Added proper margins and padding for better readability
- Implemented smooth animations for visual appeal
- Added comprehensive labels and formatting
- Included grid lines for easier data interpretation
- Improved error handling and loading states
- Enhanced typography and color scheme
- Made the visualization more accessible with proper semantic HTML
- Added data sorting to show the most relevant information first