Skip to main content
SimilarExport ZIP
100%

World Map - continent interactions (labels)

✓ Published0🌍 Public
JJimMaltby
Last edited Nov 5, 2020
Created on Oct 25, 2020

A stylized world map renders countries as light blue paths, with the United Kingdom highlighted in green and Egypt in orange. The visualization displays interactive labels that reveal each country’s name and continent when hovered. Built with D3 v5 and topojson, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` for geometry, with hover effects defined in CSS. Geographic data comes from the world-atlas package.

AI-generated description

A simple map of the world, and coloured. Using Curran Kelleher's: "Making a World Map with D3" adding the interactions from his next video.

Intention is to explore how to access the continental features for a project.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This world map uses a natural Earth projection to display country boundaries, with a dark blue ocean sphere and light green landmasses. Hovering over a country turns it red and reveals its name via a tooltip. The visualization supports zooming and panning through d3.zoom, with geographic paths rendered using d3.geoPath. It loads world country geometries from TopoJSON and country names from a TSV file, both sourced from the world-atlas package.

Ggabcoderboi
84% match
Loading thumbnail…

World Map

This map visualizes country borders using a natural Earth projection, with country names displayed as tooltips on hover. The visualization uses D3 v5’s `d3.geoPath` and `geoNaturalEarth1` for geographic projection, while TopoJSON’s `feature` method extracts country geometries from world-atlas data. Countries are rendered as SVG paths styled with CSS. The map supports zooming and panning through D3’s `zoom` behavior, which applies a transform to all country shapes. The data comes from the world-atlas TopoJSON and TSV files, which provide geometry and country names.

Iimmanentdomain
84% 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
83% match
Loading thumbnail…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat
83% match
Loading thumbnail…

Let's make a World Map - Cholropleth with interactions

This example presents an interactive choropleth world map built with D3 v5 and TopoJSON, using a natural Earth projection rendered as SVG. The map colors countries by continent using a categorical color scale, with specific overrides for the United Kingdom and Egypt in green and orange. A zoom interaction enables panning and scaling, while a legend widget displays the color scale domain. Data is loaded from the world-atlas package, combining TSV metadata with TopoJSON geometry. Hovering reveals a tooltip with country name, economy, and continent information via appended title elements.

JJimMaltby
83% 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
82% match
Loading thumbnail…

World map

This interactive world map displays country boundaries using a natural Earth projection, with hover tooltips showing country names and zoom/pan controls for exploration. It loads geographic data from the world-atlas TopoJSON and TSV files, then renders countries with D3’s `geoPath` and `geoNaturalEarth1`. The visualization uses `d3.zoom` for interaction and `topojson.feature` to convert TopoJSON geometry, with hover effects styled via CSS.

NNikhil Prakash
82% match
Loading thumbnail…

World Map

This world map visualization displays countries across the globe, rendered as light green polygons with thin black outlines, set against a blue sphere. The map uses D3’s geo projection and path generation, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to draw the geographic boundaries. Country data comes from the world-atlas TopoJSON dataset, which is fetched and processed using the TopoJSON library’s `feature` function. The visualization relies on D3 version 5 and outputs an SVG graphic, with styling applied via CSS.

SsreepavanKothapalli
82% match