Map with legends

100%

Map with legends

✓ Published0🌍 Public

Last edited Jul 4, 2022

Created on Jul 3, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Map with Legends !

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.

SShareSha

90% match

Loading thumbnail…

Map

This example uses D3 v5 to visualize global economic data with a natural Earth projection. Countries are filled with colors from a spectral scheme based on their economy category, and hovering highlights each region. The visualization includes a custom color legend with circles and text. Data is loaded from the world-atlas package as TopoJSON and TSV files, which are processed using the `feature` function from topojson and rendered with `d3.geoPath`. The map supports zooming through `d3.zoom` events.

Kklumng

88% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map colored by economic classification, with an ordinal color legend displayed in the corner. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country outlines from TopoJSON data loaded via the `world-atlas` package. Countries are colored using `d3.scaleOrdinal` with `schemeSpectral`, and a custom `colorLegend` component draws circles and text labels. The map supports zooming through `d3.zoom`, and hover states change country fills to red via CSS.

LLudovicGouverneur

88% 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

87% match

Loading thumbnail…

Choropleth Map

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.

Ccheeson

87% 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

86% 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

86% match