one

100%

✓ Published0🌍 Public

Last edited Nov 10, 2025

Created on Nov 10, 2025

Forked from one

This interactive map visualizes 2024 renewable energy percentages and CO₂ emissions across twelve countries. A button toggle switches the choropleth’s color scale between green (renewable energy) and red (emissions), with a hover tooltip displaying both metrics. The map uses D3 v7's modular API, including `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with interpolators, over TopoJSON world-atlas data. Country fills transition smoothly via D3's `.transition()` method when switching metrics.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Mmuchakurthisahithipatel@gmail.com

93% match

Loading thumbnail…

ICE 8 making maps

This choropleth map shows the percentage of renewable energy use by country worldwide, using a yellow-green sequential color scale where darker shades indicate higher adoption. It loads country boundaries from the world-atlas TopoJSON dataset and joins them with renewable energy percentages from a GitHub-hosted CSV file. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to render each country as an SVG path, and d3.scaleSequential with an interpolateYlGn interpolator to encode values. An interactive tooltip via SVG title elements reveals exact percentages, while a gradient legend below the map provides a reference scale.

Aadithiarikatla@gmail.com

80% match

Loading thumbnail…

Vizualisation

This visualization displays renewable energy levels by country on a natural Earth projection map, with a color legend categorizing ordinal data. It uses d3.geoPath and d3.geoNaturalEarth1 to render world shapes, d3.scaleOrdinal with schemeSpectral for color mapping, and d3.zoom for panning. Data comes from a TSV file joined to TopoJSON world atlas geometries via d3.tsv and d3.json. Hovering highlights countries in red, and tooltips show country names and renewable values.

KKahlaoui-Ismail

79% match

Loading thumbnail…

Assignment

This choropleth map visualizes a custom Global Renewable Energy Adoption Index, coloring countries by their score on a green sequential scale while leaving countries without data in gray. The visualization uses D3.js (v7) with a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, rendering geographic paths from a TopoJSON file loaded through `d3.json` and processed with TopoJSON. Country polygons are filled based on score thresholds, and hover interactions reveal tooltips with country names and scores. A legend on the left explains the color thresholds and the "No Data" gray.

Ssairathan.p045@gmail.com

79% match

Loading thumbnail…

Fork of making map 2

This world map visualizes 2022 renewable energy consumption percentages across countries, using a sequential green color scale where darker shades represent higher renewable energy usage. The visualization loads geographic boundaries from the world-atlas TopoJSON dataset and renders them as SVG paths using d3.geoPath with a natural Earth projection. The code creates a color mapping from an inline dataset of country-specific percentages and tooltips display exact values on hover. D3 v7 handles the data join, while the topojson library converts the geographic data into GeoJSON features for rendering.

Aadithiarikatla@gmail.com

79% match

Loading thumbnail…

Assignment8_1_world map

This choropleth map visualizes renewable electricity share as a percentage of total electricity generation by country for 2022. Using a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, it renders world countries from TopoJSON data, colored with a green-to-blue threshold scale. A hover tooltip displays each country’s name and its renewable share, with missing values marked as N/A. The visualization also includes graticules and a discretized legend, with data loaded from a linked CSV file.

JJaswanthKoorapati@my.unt.edu

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

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

77% match