Fork of Webpage

100%

Fork of Webpage

✓ Published1🌍 Public

DDivyaKota2@my.unt.edu

Last edited Apr 26, 2024

Created on Apr 26, 2024

Forked from 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."

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 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.

DDivyaKota2@my.unt.edu

91% match

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

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

83% match

Loading thumbnail…

Fork of country

This interactive scatterplot visualizes COVID-19 metrics across countries, plotting attributes like new cases against total cases on logarithmic-scaled axes. Each circle represents a country, colored by continent, with a legend to the right. The visualization uses React with D3 v5 scales (`scaleLinear`, `scaleOrdinal`) to render SVG marks and axes. Data is loaded asynchronously from a CSV file using D3's `csv` method, with dropdown menus allowing users to switch between different case and death metrics for the x and y axes.

Rrushithareddyy

81% match

Loading thumbnail…

Fork of Fork of 3D Scatter Plot

This 3D scatter plot visualizes COVID-19 data from a CSV file, plotting positive cases, recovered cases, and negative cases for one trace, with a second trace comparing positive and recovered cases against currently hospitalized patients. The visualization uses Plotly's `scatter3d` chart type within a `Plotly.newPlot` call, leveraging the D3.js library's `d3.csv` function to parse and populate the data from the `covid.csv` file. Each marker is styled with a distinct color and size, with the layout margins set to zero for a clean presentation.

Bbugfree55

81% match

Loading thumbnail…

data visulalization Scatter Plot

This scatter plot visualizes COVID-19 cases by country, plotting total deaths against total cases. Each circle represents a country, with color encoding the continent, and the plot includes axes, labels, and a legend. The code loads CSV data from a GitHub repository, uses D3 v7 scales and SVG rendering to position the circles, and employs `d3.axisBottom` and `d3.axisLeft` to generate the axes.

Bbudalavijay2001@gmail.com

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

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

78% match