Let's make a map!

100%

Let's make a map!

✓ Published1🌍 Public

Last edited Jun 23, 2020

Created on Jun 21, 2020

This example demonstrates a world map using an equal-earth projection, with countries rendered as light green regions and the spherical globe shown in blue. It fetches geographic data from the world-atlas package and visualizes it by applying the `geoPath` and `geoEqualEarth` functions from d3. The code uses topojson’s `feature` API to convert the TopoJSON data into GeoJSON features. Each country is drawn as an SVG path, with stroke opacity set to 0.1 for country boundaries. The entire map updates dynamically once the data is fetched and processed, displaying the complete set of countries in a single view.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered with D3.js using the geoEqualEarth projection, with countries filled in green and a blue sphere background. It demonstrates geographic data visualization by loading the world-atlas TopoJSON dataset and converting it to GeoJSON features via topojson.feature. The map uses d3.geoPath with the projection to draw SVG paths. The code also imports additional projections like geoMercator and geoOrthographic, though only equal-earth is applied here.

EEdward-Elric233

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map showing country boundaries as light green filled paths on a steel blue sphere, using a geographic equal Earth projection. The map is drawn entirely as SVG with D3 v5 and TopoJSON, loading the world-atlas 110m dataset from unpkg. The code defines a path generator via d3.geoPath and d3.geoEqualEarth, appends a spherical outline, then converts the TopoJSON topology to GeoJSON features using topojson.feature before binding them to path elements.

JJefferson Abreu

90% match

Loading thumbnail…

Let's make a map with D3.js!

This map visualization displays world countries as dark shapes on a light sphere using an equal-earth projection. It loads geographic data from the world-atlas JSON dataset and renders it with `d3.geoPath` and `d3.geoEqualEarth`. The topojson library's `feature` function extracts country boundaries, which are drawn as SVG paths. The page includes a static sphere background and dynamically fetches country polygons to populate the map.

MMaciek Sitkowski

90% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in teal against a blue sphere backdrop using an equal-earth projection. It loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with the `feature` function from Topojson, and projects it through `d3.geoPath` combined with the `geoEqualEarth` projection from d3-geo-projection. The visualization demonstrates a minimal, clean map-making workflow using D3 v5.

KKurt J Nilsen

90% match

Loading thumbnail…

Let's make a map with D3.js

This example renders a world map using D3.js and TopoJSON. It shows the entire globe as a blue sphere with light green countries, using the `geoEqualEarth` projection and `geoPath` to generate SVG paths. The map draws country boundaries from the `world-atlas` dataset loaded via `json()`, demonstrating a simple choropleth-style base map with subtle stroke effects.

WWhitney Hung

89% match

Loading thumbnail…

draw a world map

This example displays a world map using the Equal Earth projection within an SVG canvas. The map shows country boundaries as light green shapes with dark blue oceans, rendered using `d3.geoEqualEarth` and `d3.geoPath`. It loads geographic data from the world-atlas TopoJSON file, converts it with `topojson.feature`, and appends each country path to the SVG. The visualization relies on D3 v5 and uses simple CSS classes to differentiate the sphere background from country landmasses.

Wwyh1029

89% match

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

89% match

Loading thumbnail…

make a map

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.

YYanxxx447

88% match