Interactive map with D3.js

100%

Interactive map with D3.js

✓ Published0🌍 Public

Last edited Dec 31, 2019

Created on Dec 30, 2019

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom-and-pan navigation. The D3.js code loads GeoJSON country boundaries from a TopoJSON dataset via `d3.json` and `topojson.feature`, then renders them as SVG paths with `d3.geoPath`. A blue sphere path represents the globe’s outline. The `d3.zoom` API enables user interaction by applying transform events to the SVG group, while CSS `:hover` styles change country fills to red.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make an interactive map with D3.js!

This interactive map displays world countries using a natural Earth projection rendered as SVG paths. Users can pan and zoom the map via D3’s `zoom` behavior, which applies transforms to a group element. Country boundaries come from TopoJSON data, with names joined from a TSV table using `reduce`. Hovering highlights a country in red, while the background sphere is colored blue. The code leverages `d3.geoPath`, `d3.geoNaturalEarth1`, and topojson’s `feature` method to generate the geographic shapes.

JJordan Chiu

92% match

Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma

92% match

Loading thumbnail…

D3.js map - interactive

This interactive map displays world countries shaded in light green against a light blue sphere, with hover highlighting in red. Built with D3.js v7 and TopoJSON, it projects geographic data from the world-atlas countries-50m dataset using a natural Earth projection via d3.geoPath and d3.geoNaturalEarth1. Zoom functionality is handled by d3.zoom, which applies interactive transforms to the SVG group.

Ssheafallick

91% match

Loading thumbnail…

Let's make an interactive map with D3.js!

This interactive map visualizes world countries with hover highlighting, displaying country names as tooltips. It uses the D3.js v5 library with the `geoNaturalEarth1` projection and `geoPath` for rendering map features. The visualization loads geographic data from the world-atlas package, combining TSV metadata and TopoJSON geometry, while `topojson.feature` processes the country boundaries. The map supports zooming through D3’s `zoom` event, and renders as an SVG with styling for the ocean sphere and landmasses.

Iiascchwen

91% match

Loading thumbnail…

Interactive Map with d3.js

This example shows an interactive world map rendered as SVG, with countries colored dark gray on a light sphere and highlighted in red on hover. The visualization uses d3.geoEqualEarth projection with d3.geoPath to draw country boundaries from TopoJSON data, while country names are loaded from a TSV file and displayed as tooltips via SVG title elements. Pan and zoom are enabled through d3.zoom, with scale limits between 1x and 8x, and the map renders using the world-atlas dataset at 110m resolution.

MMaciek Sitkowski

91% match

Loading thumbnail…

Interactive Tricks

This interactive map displays world countries using a natural Earth projection, with hover effects that change country colors to pink and tooltips showing country names. The visualization supports zooming and panning through d3.zoom, applied to the SVG group containing all geographic paths. It uses d3.geoPath with geoNaturalEarth1 projection, loads TopoJSON data from world-atlas, and merges country names from TSV data using reduce. The code leverages D3 v5 selection, JSON, TSV, and zoom APIs, rendering geographic features as SVG paths with CSS styling for interactivity.

Llrakla

90% match

Loading thumbnail…

Interactive world map

This interactive world map displays country boundaries with hover highlighting and zoom/pan capabilities. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render SVG paths from TopoJSON data in the world-atlas package. A zoom behavior enables interactive transformations, while country names from a TSV file appear as tooltips via SVG `title` elements. The map fills countries in green and the ocean sphere in blue, with hover states turning countries red.

Eevapavlinek

90% match

Loading thumbnail…

interactive world map with d3

This interactive world map displays country outlines colored in light green over a blue sphere, with hover highlighting in red. It utilizes D3 v6’s `geoNaturalEarth1` projection and `geoPath` to render the map, while TopoJSON loads geographic data from the world-atlas package. Zooming is enabled via `d3.zoom`, and country names are joined from a TSV file. The visualization renders as SVG elements.

RRITUZZ

90% match