Skip to main content
SimilarExport ZIP
100%

Fork of Map with Selectable Countries

✓ Published0🌍 Public
Mmirasnag
Last edited Jun 17, 2023
Created on Jun 17, 2023

This interactive choropleth map displays countries colored by economic group, with a legend that filters the map's color encoding. Clicking a country selects it, dimming all others, while a click on the legend resets the selection. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and renders geographic paths with d3.geoPath. Data is loaded from a world-atlas TopoJSON with TSV metadata, and the ordinal color scheme comes from d3.scaleOrdinal and d3.schemeSpectral. Interactivity is handled with D3's selection API and event listeners.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map with Selectable Countries

This interactive choropleth map lets viewers click countries to select or deselect them, dimming unselected nations and highlighting the chosen one while fading the sphere background. The map and a color legend for economic groups update together, with the legend also supporting selection. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to render GeoJSON from the World Atlas TopoJSON, while `d3.zoom` enables panning and zooming. The legend and map are composed via D3 data joins and `d3.scaleOrdinal` with a spectral color scheme.

Llawrynowiczgeorge@gmail.com
95% match
Loading thumbnail…

Fork of Map with Selectable Countries F

This interactive choropleth map colors countries by economic grouping from the visionscarto-world-atlas dataset, using a spectral ordinal color scale. Clicking a country highlights it and dims all others, while a color legend allows filtering by category. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render the map, and d3.scaleOrdinal with schemeSpectral for coloring. Zooming via d3.zoom and interaction handlers are also included.

Ffsajedi22
95% 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
92% 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
91% 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
91% 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…

Fork of Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic grouping using a categorical color scale. Users can click legend items to filter the map, dimming non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral. Country boundaries come from the world-atlas TopoJSON dataset, with hover effects and a tooltip displaying country names and values.

Iion.cojoc@gmail.com
90% 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
90% match