Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
Hhlkyt
Last edited Jun 7, 2020
Created on Jun 3, 2020

A world map drawn with D3.js shows country boundaries as SVG paths projected with the Natural Earth projection, with a dark sphere as the background. The visualization loads geographic data from the world-atlas TopoJSON file and renders each country as a filled path. Interactive mouseover and mouseout events change the fill color and stroke width of individual countries, providing immediate visual feedback. The code uses D3 v5 functions such as `geoPath`, `geoNaturalEarth1`, and `select` alongside the TopoJSON `feature` API.

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

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths with subtle black strokes. The map is drawn from TopoJSON data loaded from the visionscarto-world-atlas package, using D3 v5’s `geoPath` and `geoNaturalEarth1` projection. A blue sphere path outlines the globe’s boundary. The code specifically imports `feature` from TopoJSON to convert topologies into GeoJSON features, then binds the country data to SVG path elements. The map appears on a blank background with no additional interactive features or transitions.

Mmla341
95% 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 shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
94% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths and oceans shown as a blue sphere. The code loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON using the topojson `feature` function, and draws it with `d3.geoPath` and `d3.geoNaturalEarth1` from D3 v5. A single SVG element sized 960 by 500 hosts the visualization.

Eexistentialist1888
94% match
Loading thumbnail…

Let's make a map with D3.js!

A D3.js visualization renders a world map using a natural Earth projection, coloring countries light green against a dark blue ocean sphere. The example demonstrates geographic data mapping by fetching TopoJSON country boundaries from the world-atlas dataset and converting them to GeoJSON with topojson.feature. SVG paths are generated with d3.geoPath and the geoNaturalEarth1 projection, with each country receiving stroke styling to show borders. The code imports select, json, and geoPath from d3.v5, showcasing a minimal, single-file approach to interactive map creation.

EEdoardoRegini
94% match