Skip to main content
SimilarExport ZIP
100%

COLORPLETH

✓ Published1🌍 Public
Ppaularl
Last edited Jan 28, 2020
Created on Jan 28, 2020
Forked from WORLD MAP

A choropleth map visualizes countries' economic classifications using an ordinal color scale. The map renders via the `d3.geoPath` and `d3.geoNaturalEarth1` projection, with country data sourced from the `world-atlas` package. A legend, built with a custom `colorLegend` function, lists each economy type. The map is zoomable and interactive, with hover effects changing fill color and a `title` element showing country names and values.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Colorpleth Map

This example, titled Colorpleth Map, visualizes global economic data by coloring each country on a natural Earth projection using a spectral color scale. The map renders geographic boundaries with `d3.geoPath` and supports zoom interaction via `d3.zoom`. A legend, built with custom D3 code, displays the ordinal color scale’s domain. The data is loaded from the `world-atlas` TopoJSON and TSV files, with countries colored according to their `economy` property.

Ggregosaure
89% match
Loading thumbnail…

Colorpleth Map

This colorpleth map visualizes a global economic dataset, showing each country colored according to its value on a spectral scale. The map uses D3 v5 and the `geoNaturalEarth1` projection to render geographic boundaries, with an ordinal color scale and an interactive legend built through `scaleOrdinal` and custom SVG elements. The choropleth overlays data from the World Atlas TopoJSON and TSV files onto a natural Earth sphere, with zoom functionality and hover effects highlighting individual countries.

Nnouralkhoury
88% match
Loading thumbnail…

Colorpleth Map

This colorpleth map uses a natural Earth projection to display world countries shaded by their economy type, with a color legend showing the ordinal scale. The visualization supports zooming and panning through d3.zoom, and hovering over a country highlights it in red while revealing its name and economy classification in a tooltip. Data is loaded from the World Atlas TopoJSON and TSV files, with d3.geoPath generating the geographic paths and d3.scaleOrdinal mapping economy categories to a spectral color scheme. The map is rendered as SVG within a React application.

LLongYuu
88% match
Loading thumbnail…

Chloropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its economy type, with a color legend to the side. Built with D3 v5, it uses `d3.geoPath` with the Natural Earth projection to render country boundaries from TopoJSON data loaded from the world-atlas package. An ordinal color scale maps economic categories to the spectral scheme, while zoom interaction and hover highlighting are implemented via `d3.zoom` and CSS. The legend is generated as a reusable SVG component through custom functions.

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

Chloropleth Map - Color

This choropleth map colors countries by their economic classification using a categorical color scale. The visualization uses D3 v5’s `geoPath` and `geoNaturalEarth1` projections to render world map topology, with an ordinal color legend showing the economy categories. Country data comes from the world-atlas TopoJSON and TSV files. Hovering highlights countries in red, while the legend uses D3’s `scaleOrdinal` and `schemeSpectral` for distinct color assignments.

LLeora Wenger
87% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic classification using an ordinal color scale derived from d3.schemeSpectral. The visualization applies the d3.geoNaturalEarth1 projection and renders GeoJSON paths via d3.geoPath, with topology loaded from a world-atlas TopoJSON file and country names merged from a TSV lookup. Hovering highlights individual countries in coral, and d3.zoom enables interactive panning and scaling. A custom color legend displays the seven economy categories with labeled circles.

MMichał Szumnarski
87% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic classification using an ordinal color scale derived from d3.schemeSpectral. The visualization applies the d3.geoNaturalEarth1 projection and renders GeoJSON paths via d3.geoPath, with topology loaded from a world-atlas TopoJSON file and country names merged from a TSV lookup. Hovering highlights individual countries in coral, and d3.zoom enables interactive panning and scaling. A custom color legend displays the seven economy categories with labeled circles.

MMichał Szumnarski
87% match