Skip to main content
SimilarExport ZIP
100%

Chloropleth Map

✓ Published0🌍 Public
LLuce Liu
Last edited Feb 23, 2020
Created on Feb 23, 2020

This choropleth map visualizes world countries with a natural Earth projection, coloring each nation light green and highlighting it red on hover. The visualization loads geographic data from the world-atlas TopoJSON and tab-separated country names, merging them by ID before rendering. Using D3 v5’s `geoNaturalEarth1` projection and `geoPath` generator, it draws SVG paths for each country, while TopoJSON’s `feature` API converts the topology into GeoJSON. A semi-transparent black stroke outlines national borders, and a blue sphere background represents the globe. Tooltips display country names via appended `title` elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using a natural Earth projection, with each country filled in light green and outlined in black. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, using `d3.geoPath` and `geoNaturalEarth1` to project and render country boundaries. Countries are colored by their assigned fill, and hovering over a country turns it red, while a tooltip displays the country name. The map includes a blue sphere background and supports zoom interactions through D3’s zoom behavior.

Yylzami40
94% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries colored in light green against a blue globe, with red highlighting on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features with `d3.geoPath`. Country boundaries and identifiers come from the World Atlas TopoJSON dataset, while country names are joined from a TSV file. Interactive tooltips show each country’s name through appended SVG `<title>` elements, and the map supports zooming via D3’s zoom behavior.

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

Choropleth Map

A choropleth map displays countries of the world colored in light green, with a blue sphere representing the globe and black borders between nations. The visualization uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features from TopoJSON data, while country names come from tab-separated values (TSV) data. Interactive zooming is implemented with `d3.zoom`, converting events to SVG transforms. Hovering over a country changes its fill color to red through CSS `:hover` styles, and tooltips with country names appear via SVG `title` elements.

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

Choropleth Map

This choropleth map displays world countries on a natural Earth projection, colored uniformly with a light green fill on a blue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` from d3 to generate the geographic paths from TopoJSON world data. The visualization supports zooming and panning via the custom `zoom` event, while hovering over a country turns it red. Data is loaded from the world-atlas package, which provides both TSV metadata and TopoJSON geometry.

Ccpsshan
92% match