🌍 Public
Viewing a saved revision (read-only)
d14b30e9372a46dc80d4aa4cba8b49e0
Selection list with group filter
A horizontal bar chart displays the top economies by GDP, filterable by World Bank country classifications through a select dropdown. The selection list, populated from a TSV file using d3.tsv and d3.nest, groups countries by codes like “Arab World” and “Euro area.” React state updates the chart data, and d3.scaleBand, d3.scaleLinear, d3.axisLeft, and d3.axisBottom render the SVG bars and axes, with GDP values from World Bank data shown in current U.S. dollars.
AI-generated descriptionES6 modules, React Hooks, D3 CSV parse, Making a bar chart
Data found on World Bank https://data.worldbank.org/
- https://data.worldbank.org/indicator/NY.GDP.MKTP.CD
- https://data.worldbank.org/indicator/SP.POP.TOTL
Found and added some data about the classifications used:
Video tutorials
- 26:04 Customizing Axes of a Bar Chart with D3.js https://www.youtube.com/watch?v=c3MCROTNN8g
- 9:56 Multiple files with ES6 modules
- 6:08 Loading CSV Data with React Hooks and D3
- 29:00 Making a Bar Chart with D3.js and SVG [Reloaded]