Skip to main content
SimilarExport ZIP
100%

Let's make a interactive map

✓ Published1🌍 Public
SSagar Malviya
Last edited Jun 2, 2019
Created on Jun 2, 2019

This interactive map displays world countries in a natural Earth projection atop a blue sphere, with geographic features rendered as SVG paths. The visualization uses d3.geoPath, d3.geoNaturalEarth1, and the topojson library to convert TopoJSON data into clickable country shapes. Country names are overlaid as tooltips, sourced from a tab-separated values file. The map supports zoom and pan interactions through d3.zoom, making it an explorable representation of global geography.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make an interactive map

This interactive map displays country boundaries on a natural Earth projection, with a light blue sphere and gray landmasses that darken on hover. The visualization uses D3 v5 and the topojson library to load and process world atlas data from a JSON file and a TSV file containing country names. The geoNaturalEarth1 projection and geoPath functions render the map as SVG paths, while the zoom component enables pan and zoom interactions.

NNikki-gea
91% match
Loading thumbnail…

Let's make an interactive map with D3.js!

This interactive map displays world countries using a natural Earth projection rendered as SVG paths. Users can pan and zoom the map via D3’s `zoom` behavior, which applies transforms to a group element. Country boundaries come from TopoJSON data, with names joined from a TSV table using `reduce`. Hovering highlights a country in red, while the background sphere is colored blue. The code leverages `d3.geoPath`, `d3.geoNaturalEarth1`, and topojson’s `feature` method to generate the geographic shapes.

JJordan Chiu
90% match
Loading thumbnail…

Map Interaction

This example displays an interactive world map, rendering country boundaries as SVG paths using d3.geoPath and a d3.geoNaturalEarth1 projection. The map is built from TopoJSON data loaded via d3.json and the topojson.feature API, with country names attached as SVG title elements. The visualization supports panning and zooming through d3.zoom, which applies a transform to the map group, and highlights individual countries by changing their fill color on hover using CSS.

WWayne716
89% match
Loading thumbnail…

Making a map

This example shows an interactive world map with zoom and pan capabilities. Countries are rendered as styled SVG paths with hover highlighting, while the globe’s sphere is drawn as a separate background layer. The visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate paths, and `d3.zoom` for interaction. Geographic data comes from the world-atlas TopoJSON file, processed via `topojson.feature`, and rendered as SVG with CSS-styled country shapes.

Ttejasviprasad06@gmail.com
89% match
Loading thumbnail…

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

SShane Carey
89% match
Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster
89% match
Loading thumbnail…

Map with interaction

This example shows an interactive map of world countries rendered as SVG paths using the Natural Earth projection. Users can pan and zoom the map via d3.zoom, which applies a transform to the grouped map elements. The map loads GeoJSON data from the world-atlas TopoJSON file, converts it with topojson.feature, and draws each country using d3.geoPath. Countries fill light green and turn red on hover, with the surrounding sphere rendered in blue. The visualization demonstrates basic geographic mapping with interactive zooming and hover feedback.

SSimon Pettersson
89% match
Loading thumbnail…

Let's make a map!

This interactive map displays world countries as green SVG paths on a blue sphere, with hover tooltips revealing country names. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON world-atlas data, while country names are joined via TSV data using ISO numeric codes. Users can pan and zoom the map through D3’s `zoom` behavior, which applies a transform to the map group. The code loads both TopoJSON and TSV files asynchronously with `Promise.all`.

Ccathykan
89% match