Choropleth Map_test2

100%

Choropleth Map_test2

✓ Published0🌍 Public

Last edited Sep 13, 2024

Created on Aug 5, 2021

This choropleth map visualizes countries by economic classification, using an ordinal color scale where each economy type receives a distinct color. A clickable legend allows users to filter the map, dimming non-selected countries while highlighting those matching the chosen category. Built with D3 v5, the visualization employs `geoPath` with the Natural Earth projection for geographic rendering, while legend interactions trigger a unidirectional data flow that updates both the map and legend opacity. The map uses SVG for crisp rendering, with country data sourced from the World Atlas TopoJSON and TSV files, and the color scale is generated from `d3.scaleOrdinal` with the Spectral scheme.

AI-generated description

Topics Making the Color Legend Clickable Implementing Unidirectional Data Flow Highlingting the selected color value Componentizing the Choropleth Map Highlighting countries using the selected color value

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries colored by their economic classification, using a spectral color scale to distinguish categories. The map renders geographic boundaries as SVG paths via `d3.geoPath` and a Natural Earth projection. Data is loaded from the World Atlas TopoJSON and TSV files, merged by country ID, then assigned to the `d3.scaleOrdinal` color scale. A custom legend shows color swatches with labels, and hovering highlights individual countries in red. Interaction includes zoom and pan through the `d3.zoom` event, which applies an SVG transform.

CCurran Kelleher

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

91% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with a spectral scheme. Hovering highlights a country in red, and the map includes a legend showing color categories. Built with D3 v5, it uses `geoPath` with the Natural Earth projection and loads geographic data from the world-atlas TopoJSON and TSV files. The visualization supports zooming via D3's zoom event and renders as an SVG.

AAdrianTNare

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

91% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic data by coloring countries according to a categorical color scale. Users can click legend entries to highlight countries matching the selected category, dimming all others. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection and `d3.scaleOrdinal` for coloring. The map loads country boundaries and economic classifications from a world-atlas TopoJSON dataset, while the interactive legend and country paths are rendered as SVG elements.

Iinroadings

91% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with the spectral scheme, sourced from the World Atlas TopoJSON dataset. The map supports interactive zooming and panning, and clicking a legend item highlights matching countries while dimming others. It is built with D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projections, and `d3.zoom` for navigation, with all elements rendered as SVG.

Mmaru25-alt

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

91% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by economic classification using a categorical color scale. The visualization renders geographic boundaries with SVG paths projected via `d3.geoNaturalEarth1` and `d3.geoPath`, with interactive zoom support through `d3.zoom`. A custom `colorLegend` component displays the ordinal scale’s categories as colored circles with labels. Data loads from the World Atlas TopoJSON and TSV files, with country names and economy values shown in tooltips on hover. The map uses `d3.scaleOrdinal` with `schemeSpectral` to assign distinct fills to each economic group.

MMunTatt Yap

91% match