Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
SSybil Jas
Last edited Feb 23, 2020
Created on Feb 23, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This visualization shows a world map rendered as light green countries against a blue sphere, using a natural Earth projection. The map is built with D3.js v5 and TopoJSON, loading country boundaries from the world-atlas dataset. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `feature` from TopoJSON to extract GeoJSON country features. Each country is drawn as an SVG path with a black stroke, while the overall sphere fill is blue.

Iianleekq
94% match
Loading thumbnail…

Let's make a map with D3.js!

A world map is rendered using D3.js, with countries filled in light green against a blue sphere. The example demonstrates a basic geographic visualization workflow, loading TopoJSON data from the World Atlas and converting it to GeoJSON features. The code uses `d3.json`, `d3.geoPath`, `d3.geoNaturalEarth1`, and the TopoJSON `feature` method to project and draw the paths as SVG elements. The map is static, showing only country boundaries and the projected Earth sphere.

Xxhoumba
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 light green against a blue sphere background. It uses D3 v5 to load GeoJSON data from the world-atlas TopoJSON file, converting it with `topojson.feature`. The map is projected using `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. A separate path represents the sphere outline. The visualization updates dynamically once the data loads, adding country paths to the SVG.

OOliverlee1003
94% match
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 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!

This visualization displays a world map using D3.js, with countries rendered as light green paths against a blue spherical backdrop. The example loads geographic data from the world-atlas TopoJSON collection and projects it using the Natural Earth projection via `d3.geoNaturalEarth1`. The map is drawn as SVG paths, generated by `d3.geoPath`, and the sphere outline is created from a synthetic Sphere geometry. Country boundaries appear with black strokes at low opacity, while the data is processed through the `topojson.feature()` API.

Ggcappadaniel
94% match
Loading thumbnail…

Let's make a map with D3.js!

This visualization displays a world map using D3.js, with countries rendered as light green paths against a blue spherical backdrop. The example loads geographic data from the world-atlas TopoJSON collection and projects it using the Natural Earth projection via `d3.geoNaturalEarth1`. The map is drawn as SVG paths, generated by `d3.geoPath`, and the sphere outline is created from a synthetic Sphere geometry. Country boundaries appear with black strokes at low opacity, while the data is processed through the `topojson.feature()` API.

Ggcappadaniel
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates a static world map using D3.js, rendering countries and the Earth’s sphere as SVG paths with a Natural Earth projection. It uses `d3.geoPath` with `d3.geoNaturalEarth1`, and the `topojson` library’s `feature` method to convert TopoJSON from the `world-atlas` dataset into GeoJSON features. The sphere is drawn in blue, countries in light green with black outlines, and the code loads data asynchronously via `d3.json`.

Iimackerracher
94% match