world map

100%

✓ Published0🌍 Public

BBajiSharifPatan@my.unt.edu

Last edited Apr 3, 2022

Created on Apr 3, 2022

Forked from Choropleth Map with Interactive Filtering

A choropleth map of world countries colored by economy category, with an interactive legend that filters the map when clicking a category. Hovering a country displays its name and value via a tooltip. The visualization uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature and d3.tsv.

AI-generated description

A choropleth map where you can hover over items in the color legend items to interactively filter!

MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This example shows a choropleth world map colored by each country's economy classification, with a clickable color legend that filters and highlights matching countries while dimming others. The map uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, with d3.zoom enabling pan and zoom interactions. A d3.scaleOrdinal maps the spectral color scheme to the economy categories, and tooltips display country names and values. The SVG rendering includes CSS hover effects and opacity transitions for non-selected regions.

Zzhangfa

93% match

Loading thumbnail…

world map with colors

This interactive choropleth map colors each country by its economy category, using a spectral color scale and click-to-highlight interaction to compare regions. Built with D3 v5, it renders country outlines via `d3.geoPath` with a Natural Earth projection, loads TopoJSON country boundaries from the World Atlas, and joins economic classifications from a TSV file. A zoom behavior enables panning and scaling, while an ordinal color legend supports filtering by clicking a category to fade unmatched countries.

BBajiSharifPatan@my.unt.edu

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy classification using an ordinal color scale with the spectral scheme. The visualization supports zooming and panning through D3’s zoom behavior, while hover effects highlight individual countries. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Data is loaded from the World Atlas TopoJSON and TSV files, processed via topojson.feature, and joined by country ID.

Nnouralkhoury

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by economy category using a sequential color scale, with an interactive legend that filters the map by clicking a category. The map renders geographic features with `d3.geoPath` and `d3.geoNaturalEarth1`, while the legend circles respond to clicks to toggle the selected category, dimming non-matching countries. Pan and zoom are enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV files, processed with TopoJSON’s `feature` method.

Aanduskong

91% match

Loading thumbnail…

World Countries

This choropleth map of world countries displays two categorical variables—economy and income group—selected via dropdown menus. Users can hover over the color legend to highlight countries matching a specific category, dimming others. Built with d3.v5, the map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering SVG paths, with d3.zoom for panning and zooming. Color scales from d3.schemePastel2 among others are selectable. Data is loaded from the World Atlas TopoJSON and TSV files.

Aala-wahibi

91% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy category using an ordinal color scale with a spectral scheme, and displays a color legend with clickable circles. It renders geographic boundaries with antialiased SVG paths via `d3.geoPath` and the Natural Earth projection, while loading data from the world-atlas package (TSV metadata and TopoJSON geometries) and processing it with `topojson.feature`. Hovering highlights a country in red, and the map supports zooming through the `d3.zoom` interaction.

Ffaaty

90% match

Loading thumbnail…

Choropleth Map

A choropleth map of world countries colors each nation by its economy category using an ordinal spectral color scale. Data from the world-atlas TopoJSON and TSV files is projected with the Natural Earth projection and rendered as SVG paths. Hovering highlights a country, and a custom color legend with circles and labels is generated using the `colorLegend.js` module. The map supports interactive zooming via the `d3.zoom` API, which applies transformations to the map group on zoom events.

JJynadal

90% match

Loading thumbnail…

Choropleth Map

This choropleth map displays the world’s countries colored by their economy classification, with a hover tooltip revealing each country’s name and economic group. The visualization uses `d3.geoPath` with the `geoNaturalEarth1` projection to render the globe, while `topojson.feature` loads the world atlas data and merges it with TSV metadata. An ordinal color scale applies a `schemeSpectral` range, and the custom `colorLegend` component builds an SVG legend. The map supports interactive pan and zoom via `d3.zoom`.

Ggcappadaniel

90% match