Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published2🌍 Public
MMichał Szumnarski
Last edited Aug 12, 2019
Created on Aug 3, 2019

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue sphere background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. The map projects coordinates with `geoNaturalEarth1` and draws each country boundary via `d3.geoPath`, while a separate path renders the globe’s outline. The visualization demonstrates basic choropleth-style mapping using D3 v5’s geo modules.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue sphere background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. The map projects coordinates with `geoNaturalEarth1` and draws each country boundary via `d3.geoPath`, while a separate path renders the globe’s outline. The visualization demonstrates basic choropleth-style mapping using D3 v5’s geo modules.

MMichał Szumnarski
100% 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
96% 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 light green against a blue spherical backdrop. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson `feature` method. The visualization projects the coordinates with `geoNaturalEarth1` and traces country boundaries via `geoPath`, while drawing the globe outline with a sphere path generator. The layout uses a fixed 960×500 SVG canvas with simple CSS styling.

Ssakhabutdinov
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
96% 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
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
96% 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
96% match