Chloropeth Map

100%

Chloropeth Map

✓ Published3🌍 Public

Last edited Jul 16, 2020

Created on Jul 15, 2020

Forked from Cheap tricks for interactive maps

This choropleth map visualizes countries by their economic classification using a red-yellow-green color scale. Built with React and D3, it renders geographic boundaries via the `d3.geoPath` projection on a natural Earth base layer, with country data loaded from TopoJSON and TSV files. A color legend with animated transitions shows the ordinal scale mapping, and the map supports interactive zooming through `d3.zoom` events, while hover states provide tooltips with country names and economic values.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Chloropeth Map with interactive filter

This choropleth map visualizes global economic data using a natural Earth projection, with countries colored on an ordinal red-yellow-green scale. Users can click legend items to filter the map, dimming non-matching countries and fading the sphere background. Built with React and D3 v5, it uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal, with data loaded from world-atlas TopoJSON and TSV files. The SVG rendering includes smooth transitions on legend circle updates.

BB Sundaresan

93% match

Loading thumbnail…

Chloropeth Map

A choropleth map colors countries by economy using a D3 v5 ordinal color scale with a spectral scheme. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render geographic boundaries from TopoJSON world-atlas data, with a legend built via a custom `colorLegend` function. Hovering highlights a country in pink, and a zoom interaction is implemented with `d3.zoom`. The map is rendered as SVG with a dark blue ocean background.

MMuhammad Jarir Kanji

91% match

Loading thumbnail…

Chloropeth Map

This choropleth map colors countries by income group using an ordinal color scale derived from d3.scaleOrdinal and the d3.schemeSpectral palette. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, with hover highlighting via CSS. The visualization includes an interactive color legend built with custom SVG code, and supports zooming through d3.zoom. Data combines TopoJSON world geometry with TSV metadata from the world-atlas package, and country names and income values appear in tooltips via SVG title elements.

Xxsg13

89% match

Loading thumbnail…

Chloropleth Map

This choropleth map displays countries colored by economic classification, with a color legend positioned in the lower-left corner and hover interactions that highlight individual nations. The visualization uses D3 v5 with d3.geoNaturalEarth1 for projection and d3.geoPath for rendering geographic features, while d3.zoom enables pan and zoom functionality. TopoJSON and TSV data from the world-atlas package populate the map, with d3.scaleOrdinal mapping economy categories to a spectral color scheme. SVG elements render all visuals, and the legend uses custom D3 scales and tick marks for clarity.

AAdrian Tan

89% match

Loading thumbnail…

Chloropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its economy type, with a color legend to the side. Built with D3 v5, it uses `d3.geoPath` with the Natural Earth projection to render country boundaries from TopoJSON data loaded from the world-atlas package. An ordinal color scale maps economic categories to the spectral scheme, while zoom interaction and hover highlighting are implemented via `d3.zoom` and CSS. The legend is generated as a reusable SVG component through custom functions.

Ffbudwill

88% match

Loading thumbnail…

Chloropeth Map with Interactive Filtering

A choropleth map colors world countries by economy using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking a legend item filters the map, dimming unselected countries and enlarging the selected one’s stroke. The visualization supports zooming and panning via d3.zoom, uses d3.geoNaturalEarth1 and d3.geoPath for projection, and loads TopoJSON and TSV data from the world-atlas package. A hovering effect turns countries pink.

MMuhammad Jarir Kanji

88% match

Loading thumbnail…

Chloropleth Map - Color

This choropleth map colors countries by their economic classification using a categorical color scale. The visualization uses D3 v5’s `geoPath` and `geoNaturalEarth1` projections to render world map topology, with an ordinal color legend showing the economy categories. Country data comes from the world-atlas TopoJSON and TSV files. Hovering highlights countries in red, while the legend uses D3’s `scaleOrdinal` and `schemeSpectral` for distinct color assignments.

LLeora Wenger

88% match

Loading thumbnail…

Choropleth map

This choropleth map displays countries colored by economic classification, sourced from the world-atlas dataset. Built with React and d3.v5, it uses d3.geoNaturalEarth1 and d3.geoPath to project and render GeoJSON features. A color legend, created with a custom d3.scaleOrdinal component, maps categories to a spectral scheme. D3 zoom interactions allow panning and scaling, while CSS hover states highlight individual countries.

VVaggelisKlt

87% match