Skip to main content
SimilarExport ZIP
100%

Let's Make a Map!

✓ Published2🌍 Public
Ggilbster
Last edited Dec 30, 2019
Created on Dec 30, 2019

This example displays the world's countries on a natural Earth projection, with a dark blue sphere (ocean) and light green landmasses. The map is built using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the TopoJSON library’s `feature` function converts country boundaries from the `world-atlas` dataset. Rendering occurs as SVG paths, with styling for country strokes and sphere fill.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

Lets make a map!

This example renders a world map using a natural Earth projection, displaying countries as light green filled regions with subtle black borders against a dark blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON dataset and uses D3 v5’s `geoPath` and `geoNaturalEarth!` projection, along with the `topojson` library’s `feature` method to convert TopoJSON into GeoJSON. The SVG output is generated through a React setup, with the sphere drawn first and country boundaries appended dynamically after data loads.

Ggregosaure
94% match
Loading thumbnail…

Let's make a map

This example displays a natural Earth projection of the world map, with countries rendered as light green SVG paths against a blue sphere backdrop. It uses D3 v6’s `geoNaturalEarth1` projection and `geoPath` to generate geometries, while TopoJSON’s `feature` converts the world-atlas countries-110m.json data into GeoJSON for binding. Country borders are drawn with a subtle black stroke, and the initial sphere outline is added as a separate path element.

OOleg
94% match
Loading thumbnail…

Let's make a map!

This example shows a world map rendered with countries filled in light green and a blue sphere representing the Earth’s surface, all within an SVG. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The code appends a sphere path and country paths, relying on the `json` function to load the TopoJSON data asynchronously.

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

Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, rendering countries as filled paths with a visible ocean sphere background. The map uses TopoJSON data from the World Atlas package, which is converted to GeoJSON via `feature`. The visualization is built with D3 v5, using `geoNaturalEarth1` for the projection, `geoPath` to generate SVG path data, and `select` to append the country and sphere elements to the SVG canvas.

CCassie
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries with a natural Earth projection. It displays a blue sphere background and green country shapes with subtle black borders. The code uses D3's `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library's `feature` function extracts country boundaries from a world-atlas dataset. The visualization loads geospatial data from a remote JSON file and renders the map entirely as scalable vector graphics.

Ssnschoenborn
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries with a natural Earth projection. It displays a blue sphere background and green country shapes with subtle black borders. The code uses D3's `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library's `feature` function extracts country boundaries from a world-atlas dataset. The visualization loads geospatial data from a remote JSON file and renders the map entirely as scalable vector graphics.

Ssnschoenborn
93% match