Skip to main content
SimilarExport ZIP
100%

Map with Legends !

✓ Published0🌍 Public
BBrenda199708
Last edited Apr 15, 2020
Created on Apr 15, 2020
Forked from 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`.

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

Map with selectable country

This example presents a world map with countries colored by economic category, where clicking a country highlights it and dims all others; clicking again deselects it. The visualization includes a color legend with clickable swatches that filter the map’s opacity. Built with D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` for the interactive map, rendered as SVG. Country data comes from World Atlas TopoJSON, while economic classifications load from a TSV file. A sequential ordinal color scale based on `schemeSpectral` drives the fill colors.

NNita
85% match
Loading thumbnail…

COLORPLET INTERACTIVE

This interactive map uses D3.js to depict global economic data from the World Atlas TopoJSON and TSV files, coloring each country according to its economy classification. A zoomable Natural Earth projection via `d3.geoPath` shows the countries, while a custom `colorLegend` component allows users to click on legend items to highlight matching regions. The map uses `d3.scaleOrdinal` with `d3.schemeSpectral` to assign colors, and dims non-selected countries by adjusting their opacity. The visualization demonstrates fundamental D3 data-binding and event handling through reusable function patterns.

Ppaularl
84% match
Loading thumbnail…

Map final project

This choropleth map colors countries by their economic classification using a spectral color scale, with a hover effect to highlight individual nations and a legend showing the color-to-category mapping. Built with D3 v5, it loads geographic boundaries from a TopoJSON world atlas and income-group data from a TSV file, then projects them using the `geoNaturalEarth1` projection and renders paths with `geoPath`. The visualization implements interactive zooming via the `zoom` event and a custom `colorLegend` component, with the map’s ocean rendered as a styled sphere path.

PPavan Nimmagadda
84% match
Loading thumbnail…

Map with Selectable Countries

This interactive map colors countries by economic classification using a spectral color scale. Users can click a country to highlight it while dimming all others, with the legend providing a color-coded key that is also clickable for filtering. The visualization uses D3 v5 with `geoNaturalEarth1` projection, `geoPath` for rendering, TopoJSON data from the World Atlas, and an SVG canvas. Zoom and pan functionality is implemented via D3's `zoom` event, with country coordinates sourced from TSV data.

Wwenleicao
84% 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
84% match