Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
AArriannePandaraoan
Last edited Apr 22, 2020
Created on Apr 22, 2020

This example displays a world map using an orthographic projection, rendering countries as light-green SVG paths against a dark blue background. The map is built entirely with D3.js v5 and TopoJSON, loading geographic data from the world-atlas dataset. The code uses `d3.geoOrthographic` and `d3.geoPath` to project and trace country boundaries, while `topojson.feature` extracts the geometries for rendering.

AI-generated description
MIT Licensed

Similar vizzes

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

Let's make a map with D3.js!

This example presents a static world map rendered with a light green fill on a dark blue background. It uses the equirectangular projection to display country boundaries as SVG paths, with data from the world-atlas TopoJSON dataset. The code builds the visualization with D3 v5’s `geoPath` and `geoEquirectangular` functions, alongside TopoJSON’s `feature` method to convert the TopoJSON topology into GeoJSON features. Each country is appended as a separate `path` element to the SVG canvas.

AArriannePandaraoan
95% 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
95% 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
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple orthographic world map rendered as an SVG, with countries filled in light green and a blue sphere representing the globe. It uses D3 v5’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas dataset. The code appends a sphere path, then fetches the TopoJSON file, converts it to GeoJSON with the `feature` function from the topojson library, and binds the resulting country features to SVG paths.

DDukatino
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js and TopoJSON to generate an orthographic projection map of the world. It loads world country boundaries from a JSON file hosted on unpkg, converts the TopoJSON data into geographic features, and renders each country as a green SVG path with a subtle black stroke. The visualization employs `d3.geoOrthographic` and `d3.geoPath` to create the projection, with the dark blue background and minimal styling coming from the linked CSS.

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

Let's make a map with D3.js!

This example creates an interactive orthographic map of the world using D3.js v5 and TopoJSON. It loads world country boundaries from the world-atlas dataset and renders them as SVG paths with a blue ocean background and green landmasses. The code uses `d3.geoOrthographic` for the projection and `d3.geoPath` to generate the geographic paths. Country features are extracted with TopoJSON’s `feature` method and bound to SVG path elements, producing a simple, static globe visualization.

VVinh H. Le
93% match