Skip to main content
SimilarExport ZIP
100%

Let's make a World Map - Cholropleth with interactions

✓ Published0🌍 Public
JJimMaltby
Last edited Nov 14, 2020
Created on Nov 5, 2020

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.

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

Let's make a World Map - Cholropleth with interactions

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.

JJimMaltby
90% match
Loading thumbnail…

Let's make a World Map - simple with interactions

This example presents an interactive world map rendered in SVG, where each country is filled with green and highlights red on hover. Built with D3 v5 and TopoJSON, it loads world-atlas data from unpkg and projects it using `geoNaturalEarth1` and `geoPath`. The map supports zooming and panning via `d3.zoom`, with tooltips showing country names extracted from TSV data. The background sphere is drawn separately in dark blue, demonstrating a simple yet interactive geographic visualization.

JJimMaltby
88% match
Loading thumbnail…

Choropleth Map

This choropleth map displays the world’s countries, each filled with a light green color that turns red on hover, while the ocean remains blue. It uses D3 v5 and TopoJSON to load world-atlas data, combining a TSV file for country names with a JSON topology for geographic boundaries. The map is rendered with an SVG using a natural Earth projection via `d3.geoPath`, and interactive panning and zooming are enabled through `d3.zoom`.

MMajaha21
86% 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
86% match
Loading thumbnail…

choropleth!

This choropleth displays a world map rendered with a natural Earth projection, coloring countries in light green against a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset and draws them as SVG paths using d3.geoPath. Interactive zooming is enabled through d3.zoom, and hovering over any country turns it red. Each country path includes a title element showing its name, though the display of that name is not implemented.

AAbhijeet Panda
86% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using a natural Earth projection, with color encoding driven by data loaded from the world-atlas TopoJSON and TSV files. The SVG rendering uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, while an ordinal color scale maps country attributes to fill colors. Interactive pan and zoom are enabled through `d3.zoom`, which transforms both the map and sphere layers. A color legend is positioned on the left side to interpret the scale.

YYoung Song
86% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries using a natural Earth projection, with country boundaries rendered as interactive SVG paths. The visualization uses D3 v6 and TopoJSON to load and convert world-atlas data from unpkg, employing `d3.geoNaturalEarth1` and `d3.geoPath` for projection and path generation. Hovering over a country changes its fill from green to red, while a zoom behavior (`d3.zoom`) allows panning and scaling the entire map. The sphere background is filled blue, and country names appear as tooltips via SVG title elements.

BBKirst3
86% match