Fork of Map with Selectable Countries

100%

Fork of Map with Selectable Countries

✓ Published0🌍 Public

Last edited Apr 30, 2021

Created on Apr 30, 2021

Forked from Map with Selectable Countries

This fork of a world map allows users to click individual countries to highlight them while dimming the rest. It uses a natural Earth projection with `d3.geoPath` to render country and sphere outlines in SVG, with data sourced from the world-atlas TopoJSON and TSV files. A `d3.scaleOrdinal` with the `schemeSpectral` palette colors countries by economic group, and a linked color legend supports selection toggling. Pan and zoom are enabled via `d3.zoom`, while country opacity and stroke width respond to the current selection state.

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

91% match

Loading thumbnail…

Fork of Map with Selectable Countries

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.

Mmirasnag

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

89% match

Loading thumbnail…

Map with Selectable Countries

This example presents a world map colored by each country’s economy group using an ordinal color scale. Clicking a country highlights it while dimming all others, and clicking again deselects it; the accompanying color legend also supports filtering by clicking its swatches. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, `d3.zoom` for pan and zoom, and `d3.scaleOrdinal` with `schemeSpectral`. Country boundaries and metadata come from TopoJSON and TSV files loaded from the world-atlas package.

LLiuyang Qin

86% match

Loading thumbnail…

Fork of Fork of World Map

This interactive map renders world countries from the `world-atlas` TopoJSON dataset, using a choice of either the orthographic or Mercator projection from `d3-geo-projection.v3`. Users can click a country to toggle between the two projections, and the map supports drag-to-rotate via `d3.drag()` and zooming through `d3.zoom()`, which applies an SVG transform. Country names are joined from a TSV file, and all paths are generated with `d3.geoPath`, with hover highlighting provided by CSS.

Bbindhureddy98

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

85% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986

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

85% match