Making a map

100%

✓ Published2🌍 Public

Last edited Jan 1, 2020

Created on Dec 31, 2019

This example displays a static world map with country boundaries and a blue sphere backdrop, rendered entirely as SVG paths. It uses a Natural Earth projection from `d3.geoNaturalEarth1`, with `d3.geoPath` generating the geographic shapes. The country data comes from the World Atlas TopoJSON dataset, processed through `topojson.feature`. The visualization shows the map in green fill, black strokes, and a dark blue ocean, with a light blue page background.

AI-generated description

A simple map from d3 using topojson.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a World Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans depicted as a blue sphere. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw both the sphere outline and country boundaries. Country data comes from the world-atlas TopoJSON file, which is parsed with the `feature` function from topojson. The map is static, with no interactions or transitions.

MMinwoo Pak

93% match

Loading thumbnail…

Lets Make a Map

This example displays a world map rendered as an SVG using D3’s `geoNaturalEarth1` projection and `geoPath` generator. Country boundaries come from the World Atlas TopoJSON dataset, converted to GeoJSON via `topojson.feature`. The visualization shows a dark blue ocean sphere with light green landmasses, each country plotted as a separate path.

Ggabrielribeirob

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

92% match

Loading thumbnail…

Making a map

This example shows a natural Earth projection map of the world, with countries rendered as light green filled paths and a blue sphere background. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` generator to draw the map from TopoJSON data loaded from the world-atlas dataset, processed via `topojson.feature`. Country and sphere outlines are appended as SVG paths with distinct CSS classes.

PPedro Ernesto Tramontina

92% match

Loading thumbnail…

Making a Map

This example displays a world map as a set of light green countries against a blue sphere, rendered as SVG. The visualization uses the D3 library’s `geoNaturalEarth1` projection and `geoPath` generator, while the `topojson` package’s `feature` function converts the world-atlas TopoJSON data into geographic features for drawing. The sphere path is generated by passing a `Sphere` object to the same path generator. The map is fully drawn from the included `world-atlas` data source.

EEllednera

91% match

Loading thumbnail…

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Eegrebing

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

90% match

Loading thumbnail…

Let's make a map

This example displays a natural Earth projection of the world map, with countries rendered as light green SVG paths against a blue sphere backdrop. It uses D3 v6’s `geoNaturalEarth1` projection and `geoPath` to generate geometries, while TopoJSON’s `feature` converts the world-atlas countries-110m.json data into GeoJSON for binding. Country borders are drawn with a subtle black stroke, and the initial sphere outline is added as a separate path element.

OOleg

90% match