Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Webpage

✓ Published1🌍 Public
DDivyaKota2@my.unt.edu
Last edited Apr 26, 2024
Created on Apr 26, 2024
Forked from Fork of Webpage

This visualization displays COVID-19 total cases and deaths over time using two line-and-marker traces in blue and red. It loads data from a local CSV file containing global pandemic statistics, parses it into columns, and feeds the date, total_cases, and total_deaths fields into react-plotly.js. The Plot component renders a single chart titled “COVID-19 Cases and Deaths Over Time.” The implementation uses React’s useState and useEffect hooks to fetch and parse the CSV data asynchronously.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

https://vizhub.com/drbagwell/cfc6aaba08b54a598475e867bcc8fa21

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Webpage

This interactive visualization tracks COVID-19 cases and deaths over time using a dual-line chart. It displays total cases in blue and total deaths in red, with both lines plotted against the date axis. The React app loads data from a CSV file containing pandemic statistics and uses the react-plotly.js library to render the scatter plots with lines and markers. The chart provides a clear temporal comparison between infection rates and mortality figures throughout the outbreak period.

DDivyaKota2@my.unt.edu
95% match
Loading thumbnail…

Fork of Webpage

This scatter plot compares total COVID-19 cases against total deaths across countries, using data from a CSV file that includes population and pandemic statistics. The visualization uses Plotly's scatter trace with blue markers, plotting each data point based on parsed numeric values from the `total_cases` and `total_deaths` columns. The code fetches the `covid_population.csv` file, parses it with `react-papaparse`, and renders the chart into a container using `Plotly.newPlot`, with axes labeled "Total Cases" and "Total Deaths."

DDivyaKota2@my.unt.edu
91% match
Loading thumbnail…

Fork of Fork of React Starter

This example visualizes the total COVID-19 cases over time as a bar chart, with dates on the x-axis and case counts on the y-axis. It loads a CSV file containing pandemic statistics and renders the data using the Recharts library within a React application. The chart includes grid lines, axes, a tooltip, and a legend, all wrapped in a responsive container. The data is fetched and parsed client-side, with the bar series colored purple.

DDivyaKota2@my.unt.edu
85% match
Loading thumbnail…

Fork of Fork

This visualization uses D3.js to plot COVID-19 data from a WHO global dataset, showing total cases against total deaths for each country as individual circles. The scatter plot uses D3's `csv` loader and `scaleLinear` functions to map the data, with axes labeled "Total Cases" and "Total Deaths." Circles are rendered in steelblue, and the chart is drawn as an SVG in a React application. The code defines its own width, height, and margins, using D3's `axisBottom` and `axisLeft` to generate the axes.

66264kusuma@gmail.com
85% match
Loading thumbnail…

Fork of Fork of React Starter

This bar chart visualization tracks total COVID-19 cases over time, with each bar representing the cumulative case count for a specific date. The data is loaded from a local CSV file called `covid_population.csv` and parsed manually using JavaScript string operations before being passed to the charting library. Built with the React framework and the Recharts library, the chart uses a `ResponsiveContainer` to adapt to its parent element's dimensions, while `CartesianGrid`, `XAxis`, `YAxis`, `Tooltip`, `Legend`, and `Bar` components render the axes, gridlines, interactive tooltip, and purple bars. The visualization is populated asynchronously through a `fetch` call within a `useEffect` hook, ensuring the chart updates once the CSV data is fully parsed.

DDivyaKota2@my.unt.edu
85% match
Loading thumbnail…

Fork of Fork of React Starter

This example shows the progression of total COVID-19 cases over time using a bar chart. The visualization loads a merged CSV file containing COVID-19 population data and displays it as a series of vertical bars, one for each date entry. The code uses the React framework with the Recharts library, specifically employing its `BarChart`, `Bar`, `XAxis`, `YAxis`, `CartesianGrid`, `Tooltip`, and `Legend` components within a `ResponsiveContainer`. The data is fetched via the native `fetch` API and parsed manually from comma-separated rows into JavaScript objects for the chart.

DDivyaKota2@my.unt.edu
84% match
Loading thumbnail…

Fork of Fork of React Starter

This example shows the progression of total COVID-19 cases over time using a bar chart. The visualization loads a merged CSV file containing COVID-19 population data and displays it as a series of vertical bars, one for each date entry. The code uses the React framework with the Recharts library, specifically employing its `BarChart`, `Bar`, `XAxis`, `YAxis`, `CartesianGrid`, `Tooltip`, and `Legend` components within a `ResponsiveContainer`. The data is fetched via the native `fetch` API and parsed manually from comma-separated rows into JavaScript objects for the chart.

DDivyaKota2@my.unt.edu
84% match
Loading thumbnail…

Fork of React Starter

This example visualizes total COVID-19 cases over time using a bar chart, with each bar representing a date from the merged COVID and population CSV data. The React app loads merged_covid_population.csv via fetch, parses the rows into objects, and renders the chart with Recharts' BarChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, and ResponsiveContainer components. The y-axis shows total cases while the x-axis displays dates, and the single purple bar series uses the total_cases field. Data parsing is done manually through string splitting rather than D3's CSV utilities, though d3.v7 is included in the HTML.

DDivyaKota2@my.unt.edu
83% match