Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAlexTapiaM
Last edited Mar 7, 2021
Created on Mar 7, 2021

This fork of a D3.js mapping tutorial displays a world map, rendering countries in light green with black borders on a blue sphere. The visualization uses the Natural Earth 110m dataset loaded via the `world-atlas` package, and projects the geometry with `d3.geoNaturalEarth1` and `d3.geoPath`. A topojson `feature` extracts country boundaries from the data. The SVG output is styled with a CSS class for both the sphere background and individual country paths.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

This fork of a D3.js mapping tutorial displays a natural Earth projection of the world, with countries filled in light green against a blue sphere. The visualization renders as an SVG using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the topojson library’s `feature` function extracts country boundaries from the world-atlas dataset at 110m resolution. Country paths are drawn with a semi-transparent black stroke, and the map appears static without interaction.

Iinnocent thomas
96% match
Loading thumbnail…

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

This fork of "Let's make a map with D3.js!" displays a world map of countries, filled in light green over a blue sphere, using a natural Earth projection. The visualization loads geographic data from the world-atlas package and renders the sphere and country boundaries as SVG paths with D3’s geoPath. It uses the d3 and topojson libraries, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to project and draw the map.

JJyothicherukuri
95% match
Loading thumbnail…

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

This fork displays a world map in an SVG, coloring landmasses light green against a blue sphere. It uses D3 v5 with `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country boundaries from TopoJSON data loaded via the `world-atlas` package. The code appends the sphere path first, then fetches country features and draws them as separate paths with a subtle black stroke.

Bbluelionz7
95% match
Loading thumbnail…

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

This fork of the D3.js map tutorial visualizes world countries on a natural Earth projection. The code renders a blue sphere as the globe background and fills each country path with light green strokes using topojson.feature and d3.geoPath. It loads geographic data from the world-atlas 110m TopoJSON file and projects it with d3.geoNaturalEarth1, drawing all map elements as SVG paths.

KKota Satya Kiran
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 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
94% match
Loading thumbnail…

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

This visualization employs D3.js v5 and TopoJSON to render a world map on an SVG canvas. The map uses the Natural Earth dataset loaded from the `world-atlas` package, with country boundaries drawn as SVG paths using the `geoNaturalEarth1` projection and `geoPath` from D3. Countries are filled in light green with black outlines, while the surrounding sphere is filled blue. The code demonstrates DOM manipulation by selecting the SVG element, appending a sphere path, and then adding country paths after asynchronously fetching the geographic data.

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