Skip to main content
SimilarExport ZIP
100%

Choropleth map

✓ Published0🌍 Public
VVaggelisKlt
Last edited Sep 27, 2020
Created on Sep 27, 2020

This choropleth map visualizes COVID-19 cases, deaths, and recent 14-day case counts by country, using color to encode case numbers and hover tooltips to reveal detailed statistics. The map uses `d3.geoNaturalEarth1` projection with `d3.geoPath` to render world geography, while `d3.scaleOrdinal` with `schemeSpectral` assigns colors to case values. Data is loaded from a TSV file and TopoJSON world atlas, processed with `topojson.feature`, and rendered as SVG paths. A custom color legend and `d3.zoom` are also implemented.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map

This choropleth map visualizes total COVID-19 cases by country, using a spectral color scale to encode case counts on a natural Earth projection. The map supports pan and zoom via d3.zoom, with tooltips showing country names and case values. It renders with d3.geoPath and TopoJSON world data, while a custom color legend built with D3 scales displays the ordinal color mapping. The data is loaded from a TSV file joined to country geometries.

VVaggelisKlt
94% match
Loading thumbnail…

Choropleth map

A choropleth map of COVID-19 cases by country, with each nation colored on a spectral scale via `d3.scaleOrdinal` and `d3.schemeSpectral`. Hovering highlights a country in red, and a click-drag zoom uses `d3.zoom` with a Natural Earth projection (`d3.geoNaturalEarth1`) and `d3.geoPath`. Data loads from a CSV and TopoJSON using `d3.csv`, `d3.json`, and `topojson.feature`; a custom color legend renders SVG circles and text.

VVaggelisKlt
94% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the global distribution of COVID-19 cases using a red and green color scheme, with each country’s fill color indicating the presence of cases on a specific date. The map is rendered with SVG using D3’s `geoNaturalEarth1` projection and `geoPath` for geographic outlines, while `zoom` enables interactive panning. Data is loaded from a CSV file and merged with TopoJSON world geometry via `loadAndProcessData`, and a custom `colorLegend` component displays the categorical scale.

NNodirbek Parpibaev
92% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global COVID-19 cumulative case counts by country, with each nation shaded according to its reported total. The map uses a natural Earth projection and is rendered as SVG, with a zoom interaction allowing users to inspect regions in detail. Data comes from a CSV file joined with world country boundaries from the World Atlas TopoJSON, while colors are assigned via d3.scaleOrdinal with a spectral scheme. Hovering reveals the country name and case count through an SVG title element.

Ggcappadaniel
89% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes COVID-19 confirmed cases across countries, with color encoding based on economic classification. Users can click entries in the color legend to highlight matching countries on the map, while unselected countries fade in opacity. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering country boundaries, and d3.zoom for pan and zoom interactions. Both the map and legend are built as reusable functions, with data loaded from CSV files containing country metadata and daily case counts.

Iinroadings
89% match
Loading thumbnail…

Covid-19 global cases

This choropleth map visualizes global COVID-19 cases by country, using a color scale based on economic grouping. The map renders with D3’s `geoNaturalEarth1` projection and `geoPath`, allowing zoom interactions via `d3.zoom`. A clickable ordinal color legend filters highlighted countries, with dimming for non-selected regions. Data is loaded from a CSV and TopoJSON using `d3.csv` and `d3.json`. The visualization uses SVG elements and applies hover effects through CSS.

Ggcappadaniel
88% match
Loading thumbnail…

CVOID-19 Data

This interactive choropleth map displays cumulative and current COVID-19 case counts by country, with a toggle between the two metrics and a color-coded legend showing case severity bins. Built with D3.js, it uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering country boundaries, and `topojson.feature` for geographic data processing. The map pulls CSV data from a GitHub gist and GeoJSON from andybarefoot’s map data, coloring countries via `d3.scaleOrdinal` with a red sequential scheme. Users click buttons to switch between cumulative and existing (cases minus deaths) patient counts.

Zzhangfa
87% match
Loading thumbnail…

Covid-19 confirmed cases (Date 25/09/20)

This visualization displays a choropleth map of COVID-19 confirmed cases as of September 25, 2020, using an ordinal color scale to represent case counts per country. The map shows geographic distribution of cases, with a hover tooltip revealing country name, total cases, deaths, and cases in the last 14 days. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map projection, `topojson` for world geometry, and `d3.tsv` to load COVID-19 case data. The visualization includes a color legend and zoom functionality via `d3.zoom`.

VVaggelisKlt
87% match