Skip to main content
SimilarExport ZIP
100%

Choropleth map

✓ Published1🌍 Public
Bbambaleq
Last edited Feb 3, 2020
Created on Feb 3, 2020
Forked from Let's make a map

This choropleth map visualizes world countries using D3.js and the topojson library, rendering geographic boundaries as SVG paths. It displays country names as tooltips on hover, with countries filled red against a steel-blue ocean background. The visualization loads geographic data from the world-atlas package, combining 50m.tsv metadata with 50m.json topology, and processes it using D3’s file-loading utilities and TopoJSON’s feature conversion. The map uses a Mercator projection and includes pan and zoom functionality through D3’s zoom interaction handler.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map

This choropleth map visualizes world countries using D3.js and the topojson library, rendering geographic boundaries as SVG paths. It displays country names as tooltips on hover, with countries filled red against a steel-blue ocean background. The visualization loads geographic data from the world-atlas package, combining 50m.tsv metadata with 50m.json topology, and processes it using D3’s file-loading utilities and TopoJSON’s feature conversion. The map uses a Mercator projection and includes pan and zoom functionality through D3’s zoom interaction handler.

Bbambaleq
100% 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
Loading thumbnail…

Choropleth Map

A choropleth map displays countries with a uniform green fill, turning red on hover while the ocean remains light blue. The visualization uses an orthographic projection, rendering country boundaries as SVG paths via the `geoPath` and `geoOrthographic` functions. It loads world map data from the `world-atlas` package (50m JSON and TSV files) and processes TopoJSON features with the `topojson` library. The `zoom` interaction allows panning and scaling the map through SVG transforms, with country names shown in tooltips.

SSophia Murage
91% 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
90% 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
90% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries in green with a dark blue ocean sphere, highlighting each country in red on hover. Using D3 v5 and TopoJSON, it loads world-atlas data (50m resolution) to generate SVG paths via `d3.geoPath` with a `geoNaturalEarth1` projection, matching ISO country IDs to names from a TSV table. The map supports zoom and pan interactions through `d3.zoom`.

Ooptimizeresume
90% 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
90% 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
90% match