CO2 Emissions Project prototype v1

100%

CO2 Emissions Project prototype v1

✓ Published0🌍 Public

Last edited Sep 22, 2025

Created on Sep 22, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CO2 emissions vs Year Project prototype v1

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.

BBrian Hulbert

84% match

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

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

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

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

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

74% match

Loading thumbnail…

world map using d3

This example shows a polished world map rendered in an SVG, displaying landmasses in teal, country borders, graticules, and a subtle sphere outline. It uses React to manage the component structure, while D3 v5 handles the map projection and path generation with `geoNaturalEarth1` and `geoPath`. Geographic data comes from the World Atlas TopoJSON file, processed with `topojson.feature` and `topojson.mesh`. The visualization demonstrates a clean, minimalist cartographic style with a soft color palette.

PPratik Raja

73% match

Loading thumbnail…

World Map D3 and React

This example presents a static world map rendered as an SVG, with landmasses in teal, graticules, and a light sphere background. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate paths, while `d3.geoGraticule` creates the grid lines. Data comes from the `world-atlas` TopoJSON, parsed via `topojson.feature` and `topojson.mesh` to draw country boundaries.

TTatyana Milanova

73% match