Skip to main content
SimilarExport ZIP
100%

Let's make a map!

✓ Published0🌍 Public
DDannie2020
Last edited Sep 17, 2020
Created on Sep 17, 2020

This example renders an interactive orthographic globe using D3’s `geoOrthographic` and `geoPath` projections. It loads world country boundaries from TopoJSON and country names from a TSV file, then displays each country as a light-green SVG path that turns red on hover, with tooltips showing the country name. The globe itself is drawn as a dark-blue sphere, and all interactions rely on D3’s data join and selection methods.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays an orthographic map of the world, rendered as a blue sphere with grey country outlines. It uses D3’s `geoOrthographic` projection and `geoPath` to draw the sphere and country boundaries, pulling geographic data from the `world-atlas` TopoJSON dataset via `topojson.feature`. The SVG output includes a styled sphere fill and country paths, with interactive rotation not implemented in the shown code.

Ssreen020
90% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple orthographic world map rendered as an SVG, with countries filled in light green and a blue sphere representing the globe. It uses D3 v5’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas dataset. The code appends a sphere path, then fetches the TopoJSON file, converts it to GeoJSON with the `feature` function from the topojson library, and binds the resulting country features to SVG paths.

DDukatino
90% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders an orthographic globe using D3.js and TopoJSON, drawing country boundaries as green SVG paths with white strokes over a sphere background. It loads world geography from the world-atlas dataset, converts TopoJSON features via `topojson.feature`, and projects them with `d3.geoOrthographic` and `d3.geoPath`. The map is static, with no rotation or interaction, and displays all countries at a 110m resolution.

Aaidanoconnor1
90% match
Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js to build an interactive orthographic map of the world, rendered as SVG paths. It loads GeoJSON country boundaries from a TopoJSON dataset via `topojson.feature`, then draws the globe with `d3.geoOrthographic` and `d3.geoPath`. Hovering highlights countries in red, while the `d3.zoom` behavior enables pan and zoom transformations on the entire map group.

Nnouralkhoury
89% match
Loading thumbnail…

Let's make a map

This example displays an interactive world map rendered as SVG, with countries shaded in light gray and oceans in steel blue. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw geographic boundaries from TopoJSON data supplied by the world-atlas package. Country names are loaded from a TSV file and shown as tooltips using SVG `<title>` elements. The map supports pan and zoom through `d3.zoom`, which applies an SVG transform to the grouped map elements on interaction.

Bbambaleq
89% match
Loading thumbnail…

Let's Make a Map With D3.js !

This example shows an interactive world map rendered with SVG, where each country is colored light green and turns orange on hover, with a dark background and a blue ocean sphere. The map supports pan and zoom through D3’s zoom behavior, which applies a transform to the group containing all country paths. The code uses D3 v5’s `geoNaturalEarth1` projection, `geoPath` for path generation, and `topojson.feature` to convert TopoJSON data from the world-atlas package into GeoJSON. Country names are joined from a separate TSV file, and the hover effect is implemented via CSS styling on the `.country` class.

GGino Dzin
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive orthographic world map built with D3.js, where hovering over any country highlights it in red and displays its name as a tooltip. The map renders as SVG using `d3.geoPath` and `d3.geoOrthographic` for the projection, with country boundaries drawn from TopoJSON data loaded from the world-atlas dataset. The visualization also supports zooming and panning through `d3.zoom`. Country names are matched to geometries using ISO numeric codes from a TSV file.

KKarkG
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

Ggcappadaniel
89% match