Skip to main content
SimilarExport ZIP
100%

Click the Countries for Interaction

✓ Published1🌍 Public
RRobert Curtis
Last edited Nov 8, 2018
Created on Sep 26, 2018

This interactive map illustrates world countries and allows users to click individual nations to toggle their fill color between light green and yellow. Built with D3 v5 and TopoJSON, it renders geographic features using the `geoNaturalEarth1` projection and `geoPath` generator. The visualization includes zoom and pan capabilities via `d3.zoom`, with country name tooltips from a TSV dataset. Clicking a country updates an array of selected IDs, triggering a re-render that recolors the clicked nation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Interaction

A world map renders countries in light green with black outlines on a blue sphere, using D3 v5 with a geoNaturalEarth1 projection. Users hover over any country to highlight it pink, while clicking a specific country isolates that selection and removes highlights from others. The visualization loads geographic data from a TopoJSON world atlas and merges it with a TSV file for country names. Code employs d3.geoPath, d3.zoom for panning, and CSS classes to toggle the selected country’s fill color.

NNTCHANG1289
87% match
Loading thumbnail…

Map D3.js HW

This interactive world map lets users click individual countries to select them, highlighting each in orange with a red stroke while displaying the country’s name in red text above the SVG. Clicking a selected country reverts its fill to light green, though the name label remains visible. The visualization uses D3 v5 and TopoJSON, rendering with `d3.geoPath` and the `geoNaturalEarth1` projection, with zoom support via `d3.zoom`. Country names come from a TSV file paired with the world-atlas TopoJSON dataset.

KKCachel
86% match
Loading thumbnail…

D3 Map with Interaction

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.

Rrdeichert
85% 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
85% match
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
85% match
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries as red-filled polygons on a blue sphere, allowing users to click any nation to highlight it. Built with D3 v5 and TopoJSON, it uses a natural Earth projection and loads geographic data from the World Atlas. The visualization relies on `d3.geoPath` for rendering, `d3.zoom` is not implemented, and click events trigger a `render` function that updates fill colors. Country names are derived from a TSV file and attached as SVG `<title>` tooltips.

Jjons288
85% match
Loading thumbnail…

Map with Selectable Countries D3.js HW

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`.

KKCachel
85% match
Loading thumbnail…

Map Interaction Assignment

This visualization displays a world map using a natural Earth projection, with countries shaded in light green and oceans in blue. Clicking a country triggers an interaction where the selected country turns red, highlighting the user’s choice. The map is rendered as SVG, with geographic data from the world-atlas TopoJSON dataset and country names loaded from a TSV file. The code utilizes d3.geoPath, d3.geoNaturalEarth1, and d3.zoom, along with topojson.feature to process the data.

MMukund Khandelwal
85% match