D3 Map with Interaction

100%

D3 Map with Interaction

✓ Published1🌍 Public

Last edited Dec 16, 2019

Created on Dec 16, 2019

Forked from D3 Map

This map displays world countries using a Natural Earth projection, with zoom and pan interaction enabled. Hovering over a country highlights it in red and reveals its name as a tooltip. The visualization uses d3.geoPath and d3.geoNaturalEarth1 to render TopoJSON and TSV data from the world-atlas dataset, with d3.zoom handling the interactive transformations.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Interaction

A D3.js visualization displays a world map using a natural Earth projection, with countries rendered as SVG paths colored in bright green against a dark sea. Hovering a country turns it red and reveals its name via a tooltip. The map is built with `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` for interactive panning and zooming, while `d3.tsv` and `d3.json` load country names and geometries. A `topojson` feature layer draws each country, and CSS handles hover styling.

MMatan

90% match

Loading thumbnail…

D3.js Map

This map visualization displays world countries on a natural Earth projection, allowing users to click individual countries to toggle their fill between light green and red. Built with D3.js v5 and TopoJSON, it loads geographic data from the world-atlas package and country names from a TSV file. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for rendering, with d3.zoom enabling pan and zoom interactions on the SVG canvas.

Ffloresh

90% match

Loading thumbnail…

map interactions

This interactive map displays world countries with hover effects, highlighting each nation in red. The visualization uses the Natural Earth dataset for country boundaries, loaded from the world-atlas package via TSV and JSON files. Built with D3 v5, it employs geoNaturalEarth1 projection, geoPath for path generation, and the topojson feature function. The zoom interaction is implemented through d3's zoom and event modules, allowing users to pan and scale the map. Countries display names as tooltips by joining the TSV data with the geometry.

MMert Gürkan

90% 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

90% match

Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster

90% match

Loading thumbnail…

Map Interaction Assignment

This example shows an interactive world map where each country is rendered as a filled path, and hovering over a country turns it red. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from TopoJSON data in the world-atlas package. Zoom and pan interactions are implemented using `d3.zoom`, which applies a transform to the map group. Country names are matched from ISO codes in a TSV file and displayed as tooltips using SVG `<title>` elements.

MMukund Khandelwal

90% match

Loading thumbnail…

Map Interaction

This example displays an interactive world map rendered with SVG using the d3-geo-projection library, specifically the geoNaturalEarth1 projection. Countries from the world-atlas TopoJSON dataset are drawn as paths with d3.geoPath, each featuring a tooltip showing the country name. The map supports pan and zoom through d3.zoom, which applies a transform to the map group on events. Hovering over a country changes its fill color to red via CSS, while the sphere background uses a distinct blue fill.

WWayne716

89% match

Loading thumbnail…

Map Interaction

This example displays an interactive world map, rendering country boundaries as SVG paths using d3.geoPath and a d3.geoNaturalEarth1 projection. The map is built from TopoJSON data loaded via d3.json and the topojson.feature API, with country names attached as SVG title elements. The visualization supports panning and zooming through d3.zoom, which applies a transform to the map group, and highlights individual countries by changing their fill color on hover using CSS.

WWayne716

89% match