World map

100%

✓ Published1🌍 Public

Last edited May 18, 2020

Created on May 18, 2020

Forked from Face with animated eyebrows and mouth

This visualization displays a world map with countries colored in green, where clicking a country selects it and updates a title showing its name. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from TopoJSON data loaded from the world-atlas package. Interactive zoom is implemented with `d3.zoom`, and selected countries are highlighted with a darker fill through SVG attributes. The rendering is SVG-based, with hover effects and titles per country provided by appended `<title>` elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World

A world map rendered with D3 shows countries in light green on a light blue sphere, with black borders highlighting national boundaries. The visualization uses the Natural Earth projection via `geoNaturalEarth1` and draws the sphere and country paths with `geoPath`. Country data comes from the World Atlas TopoJSON dataset, loaded through `json` and converted with `feature`. Users can pan and zoom the map using D3’s `zoom` behavior, while hovering over a country turns it darker green, revealing its name in a tooltip.

AAndreas Loew

89% match

Loading thumbnail…

World Map

This world map visualizes country boundaries, rendered as SVG paths using D3's `geoPath` and `geoNaturalEarth1` projection. The map loads geographic data from the world-atlas package, combining a TopoJSON file with a TSV file to attach country names to each region. Hovering over a country turns it red, and a native SVG `<title>` element displays the country name. The map also includes a blue sphere background and supports zooming via the `d3.zoom` API, applying transformations to the country group.

LLeah Mitchell

89% match

Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp

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

88% match

Loading thumbnail…

WORLD MAP

This interactive world map displays country boundaries with a custom equirectangular-like projection, colored in muted green with cyan oceans. Hovering over a country highlights it in bright green. The visualization uses D3.js to load GeoJSON and TSV data from the world-atlas package, combining them to create SVG paths with country names via tooltips. It implements zooming through the `d3.zoom` module and renders the sphere and countries using `d3.geoPath` with the Natural Earth projection.

Ppaularl

88% match

Loading thumbnail…

World_Map_practice

This interactive world map displays all countries as light green shapes on a blue sphere, highlighting them in red on hover. It renders geographic boundaries using the `d3.geoPath` projection with the `geoNaturalEarth1` projection and supports pan and zoom through the `d3.zoom` API. The map is built from world-atlas TopoJSON and TSV data, which supplies country names via ISO codes, and each shape includes a tooltip showing the country name.

Mmartin

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

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

87% match