Choropleth Map

100%

Choropleth Map

✓ Published1🌍 Public

Last edited Apr 7, 2020

Created on Apr 7, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% 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

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

91% 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

91% match

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

91% 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

91% 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

91% match

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

91% match