Skip to main content
SimilarExport ZIP
100%

Let's make a MAP with D3.js

✓ Published1🌍 Public
LLucas Meirelles
Last edited Sep 2, 2020
Created on Sep 2, 2020

This example shows a world map rendered in an SVG using D3.js with an orthographic projection, displaying countries as light-green paths with subtle black strokes against a dark blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON file (countries-110m.json) and converts it to GeoJSON using the topojson `feature` function. The code specifically uses D3 v5 APIs including `d3.geoOrthographic`, `d3.geoPath`, and `d3.json` to project and draw the map, with commented alternatives for other projections like Mercator and Natural Earth.

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 an SVG, with countries filled in light green and the ocean depicted as a sky-blue sphere. It uses D3 v5 and TopoJSON to load world-atlas data at 110m resolution, then applies the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate country boundaries. The map also draws a background sphere path, and country strokes are semi-transparent black. The code relies on `topojson.feature` to convert TopoJSON topology into GeoJSON features for rendering.

Ccledevoute
93% 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
92% 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 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.

AArriannePandaraoan
92% match
Loading thumbnail…

Lets make a MAP with D3.js

This example displays a world map using the Natural Earth projection, with countries filled in light green against a semi-transparent dark blue sphere. D3.js (v6) and the topojson library load country boundaries from the world-atlas dataset, while `d3.geoPath` and `d3.geoNaturalEarth1` generate the projected SVG paths. The code demonstrates how to render both the global sphere outline and individual country features from TopoJSON into a static SVG graphic.

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

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

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 with subtle black strokes. The map is drawn from TopoJSON data loaded from the visionscarto-world-atlas package, using D3 v5’s `geoPath` and `geoNaturalEarth1` projection. A blue sphere path outlines the globe’s boundary. The code specifically imports `feature` from TopoJSON to convert topologies into GeoJSON features, then binds the country data to SVG path elements. The map appears on a blank background with no additional interactive features or transitions.

Mmla341
92% match
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
92% match