Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published1🌍 Public
Ccheeson
Last edited Aug 10, 2020
Created on Aug 10, 2020
Forked from Hello VizHub

This choropleth map visualizes countries by economic type, with a color legend and zoomable navigation. Built with D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and TopoJSON data from the world-atlas package to render SVG country paths. A categorical `scaleOrdinal` color scale maps economic classifications to the Spectral palette. Hovering a country reveals its name and economy in a tooltip, while `d3.zoom` enables pan and zoom. The legend is generated by a custom `colorLegend` component.

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
95% 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 visualizes countries colored by their economy type, using a spectral color scale with an interactive legend. Built with d3 v5 and the topojson library, it renders natural earth projection paths as SVG elements. The map displays data from the world-atlas package, with country names and economy values shown on hover. A zoom feature allows user interaction, while the legend uses a custom colorLegend component to map ordinal categories to colors.

RRobyn Parker
94% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic data by coloring countries according to a categorical color scale. Users can click legend entries to highlight countries matching the selected category, dimming all others. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection and `d3.scaleOrdinal` for coloring. The map loads country boundaries and economic classifications from a world-atlas TopoJSON dataset, while the interactive legend and country paths are rendered as SVG elements.

Iinroadings
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 according to their economic classification, with a discrete ordinal color scale and an interactive color legend. Using D3 v5 and the `geoNaturalEarth1` projection, it renders TopoJSON world data loaded from the world-atlas package and merges it with TSV metadata containing country names and income groups. Users can pan and zoom via D3's zoom behavior, while hovering highlights countries in red and displays a tooltip with the country name and economy type. The legend is built with a custom colorLegend component.

SShanthi Acharya
94% 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
93% 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
93% match