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

100%

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

✓ Published0🌍 Public

Last edited May 29, 2021

Created on May 29, 2021

Forked from Let's make a map with D3.js!

This example displays a world map with countries rendered as light green filled polygons with subtle black borders, projected onto a blue sphere using a natural Earth projection. The visualization fetches geographic data from the world-atlas package and uses the `geoPath` and `geoNaturalEarth1` APIs from D3 v5, along with the `feature` function from topojson to process GeoJSON features. The countries and the background sphere are drawn as SVG paths, with styling defined in an external CSS file.

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 with countries rendered in light green on a blue spherical backdrop, using a natural Earth projection. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON with topojson.feature. The map is drawn as SVG paths using d3.geoPath and d3.geoNaturalEarth1, with the sphere outline generated from a GeoJSON Sphere object. Styling applies a blue fill to the sphere and a black, semi-transparent stroke to country borders.

NNguyễn Hoàng Lý

95% match

Loading thumbnail…

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

This example displays world countries as light-green filled polygons on a blue sphere, using a natural Earth projection. It loads country boundaries from the World Atlas TopoJSON dataset and renders them as SVG paths via `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization includes a background sphere path and applies thin black strokes with low opacity to country borders. The code relies on `d3.json` for data fetching and `topojson.feature` to convert TopoJSON to GeoJSON features.

BBRIAN JORAM WANDOBIRE

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

94% match

Loading thumbnail…

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

This example displays a world map with countries rendered as light green landmasses against a blue spherical background. The visualization uses a natural Earth projection to transform geographic coordinates into a flat SVG canvas. The code leverages D3.js v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for projecting and drawing the map. Country boundaries are stroked in black with low opacity, while the data comes from the `world-atlas` package’s 110m resolution GeoJSON, loaded via `d3.json`. The rendering is entirely SVG-based with styling defined in CSS.

SSnapika

94% match

Loading thumbnail…

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

This map visualizes the countries of the world on a blue sphere using a natural Earth projection. It renders geographic boundaries with a light green fill, black strokes, and a semi-transparent stroke opacity. The code uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and draw features, while TopoJSON’s `feature` extracts country polygons from the world-atlas dataset. A static SVG path for the sphere is appended first, followed by dynamically appended country paths.

PPatrickhCahill

94% 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

94% match

Loading thumbnail…

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

This example displays a world map with countries filled in light green against a blue spherical backdrop, rendered as SVG paths using D3.js v5 and TopoJSON. It uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate country outlines, and fetches geographic data from the World Atlas TopoJSON source (110m resolution). The code appends a sphere path first, then loads and draws country features, with stroke opacity creating thin borders.

DDeepa-Murugesan

94% 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