Skip to main content
SimilarExport ZIP
100%

Design

✓ Published0🌍 Public
NNilla
Last edited Apr 14, 2019
Created on Apr 14, 2019

A choropleth map colors countries by economy using an ordinal color scale from d3.scaleOrdinal and schemeSpectral, with a clickable color legend to highlight selected regions. The visualization loads world country boundaries from TopoJSON and metadata from TSV, processing them via topojson.feature and Promise.all. The SVG rendering uses d3.select, choroplethMap, and colorLegend custom functions, with hover and selection styling from CSS. Interactions update the map by re-rendering based on clicked legend values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

d3 Choropleth Map

This choropleth map colors countries by economy using a spectral ordinal scale, with hover highlighting and zoom/pan via d3.zoom. It loads TopoJSON geographic data and CSV attributes through Promise.all, then renders paths with d3.geoPath and a Natural Earth projection. A custom color legend displays the ordinal scale’s domain as circles with labels, while the map’s SVG elements are styled with CSS.

NNilla
89% match
Loading thumbnail…

d3 Choropleth Map

This choropleth map colors countries by economy using a spectral ordinal scale, with hover highlighting and zoom/pan via d3.zoom. It loads TopoJSON geographic data and CSV attributes through Promise.all, then renders paths with d3.geoPath and a Natural Earth projection. A custom color legend displays the ordinal scale’s domain as circles with labels, while the map’s SVG elements are styled with CSS.

NNilla
89% match
Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by their economy category using a spectral ordinal color scale, with an interactive color legend rendered as circles and labels. The visualization loads country geometries from TopoJSON and joins them with tabular metadata via a promise-based data pipeline. Rendered as SVG, it uses `d3.geoPath` with a Natural Earth projection and supports zooming through `d3.zoom`. Hovering highlights countries, while the legend is built using the exported `colorLegend` helper, with styling defined in external CSS.

Ffahmijaafar
89% match
Loading thumbnail…

Choropleth Map.js

This choropleth map colors countries by their economy classification using an ordinal color scale with a spectral palette. A hover effect highlights individual countries, and a custom legend displays the color categories. The visualization loads world geometry from TopoJSON and joins it with tabular TSV data, rendered as SVG paths via `d3.geoPath` and a natural Earth projection. Interactive pan and zoom are enabled through `d3.zoom`, while the legend and map styling are built with D3’s selection and data-join methods.

NNeepaB
88% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification using a spectral color scale, with hover highlighting and zoom/pan enabled via d3.zoom. The visualization loads world geometry from TopoJSON and joins it with tab-separated country metadata from the world-atlas dataset. It renders geographic paths with d3.geoPath and a Natural Earth projection, while a custom color legend displays ordinal color domains using SVG circles and text.

NNilla
88% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, with a color legend and tooltips showing each country’s name and category. The visualization uses a natural Earth projection rendered as SVG paths via d3.geoPath, while TopoJSON and TSV data from the world-atlas package are loaded asynchronously. Users can pan and zoom the map using d3.zoom, and hovering highlights individual countries in red. The color scale uses d3.scaleOrdinal with a spectral scheme, and an interactive legend is built from custom d3 selections.

BBrandon Lehr
88% 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
88% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification using a sequential ordinal color scale, with an interactive color legend and hover effects that highlight individual nations. The visualization loads world geometry from a TopoJSON file and joins it with tabular TSV data containing country identifiers and economic attributes. Built with D3 v5, it employs `d3.geoPath` with a natural Earth projection, `d3.scaleOrdinal` for color mapping, and `d3.zoom` for panning and zooming. The SVG rendering includes a custom legend component that updates based on the color scale’s domain.

ZZakaria
87% match