Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAjay Paudel B
Last edited Aug 12, 2022
Created on Aug 12, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

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 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
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 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 a natural Earth projection, with countries rendered as light green paths and the ocean as a light blue sphere. It loads geographic data from the World Atlas TopoJSON dataset at 110m resolution, converts it to GeoJSON using `topojson.feature`, and renders it with `d3.geoPath` and `d3.geoNaturalEarth1`. The D3 v5 selection and data join methods (`select`, `append`, `data`, `enter`) generate the SVG paths, with styling applied via CSS classes.

CCarloWK1202
95% match
Loading thumbnail…

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

This example shows a world map with countries rendered in light green against a blue sphere, using a natural Earth projection. It loads geographic data from the world-atlas TopoJSON file, then converts it to GeoJSON features with the topojson `feature` method. D3’s `geoPath` and `geoNaturalEarth1` projection generate the SVG paths for each country, while a separate path outlines the globe. The visualization is a minimal, static map demonstrating basic D3 geospatial rendering.

Aape-ape-ape
95% match
Loading thumbnail…

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

This example maps world countries using the Natural Earth projection, rendering landmasses as black paths against a blue sphere. It loads GeoJSON data from the world-atlas TopoJSON file via `d3.json` and converts it with `topojson.feature`. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG path data, appending each country as a separate `<path>` element with the `country` class.

JJyothicherukuri
95% match
Loading thumbnail…

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

This example renders a world map using the Natural Earth projection, displaying countries as light green shapes with subtle black outlines against a blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using TopoJSON’s `feature` function. The map is drawn with D3’s `geoPath` and `geoNaturalEarth1` projections, appending SVG paths for each country and the surrounding sphere. The visualization demonstrates a straightforward D3 v5 workflow for projecting and displaying map data in an SVG container.

RRunxin Shao
95% match