Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published0🌍 Public
Pprincit
Last edited Mar 29, 2020
Created on Mar 29, 2020
Forked from Choropleth Map

This example presents a choropleth map of world countries rendered as an SVG using D3 v5. It displays each country as a red-filled path on a blue sphere, with country names shown in tooltips on hover. The visualization uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for drawing, and `d3.zoom` for panning and zooming. Data loads from TopoJSON and TSV files via the world-atlas package, with `topojson.feature` processing geographic boundaries. Hover effects change fill color to red, while the base country color is also red, with black stroke outlines.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map displays world countries as red-filled paths on a blue sphere using a natural Earth projection, with hover effects changing the fill to red. The visualization employs D3 v5’s `geoPath` and `geoNaturalEarth1` for geographic rendering, and TopoJSON’s `feature` to convert world-atlas 50m topology into GeoJSON. Data from a TSV file is merged with country IDs to attach country names for tooltips. The map supports zooming via D3’s `zoom` behavior, applying transforms to the SVG group.

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

Choropleth Map

This choropleth map visualizes world countries with a green fill and a blue sphere background, using a natural Earth projection rendered to SVG. It draws country boundaries and names from the world-atlas TopoJSON dataset, with each country’s name displayed as a tooltip. The map supports pan and zoom via d3.zoom, and hovering over a country turns it red. The code leverages d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to generate the geographic paths.

Ccpsshan
93% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries in red with hover highlighting, rendered using SVG paths. The map uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geometries from TopoJSON data (world-atlas 50m.json) merged with TSV country names. Users can pan and zoom via d3.zoom, which applies SVG transforms to the group containing the countries. The d3.select and event APIs manage interactions, while touch tooltips show country names via SVG title elements.

Ssaravoan
92% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries in solid red against a blue sphere, with each country labeled by name on hover. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON data loaded via the world-atlas package. Interactive zooming is implemented with D3’s zoom behavior, while country styling and hover effects are defined in CSS. The map draws all features as SVG paths, with a title element added per country for tooltip-like labels.

Bbenben1996
92% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using color to distinguish region boundaries and a blue sphere to represent the Earth’s surface. It loads geographic data from the World Atlas TopoJSON and TSV files via Promise.all, then renders each country as an SVG path using d3.geoPath with the d3.geoNaturalEarth1 projection. Hovering turns countries red, and tooltips display country names through appended title elements. The visualization supports zoom interaction via d3.zoom, with light green fills and black strokes for borders.

Yylzami40
92% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries as a stylized green landmass on a blue sphere, using a natural Earth projection. It renders with D3’s `geoPath` and `geoNaturalEarth1` projection onto an SVG, powered by TopoJSON world-atlas data. Hovering highlights a country in red, while a tooltip shows the country name from a TSV lookup. Pan and zoom are enabled via `d3.zoom`.

LLex
92% 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
92% match