Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published0🌍 Public
BBKirst3
Last edited Mar 7, 2021
Created on Mar 7, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

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

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.

Pprincit
94% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries colored in light green against a blue sphere, with hover highlighting in red. It uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1` to render country boundaries from TopoJSON data sourced from the world-atlas package, paired with a TSV file for country names. Pan and zoom interactions are enabled through `d3.zoom`, while tooltips show country names via SVG `title` elements.

CChip
94% 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
94% match