Colorpleth Map

100%

Colorpleth Map

✓ Published0🌍 Public

Last edited Nov 29, 2020

Created on Nov 28, 2020

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Colorpleth Map

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.

Ggregosaure

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

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

89% match

Loading thumbnail…

Colorpleth Map with interactive filtering

This interactive choropleth map visualizes economic data across countries using a color scale, with a legend allowing users to filter countries by clicking on specific values. The map renders in SVG using d3.geoOrthographic projection and d3.geoPath, while the accompanying color legend enables selection that highlights matching countries and dims others. Data comes from a CSV file merged with world atlas TopoJSON via d3.csv and topojson.feature. Users can also zoom and pan the map using d3.zoom.

Nnouralkhoury

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

88% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy classification using an ordinal color scale with the spectral scheme. The visualization supports zooming and panning through D3’s zoom behavior, while hover effects highlight individual countries. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Data is loaded from the World Atlas TopoJSON and TSV files, processed via topojson.feature, and joined by country ID.

Nnouralkhoury

88% match

Loading thumbnail…

Choropleth Map Interactive

This interactive choropleth map displays countries colored by their economy category, using a spectral color scale and a natural Earth projection. Users can click legend swatches to highlight matching regions while dimming others. The visualization is built with D3 v5 modules including `geoNaturalEarth1`, `geoPath`, and `zoom`, rendering vector shapes as SVG. It loads geographic data from the World Atlas TopoJSON and TSV files, processing them via `topojson.feature`. A dedicated color legend component supports selection filtering, while CSS hover effects emphasize individual countries.

MMunTatt Yap

88% match