Skip to main content
SimilarExport ZIP
100%

Map with Legends !

✓ Published1🌍 Public
SShareSha
Last edited Apr 14, 2020
Created on Apr 14, 2020
Forked from Chloropleth Map

A choropleth map of global economies uses d3.geoNaturalEarth1 and d3.geoPath to render countries from TopoJSON data, with each nation’s fill color derived from a d3.scaleOrdinal using the schemeSpectral range. A custom color legend, built with SVG circles and text, displays the economy categories, while d3.zoom enables panning and zooming. Hovering highlights a country in red.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map with legends

This map visualizes countries colored by their economy category, with a color legend showing the ordinal scale’s domain. Built with d3.v5, it uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render world boundaries from TopoJSON data, while `d3.scaleOrdinal` maps economy values to a spectral color scheme. The legend, implemented via the custom `colorLegend` function, renders white-background ticks with circles and text labels, and the map supports zooming through d3.zoom. Data originates from world-atlas TSV and JSON files.

Ddankvader1
90% match
Loading thumbnail…

Circles on Map

This example displays a world map colored by each country's economy classification, with a color legend showing the categorical scale. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render the map from TopoJSON data loaded via topojson, while d3.scaleOrdinal with schemeSpectral assigns colors to economic categories. The map supports zooming through d3.zoom, and hovering highlights individual countries in red. A custom colorLegend component renders the legend as SVG circles with text labels, and the sphere background is filled with blue.

Mmaxthamt
89% match
Loading thumbnail…

Map with Legends !

This map visualizes the economic classification of countries using a color scale, with an interactive legend that displays unique values and their corresponding colors. Built with D3 v5 and rendered as SVG, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from TopoJSON data sourced from World Atlas. The color legend is created via a custom function that binds `d3.scaleOrdinal` with `d3.schemeSpectral`, while zooming is handled by `d3.zoom`.

BBrenda199708
89% 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
89% match
Loading thumbnail…

choropleth map

This choropleth map shows global economies colored with a sequential green scale, with a hover effect that highlights individual countries and a legend displaying the ordinal color categories. The visualization uses d3.geoPath with a natural Earth projection to render country boundaries from TopoJSON data provided by the world-atlas package, while loadAndProcessData merges TSV metadata with the geometry. Interactions include d3.zoom for panning and zooming the map, and colorLegend renders the categorical legend as an SVG group with circles and text labels.

AAndrew Fletcher
89% 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
89% 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
88% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification using a categorical color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It loads GeoJSON from TopoJSON world-atlas data and merges it with TSV metadata, then renders paths via d3.geoPath with a Natural Earth projection. Hovering highlights countries in red, while a custom color legend built with reusable D3 code displays the ordinal categories. Zoom and pan are enabled through d3.zoom, and the SVG output includes tooltips showing country names and economy values.

PPreciousone
88% match