Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
AAltxis
Last edited May 8, 2020
Created on May 8, 2020

This example displays a world map with countries rendered as light green paths on a blue spherical background. Using D3.js and the topojson library, the code fetches geographic data from the `world-atlas` package and applies a `geoNaturalEarth1` projection with `geoPath` to draw the map. The SVG output includes a distinct sphere class and country boundaries with subtle stroke opacity.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3 v5 and TopoJSON to load world-atlas data, then applies a natural Earth projection via `d3.geoNaturalEarth1` and traces country boundaries with `d3.geoPath`. The code also draws a background sphere path to represent the globe.

Ccodexmon
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries filled with light green and outlined in black, set against a dark blue sphere representing the globe. The visualization uses D3.js v5 and the topojson library to load country boundaries from the world-atlas dataset, then renders them as SVG paths. The code applies a geoNaturalEarth1 projection through d3.geoPath, first drawing the sphere background and then appending a path for each country feature.

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

Let's make a map with D3.js!

This visualization displays a world map using D3.js, with countries rendered as light green paths against a blue spherical backdrop. The example loads geographic data from the world-atlas TopoJSON collection and projects it using the Natural Earth projection via `d3.geoNaturalEarth1`. The map is drawn as SVG paths, generated by `d3.geoPath`, and the sphere outline is created from a synthetic Sphere geometry. Country boundaries appear with black strokes at low opacity, while the data is processed through the `topojson.feature()` API.

Ggcappadaniel
95% match
Loading thumbnail…

Let's make a map with D3.js!

This visualization displays a world map using D3.js, with countries rendered as light green paths against a blue spherical backdrop. The example loads geographic data from the world-atlas TopoJSON collection and projects it using the Natural Earth projection via `d3.geoNaturalEarth1`. The map is drawn as SVG paths, generated by `d3.geoPath`, and the sphere outline is created from a synthetic Sphere geometry. Country boundaries appear with black strokes at low opacity, while the data is processed through the `topojson.feature()` API.

Ggcappadaniel
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered in light green on a blue sphere, using a natural Earth projection. It shows the geographic boundaries of nations as SVG paths, generated from a world-atlas TopoJSON dataset loaded via D3’s `json` function. The code uses `d3.geoPath` with a `geoNaturalEarth1` projection to convert geographic coordinates into screen paths, and the `topojson.feature` function to extract country features from the TopoJSON data. The sphere background is drawn as a separate path to create a globe-like visual context.

TThomas Seberechts
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js. It renders a natural Earth projection of countries as SVG paths, filled with light green and outlined with a subtle black stroke, all set against a blue sphere background. The code uses `d3.json` to load geographic data from the world-atlas TopoJSON file, then converts it to GeoJSON with `topojson.feature`. The map is drawn using `d3.geoPath` and the `geoNaturalEarth1` projection, with the sphere added as a separate path.

TTallulah Kay
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows how to create a world map using D3.js and TopoJSON, displaying countries as light green shapes on a blue sphere. The code loads world atlas data from the `world-atlas` package, converts TopoJSON features into GeoJSON using `topojson.feature`, and renders them with `d3.geoPath` and a `d3.geoNaturalEarth1` projection. Countries change color to green on hover, and the SVG includes a styled sphere background.

XXenos Panagiotis
95% match