Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
NNita
Last edited Nov 24, 2020
Created on Nov 24, 2020

This example demonstrates how to create a world map with D3.js, rendering countries as light-green SVG paths on a dark blue background. It uses the `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG path data, while TopoJSON’s `feature` method extracts country boundaries from a world-110m dataset loaded from unpkg. The visualization focuses on a clean, minimal map with thin black strokes separating countries, making it a straightforward introduction to geo-spatial data visualization.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as light green countries against a dark blue background using an SVG projection. It loads geographic data from the `world-map` package via TopoJSON, then uses D3’s `geoEquirectangular` projection and `geoPath` to draw each country’s borders. The code relies on D3 v5 selections and the TopoJSON `feature` method to convert topology into GeoJSON. Paths are styled with a faint black stroke and two-pixel width.

NNita
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map as a set of light-green SVG paths against a dark blue background. It uses a stereographic projection and d3.geoPath to draw country boundaries from TopoJSON data, sourced from the world-map package. The map is static, with each country outlined by a semi-transparent black stroke, and the code demonstrates a minimal setup for geographic visualization with D3 v5 and TopoJSON.

NNita
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered as light green SVG paths against a dark blue background. Using D3 v5 and TopoJSON, the code loads world-110m geographic data and projects it with a stereographic projection via d3.geoStereographic. Each country is drawn using d3.geoPath, with black strokes and low opacity to create a subtle outline effect. The map fills a 960 by 500 pixel SVG viewport with no interactivity.

NNita
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with countries filled in light green against a dark blue spherical backdrop. Using D3 v5, it loads world-110m TopoJSON data via `d3.json`, converts the TopoJSON features with `topojson.feature`, and projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. A separate path for the sphere applies the same projection to outline the globe, while country borders are drawn with a subtle black stroke.

NNita
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using an orthographic projection, rendering countries as light-green SVG paths with dark strokes. It loads geographic data from a TopoJSON world-atlas file via `d3.json`, then converts it to GeoJSON using `topojson.feature`. The map is drawn with `d3.geoPath` and `d3.geoOrthographic`, projecting the spherical landmasses onto a flat plane. The dark blue background and minimal styling emphasize the Earth’s curved shape, creating a simple globe-like visualization.

NNita
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered as light green SVG paths on a dark blue background. It uses the world-atlas TopoJSON dataset and D3’s `geoMercator` projection with `geoPath` to generate the shapes. The topojson `feature` method extracts country geometries, which are appended as SVG `<path>` elements. The map is static, with thin black strokes and low stroke opacity defining country borders.

AArriannePandaraoan
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example visualizes world map countries using a natural Earth projection onto an SVG canvas. Each country appears as a light green path with subtle black borders, set against a dark blue background. Built with D3 v5, the code uses d3.geoNaturalEarth1 for projection and d3.geoPath for rendering geographic features. TopoJSON converts the world-110m dataset into GeoJSON features, which are then appended as SVG paths. The data comes from the world-map package hosted on unpkg.

NNita
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple world map rendered as an SVG, with countries filled in light green against a blue ocean sphere. The code uses D3 v5’s `geoMercator` projection and `geoPath` to draw geographic features, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas dataset. Country paths are appended dynamically after loading the 110m resolution GeoJSON via a promise, with styling applied through CSS classes.

TTsukiij
93% match