one
This interactive world map visualizes renewable energy usage and CO₂ emissions for 12 major countries in 2024. Users toggle between the two metrics via buttons, triggering smooth color transitions across the geography. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render countries from TopoJSON data, while d3.scaleSequential with interpolateGreens and interpolateReds drives the color encoding. Hover tooltips display detailed country statistics via mouse events. The SVG rendering includes an ocean-colored sphere background and grayscale borders for non-data countries.
AI-generated descriptionWorld Energy & Emissions Map (2024)
A D3.js visualization showing renewable energy usage and carbon emissions by country.
Features
- Interactive world map with country-level data
- Toggle between two metrics: Renewable Energy % and CO₂ Emissions
- Hover tooltips showing detailed country information
- Smooth color transitions when switching metrics
Usage
Open index.html in a web browser to view the map.
Data
The visualization includes data for 12 major countries:
- USA, China, India, Germany, Brazil, Canada, Australia, France, Japan, UK, South Korea, Italy
Technologies
- D3.js v7 for visualization
- TopoJSON for geographic data
- Vanilla JavaScript (ES6 modules)