Skip to main content
SimilarExport ZIP
100%

make a map

✓ Published2🌍 Public
JJenny
Last edited Jul 14, 2019
Created on Jul 11, 2019
Forked from hover to select

This example displays an interactive world map with countries colored in pink against a blue ocean sphere, using a Natural Earth projection. The map supports zooming and panning through a custom zoom handler that applies SVG transforms. Built with D3.js, it loads geographic data from the world-atlas package, combining TopoJSON country boundaries with TSV country names to generate tooltips. The rendering uses `d3.geoPath` with a `geoNaturalEarth1()` projection, and hover effects change country colors via CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Make a Map

This example renders an interactive world map using the Natural Earth dataset from world-atlas, displaying country boundaries with hover highlighting. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to draw SVG paths, with topojson’s feature method converting TopoJSON to GeoJSON. Countries are colored green, turning red on mouseover, while the ocean sphere is light blue. The map supports pan and zoom through d3.zoom, which applies a transform to the map’s group element.

MMatthew Rubino
90% 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
90% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using a natural Earth projection, with countries rendered as green SVG paths that turn red on hover. The map supports zooming and panning through a D3 zoom behavior applied to the SVG group. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to parse geographic data from the world-atlas dataset. A semi-transparent blue sphere outlines the globe, while country names appear as tooltips via appended title elements.

Ffbudwill
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map where countries appear in light green against a blue ocean sphere, using the Natural Earth projection. The visualization loads geographic data from the world-atlas dataset and renders vector paths with SVG. The code imports D3.js functions including geoNaturalEarth1 for the projection, geoPath for generating path data, and select for DOM manipulation. Country boundaries are drawn from TopoJSON features using the topojson library, while styling comes from the attached CSS file.

Ssteveaigbe
89% match
Loading thumbnail…

Making a map

A world map is rendered as a navigable SVG, using a natural Earth projection to display country boundaries and a styled sphere outline. Viewers can pan and zoom the map via d3.zoom. The visualization builds the map with d3.geoNaturalEarth1, d3.geoPath, and topojson.feature, loading country geometry from the world-atlas TopoJSON dataset. Countries are filled with a light color that changes on hover, set through CSS.

Bbluesibra
89% match
Loading thumbnail…

Make a Map

This example displays a world map using a natural Earth projection, rendering countries and the surrounding sphere. The visualization loads geographic data from the world-atlas TopoJSON dataset, then uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths. The map fills landmasses in light green with a subtle black stroke, while the sphere is colored blue. Both the topojson `feature` method and D3’s data join are used to bind and append country paths to the SVG.

Fforeverworld1879
89% match
Loading thumbnail…

d3 Visualization Map

This example displays a zoomable world map using a natural Earth projection, with countries colored light green and the ocean rendered as a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset (50m.json) and names from 50m.tsv. The map supports interactive pan and zoom via d3.zoom, while d3.geoPath and geoNaturalEarth1 handle geographic rendering. Countries highlight red on hover, with tooltips showing country names. The visualization is rendered as SVG, with the sphere and country paths generated from the projected GeoJSON features.

JJohnPaulPagelerJr
88% match
Loading thumbnail…

make a map

A world map rendered with an equal-area natural Earth projection displays countries as light green polygons with subtle black outlines on a dark blue background. The visualization uses D3's `geoNaturalEarth1` projection, `geoPath`, and `geoMercator` alternatives, with geographic data loaded from the world-atlas TopoJSON. The code imports `select`, `arc`, and `json` from D3, and `feature` from topojson, drawing a graticule sphere and country paths via SVG.

YYanxxx447
88% match