Let's make a map D3.js

100%

Let's make a map D3.js

✓ Published1🌍 Public

Last edited Jan 20, 2021

Created on Sep 25, 2020

Forked from Let's make a face with D3.js

This example displays world countries on a rotating orthographic globe rendered as an SVG sphere with light green landmasses. The visualization loads geographic data from the World Atlas TopoJSON dataset via `d3.json`, then converts it to GeoJSON using TopoJSON’s `feature` method. D3’s `geoOrthographic` projection and `geoPath` generate the country outlines, while the sphere background is drawn using a GeoJSON Sphere object. The code imports specific D3 modules (`select`, `json`, `geoPath`, `geoOrthographic`) and styles the map with CSS classes.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders an orthographic globe using D3.js and TopoJSON, drawing country boundaries as green SVG paths with white strokes over a sphere background. It loads world geography from the world-atlas dataset, converts TopoJSON features via `topojson.feature`, and projects them with `d3.geoOrthographic` and `d3.geoPath`. The map is static, with no rotation or interaction, and displays all countries at a 110m resolution.

Aaidanoconnor1

92% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays an orthographic map of the world, rendered as a blue sphere with grey country outlines. It uses D3’s `geoOrthographic` projection and `geoPath` to draw the sphere and country boundaries, pulling geographic data from the `world-atlas` TopoJSON dataset via `topojson.feature`. The SVG output includes a styled sphere fill and country paths, with interactive rotation not implemented in the shown code.

Ssreen020

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 rendered as an SVG, with countries filled in green against a dark blue spherical backdrop. It fetches country boundaries from a TopoJSON file via the world-atlas dataset, then projects them using the Hufnagel projection from `d3-geo-projection`. The code builds paths with `d3.geoPath` and `d3.json`, styling the sphere and landmasses through CSS classes. It relies on D3 v5, TopoJSON’s `feature` method, and demonstrates a compact, data-driven mapping workflow.

JJames Malvern

91% 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 and the globe as a blue sphere. It demonstrates loading geographic data from a TopoJSON file via `d3.json` and converting it to GeoJSON features using the `feature` function from the TopoJSON library. The map projection and path generation are handled by `d3.geoNaturalEarth1` and `d3.geoPath`, which draw the country boundaries and the sphere outline. The code uses D3 v5 and relies on the world-atlas dataset at 110m resolution.

Ggcappadaniel

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an orthographic world map rendered as an SVG, with countries filled in green against a light blue sphere. It uses D3.js version 5 functions `d3.geoOrthographic` and `d3.geoPath` to project and draw geographic features, alongside TopoJSON’s `feature` method to extract country boundaries from the world-atlas dataset. The map initially displays a global view, with the sphere outline and country paths appended to the SVG canvas.

SSophia Murage

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered on an SVG canvas, with countries filled in light green and outlined in black, and a blue sphere representing the global boundary. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON using the `feature` method from topojson. The map uses `d3.geoPath` with a `d3.geoNaturalEarth1` projection to generate the country outlines, while D3’s selection and data-join methods append the corresponding SVG path elements.

Mmeihaoming

91% match