Skip to main content
SimilarExport ZIP
100%

Covid

✓ Published0🌍 Public
Sshaiksajidali
Last edited Apr 18, 2024
Created on Apr 18, 2024

This example presents a world map visualization of COVID-19 case data, coloring each country based on its total reported cases. The map is rendered using React and D3, with a Natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`. Data is loaded from a remote CSV file using the Fetch API and parsed with `d3.csvParse`. A sequential color scale using `d3.scaleSequential` and `d3.interpolateReds` maps case counts to fill colors, while country boundaries are drawn as SVG paths with white strokes. The visualization dynamically updates when new data is fetched.

AI-generated description

A basic world map.

See also:

MIT Licensed

Similar vizzes

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

Covid-19 cases global data

This visualization displays global COVID-19 case data on an interactive world map using a natural Earth projection, with each country rendered as a green SVG path that turns red on hover. The map uses d3.geoPath with d3.geoNaturalEarth1 for geographic projection, and d3.zoom enables panning and zooming. Country boundaries come from the world-atlas TopoJSON dataset, while country names are joined via the corresponding TSV file. The sphere background is styled blue, and the visualization relies on D3 v5 and topojson.feature to process the geographic data.

Ggcappadaniel
84% match
Loading thumbnail…

Covid Project Viz 2

This example visualizes active, recovered, and total COVID-19 cases across fifteen countries using overlapping horizontal bars. The visualization renders as an SVG via React, with red, blue, and green rectangles representing total vaccinations, total cases, and total tests respectively. It loads data from a remote CSV file using `d3.csv` and scales the bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, while drawing gridlines and tick labels manually. The code leverages D3 v5 alongside React state and effects for data fetching.

SSushmaNamidi@my.unt.edu
84% 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
84% match
Loading thumbnail…

coviddata

This choropleth maps cumulative COVID-19 cases by country, shading each nation with a red intensity proportional to its total case count. The visualization loads global case data from a cleaned CSV and aggregates it with `d3.rollup` and `d3.sum`, then renders geographic boundaries using `d3.geoMercator`, `d3.geoPath`, and a TopoJSON world topology. Hovering over a country reveals a tooltip displaying its name and total cases, while the SVG map updates fill colors via `d3.interpolateReds`.

Sshaiksajidali
83% match
Loading thumbnail…

World Map with COVID-19 Data

This visualization presents a choropleth world map color-coded by total COVID-19 cases, with proportional pie charts overlaid on each country to break down cases versus deaths. Built with React and D3 v6, it uses `d3.geoMercator` for projection, `d3.geoPath` to render country boundaries from GeoJSON, and `d3.scaleQuantize` for the color gradient. Hovering a country reveals a tooltip with its name, while each pie chart is generated with `d3.arc` and `d3.pie` with radii scaled by `d3.scaleSqrt`. Data comes from the Our World in Data COVID-19 dataset.

Bbhargav83
83% match
Loading thumbnail…

Covid-19

The visualization maps COVID-19 case counts per country on a world map using SVG circles, with circle radius scaled proportionally to the number of cases on March 25, 2020. It displays data from the Humanitarian Data Exchange, sourced from a CSV file containing daily case numbers since January 22, 2020. The map uses D3 v5’s `geoMercator` projection, `geoPath` to draw country boundaries, and `scaleSqrt` for radius scaling. A range slider is present, though the displayed date label shows placeholder text.

CChris Mora
83% match
Loading thumbnail…

Circles on a map

This example displays total COVID-19 cases per country on a natural Earth projection map, using red circles scaled by case count and a legend for reference. It loads data from a GitHub CSV and world-atlas TopoJSON via `d3.csv` and `topojson.feature`, then projects centroids with `d3.geoCentroid` and `d3.geoNaturalEarth1`. The visualization is built with React and rendered as SVG, using `d3.scaleSqrt` for circle sizing, `d3.scaleOrdinal` with `schemeSpectral` for the color legend, and custom `sizeLegend`/`colorLegend` components.

VVaggelisKlt
82% match