Skip to main content
SimilarExport ZIP
100%

Let's make a World Map - Cholropleth with interactions

✓ Published2🌍 Public
JJimMaltby
Last edited Oct 27, 2020
Created on Oct 25, 2020

This choropleth world map colors each country by its economy classification using a diverging color scale. Users can zoom and pan the map, and hovering over a country reveals its name, economy type, and continent in a tooltip. The visualization uses d3.geoPath with a natural Earth projection, d3.zoom for interactions, and d3.scaleOrdinal with the RdYlGn scheme. It renders geographic data from the world-atlas TopoJSON and TSV datasets, with a custom color legend built using D3’s join pattern.

AI-generated description

A Cholropleth with interactions map of the world. From Curran Kelleher's: "Cholropleth Map with D3" .

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a World Map - Cholropleth with interactions

This interactive choropleth world map uses D3 v5 and the geoNaturalEarth1 projection to display countries colored by continent. Built with d3.geoPath and topojson, it loads geographic data from world-atlas and renders SVG paths. Hovering highlights countries and shows tooltips with name, economy, and continent. A color legend using d3.scaleOrdinal with the RdYlGn scheme explains the mapping, while the view supports pan and zoom interactions.

JJimMaltby
93% match
Loading thumbnail…

Let's make a World Map - Cholropleth with interactions

This example presents an interactive choropleth world map built with D3 v5 and TopoJSON, using a natural Earth projection rendered as SVG. The map colors countries by continent using a categorical color scale, with specific overrides for the United Kingdom and Egypt in green and orange. A zoom interaction enables panning and scaling, while a legend widget displays the color scale domain. Data is loaded from the world-atlas package, combining TSV metadata with TopoJSON geometry. Hovering reveals a tooltip with country name, economy, and continent information via appended title elements.

JJimMaltby
90% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries according to their economy group, using a spectral color scale to differentiate categories. It renders geographic boundaries with d3.geoNaturalEarth1 and d3.geoPath, and includes an interactive color legend built with custom SVG components. Users can pan and zoom the map via d3.zoom, while tooltips reveal country names and economy values. The visualization loads TopoJSON data from the world-atlas package and joins it with TSV metadata to assign colors, with hover states highlighted in red.

JJynadal
90% 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
90% match
Loading thumbnail…

Choropleth map with interaction

This choropleth map displays world economies using a color scale mapped to each country, with dimming and highlighting applied when a legend category is selected. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection and rendering, and `d3.zoom` for panning and zooming. A clickable legend, rendered via custom D3 selections, filters the map by economy type, while data is loaded from TopoJSON and TSV files using `d3.json` and `d3.tsv`. The map renders as SVG with hover effects and interactive focus.

JJasonYeong0821
90% match
Loading thumbnail…

Chloropleth Map Interactive

A choropleth map shows world countries colored by economy type, with a legend that filters and highlights selected categories. The visualization supports zooming and panning, and dims non-selected countries while emphasizing those matching the chosen economy. It uses d3.geoPath with the geoNaturalEarth1 projection to render the map, and d3.scaleOrdinal with schemeSpectral for coloring. Country data comes from world-atlas TopoJSON and TSV files, with hover effects and a clickable color legend for interaction.

MMaxwell Dayvson da Silva
89% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, with a color legend and tooltips showing each country’s name and category. The visualization uses a natural Earth projection rendered as SVG paths via d3.geoPath, while TopoJSON and TSV data from the world-atlas package are loaded asynchronously. Users can pan and zoom the map using d3.zoom, and hovering highlights individual countries in red. The color scale uses d3.scaleOrdinal with a spectral scheme, and an interactive legend is built from custom d3 selections.

BBrandon Lehr
89% match
Loading thumbnail…

Choropleth Map

A choropleth map colors each country by its economy classification using an ordinal color scale with a spectral palette. The visualization supports pan and zoom via d3.zoom, and renders geographic features with d3.geoPath and a Natural Earth projection. A custom color legend component displays the categorical scale, while data is loaded from the World Atlas TopoJSON and TSV files, with tooltips showing country names and economy values on hover.

Nnkohdatavis
89% match