Covid cases with menu to select country

100%

Covid cases with menu to select country

✓ Published0🌍 Public

Last edited Oct 27, 2020

Created on Oct 26, 2020

Forked from Covid cases with interaction with 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.

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

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

95% match

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

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

95% match

Loading thumbnail…

Covid cases with menu to select country

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.

Mmanasishrotri

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

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

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

84% match