Sophie's Let's make a map with D3.js!

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

Let's make a map with D3.js!

This example shows an orthographic world map rendered as an SVG, with countries filled in green against a light blue sphere. It uses D3.js version 5 functions `d3.geoOrthographic` and `d3.geoPath` to project and draw geographic features, alongside TopoJSON’s `feature` method to extract country boundaries from the world-atlas dataset. The map initially displays a global view, with the sphere outline and country paths appended to the SVG canvas.

SSophia Murage

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

Let's make a map with D3.js!

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.

AAlice Hsieh

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Eegrebing

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

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

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