Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published2🌍 Public
Iimmanentdomain
Last edited May 23, 2020
Created on May 21, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

World Map

This visualization displays a world map using a natural Earth projection. The map renders continents and countries as pink shapes with thin black borders on a light blue sphere background, providing a clear geographic overview. The code uses D3 v5 functions including `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The SVG output is generated with D3’s selection and attribute APIs, and the sphere and country paths are styled using CSS classes.

DDINESH SAI BOPPANA
93% match
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
93% 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
92% match
Loading thumbnail…

World Map

This interactive world map displays country boundaries using a geoNaturalEarth1 projection. Users can zoom and pan the visualization via d3.zoom, which applies transform updates to the SVG group containing all geographic paths. The map renders country shapes with d3.geoPath, colored light blue with hover effects. Topojson feature extraction processes the world-atlas 50m.json dataset, while country names from the accompanying 50m.tsv file appear as title tooltips on each path.

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

World Map

This world map displays country boundaries using the Natural Earth projection, with countries colored in a light teal and highlighted in red on hover. The visualization uses D3.js v5 and the topojson library to load and convert TopoJSON data from the world-atlas package. The map renders as SVG paths via D3's geoPath and geoNaturalEarth1 projection, while the zoom interaction is handled through D3’s zoom component. Country names are joined from a TSV file using ISO numeric codes, shown as tooltips.

Tthanhtrant219
92% match