fork

100%

✓ Published0🌍 Public

Last edited May 5, 2021

Created on May 5, 2021

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.

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

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

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

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

86% match

Loading thumbnail…

Streamgraph of covid-19

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.

Ttim310579

83% match

Loading thumbnail…

Fork of Fork

This visualization uses D3.js to plot COVID-19 data from a WHO global dataset, showing total cases against total deaths for each country as individual circles. The scatter plot uses D3's `csv` loader and `scaleLinear` functions to map the data, with axes labeled "Total Cases" and "Total Deaths." Circles are rendered in steelblue, and the chart is drawn as an SVG in a React application. The code defines its own width, height, and margins, using D3's `axisBottom` and `axisLeft` to generate the axes.

66264kusuma@gmail.com

83% match

Loading thumbnail…

Fork of country

This interactive scatterplot visualizes COVID-19 metrics across countries, plotting attributes like new cases against total cases on logarithmic-scaled axes. Each circle represents a country, colored by continent, with a legend to the right. The visualization uses React with D3 v5 scales (`scaleLinear`, `scaleOrdinal`) to render SVG marks and axes. Data is loaded asynchronously from a CSV file using D3's `csv` method, with dropdown menus allowing users to switch between different case and death metrics for the x and y axes.

Rrushithareddyy

81% match

Loading thumbnail…

Fork of Fork of Covid-19

This visualization displays a global map of cumulative COVID-19 cases on March 25, 2020, with orange circles sized by the square-root of case counts. Static by default, it includes a date slider that currently does not update the visualization. It loads world country boundaries via TopoJSON and renders them with `d3.geoPath` using a Mercator projection, while plotting case data from a CSV file. The implementation uses `d3.csv`, `d3.scaleSqrt`, `d3.scaleOrdinal`, and `d3.timeParse` to process and encode the data.

Ddas888530

80% match