Skip to main content
SimilarExport ZIP
100%

Map with Selectable Countries

✓ Published0🌍 Public
CCurran Kelleher
Last edited Apr 20, 2019
Created on Apr 20, 2019

An interactive choropleth map displays global economies colored by income group, with clickable countries that highlight and dim others. Clicking a selected country again deselects it, while pan and zoom are supported. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map projection, `scaleOrdinal` with `schemeSpectral` for coloring, and `d3.zoom` for interaction. Data comes from the World Atlas TopoJSON and TSV files. The code demonstrates migration from VizHub to local development with Rollup bundling.

AI-generated description

A choropleth map with selectable countries.

This example demonstrates the changes neede for migration from VizHub to local development. Namely:

  • Required packages are added to package.json.
  • Script tags for libraries are removed from index.html.
  • Externals and globals can be removed from rollup.config.js.

Similar vizzes

Loading thumbnail…

Map with Selectable Countries

This interactive map displays global economies using a color-coded choropleth, where clicking a country selects it and dims all others. The legend also supports click-to-filter, highlighting matching color values. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the projection and rendering, with `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files, with color values mapped via `scaleOrdinal` and `schemeSpectral`.

GGiovanniD_
93% match
Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map displays global income groups, with countries colored by category and a legend allowing selection of specific values. Clicking a country highlights it, fades all others, and dims the sphere, while clicking the legend filters the map to matching countries. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for the map, with d3.scaleOrdinal and d3.schemeSpectral for colors, loading TopoJSON world data and TSV metadata from the world-atlas package.

Jjons288
92% 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
92% match
Loading thumbnail…

Map with Selectable Countries

This example presents an interactive choropleth map of world countries colored by economic classification. Users can click countries to highlight them while dimming all others, and clicking again deselects. The visualization also includes a clickable color legend that filters which categories remain visible. Built with D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` for map rendering and interaction, while the color scale uses `d3.scaleOrdinal` with `d3.schemeSpectral`. Country boundaries and names come from TopoJSON world-atlas data.

Aalfigit15052019
91% match
Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map displays world countries colored by their economic classification, with grayed-out, semi-transparent countries when one is selected. Clicking a country highlights it and shows its name and value in a tooltip; clicking again deselects it, and clicking a color legend swatch filters the map to that category. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, and `topojson.feature` to convert TopoJSON from the world-atlas package, joined with TSV metadata containing ISO codes and economy data.

Ccodexmon
91% 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
90% match
Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map colors countries by their economy category using a spectral color scale. Clicking a country highlights it, dims all others, and fades the world sphere; clicking again deselects it. A color legend allows filtering by economy category. The map uses D3 v5’s geoNaturalEarth1 projection and geoPath, with TopoJSON world data processed via loadAndProcessData and styled using SVG.

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