Let's make a map with D3.js!

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries in light green and the ocean in blue. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate geographic shapes, while the TopoJSON library’s `feature` function converts the world-atlas 110m GeoJSON data into features. A sphere outline and country boundaries are drawn with stroke styling, and the map is projected onto a 960 by 500 canvas.

RRubens

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.

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.

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.

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.

Let's make a map with D3.js!

This example visualizes the world’s countries as filled polygons on a natural Earth projection, with oceans rendered in blue and landmasses in light green. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` function extracts country boundaries from a 110m world-atlas GeoJSON dataset. The code draws a sphere background and then overlays each country’s path, applying thin black strokes for borders.

AAdrian Herzog

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