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

100%

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

✓ Published0🌍 Public

Last edited Oct 7, 2019

Created on Oct 7, 2019

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

This example displays a world map rendered with the geoNaturalEarth1 projection, showing countries as light-green polygons with black outlines against a dark-blue spherical background. It loads geographic data from the world-atlas TopoJSON dataset via d3.json, then converts the TopoJSON features into GeoJSON using the topojson.feature API. The d3.geoPath generator projects and draws each country path onto an SVG canvas, while the sphere outline is created by passing a Sphere object to the same path generator.

AI-generated description

MIT Licensed

Similar vizzes

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

97% match

Loading thumbnail…

Lets make a Map with D3!

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths with black outlines. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the topojson `feature` function, then draws the map with d3.geoPath and d3.geoNaturalEarth1. The blue sphere background path is generated directly from a sphere object.

OOvxOO

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!

Ffaaty

93% match

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map with countries rendered as light green SVG paths on a blue sphere, using a natural Earth projection. The code loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON with topojson’s `feature` method. It builds the map with d3’s `geoPath` and `geoNaturalEarth1` projection, appending country paths and a sphere outline to the SVG canvas.

MMartin Christensen

93% 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 with D3.js

This example visualizes world countries as a natural Earth projection map, with landmasses rendered in light green against a dark blue spherical backdrop. Using D3 v5, it loads TopoJSON data from the world-atlas package and converts it to GeoJSON via topojson.feature, then draws each country with d3.geoPath and a d3.geoNaturalEarth1 projection. The map is rendered as SVG paths onto a fixed 960×500 canvas.

AAmar Nath Yogi

93% 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

93% match