Fork of Streamgraph of covid-19

100%

Fork of Streamgraph of covid-19

✓ Published0🌍 Public

Last edited Aug 13, 2021

Created on Aug 13, 2021

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

95% match

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

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

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

85% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays COVID-19 data for 20 countries as a horizontal bar chart, with each bar’s length encoding the reported case count. Built using React and D3 v5, it loads CSV data via `d3.csv` and renders SVG elements. Scales are created with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, while gridlines and tick labels are drawn manually using React components. The chart updates asynchronously as data loads, showing a “Loading...” message initially.

Bbindhureddy98

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 Stylized Line Chart

This fork of a stylized line chart displays COVID-19 biweekly case counts for the United States over time, using a smooth curved path rendered with d3.line and curveNatural. The chart is built with React functional components and d3.v5 scales, including scaleTime for the x-axis and scaleLinear for the y-axis, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV URL using d3.csv within a useData hook. The visualization uses SVG rendering with a Poppins font and muted teal styling for the line and axes, but omits data point circles.

Aamanoakane

83% match