Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSnapika
Last edited Apr 3, 2022
Created on Apr 3, 2022

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.

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 map shows the countries of the world rendered with a natural Earth projection, where landmasses appear in light green against a blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded via d3.json from the world-atlas dataset. Country boundaries are drawn with a subtle black stroke, while the underlying sphere provides an ocean-colored backdrop.

Bbugfree55
95% match
Loading thumbnail…

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

This example displays a global map with countries filled in light green, using a natural Earth projection against a blue spherical backdrop. The map is built with D3.js v5 and the `d3.geoPath` and `d3.geoNaturalEarth1` APIs, with country boundaries rendered as SVG paths. The visualization also includes an interactive zoom feature that applies a transform to the SVG group via `d3.zoom()`. The data is sourced from the world-atlas package’s 110m GeoJSON file, converted to features with TopoJSON’s `feature` function.

Aayonghosh2003
95% match
Loading thumbnail…

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

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It uses D3.js v5’s `geoPath` and `geoNaturalEarth1` projection to generate geographic outlines from the world-atlas TopoJSON dataset. The code also loads the TopoJSON library to extract country features, then appends each path to the SVG container. The visualization demonstrates a straightforward choropleth-style map without interactivity, emphasizing the projection and vector rendering pipeline.

SSnapika
95% match
Loading thumbnail…

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

This visualization displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. The map is rendered as SVG paths on a 960×500 canvas using D3.js version 5 and the TopoJSON library. The code loads country boundaries from a world-atlas JSON file and projects them with d3.geoNaturalEarth1 and d3.geoPath. Each country’s outline is drawn as a separate path with a subtle black stroke, while a sphere path fills the background before the country data arrives.

Mmaferayala
95% match
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 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.

FFarooq Khan
94% match
Loading thumbnail…

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

This visualization shows a simple world map rendered as an SVG, with countries filled in light green against a blue spherical background. It uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw geographic features. Country boundaries come from the World Atlas TopoJSON dataset, which is fetched via `d3.json` and converted to GeoJSON using `topojson.feature`. The sphere outline is drawn first as a full-path shape, followed by individual country paths. Styling is handled through CSS classes, with stroke opacity creating subtle boundary lines.

Oolavrc
94% match