Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Xxyang3672
Last edited Mar 10, 2021
Created on Mar 10, 2021

This map visualization displays world countries as filled green regions on a blue sphere, rendered entirely with SVG. It loads geographic data from the World Atlas TopoJSON file using `topojson.feature` to extract country boundaries, then projects them with a Mercator projection via `d3.geoMercator` and `d3.geoPath`. The code appends a sphere outline path and draws each country as a separate `path` element, with styling applied through CSS classes for fill and stroke.

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 an orthographic projection, rendering countries as light green SVG paths on a blue sphere with subtle black borders. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson’s feature method. The visualization uses d3.json to fetch data, d3.geoOrthographic for projection, and d3.geoPath to generate the SVG path data. The sphere is drawn first as a separate path, with all country features appended dynamically once the data loads.

CCaminaur
95% match
Loading thumbnail…

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

This map renders world countries as light blue SVG paths on a white background, with thin black strokes, using the Mercator projection. The code builds the visualization with D3 v5’s `geoPath` and `geoMercator`, converting TopoJSON features from the world-atlas dataset via the `topojson` library’s `feature` function. Country shapes are drawn by appending SVG path elements bound to the projected geometry.

LLes Lim
95% 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 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ý
94% 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 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
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 sphere, rendered as SVG using D3.js v5 and TopoJSON. It uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from the world-atlas dataset. The sphere is drawn as a single path, and country features are generated with TopoJSON’s `feature` method before being appended to the SVG.

Ggurkenstock@gmail.com
94% match
Loading thumbnail…

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

This example shows a world map with countries rendered as light green shapes against a blue sphere, using geographic data from the World Atlas TopoJSON file. The code loads the topojson data via `d3.json`, converts it to GeoJSON with `topojson.feature`, and projects it onto an SVG using `d3.geoMercator` and `d3.geoPath`. Though country borders are styled in CSS, the map is still static; the JavaScript only logs the parsed features to the console.

Ddanish-nix
94% match