Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
Sskambaskamba
Last edited Jul 15, 2020
Created on Jul 15, 2020

This example displays a map of Austrian districts using SVG paths generated from TopoJSON data. The code projects geographic coordinates with the Mercator projection and renders boundaries via `d3.geoPath`. It fetches the TopoJSON file from a remote GitHub repository, converts it to GeoJSON features using the `feature` function from topojson, and appends the resulting paths to an SVG. The visualization uses D3 v5, including d3-array and d3-geo modules, with a fixed viewport of 960 by 500 pixels.

AI-generated description
MIT Licensed

Similar vizzes

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

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with country boundaries drawn from TopoJSON data. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into screen paths, while the `topojson.feature` API extracts country geometries from the world-atlas dataset. All countries are appended as individual `path` elements to a 960×500 SVG canvas. The code loads data asynchronously via `d3.json` and relies on the bundled `index.js` to handle the data-binding and path generation.

Aaxliao
84% 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
84% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js and TopoJSON. It renders country boundaries as green SVG paths with thin black strokes on a dark blue background, using a Mercator projection. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features with the `feature` function. The code uses `d3.geoMercator` and `d3.geoPath` to project the map coordinates and generate the path data.

Ddacoylo
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It draws country boundaries as SVG paths projected with a Mercator projection using `d3.geoMercator` and `d3.geoPath`. The map loads geographic data from the world-atlas countries-110m JSON file, converts TopoJSON to GeoJSON with the `feature` function, and appends each country path to the SVG. The visualization demonstrates a basic choropleth-free mapping workflow with styled countries and a blue sphere background.

TTrustPaul
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a choropleth map of geographic features rendered as SVG paths. It uses D3.js v5 to load the GeoJSON data, apply a Mercator projection with `d3.geoMercator`, and generate the path data via `d3.geoPath`. The TopoJSON library converts the datasource into GeoJSON features using `feature()`, while `d3.json` fetches the remote file before appending each path to the SVG canvas.

Cchaimmaeee
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in teal against a blue sphere backdrop using an equal-earth projection. It loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with the `feature` function from Topojson, and projects it through `d3.geoPath` combined with the `geoEqualEarth` projection from d3-geo-projection. The visualization demonstrates a minimal, clean map-making workflow using D3 v5.

KKurt J Nilsen
83% 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 and TopoJSON. It uses `d3.geoBonne` as the map projection and `d3.geoPath` to generate SVG paths for country boundaries. The map loads geographic data from the World Atlas TopoJSON file (110m resolution) and renders each country as a pink SVG path with black outlines. A sphere outline is drawn around the map using a simple GeoJSON Sphere object, while CSS styles control the fill and stroke appearance.

YYanan Xin
83% match