make a map

100%

✓ Published1🌍 Public

Last edited Jan 11, 2021

Created on Jan 11, 2021

A world map rendered with an equal-area natural Earth projection displays countries as light green polygons with subtle black outlines on a dark blue background. The visualization uses D3's `geoNaturalEarth1` projection, `geoPath`, and `geoMercator` alternatives, with geographic data loaded from the world-atlas TopoJSON. The code imports `select`, `arc`, and `json` from D3, and `feature` from topojson, drawing a graticule sphere and country paths via SVG.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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…

Make a map with D3 js

This example shows a natural Earth projection map of the world, with countries rendered as light green SVG paths on a dark blue sphere. The visualization loads world-atlas TopoJSON data via `d3.json`, converts it to GeoJSON using `topojson.feature`, and draws the map with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is a separate path generated from a generic sphere object, while country boundaries appear with semi-transparent black strokes.

AAjit Singh

90% match

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths with subtle black strokes. The map is drawn from TopoJSON data loaded from the visionscarto-world-atlas package, using D3 v5’s `geoPath` and `geoNaturalEarth1` projection. A blue sphere path outlines the globe’s boundary. The code specifically imports `feature` from TopoJSON to convert topologies into GeoJSON features, then binds the country data to SVG path elements. The map appears on a blank background with no additional interactive features or transitions.

Mmla341

90% match

Loading thumbnail…

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

This example displays a world map rendered with the geoNaturalEarth1 projection, showing countries as light-green polygons with black outlines against a dark-blue spherical background. It loads geographic data from the world-atlas TopoJSON dataset via d3.json, then converts the TopoJSON features into GeoJSON using the topojson.feature API. The d3.geoPath generator projects and draws each country path onto an SVG canvas, while the sphere outline is created by passing a Sphere object to the same path generator.

AAsperge-Atomique

90% match

Loading thumbnail…

Let's Make a map

This example displays a world map using a natural Earth projection, with countries filled in light green against a blue spherical backdrop. It loads geographic data as TopoJSON from the world-atlas package and converts it to GeoJSON features using topojson’s `feature` method. The map is rendered as SVG paths via `d3.geoPath` and `d3.geoNaturalEarth1`, with styling applied through CSS classes for the sphere and country boundaries.

MMahaveer Jain

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

90% match

Loading thumbnail…

Lets make a map

This example displays a world map using a natural Earth projection, with countries filled in light green against a dark blue sphere. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON using the topojson `feature` function. The visualization relies on D3 v5’s `geoPath` and `geoNaturalEarth1` for rendering, while the projection path is drawn for the entire sphere. The map is rendered as SVG elements, with country paths and a separate sphere path added to the canvas.

Ccornshoots

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