Skip to main content
SimilarExport ZIP
100%

Lets make a map with D3.js

✓ Published0🌍 Public
JJonathan Phelps
Last edited Jan 29, 2020
Created on Jan 29, 2020

This example shows a world map rendered as an SVG using D3.js v5 and TopoJSON. It loads world country boundaries from the world-atlas package and converts the TopoJSON to GeoJSON with the `feature` function, then draws the map with `d3.geoPath`. The visualization is minimal, with a 960-by-500 viewport and hidden page margins, and demonstrates the basic pipeline of fetching geographic data and projecting it onto the screen.

AI-generated description

map

https://www.npmjs.com/package/world-atlas

topojson map data: https://unpkg.com/world-atlas@1.1.4/world/110m.json

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js

This example shows a geographic world map rendered as an SVG using D3.js and TopoJSON. It displays country boundaries and a blue sphere outline, with countries filled in light green and subtle black strokes. The code loads world-atlas data via D3’s `json` method and converts TopoJSON features using `topojson.feature`. It applies a natural Earth projection with `d3.geoNaturalEarth1` and generates paths via `d3.geoPath`. The visualization relies on D3 v5 and TopoJSON v3 scripts.

HHasideluxe
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map of countries using D3.js and TopoJSON. It loads geographic data from the world-atlas dataset and displays country boundaries as SVG paths. The visualization uses `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data from the TopoJSON features. Each country is appended as a `path` element to an SVG canvas sized 960 by 500 pixels.

Kkdvs94
93% match
Loading thumbnail…

Lets make a map!

This example demonstrates how to load and display world map data using D3.js and TopoJSON. The visualization fetches country boundaries from the world-atlas dataset and projects them as SVG paths. The code uses `d3.json` to retrieve the TopoJSON file, `topojson.feature` to convert it into GeoJSON, and `d3.select` to append the resulting shapes to the chart. The map is rendered as static SVG elements within a fixed 960×500 viewport.

Kkhuton
92% match
Loading thumbnail…

Lets make a map with D3.js

This example uses D3.js to render a world map with an orthographic projection on an SVG. It loads country boundary data from the world-atlas TopoJSON file, converts it to GeoJSON with the `feature` function, and draws the paths using `d3.geoPath` and `geoOrthographic`. The map shows all countries filled in green with black strokes against a sky blue background.

NNita
92% 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
92% 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 spherical backdrop. It uses D3.js version 5 and the TopoJSON library to load and convert world-atlas data (110m resolution) into GeoJSON features. The map is drawn with `d3.geoPath` and a natural Earth projection (`d3.geoNaturalEarth1`), while a separate path renders the globe’s sphere outline. Country boundaries appear with a subtle black stroke, and the map updates once the external JSON data loads.

Jjnpatel
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them with `d3.geoMercator`. The map is drawn as SVG paths using `d3.geoPath`, with countries filled in green and outlined in black. The code imports specific functions like `select`, `json`, and `feature` from D3 v5 and TopoJSON, and applies a dark blue background via CSS.

FFernando Gonzalez - Valadez
92% match
Loading thumbnail…

Let's make a Map with D3.js!

This example displays a world map rendered as SVG paths using D3.js. It loads world-atlas TopoJSON data via `d3.json`, converts it to GeoJSON with `topojson.feature`, and projects it using `d3.geoMercator`. The `d3.geoPath` generator sets the `d` attribute for each country path through a data join, producing a simplified 110m-resolution map.

CChristine Lanser
92% match