Map with Selectable Countries

100%

Map with Selectable Countries

✓ Published0🌍 Public

Last edited Mar 17, 2020

Created on Mar 17, 2020

Forked from Map with Selectable Countries

This interactive choropleth map displays global population data, allowing users to see which countries have a specific economic characteristic (marked "has") highlighted within the geographic layout. Built with D3 v5, the visualization uses the topojson library to convert GeoJSON world boundaries into SVG paths, while population statistics from the UN 2017 medium variant dataset are joined to country features via CSV parsing. The map leverages D3's projection and geographic path functions to render the selectable country polygons, with the color legend providing a visual key for the economic attribute.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Map with Selectable Countries

This interactive world map uses a choropleth encoding to visualize country-level data, tinting each nation dark blue based on values from the UN Population Estimates 2017 dataset. A click on any country triggers a smooth d3.zoom animation that magnifies the selection, while a color legend allows filtering of data categories. The visualization, rendered as SVG, is built with d3.geoPath and d3.geoNaturalEarth1 projections, all managed through the d3.selection API.

DDolbyref113

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

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

86% match

Loading thumbnail…

Map with Selectable Countries

This map visualization displays global economies using a choropleth projection, where each country’s color corresponds to its economic classification from World Atlas data. Users can click individual countries to highlight them and dim all others, with a legend that also supports filtering by economic category. The implementation uses d3.geoPath with a geoNaturalEarth1 projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for coloring. TopoJSON loads the geographic boundaries, while SVG paths render the interactive map and legend controls.

FFukurouNarthil

86% match

Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map visualizes world countries colored by economic classification, with a linked legend that filters the map based on selected categories. Clicking a country either selects or deselects it, dimming all other countries; clicking a legend category toggles the map to show only countries in that category. The map uses `d3.geoPath` with the `geoNaturalEarth1` projection, `d3.zoom` for pan and zoom, and `d3.scaleOrdinal` with the spectral scheme for coloring. Data comes from the world-atlas TSV and TopoJSON files, rendered as SVG paths.

GGerryLivermore

86% match

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_

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