Streamgraph of covid-19

100%

Streamgraph of covid-19

✓ Published6🌍 Public

Last edited Jan 13, 2021

Created on Sep 25, 2020

This streamgraph visualizes COVID-19 case counts across Africa, Asia, Europe, America, and Oceania from January to December 2020, using a silhouette offset to show fluctuations relative to the mean. The chart renders with d3.svg.area, d3.layout.stack, and d3.time.scale, using cardinal interpolation for smooth curves. Daily data from `data_daily.csv` drives the main view, with hover interactions highlighting each region via mouseover and mousemove events, while tooltips display the date and case number. The visualization also includes axes rendered with d3.svg.axis and color scales from a predefined range.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Fork of Streamgraph of covid-19

This streamgraph visualizes the spread of COVID-19 cases across five continents (Africa, Asia, Europe, America, Oceania) using an animated time series. The stacked area chart, rendered as SVG, uses a silhouette offset to highlight each region's contribution to the global total. Built with React and D3.js (v2), the visualization loads monthly aggregated case data from `data_monthly.csv`, with tooltips providing daily case counts on hover. The code leverages `d3.layout.stack`, `d3.svg.area`, and `d3.time.scale` for the temporal axis.

Iimsohandsome123

91% match

Loading thumbnail…

Fork of Streamgraph of covid-19

A streamgraph visualizes COVID-19 case counts across five continents from January to December 2020, using a silhouette offset layout. The SVG rendering, built with D3 v2 in a React framework, loads data from CSV files for daily and monthly aggregation. Hovering a layer fades others and displays a tooltip with the region, case value, and date. The implementation relies on D3's `layout.stack`, `svg.area`, and time scale APIs, with color encoding based on a sequential orange palette.

Iimsohandsome123

88% match

Loading thumbnail…

Fork of Streamgraph of covid-19

This fork of a COVID-19 streamgraph visualizes daily new cases across five continents using a silhouette-offset stacked area chart, drawing on data from `data_daily.csv` and `data_monthly.csv`. Built with D3 v2 in a React framework, the SVG animation renders layers with cardinal interpolation and a custom time-based x-axis. Hover interactions adjust layer opacity, display tooltips with region and date details, and apply stroke highlighting via the `mouseover` and `mousemove` events. Color schemes (`orange`, `pink`, `blue`) are selectable through a chart function, while month-level trends appear in a secondary D3 v4 area chart.

Nnomiaro

85% match

Loading thumbnail…

Fork of Streamgraph of covid-19

This fork of a COVID-19 streamgraph visualizes daily case numbers across five continents using an animated silhouette-style stacked area chart. Built with React and D3 v2, it renders SVG paths that change color palettes and update via tooltip interactions. The chart uses `d3.layout.stack` with a silhouette offset, `d3.svg.area` with cardinal interpolation, and `d3.time.scale` for the time axis, pulling data from CSV files for daily, monthly, or original case counts.

XXianbin Gu (Bing)

85% match

Loading thumbnail…

fork

A streamgraph visualizes COVID-19 case counts across Africa, Asia, Europe, America, and Oceania over time. D3 stacked areas with silhouette offset show daily and monthly data, using an ordinal color scale for regions. The code implements tooltips with mouseover events and uses `d3.time.scale` for the x-axis. An alternative view uses `d3.stack` with `stackOffsetSilhouette`, rendering SVG paths with `d3.area` and interactive highlighting to emphasize regional trends.

Eethanjones-git

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

81% match

Loading thumbnail…

Covid-19

This visualization displays the global spread of Covid-19 cases from January 22 to March 30, 2020, using a world map. It plots reported cases as orange circles, with each circle’s radius scaled by the square-root of the case count for a selected date. The map is rendered as an SVG using D3 v5’s `geoPath` and `geoMercator` projections, while case data is loaded from a local CSV file. A slider input allows interactive date selection, though the displayed date label is currently static. Data is sourced from Humanitarian Data Exchange.

Cczy68

80% match

Loading thumbnail…

Covid-19 Time Series(I Forked)

This example shows the global spread of confirmed COVID-19 cases across countries from January 22, 2020, to the present day. A date slider lets viewers scrub through time, updating the size of orange circles on a world map to reflect the reported case count per location, with hover tooltips showing country-level details. The visualization uses D3.js for map rendering with `d3.geoPath` and `geoMercator`, `d3.scaleSqrt` for circle sizing, and `d3-zoom` for interaction. Data comes from Johns Hopkins University, loaded via CSV, with countries drawn from TopoJSON and animated transitions between dates.

AAdrianTNare

80% match