Skip to main content
SimilarExport ZIP
100%

map

✓ Published0🌍 Public
LLaasyaJ256
Last edited Apr 11, 2026
Created on Apr 9, 2026
Forked from React & D3 Starter

This example visualizes world temperatures by coloring each country according to its latitude-derived temperature estimate, using a sequential blue-to-red scale. The map is rendered as SVG paths via `d3.geoPath` with a `d3.geoNaturalEarth1` projection, while country boundaries come from the `world-atlas@2` TopoJSON dataset. A linear gradient legend, built with D3's `scaleSequential` and `interpolateRdYlBu`, shows the temperature range from cold to warm.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World map

This interactive world map visualizes average annual temperatures by country, with each nation colored on a blue-to-red sequential scale. Hovering over any country reveals a tooltip with its name and exact temperature. The visualization uses d3.geoPath with a Mercator projection to render TopoJSON data from world-atlas, supports zooming via d3.zoom, and includes a gradient legend built with d3.scaleSequential and an SVG linearGradient.

NNita
85% match
Loading thumbnail…

ice 8 Task 1

This example shows a global choropleth map of average annual temperatures by country, with selected nations colored from blue (cold) to red (hot) and unlisted countries in gray. It uses d3.json to load TopoJSON world boundaries via topojson.feature, then d3.geoPath with a geoNaturalEarth1 projection to render SVG paths. A d3.scaleSequential with d3.interpolateRdYlBu encodes temperature values, while a linear-gradient legend and browser tooltip titles provide context from a hardcoded dataset.

GGorantla Sravani
84% match
Loading thumbnail…

Map

This example visualizes world countries as a choropleth-style map, coloring each country green with white borders on a dark blue spherical backdrop. The map renders as SVG using D3.js with a Natural Earth projection via `d3.geoNaturalEarth1`, and country boundaries are generated through `d3.geoPath`. Geographic data loads from the world-atlas TopoJSON file (countries-110m.json), which is converted to GeoJSON using the `feature` function from the topojson library. Hovering a country changes its fill to red, and each country includes a title tooltip displaying its name.

VVlad Bogo
83% match
Loading thumbnail…

map

This map visualizes world countries with a choropleth encoding of randomly generated dummy data values. The visualization uses a Natural Earth projection, with countries colored on a sequential blue interpolator and orange highlighting on hover. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `topojson.feature`, then renders them as SVG paths using `d3.geoPath`. A floating tooltip, positioned on mousemove, displays each country’s numeric value as the user interacts.

Hharshithamiriyam@gmail.com
82% match
Loading thumbnail…

World Map D3

This example displays two choropleth maps: global country-level and US state-level average temperatures, colored with a sequential RdYlBu scale. It loads GeoJSON features from TopoJSON files via `topojson.feature` and maps temperature data from a CSV using `d3.rollup` to compute means per country and city. The world map uses a `d3.geoNaturalEarth1` projection, while the US map uses `d3.geoAlbersUsa`, both rendered as SVG paths via `d3.geoPath`.

Sshabanasyed2266@gmail.com
81% match
Loading thumbnail…

Map it

This map visualizes world countries colored by their type, with a legend showing the categorical color scale. Built with d3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to render the TopoJSON world-atlas data, while d3.zoom enables panning and zooming. Hovering a country displays its name and type in a tooltip, and the d3.scaleOrdinal with schemeSpectral assigns colors.

DDolbyref113
81% match
Loading thumbnail…

Map

This example displays a static world map rendered as light blue countries with white borders on a white background. The visualization loads geographic data from the world-atlas TopoJSON dataset and converts it into GeoJSON features using the topojson-client library. D3’s geoSpatial projection, `d3.geoNaturalEarth1`, and the `d3.geoPath` generator draw each country as an SVG path element. All map rendering occurs within an SVG container, with styling applied via a CSS class.

Ppvvaishnavi93@gmail.com
81% match
Loading thumbnail…

Map

This example displays a static world map rendered as light blue countries with white borders on a white background. The visualization loads geographic data from the world-atlas TopoJSON dataset and converts it into GeoJSON features using the topojson-client library. D3’s geoSpatial projection, `d3.geoNaturalEarth1`, and the `d3.geoPath` generator draw each country as an SVG path element. All map rendering occurs within an SVG container, with styling applied via a CSS class.

Ppvvaishnavi93@gmail.com
81% match