Lab 7

100%

✓ Published0🌍 Public

Last edited Dec 7, 2023

Created on Dec 7, 2023

Forked from Lab 5

This visualization displays line charts of confirmed COVID-19 cases over time for multiple countries, with each country represented by a distinct colored line. The chart uses d3.csv to load data from a GitHub repository, d3.scaleTime and d3.scaleLinear for axis scaling, and d3.line to generate the paths. An ordinal color scale assigns unique colors to each country, while d3.axisBottom and d3.axisLeft render the time and case count axes in an SVG canvas.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lab 5

This interactive data visualization plots global COVID-19 confirmed cases as of May 4, 2020, using a geographic scatterplot. Each circle represents a province or country, positioned by longitude and latitude, with size and color encoding case counts via `d3.scaleSqrt` and `d3.scaleLinear`. Hovering a circle reveals a tooltip with country, coordinates, and case details. Built with D3 v7, the SVG chart reads CSV data from the CSSEGISandData GitHub repository and uses `d3.axisBottom` and `d3.axisLeft` for axes.

XXuân Vinh

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

83% match

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays the cumulative COVID-19 case counts for the top 10 countries from January to July 2020, using multiple animated line paths over a time-based x-axis and a linear y-axis. Each country’s line is color-coded via a d3.scaleOrdinal with a category scheme, and a legend is rendered with d3’s select/enter/merge pattern. The lines animate using `transition.attrTween`-like path drawing with `stroke-dasharray` and `stroke-dashoffset`, while axes are built with d3.axisBottom and d3.axisLeft. Data comes from a CSV file, loaded without visible d3.csv (assumed external).

Aashpradhan01123

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

81% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes the cumulative and daily COVID-19 case counts for ten countries up to July 28, with buttons to toggle between total and daily cases. Lines are drawn with an animated stroke-dashoffset transition using D3’s `transition()` method, and SVG paths are generated via `d3.line()`. The chart includes a color legend mapping countries to a categorical scheme, axis labels, and annotations marking notable events. Data is loaded from a CSV file, and the visualization is built with React and D3 v5, rendered as SVG with animation.

Aashpradhan01123

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

80% match

Loading thumbnail…

ICE7 Line Chart 11540905

This line chart displays the cumulative COVID-19 case counts across nine countries over time, with the x-axis representing total cases and the y-axis showing countries. The visualization uses D3 v5 with an SVG canvas, employing `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render the axis and path. Data is loaded from a remote CSV file via `csv()`, with values parsed and scaled before being drawn as a single red line path.

Nnagasai-gummadi

80% match

Loading thumbnail…

Multiple Colored Lines

This example displays global COVID-19 cumulative death counts over time as multiple colored lines, one for each country. The visualization uses a logarithmic y-axis to accommodate the wide range of values, with grid lines extending across the chart from both axes. Built with React and D3 v7, the chart renders SVG paths using `d3.line`, `scaleTime`, and `scaleLog`, while axes are generated with `axisBottom` and `axisLeft`. Data comes from a CSV file processed with `d3.csv` and `timeParse`. Each country is assigned a random RGB stroke color.

AAlex Stulov

80% match