Skip to main content
SimilarExport ZIP
100%

Global Tons of CO2 Emissions Per Year V4

✓ Published1🌍 Public
BBrian Hulbert
Last edited Nov 6, 2025
Created on Oct 30, 2025

This interactive choropleth map displays global CO2 emissions per country from 1850 to 2023, using a green-to-red color scale to represent emission magnitudes. Users can hover over countries to see specific emission values via tooltips, hover over the color legend to highlight matching countries, and adjust the year slider to filter data by year. The visualization is built with React and D3.js, utilizing `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, and `d3.sliderBottom` for time navigation. It loads data from a CSV file and world atlas GeoJSON, with colors interpolated using D3's `interpolateRgb` function.

AI-generated description

This week I focused on interactivity. The main feature that I added was tooltips. You now have the ability to mouse over countries to seen more specific information (name and emissions). You are also able to mouse over the key to see what countries fall within that range. I also redesigned the layout of the key/year slider to something that made a little more sense.

MIT Licensed

Similar vizzes

Loading thumbnail…

Global Tons of CO2 Emissions Per Year V3

This choropleth map displays annual CO2 emissions per country from 1850 to 2023, colored on a green-to-red gradient with a legend, year slider, and hover highlighting for specific country values. The visualization uses React state to manage selected years and moused-over countries, while D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` render the world map. A D3 `sliderBottom` control adjusts the year, triggering color updates derived from the country’s emission value relative to the global min/max range.

BBrian Hulbert
96% match
Loading thumbnail…

CO2 Emissions Per Year V5

This interactive choropleth visualizes global CO2 emissions per country from 1850 to 2023, with a draggable year slider and a green-to-red gradient legend. Users can hover over countries to view precise emission values in a tooltip, and click the legend to filter countries by specific emission ranges. Built with React and D3.js, it uses `geoNaturalEarth1` projection, `geoPath`, and `sliderBottom` to render the map and controls. The visualization loads historical data from a CSV file and allows switching between emissions, population, and GDP metrics.

BBrian Hulbert
94% match
Loading thumbnail…

CO2 Emissions Per Year Final

This interactive choropleth map visualizes historical CO2 emissions, population, and GDP for countries from 1850 to 2023, with a color gradient from green to red indicating value magnitude. Users can hover over countries to view specific data, adjust the year via a slider or scroll wheel, and switch between displayed parameters. The visualization uses React with D3 libraries including `geoNaturalEarth1` for projection, `geoPath` for map rendering, `sliderBottom` for the year control, and `interpolateRgb` for color scaling. Data comes from the Our World in Data CO2 dataset, loaded from a CSV file.

BBrian Hulbert
92% match
Loading thumbnail…

Global Tons of CO2 Emissions V2

This visualization shows global CO2 emissions on a world map from 1850 to 2023, using color intensity to represent emission levels. A slider enables year selection, while a rectangular legend maps the green-to-red gradient to millions of tons. The map is rendered with React and D3, using `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projection. Emission data comes from a CSV file, and the color scale applies a fifth-root transformation to visually differentiate lower values.

BBrian Hulbert
92% match
Loading thumbnail…

Global CO2 Emissions V1

This choropleth map visualizes global CO2 emissions by country from 1850 to 2023, with darker reds representing higher emission values. A slider lets users scrub through years, updating country fill colors dynamically. The visualization uses React for state management, D3’s `geoNaturalEarth1` projection with `geoPath` for rendering world geography, and `sliderBottom` from `d3-simple-slider` for the year control. Data comes from a CSV subset of the Our World in Data CO2 dataset, with countries lacking data shown using a diagonal slash pattern.

BBrian Hulbert
91% match
Loading thumbnail…

CO2 Emissions Per Year V6

This interactive choropleth map visualizes global CO₂ emissions, population, and GDP by country from 1750 to 2023. Users can scrub through years using a slider, hover over countries for tooltips, and switch between the three variables. The visualization uses D3.js for map projection, color interpolation, and slider controls, React for state management, and loads data from filtered_data.csv. Countries are colored with a green-to-red gradient reflecting the selected metric, with the legend adapted to the chosen variable’s unit.

BBrian Hulbert
90% match
Loading thumbnail…

CO2 emissions Prototype

This choropleth map visualizes CO2 emissions by country for the year 2023. Countries are colored on a red intensity scale, with darker shades indicating higher emissions, while countries lacking data appear with a gray diagonal pattern. The visualization loads geographic path data from a static SVG file and emission data from a CSV, matching country names to their corresponding SVG paths. The map updates after both datasets load, applying fill colors based on emission values relative to a fixed maximum. The implementation uses React with d3-select for DOM manipulation and d3.csv for data parsing.

BBrian Hulbert
84% match
Loading thumbnail…

CO2

This example visualizes global CO2 emissions by country on an equal-Earth projection map. Each country is filled with a blue-to-red linear color scale corresponding to its emissions value, while countries without data appear grey. The visualization loads geographic boundaries from a GeoJSON file and CO2 data from a CSV, then renders two side-by-side SVG maps using D3 v6’s `d3.geoEqualEarth`, `d3.geoPath`, and `d3.scaleLinear`. The code is built with React and uses a `Map` for country lookup during rendering.

LLouisa Penrice
84% match