Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js

✓ Published1🌍 Public
BB Sundaresan
Last edited Jul 13, 2020
Created on Jul 11, 2020

This example renders a world map using D3.js and the Natural Earth projection via `d3.geoNaturalEarth1`. It constructs an SVG with a blue sphere background and green country paths using `d3.geoPath` and `topojson.feature`. The map is built from the world-atlas countries-110m JSON dataset, and the code handles path generation for both the sphere and country shapes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered as an SVG using D3.js, with countries filled in light green against a sky-blue sphere background. It uses the `geoNaturalEarth1` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas package. The code fetches the countries-110m.json file, converts it to GeoJSON with `feature`, and appends each path to an SVG element. Both D3 v5 and TopoJSON are loaded via CDN, and the visualization is built with a React starter setup.

NNkwachi Abel
94% 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
94% 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
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using the Natural Earth projection via D3.js. A light green SVG path for each country is drawn over a blue spherical backdrop, with black strokes at low opacity for boundaries. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection, loads geographic data from the `world-atlas` 110m JSON dataset, and constructs country features using the `topojson` library. The visualization is entirely SVG-based.

DDan Grunebaum
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using the Natural Earth projection via D3.js. A light green SVG path for each country is drawn over a blue spherical backdrop, with black strokes at low opacity for boundaries. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection, loads geographic data from the `world-atlas` 110m JSON dataset, and constructs country features using the `topojson` library. The visualization is entirely SVG-based.

DDan Grunebaum
94% match
Loading thumbnail…

Let's make a map with D3.js

This example shows how to create a world map with D3.js, rendering a blue sphere and green country shapes in SVG. The code uses `d3.geoNaturalEarth1` for the map projection and `d3.geoPath` to generate the country outlines from TopoJSON data. It loads the world-atlas dataset from unpkg, converts the TopoJSON to GeoJSON with `topojson.feature`, and appends paths for each country. The visualization is built with D3 v5, using promise-based `d3.json` to asynchronously fetch the geographic data.

BbeauMarko
94% 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 ocean (sphere) in powder blue. It uses D3.js's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings. The map data comes from the `world-atlas` package, loaded as TopoJSON and converted to GeoJSON using the `topojson.feature()` function. The `svg.append` and `selectAll` methods are used to draw the sphere and country paths onto the canvas.

Vvic126
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map in D3.js using the Natural Earth projection (geoNaturalEarth1) and draws country boundaries as SVG paths. It begins by rendering a blue sphere backdrop, then loads geographical data from the world-atlas package via a JSON request. The topojson library’s feature function extracts country geometries, which are then projected and drawn as light green filled paths with subtle black strokes using d3.geoPath. The map is rendered entirely as vector SVG elements, demonstrating a basic choropleth setup with static styling.

AAlex Reitz
94% match