Skip to main content
SimilarExport ZIP
100%

Colorpleth Map

✓ Published1🌍 Public
Ggregosaure
Last edited Oct 30, 2020
Created on Oct 29, 2020

This example, titled Colorpleth Map, visualizes global economic data by coloring each country on a natural Earth projection using a spectral color scale. The map renders geographic boundaries with `d3.geoPath` and supports zoom interaction via `d3.zoom`. A legend, built with custom D3 code, displays the ordinal color scale’s domain. The data is loaded from the `world-atlas` TopoJSON and TSV files, with countries colored according to their `economy` property.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Colorpleth Map

This colorpleth map visualizes a global economic dataset, showing each country colored according to its value on a spectral scale. The map uses D3 v5 and the `geoNaturalEarth1` projection to render geographic boundaries, with an ordinal color scale and an interactive legend built through `scaleOrdinal` and custom SVG elements. The choropleth overlays data from the World Atlas TopoJSON and TSV files onto a natural Earth sphere, with zoom functionality and hover effects highlighting individual countries.

Nnouralkhoury
94% match
Loading thumbnail…

Colorpleth Map

This colorpleth map uses a natural Earth projection to display world countries shaded by their economy type, with a color legend showing the ordinal scale. The visualization supports zooming and panning through d3.zoom, and hovering over a country highlights it in red while revealing its name and economy classification in a tooltip. Data is loaded from the World Atlas TopoJSON and TSV files, with d3.geoPath generating the geographic paths and d3.scaleOrdinal mapping economy categories to a spectral color scheme. The map is rendered as SVG within a React application.

LLongYuu
94% match
Loading thumbnail…

Colorpleth Map with interactive filtering

This colorpleth map colors countries by their economy classification using an ordinal color scale. The visualization allows interactive filtering by clicking on legend items, which re-renders the map to highlight only the selected category. Built with React and D3 v5, it uses `d3.geoPath` with a natural Earth projection and draws countries as SVG paths from TopoJSON and TSV data loaded from the world-atlas package. Hovering a country turns it red, and the legend is rendered using the `colorLegend` component with custom click handling.

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

COLORPLETH

A choropleth map visualizes countries' economic classifications using an ordinal color scale. The map renders via the `d3.geoPath` and `d3.geoNaturalEarth1` projection, with country data sourced from the `world-atlas` package. A legend, built with a custom `colorLegend` function, lists each economy type. The map is zoomable and interactive, with hover effects changing fill color and a `title` element showing country names and values.

Ppaularl
89% 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…

Colorpleth Map with interactive filtering

This choropleth map colors countries by their economy type using an ordinal color scale. Clicking a legend entry filters the map to highlight countries in that category while dimming others, with the sphere outline fading when a filter is active. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `zoom` for panning and zooming, while data comes from a TopoJSON file with TSV metadata. The SVG rendering uses `scaleOrdinal` and `schemeSpectral` for color assignment.

LLongYuu
88% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes world economies by coloring each country according to its economic classification, using a spectral color scale created with `d3.scaleOrdinal` and `schemeSpectral`. The map renders as an SVG using `d3.geoPath` with the Natural Earth projection, displaying country data loaded from the world-atlas TopoJSON and TSV files. Interactive zooming via the `zoom` event lets users explore regions, while a custom `colorLegend` function shows the categorical color assignments.

RRenato Francia Castillo
88% match