Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published1🌍 Public
Ggcappadaniel
Last edited Feb 7, 2021
Created on Jun 5, 2020
Forked from Choropleth Map

This choropleth map displays the world’s countries colored by their economy classification, with a hover tooltip revealing each country’s name and economic group. The visualization uses `d3.geoPath` with the `geoNaturalEarth1` projection to render the globe, while `topojson.feature` loads the world atlas data and merges it with TSV metadata. An ordinal color scale applies a `schemeSpectral` range, and the custom `colorLegend` component builds an SVG legend. The map supports interactive pan and zoom via `d3.zoom`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification using an ordinal color scale. Users can zoom and pan the map, and hovering over a country displays its name in a tooltip. The visualization pairs TopoJSON world geography with tabular TSV data from the World Atlas, merging them via `d3.json` and `d3.tsv`. It renders with SVG paths through `d3.geoPath` and `d3.geoNaturalEarth1`, and includes a custom color legend built with D3’s general update pattern.

NNico Donovan
95% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, with a color legend and tooltips showing each country’s name and category. The visualization uses a natural Earth projection rendered as SVG paths via d3.geoPath, while TopoJSON and TSV data from the world-atlas package are loaded asynchronously. Users can pan and zoom the map using d3.zoom, and hovering highlights individual countries in red. The color scale uses d3.scaleOrdinal with a spectral scheme, and an interactive legend is built from custom d3 selections.

BBrandon Lehr
94% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global economic classifications by coloring each country according to a categorical ordinal scale derived from the `economy` property in the world-atlas dataset. The visualization loads TopoJSON and TSV data, then uses `d3.geoPath` with a natural Earth projection to render country boundaries, while a custom color legend built with SVG circles and text explains the color encoding. Users can zoom and pan via `d3.zoom`, with hover effects highlighting individual nations.

Ggcappadaniel
94% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global economic classifications by coloring each country according to a categorical ordinal scale derived from the `economy` property in the world-atlas dataset. The visualization loads TopoJSON and TSV data, then uses `d3.geoPath` with a natural Earth projection to render country boundaries, while a custom color legend built with SVG circles and text explains the color encoding. Users can zoom and pan via `d3.zoom`, with hover effects highlighting individual nations.

Ggcappadaniel
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by economic classification using a categorical color scale. The visualization renders geographic boundaries with SVG paths projected via `d3.geoNaturalEarth1` and `d3.geoPath`, with interactive zoom support through `d3.zoom`. A custom `colorLegend` component displays the ordinal scale’s categories as colored circles with labels. Data loads from the World Atlas TopoJSON and TSV files, with country names and economy values shown in tooltips on hover. The map uses `d3.scaleOrdinal` with `schemeSpectral` to assign distinct fills to each economic group.

MMunTatt Yap
94% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the world’s economies, coloring each country according to its economic classification using a spectral color scale. The map displays the geographic distribution of these categories, with hover states revealing a country’s name and category. Built with D3.js (v5), the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render the map from world-atlas TopoJSON and TSV data. A custom `colorLegend` component, drawn as SVG circles and text, provides a reference for the color categories, while zooming is handled via D3’s `zoom` event and `event.transform`.

Pprincit
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy classification using an ordinal color scale with the spectral scheme. The visualization supports zooming and panning through D3’s zoom behavior, while hover effects highlight individual countries. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Data is loaded from the World Atlas TopoJSON and TSV files, processed via topojson.feature, and joined by country ID.

Nnouralkhoury
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy category using an ordinal color scale with a spectral scheme, and displays a color legend with clickable circles. It renders geographic boundaries with antialiased SVG paths via `d3.geoPath` and the Natural Earth projection, while loading data from the world-atlas package (TSV metadata and TopoJSON geometries) and processing it with `topojson.feature`. Hovering highlights a country in red, and the map supports zooming through the `d3.zoom` interaction.

Ffaaty
94% match