Skip to main content
SimilarExport ZIP
100%

Chloropeth Map

✓ Published3🌍 Public
MMuhammad Jarir Kanji
Last edited Mar 10, 2021
Created on Dec 16, 2020

A choropleth map colors countries by economy using a D3 v5 ordinal color scale with a spectral scheme. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render geographic boundaries from TopoJSON world-atlas data, with a legend built via a custom `colorLegend` function. Hovering highlights a country in pink, and a zoom interaction is implemented with `d3.zoom`. The map is rendered as SVG with a dark blue ocean background.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Chloropeth Map with Interactive Filtering

A choropleth map colors world countries by economy using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking a legend item filters the map, dimming unselected countries and enlarging the selected one’s stroke. The visualization supports zooming and panning via d3.zoom, uses d3.geoNaturalEarth1 and d3.geoPath for projection, and loads TopoJSON and TSV data from the world-atlas package. A hovering effect turns countries pink.

MMuhammad Jarir Kanji
94% match
Loading thumbnail…

Chloropeth Map

This choropleth map colors countries by income group using an ordinal color scale derived from d3.scaleOrdinal and the d3.schemeSpectral palette. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, with hover highlighting via CSS. The visualization includes an interactive color legend built with custom SVG code, and supports zooming through d3.zoom. Data combines TopoJSON world geometry with TSV metadata from the world-atlas package, and country names and income values appear in tooltips via SVG title elements.

Xxsg13
91% match
Loading thumbnail…

Chloropeth Map

This choropleth map visualizes countries by their economic classification using a red-yellow-green color scale. Built with React and D3, it renders geographic boundaries via the `d3.geoPath` projection on a natural Earth base layer, with country data loaded from TopoJSON and TSV files. A color legend with animated transitions shows the ordinal scale mapping, and the map supports interactive zooming through `d3.zoom` events, while hover states provide tooltips with country names and economic values.

BB Sundaresan
91% match
Loading thumbnail…

Fork of Chloropeth Map

A choropleth map colors countries by their economy classification, with a color legend and zoom-and-pan interaction. It uses `d3.geoNaturalEarth1` and `d3.geoPath` to render the world from TopoJSON data loaded via `d3.json` and `d3.tsv`, which joins country names and economy values by ISO codes. The visualization assigns colors via `scaleOrdinal` with `schemeSpectral`, and includes a custom `colorLegend` component. Interactive zoom is handled with `d3.zoom`, while SVG paths for countries are styled with hover effects.

Llrakla
89% match
Loading thumbnail…

Choroplath Map

This choropleth map colors countries by their economy type, using a natural Earth projection and a spectral color scale. The visualization supports zooming and panning, with hover highlighting and tooltips showing country names. Built with D3 v5, it uses `geoNaturalEarth1`, `geoPath`, and `zoom`, while loading TopoJSON world data joined with TSV metadata. A custom color legend displays ordinal categories, and the code leverages `scaleOrdinal` and `schemeSpectral` for color mapping.

OOleg
89% match
Loading thumbnail…

Chloropleth Map

This choropleth map displays countries colored by economic classification, with a color legend positioned in the lower-left corner and hover interactions that highlight individual nations. The visualization uses D3 v5 with d3.geoNaturalEarth1 for projection and d3.geoPath for rendering geographic features, while d3.zoom enables pan and zoom functionality. TopoJSON and TSV data from the world-atlas package populate the map, with d3.scaleOrdinal mapping economy categories to a spectral color scheme. SVG elements render all visuals, and the legend uses custom D3 scales and tick marks for clarity.

AAdrian Tan
89% match
Loading thumbnail…

chloropleth map

This choropleth map colors countries according to economic data, with a color legend and hover highlighting. The visualization uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for geographic projection, while loading world data from the world-atlas TopoJSON and TSV files. The color scale uses `d3.scaleOrdinal` with the Spectral scheme to map economic classifications. Users can pan and zoom via `d3.zoom`, and country names appear as tooltips on hover.

Aaidanoconnor1
89% match
Loading thumbnail…

Chloropleth Map Interactive

A choropleth map shows world countries colored by economy type, with a legend that filters and highlights selected categories. The visualization supports zooming and panning, and dims non-selected countries while emphasizing those matching the chosen economy. It uses d3.geoPath with the geoNaturalEarth1 projection to render the map, and d3.scaleOrdinal with schemeSpectral for coloring. Country data comes from world-atlas TopoJSON and TSV files, with hover effects and a clickable color legend for interaction.

MMaxwell Dayvson da Silva
89% match