Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
LLittledevil7
Last edited Apr 22, 2020
Created on Apr 22, 2020

This example shows a world map rendered with a blue sphere background and light green country outlines using an SVG canvas. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON via topojson.feature. The map uses d3.geoNaturalEarth1 for projection and d3.geoPath to generate the SVG paths, with d3.json fetching the remote dataset. The page includes a linked YouTube tutorial video and applies simple CSS styling for the sphere and country fills.

AI-generated description
MIT Licensed

Similar vizzes

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 against a blue sphere background. It uses D3 v5 to load GeoJSON data from the world-atlas TopoJSON file, converting it with `topojson.feature`. The map is projected using `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. A separate path represents the sphere outline. The visualization updates dynamically once the data loads, adding country paths to the SVG.

OOliverlee1003
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as a static SVG, with countries filled in green and a light blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using `topojson.feature`. The map uses the `geoNaturalEarth1` projection and draws boundaries with `d3.geoPath`. D3 selections append one SVG path per country, while a dedicated sphere path provides the ocean backdrop.

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

Let's make a map with D3.js!

This example shows a world map rendered on an SVG canvas, with countries filled in light green and outlined in black, and a blue sphere representing the global boundary. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON using the `feature` method from topojson. The map uses `d3.geoPath` with a `d3.geoNaturalEarth1` projection to generate the country outlines, while D3’s selection and data-join methods append the corresponding SVG path elements.

Mmeihaoming
95% match
Loading thumbnail…

Let's make a map with D3.js

This example shows a geographic world map rendered as an SVG using D3.js and TopoJSON. It displays country boundaries and a blue sphere outline, with countries filled in light green and subtle black strokes. The code loads world-atlas data via D3’s `json` method and converts TopoJSON features using `topojson.feature`. It applies a natural Earth projection with `d3.geoNaturalEarth1` and generates paths via `d3.geoPath`. The visualization relies on D3 v5 and TopoJSON v3 scripts.

HHasideluxe
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 as SVG paths filled with light green and a blue sphere as the globe backdrop. It employs the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate geographic shapes, while loading TopoJSON data from the world-atlas package and converting it to GeoJSON via `topojson.feature`. The map is drawn on a static 960×500 SVG canvas without interactivity.

LLuce Liu
94% 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
94% match