Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
AAnkit
Last edited Feb 24, 2020
Created on Feb 24, 2020

A world map rendered in SVG uses a blue sphere with green countries outlined in black, built with D3.js v5 and the topojson library. The code loads geographic data from the world-atlas 110m.json file, then applies a geoNaturalEarth1 projection via d3.geoPath to generate country paths. The visualization demonstrates a straightforward choropleth-like base map, with styling handled through CSS classes for the sphere and country boundaries.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

A world map rendered in SVG shows country boundaries as light green paths against a dark blue sphere, using a Natural Earth projection. The code loads world-atlas TopoJSON data from unpkg, converts it to GeoJSON with `topojson.feature`, and draws each country with `d3.geoPath`. The sphere outline is generated from a projected GeoJSON sphere object. D3 v5 handles the asynchronous JSON loading and DOM selection.

NNecklessCage
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and the sphere outline in blue. It uses a Natural Earth projection to display the globe. The visualization loads geographic data from the World Atlas TopoJSON file and applies D3’s `geoPath` to generate the country shapes. The code demonstrates a straightforward pipeline with `d3.json`, `topojson.feature`, and simple SVG path elements, styling the map for clear visual separation.

BBKirst3
94% match
Loading thumbnail…

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 spherical backdrop. It uses D3 v5 and TopoJSON to load world-atlas data, then applies a natural Earth projection via `d3.geoNaturalEarth1` and traces country boundaries with `d3.geoPath`. The code also draws a background sphere path to represent the globe.

Ccodexmon
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries filled with light green and outlined in black, set against a dark blue sphere representing the globe. The visualization uses D3.js v5 and the topojson library to load country boundaries from the world-atlas dataset, then renders them as SVG paths. The code applies a geoNaturalEarth1 projection through d3.geoPath, first drawing the sphere background and then appending a path for each country feature.

Ddaigokawabe
94% match
Loading thumbnail…

Let's make a map with D3.js!

A world map is rendered on a blue sphere using D3.js v5, with countries shown as light green paths. The visualization loads geographic data from the world-atlas TopoJSON file via `d3.json` and converts it to GeoJSON using the `feature` function from topojson. The `geoNaturalEarth1` projection and `geoPath` generator draw the countries and the sphere outline, while SVG elements are selected with `d3.select`. The map is static, with no interaction or animation.

SSybil Jas
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as a colored sphere with light-green countries outlined in black, using an SVG canvas. The code builds the visualization with D3 v5 and TopoJSON, fetching geographic data from the world-atlas package. It applies a natural Earth projection via `d3.geoNaturalEarth1`, generates paths with `d3.geoPath`, and converts TopoJSON topology to GeoJSON features using the `feature` function. The sphere itself is drawn as a single path with a blue fill, while country boundaries use a thin stroke.

KKarkG
94% match
Loading thumbnail…

Let's make a map with D3.js

A map of the world is drawn as a natural Earth projection, with countries filled in light green against a dark blue sphere background, using SVG paths. The example loads GeoJSON data from the world-atlas TopoJSON file via `d3.json`, converts it with `feature` from TopoJSON, and renders it using `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere and country outlines are styled through CSS classes, demonstrating a basic D3.js choropleth setup.

BbeauMarko
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map in D3.js using the Natural Earth projection (geoNaturalEarth1) and draws country boundaries as SVG paths. It begins by rendering a blue sphere backdrop, then loads geographical data from the world-atlas package via a JSON request. The topojson library’s feature function extracts country geometries, which are then projected and drawn as light green filled paths with subtle black strokes using d3.geoPath. The map is rendered entirely as vector SVG elements, demonstrating a basic choropleth setup with static styling.

AAlex Reitz
94% match