Skip to main content
SimilarExport ZIP
100%

HW Map with Selectable Countries

✓ Published0🌍 Public
YYF
Last edited Nov 8, 2018
Created on Sep 22, 2018

This map visualizes world countries using a natural Earth projection, rendered with SVG paths via the d3.geoPath and d3.geoNaturalEarth1 APIs. The choropleth initially displays all countries in light green against a dark sphere. Clicking a country highlights it in a distinct green and displays its name in a fixed banner, allowing users to explore geographic identities interactively. Country names come from the world-atlas TSV dataset, joined to the TopoJSON geometries via their ISO numeric codes. The visualization also includes zoom functionality through the d3.zoom module, which applies a transform to the map group.

AI-generated description

The map visualization has been edited to allow each country to be highlighted and its name to be displayed upon click.

MIT Licensed

Similar vizzes

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
88% 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
87% match
Loading thumbnail…

Map with Selectable Countries

This example shows a choropleth map where clicking a country highlights it and dims all others, with a color legend on the side. It uses the d3.geoPath and d3.geoNaturalEarth1 projections to render the world map, while d3.scaleOrdinal and d3.schemeSpectral define the color encoding. Country data comes from world-atlas TSV and TopoJSON files, and interactions trigger re-rendering with updated opacity and stroke styles. The map supports zooming via d3.zoom.

Jjlspangl
87% match
Loading thumbnail…

Map with Selectable Countries

This map visualizes world countries colored by economic classification using a categorical color scale. Clicking a country highlights it while dimming all others, and clicking again deselects it. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render SVG paths from TopoJSON world-atlas data, while d3.zoom enables panning and zooming. A color legend with clickable swatches filters the map, and the visualization updates reactively through D3 data joins.

Ccaydener
86% match
Loading thumbnail…

Map with Selectable Countries

This map visualizes global countries colored by economic group, with clicking a country highlighting it while dimming others and the map sphere. A color legend allows filtering countries by economic category, and hovering shows country names. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, d3.zoom for pan and zoom, and d3.scaleOrdinal with schemeSpectral for choropleth coloring. Data comes from World Atlas TopoJSON and TSV files, loaded via d3.json and d3.tsv.

Ssleyus
86% match
Loading thumbnail…

Map with Selectable Countries

This example shows a choropleth map of world countries colored by economic grouping, with interactive selection: clicking a country dims all others and highlights the chosen region, and clicking again clears the selection. A color legend filters the map to a single category. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` for rendering SVG paths, plus `zoom` for panning. Data comes from TopoJSON and TSV files via the world-atlas package, with colors assigned by `scaleOrdinal`.

Ccaydener
86% match
Loading thumbnail…

Map

This example visualizes world countries as a choropleth-style map, coloring each country green with white borders on a dark blue spherical backdrop. The map renders as SVG using D3.js with a Natural Earth projection via `d3.geoNaturalEarth1`, and country boundaries are generated through `d3.geoPath`. Geographic data loads from the world-atlas TopoJSON file (countries-110m.json), which is converted to GeoJSON using the `feature` function from the topojson library. Hovering a country changes its fill to red, and each country includes a title tooltip displaying its name.

VVlad Bogo
85% match
Loading thumbnail…

Map with Selectable Countries

A choropleth map displays countries color-coded by economy using D3's `geoNaturalEarth1` projection and `geoPath`. Users click countries to select them, which highlights the chosen nation while dimming others; clicking again deselects. A color legend using `scaleOrdinal` with `schemeSpectral` allows filtering by income group. Data loads from world-atlas TSV and TopoJSON files, with SVG rendering supporting zoom interactions via D3's `zoom` event.

Ggcappadaniel
85% match