Choropleth Map with zoom,rotation and hover

100%

Choropleth Map with zoom,rotation and hover

✓ Published0🌍 Public

Last edited Feb 26, 2024

Created on Feb 26, 2024

This choropleth map visualizes World Bank GDP per capita data on a world atlas, using D3's `geoOrthographic` projection and `geoPath` to render countries color-coded with a quantile `schemeYlGnBu` scale. Users can rotate the globe by dragging, zoom with the mouse wheel, and hover over countries to see tooltips with the country name and GDP value. A color legend indicates low and high values, and the visualization responds to window resizing.

AI-generated description

A choropleth map of World Bank Dataset: GDP per capita, PPP (current international $).

choropleth map using d3

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Rotating Globe

This visualization displays a rotating globe with countries colored according to GDP per capita data from the World Bank. The choropleth map uses a yellow-green-blue color scale to represent economic output, with gray for missing values. Built with D3, it combines `geoOrthographic` projection with `geoPath` to render country boundaries and graticule lines. The globe continuously rotates as the animation updates the rotation state, while `scaleQuantile` and `schemeYlGnBu` define the color encoding for the data values from the CSV dataset.

IIshaChid76

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

84% match

Loading thumbnail…

Choropleth Map with interactions

A choropleth map of world countries, colored by economic income group, supports interactive exploration. The map uses a natural Earth projection and is rendered as SVG. A color legend allows selection and highlighting of specific categories, while zooming and panning are enabled via d3.zoom. Data is loaded from the World Atlas TopoJSON and TSV files, and the visualization is implemented with d3.geoPath and d3.scaleOrdinal. Hovering a country displays its name and value in a tooltip.

Ggilbster

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

83% match

Loading thumbnail…

Choropleth Map!

This choropleth map colors world countries by their World Bank economy classification, using a spectral color scale. The visualization renders geographic boundaries with d3.geoPath and a geoNaturalEarth1 projection, while d3.zoom enables interactive panning and zooming. A custom colorLegend displays ordinal values as circles with labels, and country data comes from TopoJSON world-atlas files joined with tab-separated metadata. Hovering highlights individual countries, and tooltips show each nation’s name and economic group.

KKurt J Nilsen

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

83% match

Loading thumbnail…

Choropleth Map

This choropleth map colors the world’s countries by economic classification using a spectral color scale, with country names and values shown on hover. The visualization also places a set of fixed coordinates as small circles on the map, though these are filled with the same color scale. Built with D3.js, it projects geographic data from a TopoJSON world atlas using the Natural Earth projection (`d3.geoNaturalEarth1`) and renders paths via `d3.geoPath`. Interactive zooming is enabled through a `d3.zoom` event, which transforms the SVG group containing the map.

Yylzami40

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

82% match