Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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 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.

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

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

This example visualizes a world map using a natural Earth projection, rendering countries as light green paths with dark strokes on a blue spherical backdrop. It loads geographic data from a world-atlas TopoJSON file via `d3.json`, then applies the `topojson` library’s `feature` function to extract country features. The SVG paths are generated using `d3.geoPath` and the `d3.geoNaturalEarth1` projection, which also draws the sphere outline. The input data source is the unpkg-hosted world-atlas dataset, and the rendering is entirely vector-based, using SVG elements styled by the included CSS.

TToooooooT
95% match
Loading thumbnail…

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

This example visualizes a world map using a natural Earth projection, with countries rendered as light green SVG paths on a blue sphere. It loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON using the topojson feature method. The map is drawn with d3.geoPath and d3.geoNaturalEarth1, with country borders stroked in semi-transparent black. The code imports specific D3 modules including select, json, and geoPath, demonstrating a concise approach to geographic visualization.

SSittukala Saravanan
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 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 renders a world map using a natural Earth projection, displaying country boundaries as colored paths over a blue spherical backdrop. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson `feature` method. The map is drawn with D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while each country is styled as a light green filled SVG path with a subtle black stroke. The visualization demonstrates a straightforward, static cartographic rendering with minimal interactive or animated elements.

AAiden Lau
95% 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 against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the topojson `feature` function. The visualization renders paths with d3.geoPath and d3.geoNaturalEarth1, appending each country as an SVG path element. The code demonstrates a straightforward D3.js v6 workflow for projecting and drawing vector map boundaries.

PPiotr Paszek
95% match