Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
JJefferson Abreu
Last edited Jul 25, 2019
Created on Jul 24, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example projects a world map onto a sphere using D3.js version 5 and the TopoJSON library. It shows countries as light green filled SVG paths with black strokes at low opacity, set against a blue spherical backdrop. The code loads geographic data from the world-atlas package, then applies the `geoEquirectangular` projection and renders each country feature via `geoPath`. A `pathGenerator` also draws the sphere boundary, with styling defined in an external stylesheet.

CCodax2000
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with countries filled in light green against a blue sphere. It uses D3.js version 5 and TopoJSON to load and convert world-atlas data from unpkg. The map is drawn using `d3.geoPath` with a `d3.geoNaturalEarth1` projection, and country boundaries are derived via `topojson.feature`. A static sphere outline is added first, then country paths are appended to the SVG. The code relies on promises to fetch and process the geographic data asynchronously.

Jjesramyep1263
94% 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
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with countries filled in light green against a dark blue spherical backdrop. Using D3 v5, it loads world-110m TopoJSON data via `d3.json`, converts the TopoJSON features with `topojson.feature`, and projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. A separate path for the sphere applies the same projection to outline the globe, while country borders are drawn with a subtle black stroke.

NNita
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple orthographic world map rendered as an SVG, with countries filled in light green and a blue sphere representing the globe. It uses D3 v5’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas dataset. The code appends a sphere path, then fetches the TopoJSON file, converts it to GeoJSON with the `feature` function from the topojson library, and binds the resulting country features to SVG paths.

DDukatino
94% match
Loading thumbnail…

Let's make a map with D3.js!

A world map rendered in SVG shows country boundaries as light green paths against a dark blue sphere, using a Natural Earth projection. The code loads world-atlas TopoJSON data from unpkg, converts it to GeoJSON with `topojson.feature`, and draws each country with `d3.geoPath`. The sphere outline is generated from a projected GeoJSON sphere object. D3 v5 handles the asynchronous JSON loading and DOM selection.

NNecklessCage
94% 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
93% 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 light green and oceans depicted as a blue sphere. It uses D3.js version 5 and TopoJSON to load and parse world-atlas data, then draws each country with the `d3.geoPath` and `d3.geoNaturalEarth1` projection. The code appends a sphere path first, then fetches the 110m dataset and adds country paths based on the TopoJSON features. Styling is handled via CSS classes.

YYERBOI95
93% match