Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published0🌍 Public
BBrett
Last edited Jul 19, 2019
Created on Jul 19, 2019

This example shows an interactive world map built with D3 v5, displaying country boundaries and names loaded from the World Atlas TopoJSON and TSV datasets. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders countries as SVG paths generated with `d3.geoPath`. Hovering highlights a country in red, and a zoom behavior implemented with `d3.zoom` allows pan and zoom. A light blue sphere background and green country fills demonstrate basic choropleth styling.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, rendered as SVG. It displays country boundaries and names from the world-atlas TopoJSON dataset using a Natural Earth projection, with the ocean filled blue and countries in green. The map supports pan and zoom through d3.zoom, which applies transform updates to the entire map group. Hovering highlights individual countries in red via CSS. The code uses d3.geoPath and d3.geoNaturalEarth1 for geographic projections and feature conversion from TopoJSON.

WWai Kit Tsang
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

Ggcappadaniel
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered with D3.js, displaying country boundaries colored light green that turn red on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, with zoom support through `d3.zoom`. It loads world-atlas TopoJSON data and a companion TSV file to map country names, appending tooltips with each country’s name. The map is drawn as SVG paths, including a dark blue sphere background.

Ss-janibekova
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, displaying countries as green SVG paths with black borders that turn red on hover. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from a TopoJSON file (world-atlas 50m) and country names from a matching TSV file. Zooming is enabled through d3.zoom, which applies a transform to the map group. The sphere background is rendered as a blue path, and each country includes a tooltip title showing its name.

YYoram
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered as SVG, where each country is colored light green and turns red on hover, with a dark blue sphere backdrop. Built with D3.js v5 and TopoJSON, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from the World Atlas 50m dataset. Zoom and pan are enabled via `d3.zoom`, while country names are loaded from a TSV file and attached as SVG title tooltips.

IIgor Borzunov
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create an interactive world map using D3.js v5 and TopoJSON. It renders a natural Earth projection with country boundaries, showing country names as hover tooltips and enabling zoom and pan through d3.zoom. The visualization loads geographic data from the world-atlas package, combining TopoJSON geometry with TSV metadata for country names. The map uses an SVG rendering approach, with countries styled as light green polygons that darken on hover, all implemented through d3.geoNaturalEarth1, d3.geoPath, and d3.json.

Dddperdue
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example creates a world map rendered as SVG using D3 v5 and TopoJSON. It loads world country boundaries from the World Atlas TopoJSON dataset, projects them with the `geoNaturalEarth1` projection, and draws each country as a filled path using `d3.geoPath`. A blue sphere background is added first, with countries shown in light green and outlined with subtle black strokes. The map displays the entire globe with country shapes accurately projected.

CChip
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using D3.js, rendering countries as interactive SVG paths with hover effects that turn them red. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw the globe and country boundaries from TopoJSON data loaded from the World Atlas. A `d3.zoom` behavior enables pan and zoom, while country names are joined from TSV data using `Promise.all`. The map is styled with CSS classes, featuring a blue sphere and light green countries.

Rrcumani
94% match