Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Map with Selectable Countries D3.js HW

Public visualization

Map with Selectable Countries D3.js HW

0 stars0🌍 Public
KKCachel
Last edited Nov 5, 2018
Created on Sep 25, 2018

This example shows a world map where users can click individual countries to select and deselect them, with the selected country’s name displayed above the map. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON data sourced from the World Atlas. Click events toggle a yellow highlight on the selected country by modifying its fill and stroke styles, while a separate `div` element updates to show the country’s name from a TSV file. Pan and zoom interactions are enabled via `d3.zoom`.

AI-generated description

Kathleen Cachel Week 5 Homework

I found this page at D3 in Depth to be helpful in making the selction events.

Comments

Sign in to join the discussion.

MIT Licensed