Skip to main content
SimilarExport ZIP
100%

d3 Choropleth Map

✓ Published1🌍 Public
NNilla
Last edited Mar 28, 2019
Created on Mar 27, 2019
Forked from d3 Choropleth Map

This choropleth map colors countries by economy using a spectral ordinal scale, with hover highlighting and zoom/pan via d3.zoom. It loads TopoJSON geographic data and CSV attributes through Promise.all, then renders paths with d3.geoPath and a Natural Earth projection. A custom color legend displays the ordinal scale’s domain as circles with labels, while the map’s SVG elements are styled with CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

d3 Choropleth Map

This choropleth map colors countries by economy using a spectral ordinal scale, with hover highlighting and zoom/pan via d3.zoom. It loads TopoJSON geographic data and CSV attributes through Promise.all, then renders paths with d3.geoPath and a Natural Earth projection. A custom color legend displays the ordinal scale’s domain as circles with labels, while the map’s SVG elements are styled with CSS.

NNilla
100% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economy category using an ordinal color scale with the spectral scheme, with hover highlighting and zooming via d3.zoom. It renders geographic paths with d3.geoPath and a Natural Earth projection, loading TopoJSON world-atlas data merged with TSV metadata. A custom color legend, built with SVG circles and text, displays the categorical scale.

Ssrrajendran
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification using a categorical color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It loads GeoJSON from TopoJSON world-atlas data and merges it with TSV metadata, then renders paths via d3.geoPath with a Natural Earth projection. Hovering highlights countries in red, while a custom color legend built with reusable D3 code displays the ordinal categories. Zoom and pan are enabled through d3.zoom, and the SVG output includes tooltips showing country names and economy values.

PPreciousone
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification using a spectral color scale, with hover highlighting and zoom/pan enabled via d3.zoom. The visualization loads world geometry from TopoJSON and joins it with tab-separated country metadata from the world-atlas dataset. It renders geographic paths with d3.geoPath and a Natural Earth projection, while a custom color legend displays ordinal color domains using SVG circles and text.

NNilla
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It renders world geography with d3.geoPath and a Natural Earth projection, with zoom and pan via d3.zoom. A color legend built from d3.zoom and custom SVG circles and text displays the categorical levels. The data comes from a GitHub-hosted CSV joined to TopoJSON world atlas geometries using topojson.feature. Hovering highlights individual countries with a red fill.

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

Choropleth Map

This choropleth map colors countries by their economy category using a sequential spectral color scale. It renders world geography as SVG paths via the `d3.geoPath` and `d3.geoNaturalEarth1` projection, with zoom support through `d3.zoom`. Country names and values appear as tooltips, and a custom `colorLegend` component displays the ordinal scale. The data is loaded from a TopoJSON world atlas and a TSV mapping country IDs to metadata. Hovering highlights countries in red.

BBahareh Zarei
92% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy type using a categorical color scale, with a legend showing each category. It renders world geography as SVG paths via `d3.geoPath` and the Natural Earth projection, while `d3.zoom` enables panning and zooming. The code loads TopoJSON and TSV data from the world-atlas package, mapping country IDs to economy labels, and uses `d3.scaleOrdinal` with `schemeSpectral`. Hovering highlights a country in red.

Ggabcoderboi
92% match