Making a map

100%

✓ Published0🌍 Public

Last edited Mar 27, 2023

Created on Mar 27, 2023

Forked from ICE-4 Make a face with Vizhub.js!

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.

AI-generated description

World map

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Making a map

This example displays a world map using a natural Earth projection, with each country rendered as a light-green SVG path that darkens on hover. The map is built with the `d3.geoNaturalEarth1` projection and `d3.geoPath`, while TopoJSON and TSV files from the world-atlas package supply country boundaries and names. The `d3.zoom` API enables panning and zooming of the entire map group, and hover tooltips show the country name via a `<title>` element.

SSharvariPhadke

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js to render an interactive world map from TopoJSON and TSV data loaded from the world-atlas package. Countries are drawn as SVG paths using the d3.geoNaturalEarth1 projection and d3.geoPath, with hover effects changing their fill color. The visualization incorporates d3.zoom to enable pan and zoom transformations on the map group, while a sphere background is rendered from a GeoJSON Sphere object. Country names are joined to features via ISO numeric codes and displayed as SVG title tooltips.

AAaron Goebel

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 interactive map

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.

SSagar Malviya

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

Map Interaction

This example displays an interactive world map rendered with SVG using the d3-geo-projection library, specifically the geoNaturalEarth1 projection. Countries from the world-atlas TopoJSON dataset are drawn as paths with d3.geoPath, each featuring a tooltip showing the country name. The map supports pan and zoom through d3.zoom, which applies a transform to the map group on events. Hovering over a country changes its fill color to red via CSS, while the sphere background uses a distinct blue fill.

WWayne716

89% match

Loading thumbnail…

Fork of Making a map

This example renders a world map using a Natural Earth projection sourced from the world-atlas package. The visualization displays countries as white SVG paths on a dark teal sphere, with a hover effect that highlights each country in amber. Built with d3 v5, it employs `d3.geoNaturalEarth1` and `d3.geoPath` to generate the country shapes, and `topojson.feature` to convert the TopoJSON data into geographic features. The interactive zoom functionality is implemented via `d3.zoom`, which updates the group transform on each zoom event.

AAbhishek Singh

89% match