Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
DDonggov
Last edited May 30, 2022
Created on May 30, 2022

This example displays an interactive world map using a natural Earth projection, with country boundaries rendered as SVG paths on a spherical globe backdrop. The map supports panning and zooming through the D3 zoom behavior. It loads TopoJSON data from the world-atlas package, converts it to GeoJSON using the topojson feature method, and draws each country with geoPath while adding title tooltips showing country names. The code uses D3 v5 modules including geoNaturalEarth1, geoPath, and zoom.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js

This example displays a world map in a natural Earth projection, rendered as SVG paths with country boundaries. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projections from D3 v6, and the `topojson` library’s `feature` function to extract country geometries from the world-atlas TopoJSON data. Country names are loaded from a TSV file and shown as tooltips on hover. The map highlights countries in light green, which turn red on mouse-over, with a blue sphere outline.

Vvkresha
94% match
Loading thumbnail…

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

A world map rendered with D3.js displays countries as dark green paths with gold outlines on a gold sphere, using a Natural Earth projection and SVG. Hovering highlights a country in red, and zooming is enabled. The code loads geographic data from TopoJSON and country names from TSV files via Promise.all, then generates paths with d3.geoPath and applies pan/zoom through d3.zoom.

Llinyyyyyyyyy
93% match
Loading thumbnail…

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

This example renders a world map using a natural Earth projection, displaying country boundaries as colored paths over a blue spherical backdrop. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson `feature` method. The map is drawn with D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while each country is styled as a light green filled SVG path with a subtle black stroke. The visualization demonstrates a straightforward, static cartographic rendering with minimal interactive or animated elements.

AAiden Lau
92% match
Loading thumbnail…

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

This example visualizes a world map using a natural Earth projection, with countries rendered as light green SVG paths on a blue sphere. It loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON using the topojson feature method. The map is drawn with d3.geoPath and d3.geoNaturalEarth1, with country borders stroked in semi-transparent black. The code imports specific D3 modules including select, json, and geoPath, demonstrating a concise approach to geographic visualization.

SSittukala Saravanan
92% match
Loading thumbnail…

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

This example displays a natural Earth projection of the world map, with countries rendered as light green filled paths against a blue ocean sphere. The visualization uses D3 v5 and TopoJSON to load world-atlas data from unpkg, then applies `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic features. The code also draws a background sphere representing the globe and sets stroke opacity for country boundaries.

Zzjutkarma
92% match
Loading thumbnail…

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

This example shows an interactive world map built with D3.js v5 and TopoJSON, displaying country boundaries with hover effects that highlight each nation in red. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features as SVG paths with `d3.geoPath`. Pan and zoom interactions are enabled through D3’s `zoom` behavior, transforming the map group on user input. Country names are loaded from a TSV file and matched to geographic IDs, with tooltips shown via SVG `<title>` elements. The code also leverages `d3-geo-projection` and world-atlas data.

Ggharakhani1986
92% match
Loading thumbnail…

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

This example displays a global map with countries filled in light green, using a natural Earth projection against a blue spherical backdrop. The map is built with D3.js v5 and the `d3.geoPath` and `d3.geoNaturalEarth1` APIs, with country boundaries rendered as SVG paths. The visualization also includes an interactive zoom feature that applies a transform to the SVG group via `d3.zoom()`. The data is sourced from the world-atlas package’s 110m GeoJSON file, converted to features with TopoJSON’s `feature` function.

Aayonghosh2003
92% match
Loading thumbnail…

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

This example renders a world map using the Natural Earth projection, displaying countries as light green shapes with subtle black outlines against a blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using TopoJSON’s `feature` function. The map is drawn with D3’s `geoPath` and `geoNaturalEarth1` projections, appending SVG paths for each country and the surrounding sphere. The visualization demonstrates a straightforward D3 v5 workflow for projecting and displaying map data in an SVG container.

RRunxin Shao
92% match