Skip to main content
SimilarExport ZIP
100%

World_Map_Practice

✓ Published0🌍 Public
Mmartin
Last edited Mar 20, 2022
Created on Mar 20, 2022

This interactive world map visualizes the country boundaries and names from the world-atlas dataset (50m.tsv and 50m.json) using a Natural Earth projection. The map uses D3 v5 to render the geographic paths as SVG elements, with the topojson library converting the TopoJSON to GeoJSON features. The visualization supports zooming and panning through the `d3.zoom` module, and country tooltips display the name from the TSV data on hover, with the fill color changing to red.

AI-generated description
MIT Licensed

Similar vizzes

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
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
89% 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
88% 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 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
88% 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
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
87% match
Loading thumbnail…

World Map with D3 Final

This interactive world map displays country boundaries and names using a natural Earth projection, with a colored sphere background and hover effects that highlight individual countries in red. Built with D3 v5 and TopoJSON, the visualization loads geographic data from the world-atlas package, combining TSV country name metadata with JSON topology data. The code uses `geoNaturalEarth1`, `geoPath`, and `zoom` for projection and panning, while SVG paths render the map with CSS styling for interactivity.

TToly
87% match