Skip to main content
SimilarExport ZIP
100%

Corona Virus Status

✓ Published0🌍 Public
0007ebey
Last edited Apr 28, 2020
Created on Apr 12, 2020

This visualization uses a stacked area chart to display the daily confirmed, recovered, and death case counts from the COVID-19 pandemic in India over a specific time period. Built with D3 v5 and React, the chart’s SVG rendering maps dates to the x-axis and case counts to the y-axis. The code processes `covid.json` data and uses D3’s `stack`, `area`, `curveBasis`, and `areaLabel` APIs to construct and label the stacked areas, with a color scale from `d3.schemeDark2`.

AI-generated description

A bare minimum HTML page.

See also React Starter.

This data was taken from The world bank data website

MIT Licensed

Similar vizzes

Loading thumbnail…

Corona Virus Status

This visualization displays the progression of confirmed, recovered, and death cases from COVID-19 in India over time, using a stacked area chart built with React and D3 v5. The data is fetched live from the COVID19 API for each status category and processed into a stacked layout using `d3.stack()`. The chart uses `scaleTime` and `scaleLinear` for axes, with SVG rendering and zoom functionality, though the primary visualization focuses on the temporal trends of case counts.

0007ebey
96% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays COVID-19 case counts across Indian states and union territories, using a horizontal layout where each bar’s length represents confirmed cases. The visualization uses React for component structure and d3.scaleLinear for mapping data values to pixel positions, with d3.axisLeft and d3.axisBottom rendering the axes. The bars are styled with a teal fill, and the chart includes an axis label for the case count. Data comes from a CSV file with columns for state, cured, deaths, and confirmed cases, which is parsed and sorted before being passed to the React rendering logic.

Ssaikrupa82
81% match
Loading thumbnail…

CORONA Live chart React + d3 axes

This chart shows the global cumulative number of COVID-19 deaths over time, with the line rising sharply as the pandemic progresses. The visualization uses React components for structure and D3 v5 scales, axes, and line generator for the SVG rendering. A horizontal marker line highlights the one-million-death threshold, while a vertical marker indicates the latest date. Data comes from a CSSE time-series CSV, which is fetched and aggregated using d3.csv and d3.timeParse. Custom XAxis and marker components leverage d3.axisBottom and React refs for drawing gridlines.

KKolezhannochka
79% match
Loading thumbnail…

COVID-19

This interactive visualization shows daily COVID-19 cases, deaths, and recoveries for a selected country. Users can choose a country and a metric from dropdown menus, with the line chart updating to display the chosen data. The line color corresponds to the selected status: blue for confirmed cases, green for recovered, and red for deaths. Built with D3 v5, the SVG chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with data from the Novel Corona Virus 2019 Kaggle dataset.

FFadziMandondo
79% match
Loading thumbnail…

Latest Corona Virus Map

This map visualizes global data with a focus on India, using a natural Earth projection rendered as SVG paths. It loads world country boundaries from the World Atlas TopoJSON and India’s state boundaries from a separate TopoJSON source, while also fetching live COVID-19 confirmed case data from the covid19api.com dayone endpoint. The visualization supports zooming and panning via d3.zoom, with hover effects that highlight countries. However, the COVID-19 data is fetched but not yet integrated into the map’s visual encoding, leaving the choropleth coloring unimplemented.

0007ebey
79% match
Loading thumbnail…

Untitled

This visualization shows the progression of confirmed COVID-19 cases, deaths, and recoveries across multiple countries from January to March 2020. It uses a multi-line chart with time on the x-axis and case counts on the y-axis. The code loads data from three CSV files and uses d3.csv, d3.scaleLinear, d3.line, d3.axisLeft, d3.axisBottom, and d3.curveBasis to render the chart. A timer updates the displayed date range, animating the lines as new data points appear over time.

RRodrigo Vallejos
79% match
Loading thumbnail…

COVID-19

This D3.js visualization shows the progression of COVID-19 cases, deaths, and recoveries over time for a selected country. Users choose a status metric and country via dropdown menus, and the chart displays a smooth line chart of that metric against observation dates. The code uses D3 v5 methods like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file and aggregated by country and day using `nest` and a custom `groupByDay` function.

WW9183907
79% match
Loading thumbnail…

Coronavirus Impact Area Chart by Dimanjan

This visualization presents an animated area chart tracking confirmed cases, deaths, and recoveries from the COVID-19 pandemic. The chart reads the data from a CSV file, parsing dates and values, then animates the data points appearing sequentially. It uses d3.v4 to create SVG paths with linear gradients, and it updates the x and y axes with transitions. An "Update" button can re-trigger the animation, and the chart uses the `d3.area` method to draw the stacked regions.

AArriannePandaraoan
78% match