Skip to main content
SimilarExport ZIP
100%

choroplethMap.js

✓ Published0🌍 Public
NNkwachi Abel
Last edited Jun 3, 2022
Created on Jun 3, 2022

A choropleth map of world countries colored by economy type, rendered with SVG paths projected using D3's `geoNaturalEarth1` and `geoPath`. The legend, built with a reusable `colorLegend` function, displays ordinal color swatches from `schemeSpectral`, and clicking a legend item dims other categories. Data is loaded from the World Atlas TopoJSON and TSV files via `loadAndProcessData`, with country names and economy values appended to each feature. Pan and zoom are enabled through `d3.zoom`, applying transforms to the map group.

AI-generated description
MIT Licensed

Similar vizzes

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

choropleth ... map

A choropleth map of world countries colored by economy type, using a spectral color scale with an interactive legend. The map displays country names and economy values on hover, with zoom and pan enabled via d3.zoom. Built with d3.geoNaturalEarth1 projection and d3.geoPath, it loads TopoJSON and TSV data from world-atlas, renders as SVG, and uses d3.scaleOrdinal to map values to colors.

YYanxxx447
92% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries according to their economy type, with a custom ordinal color legend and hover interactions that highlight each nation. The visualization renders an SVG world map using a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, while supporting pan and zoom through `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV datasets, processed with `topojson.feature` and loaded asynchronously. The color scale uses `d3.scaleOrdinal` with `d3.schemeSpectral`, and the legend is built with custom D3 enter/merge/exit selections.

Yyejichun@naver.com
92% match
Loading thumbnail…

Choropleth map

This choropleth map colors world countries by economy type using a spectral color scale. The map is rendered with SVG, using `d3.geoPath` with the Natural Earth projection, and supports zooming via `d3.zoom`. A legend with color swatches allows users to click a category, which highlights matching countries while dimming others. Data is loaded from the world-atlas TopoJSON and TSV files.

JJens Grochtdreis
92% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economy category using a categorical color scale. The map is rendered as SVG with geographic paths projected via `d3.geoNaturalEarth1` and encoded with `d3.geoPath`, while panning and zooming are handled by `d3.zoom`. A legend, built with custom code, displays color-coded circles in `d3.scaleOrdinal`’s `schemeSpectral` range. Data comes from World Atlas TopoJSON and TSV files, loaded with `d3.json` and `d3.tsv`, and each country shows its name and value on hover via a `<title>` element.

Eedmond gihozo
92% match
Loading thumbnail…

choropleth map

This choropleth map colors countries by their economy type, using a spectral color scale with a linked legend that filters the map when clicked. The visualization renders world geography as SVG paths via d3.geoPath with a geoVanDerGrinten4 projection, and supports zooming through d3.zoom. Data comes from the World Atlas TopoJSON dataset, merged with TSV metadata, while the legend uses an ordinal scale and interactive ticks to highlight or dim matching countries.

JJenny
92% 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 grouping, using a spectral color scale assigned through D3's `scaleOrdinal` and `schemeSpectral`. The code projects geographic features with `geoNaturalEarth1` and `geoPath` onto an SVG, overlaying a white legend built by a custom `colorLegend` component. Hovering highlights a country in red via CSS. Data comes from the `world-atlas` package, merging TopoJSON shapes with TSV metadata. Zoom interactions are handled through D3's `zoom` event, transforming the map group.

YYoung Song
91% match