Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
NNita
Last edited Nov 24, 2020
Created on Nov 24, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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 against a blue spherical backdrop. It uses D3.js version 5 and the TopoJSON library to load and convert world-atlas data (110m resolution) into GeoJSON features. The map is drawn with `d3.geoPath` and a natural Earth projection (`d3.geoNaturalEarth1`), while a separate path renders the globe’s sphere outline. Country boundaries appear with a subtle black stroke, and the map updates once the external JSON data loads.

Jjnpatel
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered as light green SVG paths against a dark blue background. Using D3 v5 and TopoJSON, the code loads world-110m geographic data and projects it with a stereographic projection via d3.geoStereographic. Each country is drawn using d3.geoPath, with black strokes and low opacity to create a subtle outline effect. The map fills a 960 by 500 pixel SVG viewport with no interactivity.

NNita
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example creates a world map rendered as SVG using D3 v5 and TopoJSON. It loads world country boundaries from the World Atlas TopoJSON dataset, projects them with the `geoNaturalEarth1` projection, and draws each country as a filled path using `d3.geoPath`. A blue sphere background is added first, with countries shown in light green and outlined with subtle black strokes. The map displays the entire globe with country shapes accurately projected.

CChip
95% 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 the globe as a blue sphere. It demonstrates loading geographic data from a TopoJSON file via `d3.json` and converting it to GeoJSON features using the `feature` function from the TopoJSON library. The map projection and path generation are handled by `d3.geoNaturalEarth1` and `d3.geoPath`, which draw the country boundaries and the sphere outline. The code uses D3 v5 and relies on the world-atlas dataset at 110m resolution.

Ggcappadaniel
95% 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 against a blue sphere background. It uses D3 v5 to load GeoJSON data from the world-atlas TopoJSON file, converting it with `topojson.feature`. The map is projected using `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. A separate path represents the sphere outline. The visualization updates dynamically once the data loads, adding country paths to the SVG.

OOliverlee1003
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3 v5 and TopoJSON to load world-atlas data, then applies a natural Earth projection via `d3.geoNaturalEarth1` and traces country boundaries with `d3.geoPath`. The code also draws a background sphere path to represent the globe.

Ccodexmon
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js v5, rendering country boundaries as light green SVG paths on a blue sphere. It shows a natural Earth projection with subtle black stroke outlines for each country. The visualization loads GeoJSON data from the world-atlas TopoJSON file using `d3.json`, then converts it to geographic features with `topojson.feature`. The code applies `d3.geoPath` with a `geoNaturalEarth1` projection to draw both the sphere background and individual country shapes onto the SVG canvas.

NNitin Vadhiya
95% 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
95% match