Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ddanish-nix
Last edited May 15, 2021
Created on May 15, 2021

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.

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

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

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.

Xxyang3672
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 a world map rendered as an SVG, with countries filled in light green against a blue oceanic sphere. It uses D3 v5 and the topojson library to load and parse world-atlas data from an external URL, then projects the geographic features with a natural Earth projection and draws them using d3.geoPath. The map is generated entirely in the browser from TopoJSON data, with a simple CSS-styled SVG output.

DD3React
93% 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
93% match
Loading thumbnail…

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

This example presents a static world map rendered as SVG, showing countries as pink regions on a sky-blue spherical backdrop. The map is built using D3.js version 5 and the topojson library, which decodes GeoJSON-like data from the `world-atlas` package. The `d3.geoPath` and `d3.geoNaturalEarth1` APIs handle the projection and path generation. The code first draws a full sphere, then loads country boundaries from a remote JSON file and appends them as separate paths. The styling uses a faint blue stroke for country borders.

Bbhanuprasadk19
93% 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
93% 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
93% match