Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
RRyan Rong
Last edited Mar 3, 2021
Created on Mar 3, 2021

This example displays a natural Earth projection of the world map, with continents rendered as light green shapes on a blue spherical background. Using D3.js v5 and the topojson library, it loads geographic data from the World Atlas repository via a JSON request. The `geoPath` and `geoNaturalEarth1` APIs generate the projected paths, while SVG elements are selected and appended to the canvas for rendering.

AI-generated description
MIT Licensed

Similar vizzes

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
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 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 map visualization presents a global view of natural Earth continents using a Natural Earth projection. The map displays countries as light green regions with subtle black borders against a blue sphere representing the ocean. It uses the d3 library's geoNaturalEarth1 projection and geoPath API to render geographic features, with the topojson library's feature function converting GeoJSON data from the world-atlas package into drawable country paths. The SVG output is styled through a separate CSS file.

袁袁孟華
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
94% 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 a blue sphere outline. It loads geographic data from the World Atlas TopoJSON collection and converts it to GeoJSON features using `topojson.feature`. The map is rendered as SVG paths generated by `d3.geoPath` with the `geoNaturalEarth1` projection, while the outer sphere boundary is drawn separately. The visualization demonstrates a minimal, static cartographic rendering with D3 v5.

GGang Chen
94% match