A2Q3

100%

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

Forked from Scatter Plot for Covid data with Menus

This interactive scatterplot visualizes COVID-19 metrics across countries by continent, plotting selectable attributes from the Covid World May Data CSV on x- and y-axes. Users can compare new cases, total cases, and death counts, with points colored by continent via a legend. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while SVG circles render the data and dropdown menus control axis selection.

AI-generated description

data in https://gist.githubusercontent.com/mNamratha25/245550385d9c9e60193f515ea700d54d/raw/453cd39ce1898f76df28c1af0175696ca8662591/covidWorldMayData.csv

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Scatter Plot for Covid data with Menus

A React-based scatter plot visualizes COVID-19 metrics from a May 2020 dataset, with dropdown menus controlling which two attributes (e.g., new cases, total deaths) map to the x- and y-axes. Points are colored by continent using a d3.scaleOrdinal color scale and a custom color legend. Built with d3.v5 for scales, axes, and SVG rendering, the chart uses React hooks (useState, useEffect) to manage state and load data via d3.csv, with interactive axes formatted using d3.format.

Mmanasishrotri

86% match

Loading thumbnail…

COVID-19

This interactive D3.js visualization displays COVID-19 metrics over time for selected countries, allowing viewers to toggle between confirmed cases, deaths, and recoveries via two dropdown menus. The line chart uses a time-based x-axis and a linear y-axis, with a single red, blue, or green line rendered per selection. Data is loaded from a CSV file, processed by nesting and grouping entries by date, and filtered by country. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smooth curves.

WW9183907

84% match

Loading thumbnail…

Scatter Plot for Covid data with Menus

This interactive bar chart displays total COVID-19 cases across ten countries for May 31st, using a vertical scale with country names and a horizontal linear scale for case counts. Built with React and D3 v5, the visualization renders SVG rectangles whose widths encode case numbers, with tooltips revealing exact values. Data comes from a CSV dataset loaded via D3's `csv` function, and the chart filters rows in `useData.js` to include only specified countries while sorting by location.

Mmanasishrotri

84% match

Loading thumbnail…

Covid cases with menu to select country

This interactive visualization shows COVID-19 case data for multiple countries, allowing users to compare trends through a dropdown menu to select a country. The SVG chart displays time-series lines with a color legend identifying each nation, using a linear y-scale for case counts and a time-based x-axis. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, while `d3.line` with `curveNatural` renders smoothed paths. Data comes from a CSV file loaded via `d3.csv` from the COVID MAY Dataset.

DDean Bozic

83% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes COVID-19 total cases over time for nine countries, with each country represented by a distinct color. Hovering over a legend item highlights that country’s data points while fading all others. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color mapping. The data comes from the JHU COVID-19 dataset loaded via `d3.csv`, rendered as SVG circles with hover-driven opacity changes through React state.

Aamanoakane

83% match

Loading thumbnail…

Untitled

A scatter plot tracks COVID-19 confirmed cases against deaths on logarithmic axes, with each point representing a country and its population and regional color encoding. Overlaid dark-red lines radiate from the origin, annotating fatality rates and country labels. A circular legend explains the point size, color, and opacity encoding. The React-based D3 visualization uses `d3.axisBottom`, `d3.min`, and `d3.ticks` for axes and grid, while custom functions render the legend, annotations, and rotated fatality labels, using county-level GeoJSON data from `county.json` as a backdrop.

Pphemmati

82% match

Loading thumbnail…

Test Scatter Plot

This scatter plot visualizes COVID-19 data, comparing the number of cases and deaths for four countries. The chart uses SVG circles to represent each country, with D3.js’s `scaleLinear` and `extent` functions to map the data to axes, and `axisLeft` and `axisBottom` to render the labeled axes. The code imports `csv` to load the data from `data.csv` and applies D3 v6 to build the visualization, with a clear title and axis labels.

CChristine Lanser

82% match