Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published0🌍 Public
Aakshayms0
Last edited Nov 5, 2022
Created on Nov 5, 2022
Forked from HTML Starter

This choropleth map displays global economic classifications, with countries color-coded by their income group using a spectral ordinal scale. Users can click legend items to highlight matching regions, which dims non-selected countries and increases their stroke width. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render GeoJSON from the world-atlas TopoJSON dataset, while d3.zoom enables interactive panning and zooming. A custom color legend with clickable circles and d3.scaleOrdinal drives the selection filtering, rendered entirely as SVG elements within a React framework.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its income group. Built with D3 v5 and TopoJSON, it uses an ordinal color scale with the spectral scheme and renders geographic shapes via `d3.geoPath` with a natural Earth projection. The map supports pan and zoom through D3’s zoom behavior, and hovering highlights countries in red. A custom legend, generated with appended SVG circles and text, displays the color categories, while data is loaded from the World Atlas TopoJSON and TSV files.

Eevapavlinek
92% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries according to their economic classification, with a discrete ordinal color scale and an interactive color legend. Using D3 v5 and the `geoNaturalEarth1` projection, it renders TopoJSON world data loaded from the world-atlas package and merges it with TSV metadata containing country names and income groups. Users can pan and zoom via D3's zoom behavior, while hovering highlights countries in red and displays a tooltip with the country name and economy type. The legend is built with a custom colorLegend component.

SShanthi Acharya
92% match
Loading thumbnail…

Choropleth map

A choropleth map colors world countries according to their economic classification, with a color legend that filters and highlights selected categories. Users can click legend entries to dim non-matching countries and intensify the selected region. Built with D3.js, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project TopoJSON data from the world-atlas package, while `d3.scaleOrdinal` with `d3.schemeSpectral` assigns colors. Interactive zoom via `d3.zoom` and SVG rendering provide the map interface.

Nntech9613
92% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by economic classification, using a spectral color scale to distinguish categories. Clicking a legend item filters the map to highlight only matching countries, while zooming and panning are enabled via d3.zoom. The visualization imports world-atlas TopoJSON and TSV data, projecting features with d3.geoNaturalEarth1 and d3.geoPath. Map and legend are rendered as SVG, with hover states and opacity dimming for non-selected regions.

JJuyeonee
92% match
Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by economic classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral, with a legend rendered via a custom colourLegend component. Geographic shapes are drawn with d3.geoPath and a Natural Earth projection, while data loads from World Atlas TopoJSON and TSV files. Hovering highlights countries, and d3.zoom enables panning and zooming with animated transitions on the legend circles.

JJoseph Popoola
92% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries’ economic classifications using a color scale based on the world-atlas TopoJSON dataset. The map renders with d3.geoPath and a natural Earth projection, while a d3.scaleOrdinal with schemeSpectral colors fills each country. Hovering highlights countries in pink, and a color legend explains the ordinal scale. Users can zoom and pan via d3.zoom, with all interaction and styling implemented in SVG.

CCassie
91% 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
91% match
Loading thumbnail…

Choropleth Map

This choropleth map, built with D3.js, visualizes global economic classifications by country. It uses a spectral color scale from the `schemeSpectral` range, with countries colored according to their economy attribute. Users can click legend items to highlight specific economic groups, which dims non-matching countries. The map projects geographic features using `geoNaturalEarth1` with `geoPath`, and data is loaded from the world-atlas TopoJSON and TSV files.

Ggcappadaniel
91% match