Skip to main content
SimilarExport ZIP
100%

Covid cases with menu to select country

✓ Published1🌍 Public
Mmanasishrotri
Last edited Oct 7, 2020
Created on Oct 7, 2020

This interactive visualization displays COVID-19 case data for selected countries, allowing users to filter by country and case metric (new, total, smoothed cases/deaths). Built with React and D3 v5, it renders a line chart using SVG paths with the `d3.line` and `curveNatural` functions. Menus are implemented via `react-dropdown`. The data comes from the COVID MAY Dataset and updates the chart based on user selections, with axes generated by custom components.

AI-generated description

This visualization helps to see country wise covid cases data with filter of new cases, total cases, new deaths, total deaths, new cases smoothed, total cases smoothed Covid Data is taken from The COVID MAY Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Covid cases with menu to select country

A multi-line chart shows COVID-19 new cases over time for ten countries, revealed through an interactive menu that allows users to select a country of interest. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, while the `d3.line` and `curveNatural` functions draw smooth paths for each nation’s data. The SVG rendering includes custom axis components and a color legend, with data sourced from the COVID MAY Dataset on GitHub.

Mmanasishrotri
94% 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
93% match
Loading thumbnail…

Covid cases with menu to select country

This visualization displays COVID-19 case trends for ten countries using a multi-line chart, with options to filter by metrics like new cases, total cases, and deaths. The code uses React for state management and D3 v5 for scales, axes, and path generation. Data comes from the COVID May Dataset, loaded via D3’s CSV parser. A color legend doubles as a hover filter, dimming non-selected lines, while a dropdown menu allows metric selection. SVG rendering and D3’s curveNatural interpolation produce smooth temporal curves.

DDean Bozic
93% match
Loading thumbnail…

Covid cases with menu to select country

This interactive visualization displays daily COVID-19 case counts for ten countries, with each country represented as a distinct colored line. The chart shows smoothed new cases over time, with a sidebar color legend identifying each country. The visualization uses React for component-based rendering and d3 v5 for data mapping, scales, and line generation with the curveNatural interpolation. Data comes from the COVID MAY Dataset, loaded via d3.csv, and is rendered as SVG paths with axis components built from d3 scale ticks.

Qqcuong96
90% 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
87% match
Loading thumbnail…

Covid cases with interaction with country

A line chart displays new daily COVID-19 cases for ten countries from a CSV dataset, with each country’s trend as a colored curve. Hovering over a country name in the legend highlights that specific line and fades the others, implemented via React state and `onMouseEnter` handlers. The visualization uses D3 v5 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`), the `d3.line` generator with `curveNatural`, and custom React components for axes and the interactive legend, rendering to SVG.

Mmanasishrotri
86% 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
84% match
Loading thumbnail…

COVID-19

This interactive dashboard visualizes the daily progression of COVID-19 cases, deaths, and recoveries for a selected country in 2020. Using dropdown menus built with a custom reusable `dropdownMenu` function, viewers can switch between the three status metrics and any available country to update a line chart rendered as SVG paths. The code loads data from a CSV file containing daily province-level records, aggregates entries by country and date using `d3.nest` and `reduce`, and draws the time series with `d3.line`, `d3.scaleTime`, and `d3.scaleLinear`.

FFadziMandondo
83% match