MAAAAAP

100%

✓ Published1🌍 Public

Last edited Oct 17, 2019

Created on Sep 3, 2019

This example shows a world map rendered with a natural Earth projection. Countries are drawn as individual paths filled in dark green, with a blue sphere representing the globe and black, semi-transparent country borders. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and trace geographic features, while TopoJSON’s `feature` API extracts country boundaries from the world-atlas dataset. Data loads asynchronously from a CDN, and the final SVG is rendered with no interactivity.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap MAAAAAP

This example displays an interactive world map rendered in SVG, with each country filled in dark green and a natural Earth projection. The visualization uses D3 v5's `geoNaturalEarth1` and `geoPath` to project geographic data from the world-atlas TopoJSON, retrieved via `json()`. Users can pan and zoom the map using D3's `zoom` behavior, which applies transform attributes to the map group. Hovering over a country turns it red, and a tooltip showing the country name uses D3's `title` element.

Vvladvaculin

88% match

Loading thumbnail…

world map

This example displays a world map using natural Earth projection, with countries rendered as green filled paths with subtle black strokes against a blue spherical backdrop. It demonstrates loading TopoJSON country boundaries from the world-atlas package, converting them to GeoJSON via `topojson.feature`, and projecting them with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization also shows a sphere outline created from a GeoJSON Sphere object, all drawn as SVG elements using D3 v5’s selection and data-join methods.

Ppei9223

87% match

Loading thumbnail…

Map

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue sphere representing the Earth. It uses the `geoNaturalEarth1` projection and `geoPath` from D3 v5 to generate the map geometry, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas 110m dataset. The visualization highlights the geographic layout without interactive features, focusing on static rendering of global landmasses.

Bbideckerz

87% match

Loading thumbnail…

worldmap

This example displays a world map using a natural Earth projection, with countries rendered as light green paths against a blue spherical backdrop. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using the topojson feature function. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate the SVG path data, styling the sphere and country shapes through CSS classes.

Mmarianamartins87

87% match

Loading thumbnail…

Let's make a MAP!

This example displays a world map with country boundaries and a blue ocean background, rendered using the Natural Earth projection. It shows a static geographic visualization of countries filled in brown with subtle black outlines. The visualization is built with D3 v5, using `geoPath` for map projections and `geoNaturalEarth1` for the projection type. Country data is loaded from the world-atlas TopoJSON file, converted to GeoJSON features with the `topojson` library's `feature` function, and rendered as SVG paths.

Yylzami40

87% match

Loading thumbnail…

Let's create a world map (geoNaturalEarth1)2 - with d3

This example displays a world map using the Natural Earth projection, with countries rendered as light green polygons against a dark blue sphere. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `topojson.feature`, then projects them using `d3.geoNaturalEarth1` and draws them as SVG paths with `d3.geoPath`. A data join appends each country path, while a separate path illustrates the globe’s outline. The code relies on d3.select, d3.json, and d3.v5, with styling controlled by CSS classes.

AAsperge-Atomique

87% match

Loading thumbnail…

Let'smakeamap

This example displays a world map using the Natural Earth projection, with countries filled in light green against a dark blue sphere. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them with `topojson.feature`. The SVG paths are generated using `d3.geoPath` and `d3.geoNaturalEarth1`, with styling applied through CSS classes for the sphere and individual countries.

OOhayouKaminari

86% 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

86% match