Making Line Chart

Line Chart Covid19 Data

This line chart displays cumulative COVID-19 cases in the United States over time, using data from the New York Times GitHub repository. The visualization plots dates on the x-axis and case counts on the y-axis, with a thick red line connecting data points. It is built with D3.js v6, using `d3.csv` for data loading, `d3.timeParse` for date formatting, and `d3.scaleTime` and `d3.scaleLinear` for the axes. The line is rendered as an SVG path via `d3.line`, with axis labels and a title added as SVG text elements.

BBrian Gilmore

Data visualizations

This visualization uses D3 v5 to display cumulative COVID-19 vaccination totals over time for multiple countries, with each country represented by a distinct colored line. The line chart employs a time-based x-axis and a linear y-axis scaled to billions of vaccinations. The code uses `d3.csv`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, and `line` with `curveBasis` to render the SVG paths, while a custom color legend function shows the country categories. Data comes from a GitHub-hosted CSV of vaccination records.

GGerasimos Katsagannis

COVID-19 Data analytics Dashboard

This dashboard visualizes COVID-19 vaccination doses administered across the United States. A dropdown menu selects a state, displaying its daily vaccination bar chart. A map shows the latest daily doses for each state, with circles sized proportionally. Brushing the bottom bar chart updates the map to display data for the date at the end of the selected range. The visualization uses React with d3.forceSimulation for non-overlapping circle placement and d3.geoPath for map rendering, sourcing data from US Vaccination Data by State/Territory.

LLukwence

COVID line chart

This chart displays the total number of COVID-19 deaths in the United States over time as a black line on a yellow background. It uses React and D3 v5 scales, including `scaleTime` and `scaleLinear`, with a `line` generator to plot the data from the CSSE COVID-19 time series. A horizontal marker line at 900,000 deaths and a corresponding label are drawn using SVG elements within the chart’s margin-based layout.

CCatalina Vajiac

Covid - 19 line chart

This line chart visualizes the cumulative total of COVID-19 deaths over time, based on the Johns Hopkins Coronavirus dataset, with a vertical marker highlighting the most recent date and a horizontal marker at 10,000 deaths. The chart is rendered as an SVG using React and D3 v5, employing `scaleTime`, `scaleLinear`, and a D3 `line` generator to plot the data. The axes are drawn with D3's `axisBottom` and custom marker components.

SSai Phaltankar

Working with Time

This scatter plot visualizes COVID-19 data, showing the daily increase in positive cases (y-axis) against time (x-axis) as a series of circular marks. The visualization uses React to render SVG elements, with D3 v5 scales including `scaleTime` and `scaleLinear` to map data to coordinates. The code employs `d3.csv` for data loading from a GitHub-hosted CSV file, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each circle includes a native SVG `<title>` element for tooltips displaying formatted dates, and the chart is styled with the Poppins font.

Aanduskong

COVID-19 US Interactive

This interactive line chart displays the rolling seven-day average of COVID-19 cases in the United States over time. The visualization uses React and D3 v6, with the data sourced from the New York Times’ public COVID-19 repository. The chart plots dates on the x-axis and average cases on the y-axis, rendered as an SVG using custom `AxisBottom`, `AxisLeft`, and `Marks` components. Hovering over data points triggers a `Tooltip` showing the formatted value. The code leverages D3’s `scaleTime`, `scaleLinear`, and `csv` for data parsing and scaling.

DDasbach.EJ

Visualization Labels

A line chart displays cumulative global COVID-19 deaths over time, with a logarithmic y-axis and labeled axes for time and death counts. The chart uses a React component structure with D3 scales (`scaleTime`, `scaleLog`) and axis generators (`axisBottom`, `axisLeft`) to render SVG elements. Data comes from the Johns Hopkins Coronavirus dataset, processed via `d3.csv` and transformed to sum daily totals.

CCurran Kelleher