Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Simple World Map

✓ Published1🌍 Public
Ssaiabhishekmunnangi@gmail.com
Last edited Nov 9, 2025
Created on Nov 9, 2025

This visualization shows a world map highlighting renewable energy production for 2024, using a yellow-green sequential color scale to indicate production levels across countries, with a legend and tooltip providing exact values. It renders the map as SVG using `d3.geoNaturalEarth1` projection and `d3.geoPath`, pulling geographic data from a TopoJSON world atlas. The code uses `d3.scaleSequential` with `d3.interpolateYlGn` to color countries, and a linear scale with axis for the legend. Countries not in the dataset appear gray, and the tooltip displays production in TWh or no data.

AI-generated description
MIT Licensed

Similar vizzes

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
87% match
Loading thumbnail…

Fork of Fork of Fork of Simple World Map

This choropleth map visualizes global population distribution for 2024, using a yellow-green sequential color scale to represent population values for fifteen major countries while leaving others in light gray. The map renders with `d3.geoNaturalEarth1` projection and `d3.geoPath` over TopoJSON country boundaries from the world-atlas package. Hovering over a country reveals a tooltip with the country name and population figure, while a gradient legend with `d3.axisBottom` displays the value scale. The visualization uses D3 v7 and the topojson-client library to convert TopoJSON features into renderable paths.

Yyazneshpara2@gmail.com
84% match
Loading thumbnail…

Fork of Vizualisation

This example displays a world choropleth map colored by renewable energy levels, with a categorical color legend that allows users to click and filter countries by their energy level. The map uses SVG rendering with a Natural Earth projection, and the zoom interaction enables panning and scaling. The visualization is built with d3.js, using `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.zoom`, and `d3.scaleOrdinal` for the color scale, while data is loaded from a TSV file and TopoJSON.

KKahlaoui-Ismail
82% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Simple World Map

A choropleth world map visualizes 2024 national population estimates, with countries shaded on a yellow-green scale from light to dark by population size. The visualization employs an SVG rendering with the `d3.geoNaturalEarth1` projection, `d3.geoPath` for map geometry, and `d3.axisBottom` for a gradient legend. Population data is joined to country features by name, with missing values shown in grey. Tooltips display the exact population count on hover. The map uses TopoJSON data from the world-atlas package and D3 v7.

Yyazneshpara2@gmail.com
82% match
Loading thumbnail…

Fork for the world map

This visualization displays a global map with countries rendered in yellow against a purple sphere, using a natural Earth projection. The code employs D3 v5’s `select`, `json`, `geoPath`, and `geoNaturalEarth1` functions, alongside the TopoJSON `feature` API to convert topojson country boundaries into SVG paths. The map data is fetched from a GitHub-hosted worldmap.json file, with each country drawn as a filled path with a black stroke. The static SVG canvas is sized at 1600×1000 pixels.

Rrohinikotha
81% match
Loading thumbnail…

Fork of World Map

This visualization displays a natural Earth projection of the world map with countries rendered in light green and oceans in sky blue. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data sourced from the world-atlas package at 110m resolution. A sphere outline is drawn first, followed by country features parsed with TopoJSON’s `feature` method. The map is static, with no interactions or animations beyond the initial data join.

Ddineshtadepalli12
80% match
Loading thumbnail…

Fork of world map

This visualization displays a world map using a natural Earth projection, with countries rendered in red against an orange sphere. The map is drawn as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from a TopoJSON file hosted on GitHub. The code imports `feature` from `topojson` to convert the TopoJSON topology into GeoJSON features, then appends each country path to the SVG. Styling is defined in a separate CSS file, outlining countries with black strokes.

Bbhargavarathod
80% match
Loading thumbnail…

Fork of Map

This example displays a world map colored according to a small set of country population figures, using lighter blue shades to represent higher values. It renders countries as SVG paths through `d3.geoPath` and the `geoEqualEarth` projection, with a Title and Labels for each of the eleven populated countries. The map loads TopoJSON from the `world-atlas` dataset via `d3.json`, and uses a `d3.scaleSequential` with `d3.interpolateBlues` to map populations. A legend in the top-left corner communicates the color scale range.

Mmaddulanagasanjana@gmail.com
80% match