Map Covid

100%

✓ Published0🌍 Public

Last edited Apr 23, 2024

Created on Apr 23, 2024

This map visualization displays total COVID-19 deaths by country on a world map using a sequential blue color scale. The code employs d3.geoMercator, d3.geoPath, and topojson to render country boundaries from the world-110m.json dataset, while loading COVID-19 data from a local array. A legend with a linear gradient and d3.axisBottom communicates the quantitative range. The SVG is generated dynamically via d3.select and append methods, with missing country data represented in gray fallback color.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays the global distribution of COVID-19 deaths by country, using a Mercator-projected world map with a threshold color scale to differentiate mortality levels. A tooltip reveals the country name and total death count on hover. The map is rendered with D3 v4, using `d3.geoPath` and `d3.geoMercator` for geographic projection, while loading country geometries from a TopoJSON file and death data from a TSV file. Zooming is enabled via `d3.zoom`.

MMizanur55

87% match

Loading thumbnail…

covid -19

This choropleth map visualizes COVID-19 deaths per million across 20 countries, with a red sequential color scale ranging from light to dark based on mortality rates. The map uses a Robinson projection via `d3.geoRobinson` and renders country boundaries as SVG paths through `d3.geoPath`, with a tooltip revealing the country name and death rate on hover. Geographic data comes from the world-atlas TopoJSON file, joined to the CSV dataset by ISO_A3 codes, and a linear gradient legend with an axis labels the color scale.

Ccharchana0527@gmail.com

87% match

Loading thumbnail…

Fork of Covid-19

This map visualizes confirmed COVID-19 cases per country as of September 25, 2020, using a sequential color scale applied to a natural Earth projection. It loads country boundaries from the `world-atlas` TopoJSON and case data from a TSV file, then renders each country as an SVG path with a fill color derived from the case count. Hovering highlights a country in red and reveals a tooltip with total cases, deaths, and cases from the last 14 days. The implementation uses d3's `geoPath`, `scaleOrdinal`, and `schemeSpectral`, with custom zoom and interactive color legend controls.

SSaipramod Yerra

85% match

Loading thumbnail…

Let's make a map

This interactive map visualizes COVID-19 case and death counts by country, with bubble sizes scaled to total cases and colors indicating severity. Users can zoom and pan using d3.zoom, while hovering over bubbles reveals detailed statistics via tooltips. The visualization combines a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, with geographic data loaded from the world-atlas TopoJSON and COVID-19 statistics from an external dataset. Countries are rendered as SVG paths with hover highlighting, and the animated bubble layer uses d3.scale.sqrt and linear color scales for proportional encoding.

Ssureshreddypr

84% match

Loading thumbnail…

Fork of Covid-19 confirmed cases

This visualization displays global COVID-19 confirmed cases and deaths on a world map, using a spectral color scale to represent case counts per country. Built with React and rendered as SVG, it employs d3.geoNaturalEarth1 and d3.geoPath to project geographic boundaries from world-atlas TopoJSON, while loading case data from a TSV file. A custom color legend with circles and text labels clarifies the scale, and hovering over a country highlights it in red and shows a tooltip with its name, case count, and death toll. The map supports zooming through d3.zoom, and the color scale uses d3.scaleOrdinal with d3.schemeSpectral.

Bbhargav83

84% match

Loading thumbnail…

Fork of Covid-19

This interactive SVG map visualizes the global distribution of confirmed COVID-19 cases, total deaths, and recent 14-day case counts as of September 25, 2020. It displays countries colored by a sequential spectral scale, with hover tooltips revealing detailed statistics. The visualization uses D3.js v5, leveraging `geoPath` and `geoNaturalEarth1` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and custom zoom and color legend components. Data is loaded from TSV and TopoJSON sources, processed using `topojson` features.

SSaipramod Yerra

84% match

Loading thumbnail…

coronavirus countries Map

This choropleth map visualizes COVID-19 statistics by country, allowing users to switch between confirmed cases, deaths, and recoveries via a dropdown menu. Country boundaries are rendered with `d3.geoPath` using Natural Earth projection, while circle symbols sized by `d3.scaleSqrt` represent the selected metric at each country’s centroid. Data is loaded from a CSV file and merged with TopoJSON world geometry, with color and size legends providing context. Interactive zooming is enabled through `d3.zoom`.

Pprincit

84% match

Loading thumbnail…

Global Pandemic Overview

This visualization presents a global pandemic overview by coloring countries on a natural Earth projection map according to their total COVID-19 deaths. An interactive tooltip displays detailed case statistics for each country on hover, while a color gradient legend indicates the severity scale. Built with D3.js, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for map rendering, `d3.scaleSequential` for the color encoding, and fetches geographic and pandemic data from external JSON and CSV sources.

Wwkj0713@gmail.com

83% match