CO2 emissions vs Year Project prototype v1

100%

CO2 emissions vs Year Project prototype v1

✓ Published0🌍 Public

Last edited Sep 22, 2025

Created on Sep 22, 2025

This prototype visualizes global CO₂ emissions changes over time using a choropleth world map. It loads yearly emission values per country from a CSV and maps them to a white-to-green color scale applied to SVG country paths. The React app manages the map state, while D3 v7 utilities handle CSV loading, color scaling, and the rendering logic via the `d3` library’s `select`, `scaleLinear`, and `csv` modules.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CO2 emissions vs Year Project prototype v1

This interactive visualization toggles between a scatter plot of CO2 emissions over time and a world map. The scatter plot uses D3 scales and axes to render yearly emissions data from a CSV file, while the map displays a static SVG of world regions with randomly assigned colors. A React button switches between the two views.

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

88% match

Loading thumbnail…

Project prototype v1

This interactive dashboard displays CO₂ emissions over time as a scatter plot, with each point colored by country using `d3.scaleOrdinal` and `d3.schemeCategory10`. A button toggles between the scatter plot and a world map rendered from an external SVG file. The scatter plot uses `d3.scaleLinear` scales and axes from `d3.axisBottom` and `d3.axisLeft`, while the map loads via `fetch` and applies randomly generated colors to regions. Data comes from a CSV file loaded with `d3.csv`.

BBrian Hulbert

85% match

Loading thumbnail…

CO2 Emissions Project prototype v1

This prototype displays a static world map loaded from an SVG file, with the map scaled to fill the viewport. The visualization currently renders the map without data encodings or interactive elements. Built with React and D3 v7, the `viz.js` component fetches the `world.svg` file, injects its content into the SVG group, and sets the width and height attributes. Additional utility files define axis and label rendering functions, but they are not invoked in this version. The prototype serves as a base for future CO2 emissions data layering.

BBrian Hulbert

84% 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

82% match

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

81% match

Loading thumbnail…

Global Tons of CO2 Emissions Per Year V4

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.

BBrian Hulbert

81% 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

80% match