Click to Zoom

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

Interactive Map

This interactive map displays world countries on a natural Earth projection, rendered as SVG paths using d3-geo’s `geoNaturalEarth1` and `geoPath`. It loads geographic data from the World Atlas TopoJSON and matches country names via TSV metadata. Users can pan and zoom using d3.zoom, which applies a transform to the map group. Countries are styled with silver fills and turn orange on hover via CSS.

FFhouston17

Zoomable World Map

This example presents an interactive world map with natural Earth projection, rendered as SVG paths. Users can zoom and pan via d3.zoom, with the `event.transform` applied to the map group. Country boundaries are drawn using d3.geoPath from TopoJSON data loaded from world-atlas, shaded light green with dark blue oceans. Hovering highlights countries in red, and each country includes a tooltip title populated from TSV metadata with country names.

OOhayouKaminari

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

Map with interaction

This example shows an interactive map of world countries rendered as SVG paths using the Natural Earth projection. Users can pan and zoom the map via d3.zoom, which applies a transform to the grouped map elements. The map loads GeoJSON data from the world-atlas TopoJSON file, converts it with topojson.feature, and draws each country using d3.geoPath. Countries fill light green and turn red on hover, with the surrounding sphere rendered in blue. The visualization demonstrates basic geographic mapping with interactive zooming and hover feedback.

SSimon Pettersson

Interactive Map

This interactive map displays world countries on an equirectangular projection, with hover highlighting and rollover labels showing country names. Users can zoom and pan the map, with limits ensuring the map never leaves the viewport. The visualization uses D3.js v4’s `d3.zoom`, `d3.geoPath`, and `d3.geoEquirectangular` for rendering, while JQuery handles container sizing. Country labels are positioned using `Path.Centroid`, and the map resizes responsively with the window, recalculating zoom and translate extents. Data comes from a geographic GeoJSON source embedded in the SVG rendering.

AArnaudBru

WORLD MAP

This interactive world map displays country boundaries with a custom equirectangular-like projection, colored in muted green with cyan oceans. Hovering over a country highlights it in bright green. The visualization uses D3.js to load GeoJSON and TSV data from the world-atlas package, combining them to create SVG paths with country names via tooltips. It implements zooming through the `d3.zoom` module and renders the sphere and countries using `d3.geoPath` with the Natural Earth projection.

Ppaularl

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