Covid19 - with React

100%

Covid19 - with React

✓ Published0🌍 Public

Last edited Dec 6, 2020

Created on Dec 6, 2020

This visualization presents the cumulative confirmed COVID-19 cases for each Australian state on a map. It uses a conic conformal projection (via `d3.geoConicConformal` and `d3.geoPath`) to render the geographic boundaries, and it encodes the number of cases with proportional circles (using `d3.scaleSqrt`) placed at each state's centroid. The application is built with React, loading the GeoJSON map data and CSV time-series data via D3’s `d3.json` and `d3.csv` loaders.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Covid 19

This visualization presents COVID-19 case data across Australian states, combining a geographic map with a line graph. The map displays cumulative confirmed cases per state using scaled circles positioned via `d3.geoConicConformal` and `d3.geoPath`, while the graph plots daily confirmed cases for Victoria using `d3.scaleTime` and `d3.line`. Data is loaded from local CSV and GeoJSON files, with the map rendering SVG paths and circles styled by hover effects.

Ddtd-amiele

88% match

Loading thumbnail…

Covid

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.

Sshaiksajidali

80% match

Loading thumbnail…

Covid

This visualization plots cumulative confirmed COVID-19 cases from a Johns Hopkins time-series dataset as orange circles on a world map. Each circle’s radius encodes the case count for March 25, 2020, using a square-root scale. The map is drawn with `d3.geoMercator` projections and TopoJSON country features, while the data is loaded via `d3.csv` and rendered as SVG circles via `d3.scaleSqrt`.

RRenan Barbosa

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

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

78% match

Loading thumbnail…

Covid Data 2020 Visualization

This interactive dashboard explores COVID-19 data through four coordinated panels: a line chart of yearly trends, a choropleth map of state averages, a bar chart of top states, and a multi-line chart of state patterns. Built with React and D3 v5, it uses `scaleOrdinal` for color mapping, `geoAlbersUsa` and `geoPath` for the map, and `scaleBand` for bars. Hovering highlights selections across panels, with data loaded from a CSV file.

Sshehrbano1248

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

78% match

Loading thumbnail…

Fork of Circles on a map

This visualization displays total COVID-19 cases by country as of August 30, 2020, using red circles sized with d3.scaleSqrt and positioned via d3.geoCentroid and d3.geoNaturalEarth1 projection. The map employs d3.geoPath for country outlines and includes interactive zoom via d3.zoom. A color legend and size legend are rendered as SVG components using React, with data loaded from a CSV time series and TopoJSON world atlas. Hovering reveals country names and case counts through SVG title elements.

JJean David

78% match