Skip to main content
SimilarExport ZIP
100%

Fork of Coronavirus Impact Area Chart by Dimanjan

✓ Published0🌍 Public
NNelly-ux10
Last edited Jan 24, 2021
Created on Jan 24, 2021

This animated area chart visualizes the progression of COVID-19 confirmed cases, deaths, and recoveries over time. Data is loaded from a CSV file and rendered as three overlapping gradient-filled areas, with yellow, red, and green representing each metric. The visualization uses d3.v4 to build SVG paths with `d3.area()` and animates the chart incrementally as new data points are added via `setTimeout`. Axes update smoothly with transitions, and a button triggers a full update of the dataset. The example forks the original by Dimanjan and adapts its styling.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Coronavirus Impact Area Chart by Dimanjan

A live area chart animates the cumulative counts of confirmed cases, deaths, and recoveries from a local CSV of coronavirus data, with three gradient-filled series rendered in yellow, red, and green. The visualization uses D3.js v4 to update the x- and y-axes and paths via transitions, while Bootstrap styles the page and buttons. The chart rebuilds its series incrementally with `d3.area()`, `d3.scaleTime()`, and `d3.scaleLinear()`, and the data is fetched with `d3.csv()`.

DDimanjan
91% match
Loading thumbnail…

Coronavirus Impact Area Chart by Dimanjan

This visualization presents an animated area chart tracking confirmed cases, deaths, and recoveries from the COVID-19 pandemic. The chart reads the data from a CSV file, parsing dates and values, then animates the data points appearing sequentially. It uses d3.v4 to create SVG paths with linear gradients, and it updates the x and y axes with transitions. An "Update" button can re-trigger the animation, and the chart uses the `d3.area` method to draw the stacked regions.

AArriannePandaraoan
90% match
Loading thumbnail…

Area Chart Covid19 Data

An area chart displays cumulative COVID-19 cases in the US over time, with a red fill and stroke over a darkred area. The data comes from the New York Times covid-19-data GitHub repository via `d3.csv`. The visualization uses D3 v6 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` to construct the path. SVG rendering occurs within an HTML canvas, with labeled axes and a title. The chart fills the browser window, adapting to its dimensions dynamically.

BBrian Gilmore
81% match
Loading thumbnail…

Fork of Area Chart ice 7

This area chart visualizes daily COVID-19 cases over time, with dates on the x-axis and case counts on the y-axis. The data is loaded from a CSV file via `d3.csv` and parsed using `d3.timeParse`. The chart is rendered as an SVG, using `d3.area` to generate the filled path and `d3.scaleTime`/`d3.scaleLinear` for the axes, which are drawn with `d3.axisBottom` and `d3.axisLeft`. The chart includes axis labels for "Date" and "Cases."

MM Hema
81% 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
80% 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
79% 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)
79% 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
79% match