Project_1

100%

✓ Published1🌍 Public

Last edited Apr 26, 2024

Created on Apr 24, 2024

A dropdown menu filters a COVID-19 dataset by location, displaying two time-series lines for total cases and total deaths over date. The chart uses d3.axisBottom, d3.axisLeft, and d3.line to render axes and paths, with a tooltip that appears on mouseover using d3.bisector. Interactivity is managed via a location selector and event listeners, drawing from cleaned_covid_data.csv and rendering in SVG.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Project_3

This dashboard visualizes COVID-19 metrics, displaying time-series line charts for new cases, new deaths, and population density. Users select multiple countries and specify a date range to compare trends across nations. The interface uses D3.js v6 to parse and filter the data from a CSV file, with `d3.scaleTime` and `d3.scaleLinear` mapping dates and values. The line charts are rendered as SVG paths, with axes and labels generated using `d3.axisBottom` and `d3.axisLeft`.

Jjyothirmai318@gmail.com

83% match

Loading thumbnail…

Project_2

A choropleth-free, year-wise grouped bar chart visualizes COVID-19 metrics—total cases, deaths per million, and population density—for a user-selected country. The interactive dropdown filters data loaded from `cleaned_covid_data.csv`, using `d3.csv` with time parsing. Rendering in SVG, the chart employs `d3.scaleBand` for grouped bars, `d3.axisBottom` and `d3.axisLeft` for axes, and tooltips that display values on hover. Population density, often dwarfing case/death counts, shares the y-axis, revealing scale discrepancies across years.

Jjyothirmai318@gmail.com

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

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

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

79% match

Loading thumbnail…

Covid_1

This example visualizes COVID-19 new cases from a cleaned CSV file, showing a cumulative sum line chart for a selected date. Buttons generated from all available dates let users switch between dates, and the chart updates to display the cumulative case total for that day. The visualization loads data via `d3.csv`, parses dates with `d3.timeParse`, and renders an SVG line using `d3.line` with `d3.scaleTime` and `d3.scaleLinear` axes. It demonstrates D3 v6 event handling, data filtering, and dynamic SVG updates.

LLakshmi Keerthi

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

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

78% match