Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
AAlice Hsieh
Last edited Feb 7, 2020
Created on Feb 7, 2020

This example displays a natural Earth projection map of the world, with countries rendered as light green SVG paths and the ocean sphere filled in blue. It loads geographic data from the world-atlas TopoJSON dataset using `d3.json`, converts the TopoJSON features to GeoJSON with `topojson.feature`, and projects them via `d3.geoNaturalEarth1` and `d3.geoPath`. The sphere outline is drawn using a GeoJSON Sphere object.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries and oceans using a natural Earth projection, with landmasses filled in light green and the surrounding sphere in blue. It loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON features with `topojson.feature`, and renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. All elements are drawn as SVG paths, with a distinct path for the sphere outline and separate country paths styled through CSS.

BBahareh Zarei
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries and oceans using a natural Earth projection, with landmasses filled in light green and the surrounding sphere in blue. It loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON features with `topojson.feature`, and renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. All elements are drawn as SVG paths, with a distinct path for the sphere outline and separate country paths styled through CSS.

BBahareh Zarei
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries and oceans using a natural Earth projection, with landmasses filled in light green and the surrounding sphere in blue. It loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON features with `topojson.feature`, and renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. All elements are drawn as SVG paths, with a distinct path for the sphere outline and separate country paths styled through CSS.

BBahareh Zarei
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries and oceans using a natural Earth projection, with landmasses filled in light green and the surrounding sphere in blue. It loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON features with `topojson.feature`, and renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. All elements are drawn as SVG paths, with a distinct path for the sphere outline and separate country paths styled through CSS.

BBahareh Zarei
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map using a natural Earth projection, with countries filled in light green and oceans in blue, all rendered as SVG paths. It loads geographic data from the World Atlas TopoJSON dataset via `json()`, then converts the TopoJSON features into GeoJSON using the TopoJSON `feature()` function. The map is drawn with D3’s `geoPath` and `geoNaturalEarth1` projection, and styled with CSS classes for the sphere and countries.

RRich Werden
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js. It renders a natural Earth projection of countries as SVG paths, filled with light green and outlined with a subtle black stroke, all set against a blue sphere background. The code uses `d3.json` to load geographic data from the world-atlas TopoJSON file, then converts it to GeoJSON with `topojson.feature`. The map is drawn using `d3.geoPath` and the `geoNaturalEarth1` projection, with the sphere added as a separate path.

TTallulah Kay
96% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths and oceans shown as a blue sphere. The code loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON using the topojson `feature` function, and draws it with `d3.geoPath` and `d3.geoNaturalEarth1` from D3 v5. A single SVG element sized 960 by 500 hosts the visualization.

Eexistentialist1888
96% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map with countries rendered as light green SVG paths on a blue sphere, using a natural Earth projection. The code loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON with topojson’s `feature` method. It builds the map with d3’s `geoPath` and `geoNaturalEarth1` projection, appending country paths and a sphere outline to the SVG canvas.

MMartin Christensen
96% match