Skip to main content
SimilarExport ZIP
100%

Map

✓ Published0🌍 Public
Bbideckerz
Last edited May 19, 2021
Created on May 19, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map!

This example shows a world map rendered with countries filled in light green and a blue sphere representing the Earth’s surface, all within an SVG. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The code appends a sphere path and country paths, relying on the `json` function to load the TopoJSON data asynchronously.

Ccathykan
93% match
Loading thumbnail…

Map

This example displays a world map using a natural Earth projection, with countries shown as light green shapes against a dark blue sphere background. The visualization is rendered as SVG paths derived from TopoJSON data loaded from the world-atlas package, with each country’s boundaries drawn using D3’s geoPath and geoNaturalEarth1 projection. The code utilizes D3 v6 for data binding and selection, while TopoJSON’s feature function converts the encoded topology into GeoJSON features for rendering.

Nnsadath
93% 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
93% match
Loading thumbnail…

Map

This example displays a world map using a natural Earth projection, with countries filled in yellow and oceans depicted in blue. It relies on D3 v5’s `geoPath` and `geoNaturalEarth1` to project geographic coordinates, while the TopoJSON library’s `feature` method extracts country boundaries from the World Atlas dataset. The SVG rendering includes a spherical outline and country paths, with a simple black stroke applied to each nation.

Hharoldle
92% match
Loading thumbnail…

World Map

This example displays a world map with countries rendered as light green polygons on a blue sphere. It uses D3’s `geoPath` and `geoNaturalEarth1` projection to draw geographic features, and the TopoJSON `feature` function to convert country outlines from a remote 110m dataset. The SVG output includes a background sphere and country paths, with styling applied via CSS classes.

Ffaquora
92% 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
92% match
Loading thumbnail…

Map with D3.js

This visualization displays a world map using a natural Earth projection, with country boundaries rendered as filled SVG shapes. The sphere outline is drawn first using a `geoPath` generator with an empty GeoJSON sphere object. Country features are loaded from the World Atlas TopoJSON dataset via `d3.json` and converted using `topojson.feature`. The map uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` for path generation, with countries colored steelblue against a white background.

1123fischer
92% match
Loading thumbnail…

Let's make a Map with simplified code!

This example shows a world map rendered as SVG paths, with countries filled in light green and the ocean sphere in blue. The code uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings, while TopoJSON's `feature` method transforms the TopoJSON world-atlas dataset into GeoJSON features for rendering. A data join appends one path per country, and the map is loaded asynchronously via `d3.json` from a remote unpkg URL.

CChristine Lanser
92% match