Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
BBahareh Zarei
Last edited Oct 17, 2018
Created on Oct 17, 2018

This example shows a world map rendered as an SVG using D3.js, with countries filled in light green and oceans in blue. It uses the `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while `topojson.feature` converts TopoJSON country boundaries from the world-atlas dataset. The map’s sphere outline and country paths are appended to the SVG, with styling applied via CSS classes. The code loads geographic data asynchronously using `json` from D3 v5.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries and oceans using a natural Earth projection, with landmasses filled in light green and the surrounding sphere in blue. It loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON features with `topojson.feature`, and renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. All elements are drawn as SVG paths, with a distinct path for the sphere outline and separate country paths styled through CSS.

BBahareh Zarei
97% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries and oceans using a natural Earth projection, with landmasses filled in light green and the surrounding sphere in blue. It loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON features with `topojson.feature`, and renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. All elements are drawn as SVG paths, with a distinct path for the sphere outline and separate country paths styled through CSS.

BBahareh Zarei
97% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries and oceans using a natural Earth projection, with landmasses filled in light green and the surrounding sphere in blue. It loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON features with `topojson.feature`, and renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. All elements are drawn as SVG paths, with a distinct path for the sphere outline and separate country paths styled through CSS.

BBahareh Zarei
97% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries and oceans using a natural Earth projection, with landmasses filled in light green and the surrounding sphere in blue. It loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON features with `topojson.feature`, and renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. All elements are drawn as SVG paths, with a distinct path for the sphere outline and separate country paths styled through CSS.

BBahareh Zarei
97% 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
96% 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
96% 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 globe as a blue sphere. It demonstrates loading geographic data from a TopoJSON file via `d3.json` and converting it to GeoJSON features using the `feature` function from the TopoJSON library. The map projection and path generation are handled by `d3.geoNaturalEarth1` and `d3.geoPath`, which draw the country boundaries and the sphere outline. The code uses D3 v5 and relies on the world-atlas dataset at 110m resolution.

Ggcappadaniel
96% 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
96% match