Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js

✓ Published1🌍 Public
EEdward-Elric233
Last edited Sep 10, 2020
Created on Sep 10, 2020
Forked from Blank Canvas

This example shows a world map rendered with D3.js using the geoEqualEarth projection, with countries filled in green and a blue sphere background. It demonstrates geographic data visualization by loading the world-atlas TopoJSON dataset and converting it to GeoJSON features via topojson.feature. The map uses d3.geoPath with the projection to draw SVG paths. The code also imports additional projections like geoMercator and geoOrthographic, though only equal-earth is applied here.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js

This example renders a world map using D3.js and TopoJSON. It shows the entire globe as a blue sphere with light green countries, using the `geoEqualEarth` projection and `geoPath` to generate SVG paths. The map draws country boundaries from the `world-atlas` dataset loaded via `json()`, demonstrating a simple choropleth-style base map with subtle stroke effects.

WWhitney Hung
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map showing country boundaries as light green filled paths on a steel blue sphere, using a geographic equal Earth projection. The map is drawn entirely as SVG with D3 v5 and TopoJSON, loading the world-atlas 110m dataset from unpkg. The code defines a path generator via d3.geoPath and d3.geoEqualEarth, appends a spherical outline, then converts the TopoJSON topology to GeoJSON features using topojson.feature before binding them to path elements.

JJefferson Abreu
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in teal against a blue sphere backdrop using an equal-earth projection. It loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with the `feature` function from Topojson, and projects it through `d3.geoPath` combined with the `geoEqualEarth` projection from d3-geo-projection. The visualization demonstrates a minimal, clean map-making workflow using D3 v5.

KKurt J Nilsen
92% match
Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered as an SVG using D3.js with a natural Earth projection. The map displays country boundaries in light green with subtle black strokes against a blue sphere background. It loads GeoJSON data from the world-atlas TopoJSON dataset and converts it using topojson.feature. The visualization demonstrates D3’s geoPath generator to project geographic coordinates, with selectable projection types commented in the code for experimentation.

HHe Jianfeng
91% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered with an equal-area natural Earth projection, with each country filled in light green and outlined with subtle black strokes against a blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the `feature` function from TopoJSON. The map is drawn as SVG paths generated with D3's `geoPath` and `geoNaturalEarth1` projection APIs, demonstrating a minimal React-free D3 mapping workflow.

Fforcox43
91% match
Loading thumbnail…

Let's make a map!

This example demonstrates a world map using an equal-earth projection, with countries rendered as light green regions and the spherical globe shown in blue. It fetches geographic data from the world-atlas package and visualizes it by applying the `geoPath` and `geoEqualEarth` functions from d3. The code uses topojson’s `feature` API to convert the TopoJSON data into GeoJSON features. Each country is drawn as an SVG path, with stroke opacity set to 0.1 for country boundaries. The entire map updates dynamically once the data is fetched and processed, displaying the complete set of countries in a single view.

XX. N. Chu
91% 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
91% 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
91% match