Skip to main content
SimilarExport ZIP
100%

Fork of Covid-19

✓ Published0🌍 Public
SSaipramod Yerra
Last edited Apr 26, 2024
Created on Apr 26, 2024

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
95% 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
92% match
Loading thumbnail…

Fork of Fork of COVID-19 Map (Positive Cases)

This map visualizes the relative number of COVID-19 cases per country, using a logarithmic color scale based on daily positive cases over the past seven days. Countries are rendered as SVG paths via `d3.geoPath`, with data loaded from TopoJSON and TSV files using `d3.json` and `d3.tsv`. It includes a Voronoi overlay constructed with `d3.Delaunay` for hover interactions, and a legend generated through a custom `colorLegend` function. The visualization is built with React and D3 v6, supporting zoom and pan.

Kkaruppuraja
89% match
Loading thumbnail…

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

This visualization presents COVID-19 confirmed cases by date using a bar chart rendered with SVG, alongside a world map colored by total cases using a spectral color scale. The bar chart uses d3.scaleLinear and d3.scaleBand to map cases and dates, with axis labels styled with IBM Plex fonts and interactive tooltips via d3.tip. The map employs d3.geoPath with a geoNaturalEarth1 projection, and d3.scaleOrdinal with schemeSpectral to encode country-level data. Both views load from external CSV and TopoJSON sources, with the map supporting zoom interaction.

AAaronBhasker
88% match
Loading thumbnail…

Fork of Covid19 world map

This map visualizes cumulative COVID-19 cases per country as of June 6, 2021, using circle size to encode case counts over a natural Earth projection. Missing data appears in red, while countries with data are gray. The visualization loads spatial boundaries from TopoJSON and joins them with case counts from a CSV using `d3.csv` and `d3.json`. It employs `d3.geoPath` for map rendering, `d3.geoNaturalEarth1` for projection, and `d3.scaleSqrt` for proportional symbol sizing, with zoom via `d3.zoom` and interactive tooltips.

Aaruna-rajeswari
88% match
Loading thumbnail…

Fork of Covid-19

A world map uses semitransparent orange circles to show cumulative COVID-19 case counts by country on March 25, 2020. The visualization renders country boundaries as SVG paths via `d3.geoPath` with a `geoMercator` projection, and scales circle radii with `d3.scaleSqrt`. Data comes from a CSV of Johns Hopkins case counts, loaded with `d3.csv`. A range slider is present, but it does not currently change the displayed date.

Ddas888530
86% match
Loading thumbnail…

Fork of Fork of Covid-19

This visualization displays a global map of cumulative COVID-19 cases on March 25, 2020, with orange circles sized by the square-root of case counts. Static by default, it includes a date slider that currently does not update the visualization. It loads world country boundaries via TopoJSON and renders them with `d3.geoPath` using a Mercator projection, while plotting case data from a CSV file. The implementation uses `d3.csv`, `d3.scaleSqrt`, `d3.scaleOrdinal`, and `d3.timeParse` to process and encode the data.

Ddas888530
86% match
Loading thumbnail…

Fork of HTML Starter

This interactive map displays COVID-19 total cases by country, colored on a red sequential scale. Built with D3 v7 and the `d3.geoOrthographic` projection, the map uses `d3.geoPath` to render country boundaries from GeoJSON data. Hovering highlights a country in orange and reveals a tooltip. A legend shows the color scale. The globe can be dragged to rotate, and a timer automatically spins it, recalculating the projection each frame. Case data loads from a linked CSV file.

MMuhammadsaad.khan@vuw.ac.nz
85% match