Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSeldomtimely
Last edited May 13, 2021
Created on May 9, 2021

This example visualizes Canada’s provinces as a choropleth map on a blue spherical background using a natural Earth projection. The map is rendered with SVG paths generated by `d3.geoPath` and `d3.geoNaturalEarth1`, while TopoJSON data is fetched and converted to GeoJSON via the `feature` method. Province boundaries appear as light green shapes with thin black strokes, and the sphere itself is drawn as a distinct path. The code loads data from a GitHub gist and relies on D3 v5 and TopoJSON v3.

AI-generated description
MIT Licensed

Similar vizzes

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

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

This example displays a natural Earth projection of the world, with countries filled in light green against a blue ocean sphere. It loads GeoJSON country boundaries from the World Atlas TopoJSON file and renders them as SVG paths using `d3.geoPath` with the `geoNaturalEarth1` projection. The code uses `d3.json` to fetch the data and `feature` from TopoJSON to convert it to GeoJSON. A single SVG element holds both the sphere backdrop and the country outlines, which have a subtle black stroke.

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

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

This example displays a natural Earth world map with countries rendered in light green against a blue spherical backdrop, using the Natural Earth 110m dataset loaded via `d3.json`. The visualization employs D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library’s `feature` function extracts country geometries from the raw GeoJSON. A static sphere outline is drawn first, followed by country boundaries with subtle black strokes, all rendered as SVG elements within a 960×500 viewport.

KKota Satya Kiran
84% match
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
84% match