Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a map with D3.js!

✓ Published0🌍 Public
Rrajeshathakur
Last edited Apr 17, 2021
Created on Apr 17, 2021

This example displays a natural Earth projection of the world, with countries rendered as green SVG paths and oceans as a blue sphere. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to generate the projection, while TopoJSON’s `feature` extracts country boundaries from the world-atlas 110m dataset. The code loads geographic data asynchronously via `json`, then appends each country path to the SVG canvas.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection. The map is drawn with SVG paths, where countries are filled with light green and the surrounding sphere is dark blue. The code uses D3 v5 functions `geoPath` and `geoNaturalEarth1` to project geographic coordinates, while the `topojson` library’s `feature` function converts the world-atlas TopoJSON data into geometric features for rendering. The visualization loads country boundaries from the `world-atlas` package and applies a subtle black stroke with low opacity to each country outline.

Rrajeshathakur
97% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. It renders geographic boundaries as SVG paths, generated from a world-atlas dataset loaded via D3’s `json` function. The code employs `d3.geoPath` with the `geoNaturalEarth1` projection and uses the `topojson` library’s `feature` method to extract country geometries from the TopoJSON data. A static sphere outline is drawn first, followed by each country path, with stroke opacity creating subtle border definition.

Ffsajedi22
95% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a natural Earth projection map with countries rendered as light green shapes against a blue ocean sphere. It uses D3 v5 and TopoJSON to load world-atlas data from unpkg, then applies `geoNaturalEarth1` for the projection and `geoPath` to generate SVG paths for each country feature. The sphere outline and country boundaries are drawn as SVG elements, with styling defined in CSS.

Ppei9223
95% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a natural Earth projection of the world, with countries filled in light green against a blue ocean sphere. It loads GeoJSON country boundaries from the World Atlas TopoJSON file and renders them as SVG paths using `d3.geoPath` with the `geoNaturalEarth1` projection. The code uses `d3.json` to fetch the data and `feature` from TopoJSON to convert it to GeoJSON. A single SVG element holds both the sphere backdrop and the country outlines, which have a subtle black stroke.

Yyycgrace
95% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using the Natural Earth projection, with countries filled in light green and the globe’s sphere outlined in blue. It loads GeoJSON data from the world-atlas TopoJSON file, converts it with `topojson.feature`, and renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. The SVG output is generated entirely in D3 v5, with countries drawn as individual path elements.

AAjay Paudel B
95% match
Loading thumbnail…

Fork of Let's make a Map with D3.js!

This example shows a natural Earth projection map of world countries, with landmasses rendered in light green against a blue sphere. It uses D3.js v5 with the `geoNaturalEarth1` projection and `geoPath` to generate SVG paths. Country boundaries come from the world-atlas TopoJSON dataset, accessed via the `topojson.feature` API. The map displays both the graticule-like sphere outline and individual country paths, with stroke opacity for boundary separation.

VVamsiYandapalli
95% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This visualization renders a world map using a Natural Earth projection, displaying countries as light green polygons against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset, which is converted to GeoJSON using the `feature` function from topojson. The map is drawn as SVG paths via `d3.geoPath`, with the projection defined by `d3.geoNaturalEarth1`. The code first draws the sphere outline, then appends country paths with a stroke for boundaries, all within a static 960x500 viewport.

Bbhanuteja1807@gmail.com
95% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a natural Earth projection of the world, with countries rendered as light green polygons on a blue sphere. The visualization uses D3.js v5 and the topojson library to convert geographic data from the world-atlas package into SVG paths. The code employs d3.geoPath with d3.geoNaturalEarth1 for the projection, and the topojson feature function to extract country boundaries from the TopoJSON source. A semi-transparent black stroke outlines each country, while the sphere’s fill is set via the CSS class.

Wwakgari
94% match