Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published1🌍 Public
RRenato Francia Castillo
Last edited Nov 7, 2018
Created on Nov 7, 2018
Forked from Choropleth Map

This choropleth map visualizes world economies by coloring each country according to its economic classification, using a spectral color scale created with `d3.scaleOrdinal` and `schemeSpectral`. The map renders as an SVG using `d3.geoPath` with the Natural Earth projection, displaying country data loaded from the world-atlas TopoJSON and TSV files. Interactive zooming via the `zoom` event lets users explore regions, while a custom `colorLegend` function shows the categorical color assignments.

AI-generated description
MIT Licensed

Similar vizzes

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

Choropleth Map

This choropleth map visualizes the economies of world countries using a spectral color scale. The implementation uses d3.geoPath with the natural Earth projection to render world geometry from TopoJSON and TSV data sources. The custom d3.scaleOrdinal color legend displays circles and text labels, while the map supports zooming through d3.zoom. Each country is colored by its economy value with hover effects that turn the landmass red, and tooltips reveal the country name and associated economic classification.

CChristine Lanser
94% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by country, coloring each nation according to its economy category. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render the map from TopoJSON world-atlas data, with country attributes loaded from a TSV file. A color legend, constructed via `colorLegend`, displays the ordinal color scale using `d3.scaleOrdinal` and `d3.schemeSpectral`. The SVG map supports zooming via `d3.zoom`, and hovering changes a country’s fill to red.

Eevavan8
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, using a sequential spectral color scale to distinguish categories. The visualization renders geographic boundaries with `d3.geoPath`, projecting the world using the Natural Earth projection and enabling zoom and pan through `d3.zoom`. The code loads world topology from TopoJSON and joins it with TSV metadata via `d3.tsv`, while a custom color legend component displays the categorical scale. Hovering highlights individual countries in red, and the map includes data from the world-atlas dataset.

Vvitoriss12
94% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries colored by their economy classification, using a spectral color scale to differentiate income groups. The visualization displays country names and classifications on hover via tooltips, with a legend showing the ordinal color mapping. Built with D3 v5, the example uses `geoNaturalEarth1` projection and `geoPath` to render world geography from TopoJSON data, while `scaleOrdinal` with `schemeSpectral` assigns colors. The interactive zoom feature uses `zoom`, and a custom `colorLegend` function draws the legend with SVG circles and text.

CCarloGato
94% match