Choropleth worldmap with cities

100%

Choropleth worldmap with cities

✓ Published0🌍 Public

Last edited Aug 9, 2020

Created on Jul 4, 2020

Forked from Choropleth map with interactive filtering

This interactive choropleth world map uses a categorical color scale to depict each country’s income group, with a clickable legend that filters and highlights matching regions plus dims others in SVG. It supports pan and zoom via d3.zoom. The map also plots major Russian cities with their absolute locations using data from a local TSV file. Built with React and D3 v5, it renders countries from TopoJSON using d3.geoPath with a natural Earth projection, while `d3.scaleOrdinal` maps income groups to a spectral palette.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map with interactive filtering

A choropleth map of world countries colored by income group, with interactive filtering through a color legend. Clicking a legend category highlights matching countries and dims others; clicking again clears the filter. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with zoom controls from `d3.zoom`. It loads TopoJSON country boundaries from the world-atlas dataset, merges names from a TSV file, and renders in SVG with `d3.scaleOrdinal` and `schemeSpectral`.

PPeter S

87% match

Loading thumbnail…

Choropleth map with D3.js!

This choropleth map visualizes world countries colored by income group using D3.js. The map uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with country boundaries loaded from TopoJSON world-atlas data and income classifications joined from a TSV file. A color legend built with `scaleOrdinal` and `schemeSpectral` displays the categorical color scale. Interactive zooming is implemented through `d3.zoom`, and hovering over a country highlights it in red while a tooltip reveals its name and income group.

Fforcox43

86% match

Loading thumbnail…

Choropleth map

A choropleth map colors countries by income group using a categorical color scale, with a hover effect that turns each country red and a tooltip showing the country name and income group. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, processes it with `topojson.feature` and `d3.tsv`, and projects it using `d3.geoNaturalEarth1` and `d3.geoPath`. A custom legend built with `d3.scaleOrdinal` and `schemeSpectral` renders interactive color swatches, while `d3.zoom` enables panning and zooming on the SVG map.

Rroncando

86% match

Loading thumbnail…

Choropleth map

This choropleth map colors countries by income group, with a hover effect that highlights each nation and a legend displaying the categorical color scale. Built with React, it uses D3 v5 APIs including `geoNaturalEarth1` for projection, `geoPath` for rendering country boundaries, and `scaleOrdinal` with `schemeSpectral` for color mapping. World shape data comes from the world-atlas TopoJSON dataset, and the view supports zooming through `d3.zoom`. The legend is generated by the custom `colorLegend` module.

Jjeelong

86% match

Loading thumbnail…

Choropleth map

A choropleth map visualizes global income groups using a divergent spectral color scale, with country names and income categories shown on hover. The map uses a natural Earth projection via `d3.geoPath` and supports zooming and panning through `d3.zoom`. World geometry comes from TopoJSON (50m), enriched with TSV metadata, while `d3.scaleOrdinal` drives the color mapping. A legend, built with a reusable colorLegend module, displays the categorical scale; hover effects highlight countries in red.

Rroncando

86% match

Loading thumbnail…

Choropleth Map

This choropleth map shows countries colored by income group, with a clickable color legend that highlights matching regions and a pan-and-zoom interface. It uses D3 v5 with `geoNaturalEarth1` and `geoPath` to project TopoJSON world data loaded from the World Atlas, while `scaleOrdinal` and `schemeSpectral` assign colors. A zoom behavior updates the map transform on interaction. The legend, rendered with SVG circles and text, triggers the selection filtering.

Ggorfoula

86% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group using a categorical color scale with a spectral scheme. The visualization supports zooming and panning through d3.zoom, with country names and income groups revealed via tooltips on hover. Built with d3.geoPath and geoNames from the world-atlas TopoJSON dataset, it renders as SVG paths over a blue sphere. A custom color legend component displays the ordinal scale’s domain, while hover interactions highlight individual countries in red.

Mmla341

86% match

Loading thumbnail…

Choropleth map with Interactive clicking

A choropleth map of world countries colored by income group, with an interactive legend that filters and highlights selected categories. The map uses a Natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, rendered as SVG paths from TopoJSON world-atlas data. Clicking a legend tick toggles a color value, reducing opacity of non-matching countries and dimming the globe sphere. Zooming via `d3.zoom` and `d3.event` allows pan and scale; the legend is built with ordinal `d3.scaleOrdinal` and the `schemeSpectral` color scheme.

Jjeelong

86% match