Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
Ssam-leb
Last edited Jul 3, 2020
Created on Jul 3, 2020

This example demonstrates how to create a world map using D3.js, displaying countries as red polygons with white strokes against a blue spherical backdrop. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features with `d3.geoPath`. Country boundaries come from the World Atlas TopoJSON dataset (110m resolution), which is loaded asynchronously and converted to GeoJSON using `topojson.feature`. The SVG elements are styled through CSS, with the sphere filled in blue and country borders outlined in black.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries with a natural Earth projection. It displays a blue sphere background and green country shapes with subtle black borders. The code uses D3's `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library's `feature` function extracts country boundaries from a world-atlas dataset. The visualization loads geospatial data from a remote JSON file and renders the map entirely as scalable vector graphics.

Ssnschoenborn
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries with a natural Earth projection. It displays a blue sphere background and green country shapes with subtle black borders. The code uses D3's `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library's `feature` function extracts country boundaries from a world-atlas dataset. The visualization loads geospatial data from a remote JSON file and renders the map entirely as scalable vector graphics.

Ssnschoenborn
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js version 5, rendering countries as light green polygons with black strokes on a blue spherical background. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic coordinates onto an SVG canvas. Country boundaries are loaded as TopoJSON from the world-atlas package and converted to GeoJSON using the `feature` function from the topojson library. The map displays 110-meter resolution country outlines, with the sphere filled in blue to represent oceans.

Ssteveaigbe
93% 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
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered with D3.js, displaying country boundaries as light green filled paths against a blue sphere. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic coordinates onto SVG. Country geometries come from the World Atlas TopoJSON dataset, loaded with `d3.json` and converted using the `feature` method from `topojson`. The map highlights the spherical Earth outline with a separate path styled in CSS, while country strokes appear semi-transparent black.

Zzlastefcia
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using D3.js, rendering countries as interactive SVG paths with hover effects that turn them red. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw the globe and country boundaries from TopoJSON data loaded from the World Atlas. A `d3.zoom` behavior enables pan and zoom, while country names are joined from TSV data using `Promise.all`. The map is styled with CSS classes, featuring a blue sphere and light green countries.

Rrcumani
92% 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
92% 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
92% match