Skip to main content
SimilarExport ZIP
100%

Interactive World Map

✓ Published0🌍 Public
OOskar Weinfurtner
Last edited Jul 19, 2020
Created on Jul 19, 2020

This interactive world map displays country boundaries colored in green on a blue sphere, with hover states turning countries orange. The visualization uses D3 v5 and TopoJSON to load world atlas data from unpkg, combining geographic TSV metadata with 50m JSON topology. It renders through an SVG path generator with a natural Earth projection, while d3.zoom enables pan-and-zoom interaction. Country names appear as tooltips via appended title elements, and the map resizes to fill the browser viewport.

AI-generated description

Map Tutorial

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive world map

This interactive world map displays country boundaries with hover highlighting and zoom/pan capabilities. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render SVG paths from TopoJSON data in the world-atlas package. A zoom behavior enables interactive transformations, while country names from a TSV file appear as tooltips via SVG `title` elements. The map fills countries in green and the ocean sphere in blue, with hover states turning countries red.

Eevapavlinek
91% match
Loading thumbnail…

World Map interaction

This interactive world map displays country boundaries over a blue sphere, with countries highlighted in green and a darker shade on hover. It uses D3’s geoPath and geoNaturalEarth1 projection to render geographic features from a TopoJSON dataset provided by world-atlas. The zoom behavior, implemented via the d3.zoom API, adjusts the SVG group’s transform during navigation. The visualization renders as SVG within an HTML page, and the code relies on the topojson library’s feature function to extract country polygons.

EEmma
90% match
Loading thumbnail…

interactions!

This interactive world map displays country boundaries using a natural Earth projection, with countries rendered in light green and hovering states highlighted in red. The visualization loads geographic data from the world-atlas TopoJSON dataset, merging it with a TSV file to map ISO numeric codes to country names for tooltips. Built with D3 v5, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for projection and path generation, while `topojson.feature` converts the TopoJSON topology into GeoJSON features. The sphere background appears blue, with semi-transparent black strokes outlining each country.

Kkaviya-ds
90% match
Loading thumbnail…

Interactive World Map

This interactive map renders world countries as SVG paths using D3.js version 5 and the topojson library to convert TopoJSON to GeoJSON features. The map uses a D3 geoEqualEarth projection with geoPath, and supports zooming via d3’s zoom event, which applies a transform to the map group. Country names are joined from a TSV file using ISO numeric codes, and hovering fills a country in red.

NNaveenaS12
90% match
Loading thumbnail…

Interactive Map

This interactive map displays country boundaries from the world-atlas TopoJSON dataset, rendered as SVG paths using d3.geoPath and an equirectangular projection. Hovering over a country highlights it in blue via CSS, while d3.zoom enables pan and zoom transforms on the map group. Country names from the accompanying TSV file appear as tooltips through SVG title elements, all loaded asynchronously with d3.json and d3.tsv.

Ccornshoots
90% match
Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma
89% match
Loading thumbnail…

World Map

This interactive world map displays country boundaries on a natural Earth projection, with tooltips showing country names on hover. The visualization uses D3.js v5 with d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for pan and zoom functionality. It loads geographic data from the World Atlas TopoJSON files at unpkg.com, combining country geometries with name mappings from the accompanying TSV file. SVG paths represent countries and the surrounding sphere, with hover interactions highlighting selected regions in blue.

Yyamunayennem
89% match
Loading thumbnail…

interactive world map with d3

This interactive world map displays country outlines colored in light green over a blue sphere, with hover highlighting in red. It utilizes D3 v6’s `geoNaturalEarth1` projection and `geoPath` to render the map, while TopoJSON loads geographic data from the world-atlas package. Zooming is enabled via `d3.zoom`, and country names are joined from a TSV file. The visualization renders as SVG elements.

RRITUZZ
89% match