Skip to main content
SimilarExport ZIP
100%

Let'smakeamap

✓ Published1🌍 Public
OOhayouKaminari
Last edited Feb 7, 2020
Created on Feb 7, 2020
Forked from Let'smakeaface

This example displays a world map using the Natural Earth projection, with countries filled in light green against a dark blue sphere. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them with `topojson.feature`. The SVG paths are generated using `d3.geoPath` and `d3.geoNaturalEarth1`, with styling applied through CSS classes for the sphere and individual countries.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a map

This example displays a world map using a natural Earth projection, with countries filled in light green against a blue spherical backdrop. It loads geographic data as TopoJSON from the world-atlas package and converts it to GeoJSON features using topojson’s `feature` method. The map is rendered as SVG paths via `d3.geoPath` and `d3.geoNaturalEarth1`, with styling applied through CSS classes for the sphere and country boundaries.

MMahaveer Jain
94% match
Loading thumbnail…

Let's make a Map!

This example displays a natural Earth projection world map using SVG, with countries filled in light green and oceans rendered in blue. It loads GeoJSON country boundaries from a World Atlas TopoJSON file via `d3.json`, then converts the TopoJSON features using the `topojson.feature` API. The map is drawn with `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths, including a separate path for the globe’s sphere.

Rrainyrainyguo
94% match
Loading thumbnail…

Let's Make a Map!

This example displays a world map using a natural Earth projection, with countries drawn as light green polygons against a blue ocean sphere. It loads the TopoJSON world-atlas dataset, converts it to GeoJSON via `topojson.feature`, and projects it using `d3.geoNaturalEarth1` and `d3.geoPath` to generate SVG paths. The sphere outline and country boundaries are rendered with distinct fill and stroke styles, demonstrating a minimal geographic visualization workflow.

Ppeiselttu
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a natural Earth projection map of the world, with countries rendered as light green SVG paths and the ocean sphere filled in blue. It loads geographic data from the world-atlas TopoJSON dataset using `d3.json`, converts the TopoJSON features to GeoJSON with `topojson.feature`, and projects them via `d3.geoNaturalEarth1` and `d3.geoPath`. The sphere outline is drawn using a GeoJSON Sphere object.

AAlice Hsieh
93% match
Loading thumbnail…

Let's make a map!

This example creates a world map by rendering GeoJSON country boundaries onto an SVG. It first draws a blue sphere background and then overlays light green country paths with subtle black strokes, using the Natural Earth projection. The code loads world topology data from the world-atlas package and converts it to GeoJSON using topojson’s `feature` method, then applies `d3.geoPath` with `geoNaturalEarth1` for projection. Both D3 and TopoJSON libraries are included via CDN.

RRoger Yu-Hsiang Lo
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
93% match
Loading thumbnail…

Let's create a world map (geoNaturalEarth1)2 - with d3

This example displays a world map using the Natural Earth projection, with countries rendered as light green polygons against a dark blue sphere. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `topojson.feature`, then projects them using `d3.geoNaturalEarth1` and draws them as SVG paths with `d3.geoPath`. A data join appends each country path, while a separate path illustrates the globe’s outline. The code relies on d3.select, d3.json, and d3.v5, with styling controlled by CSS classes.

AAsperge-Atomique
93% match