Skip to main content
SimilarExport ZIP
100%

Making a Map with D3!

✓ Published1🌍 Public
AAnnie Liao
Last edited Jul 14, 2020
Created on Jul 14, 2020

This visualization displays a world map in a natural Earth projection, with countries filled in pale green and the sphere rendered in cornflower blue. The code uses D3 v5’s `geoPath` and `geoNaturalEarth1` projections, along with the topojson `feature` function, to convert GeoJSON country boundaries into SVG paths. Country data comes from the world-atlas 110m dataset, while the map’s ocean and landmasses are drawn as separate SVG paths.

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 visualizes a world map using a natural Earth projection, with countries rendered as green SVG paths against a blue sphere background. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON with `topojson.feature`. The visualization uses D3 v5’s `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map, while CSS styles the sphere and country boundaries.

LLongYuu
92% 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 green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Eegrebing
92% match
Loading thumbnail…

Lets Make a map with D3.js

This example visualizes world countries as a static map using a natural Earth projection. The map renders countries in light green with subtle black strokes against a dark blue sphere, providing a clear geographic overview. The code uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw SVG paths, while TopoJSON’s `feature` extracts country boundaries from a world-atlas dataset. Country shapes are appended to an SVG container, with styling applied via CSS classes for sphere and country paths.

Pprincit
92% match
Loading thumbnail…

Let's Make a Map!

This example displays the world's countries on a natural Earth projection, with a dark blue sphere (ocean) and light green landmasses. The map is built using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the TopoJSON library’s `feature` function converts country boundaries from the `world-atlas` dataset. Rendering occurs as SVG paths, with styling for country strokes and sphere fill.

Ggilbster
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example visualizes the world’s countries as filled polygons on a natural Earth projection, with oceans rendered in blue and landmasses in light green. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` function extracts country boundaries from a 110m world-atlas GeoJSON dataset. The code draws a sphere background and then overlays each country’s path, applying thin black strokes for borders.

AAdrian Herzog
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a dark blue ocean sphere, projected using the Natural Earth projection. The visualization is built with D3.js v5, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate country boundaries from the world-atlas TopoJSON dataset. The `topojson.feature` library processes geographic features, and SVG paths render each country. The map is presented within an empty SVG canvas, with the sphere and country paths styled via CSS classes.

Ooptimizeresume
92% 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
92% 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
92% match