Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
PPatrickhCahill
Last edited Apr 12, 2022
Created on Apr 12, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

This map visualization displays world countries as filled regions on a globe-like sphere using a natural Earth projection. The example demonstrates map creation with D3.js version 5, using `d3.geoPath` and `d3.geoNaturalEarth1` for the projection. Country boundaries are rendered as SVG paths from the world-atlas TopoJSON dataset, which is processed through the `topojson` library's `feature()` function. The sphere is styled blue, while country shapes appear in light green with subtle black stroke outlines.

Hhewitt99
96% 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
96% 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 shows a world map rendered as SVG paths, with countries filled in light green against a blue spherical background. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate the map, while TopoJSON’s `feature` extracts country boundaries from the world-atlas dataset (110m resolution). The code appends a sphere path first, then loads the TopoJSON data asynchronously and appends individual country paths, styling them via CSS classes. The result is a static, interactive-free choropleth-style map.

DDario Thornhill
95% match
Loading thumbnail…

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

This map visualization displays countries on a natural Earth projection, with oceans filled in blue and landmasses in light green with subtle black strokes. It draws a basemap from the World Atlas TopoJSON dataset using the `feature` method from Topojson, then renders the sphere and country boundaries with `d3.geoPath` and the `geoNaturalEarth1` projection. The code loads data asynchronously via `d3.json`, appends SVG paths, and styles the elements through CSS classes.

MMina Rezaei
95% match
Loading thumbnail…

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

This map visualizes world countries and oceans using a natural Earth projection. It renders the globe as a blue sphere with light green country polygons stroked in black, created through D3.js version 5 and TopoJSON. The code uses `d3.geoPath` with `d3.geoNaturalEarth1` to project geographic features, loading country boundaries from the world-atlas dataset via `d3.json`. The SVG output displays all nations, with the sphere path drawn first to establish the ocean background.

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