Published
Edited
May 1, 2021
2 forks
Importers
19 stars
Andy's Walgreens COVID-19 Tracker TrackerBelgium Vaccination Tracker - Progress of the vaccination campaignVaccination against covid-19 in France500,000 COVID-19 DeathsCovid-19 vaccinations: BubblesTime Spiral with a COVID DemoCOVID MasksGrid Cartogram component with live COVID demos (plus a MapEditor)The US COVID SyringeCOVID-19 DKCOVID-19 World Community Mobility Report by GoogleCOVID 19Chicago COVID ZIP SparklinesThe COVID Syringeభారతదేశంలో కోవిడ్-19SVG DataGrid with many features and a live COVID Dashboard demoThe spread of Covid-19 in New MexicoHeatmap of COVID-19 Confirmed Cases by Age over Time in JapanThe CoViD-19 ReportCovid19 WorldwideMassachusetts Coronavirus Cases by TownChoropleth map about Covid19 in FranceWell ordered coronavirus heatmaps for US and the WorldCOVID-19 Racial/Ethnic Mortality AnalysisProPublica's COVID Arrow MapClustering students to slow virus spread inside schoolsCOVID-19 in the USAWho Is Wearing Masks in the U.S.Covid-19 Viz RoundupCoronavirus StatsThe Covid-19 Crisis' Impact on the Number of US Flight PassengersCOVID-19 Daily New CasesCOVID-19 CasesCOVID–19 Bubble Chart with D3 RenderCoronavirus Deaths by Race / EthnicityHow many SARS-CoV-2 tests are we running in the U.S.?COVID-19 Onset vs. ConfirmationPeaks in confirmed daily deaths due to COVID-19 so farCOVID-19 in the U.S.Recreating John Burn-Murdoch’s Coronavirus trackerTracking COVID-19 Cases in VietnamCOVID-19 in NYC by Zip Code & IncomeVisualizing the Network Meta-Analysis of Covid-19 Studiesxkcd COVID-19 spread sketchCOVID-19's deaths in EuropeCovid-19 (corona virus) deaths per 1,000,000 peopleCOVID-19 Bubble map or spike map? (Twitter debate)A Timeline of Shelter-in-PlaceWhere’s that $2 trillion going?Estimating SARS-COV-2 infectionsCODAVIM - CountySARS-CoV-2 Epi CurveCOVID-19 Curves (U.S.)COVID-19 Cases by CountyCOVID-19 world growth rateA graphical experiment of exponential spreadCOVID-19 by US countyCOVID-19 Confirmed vs. New cases"Live" Logistic Coronavirus Death CounterInfografiche: COVID-19 in ItaliaCoronavirus (COVID-19) GlobeBar Chart Race, COVID-19 outbreak Worldwide to 24th March 2020US Coronavirus testing by statesUnited States Coronavirus Daily Cases Map (COVID-19)COVID-19 Numbers by State, Side by SideRecreating NYT U.S. Cases MapCOVID-19 in Washington stateCOVID-19 outbreak in maps and chartsCOVID-19 Spreading trendsRestaurants during COVID-19 social distancingCOVID-19 Countries Trajectories in 3DStates that aren't reporting aspects of their COVID-19 testing processNextstrain Prototyping - Issue 817Reviewing COVID-19 SARS-CoV-2 preprints from medRxiv and bioRxivCoronavirus worldwide evolutionCovid-19 New Cases PunchcardCovid-19 cases per district in Germany.COVID-19 Cases, Deaths, and Recoveries (Select Country)Quarantine NowEmissions in WuhanCOVID-19(nCOV-2019) Outbreak in S.KoreaMovement of population between provinces in 2019-nCoVComparing COVID-19 GrowthCovid-19 derived chartCoronavirus Trends (COVID-19)Netherlands Coronavirus Daily Cases Map (COVID-19)Map and timeline of Corona outbreakSARS-CoV-2 Phylogenetic Tree
Coronavirus data (covid-19)
Visualizing the Logic of Exponential Viral SpreadItaly Coronavirus Daily Cases Map (COVID-19)COVID-19 Fatality Rate
Insert cell
Insert cell
Insert cell
stackChart
Insert cell
Insert cell
Insert cell
Insert cell
death = d3.csv(
"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv"
)
Insert cell
confirmed = d3.csv(
"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv"
)
Insert cell
recovered = d3.csv(
"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_recovered_global.csv"
)
Insert cell
Insert cell
tidy = (data, type) => {
const t = data
.map(d => {
let prev = 0; // previous total, to compute diffs
return (
Object.keys(d)
.filter(parseDateMDY)
// .filter(d => d !== "2/12/20") // bad data day
.map(k => {
const total = +d[k],
cases = total - prev;
prev = total;
return {
type,
country: d["Country/Region"],
province_name: d["Province/State"],
province: `${d["Country/Region"]}:${d["Province/State"]}`,
lat: +d["Lat"],
long: +d["Long"],
date: parseDateMDY(k),
ymd: d3.timeFormat("%Y-%m-%d")(parseDateMDY(k)),
cases,
total
};
})
);
})
.flat()
.filter(d => d.total > 0);

return t;
}
Insert cell
tdeath = tidy(death, "death")
Insert cell
tconfirmed = tidy(confirmed, "confirmed")
Insert cell
trecovered = tidy(recovered, "recovered")
Insert cell
Insert cell
data = [...tdeath, ...tconfirmed, ...trecovered].sort((a, b) =>
d3.ascending(a.date, b.date)
)
Insert cell
provinces = d3.groups(data, d => d.province).map(d => d[0])
Insert cell
Insert cell
import { chart as stackChart } with {
databyday as data,
color,
margin
} from "@d3/stacked-area-chart"
Insert cell
margin = ({ top: 20, right: 30, bottom: 30, left: 90 })
Insert cell
databyday = {
const rollups = d3
.rollups(
data.filter(d => d.type === type),
v => {
const o = {};
provinces.forEach(p => (o[p] = 0));
v.forEach(d => (o[d.province] = d.total));
return o;
},
d => d.ymd
)
.map(d => ({ date: parseDateYMD(d[0]), ...d[1] }));

const last = rollups[rollups.length - 1];

return Object.assign(rollups, {
columns: [...Object.keys(last)].sort((a, b) =>
d3.descending(last[a], last[b])
),
y: `Cumulative ${type} cases of covid-19 infection, by country & province`
});
}
Insert cell
color = d3
.scaleOrdinal()
.domain(provinces)
.range(d3.schemeOranges[9])
Insert cell
Insert cell
d3 = require("d3@5", "d3-array@2")
Insert cell
parseDateYMD = d3.timeParse("%Y-%m-%d")
Insert cell
parseDateMDY = d3.timeParse("%m/%d/%y")
Insert cell
parseDateMDYHMP = d3.timeParse("%m/%d/%y %H:%M")
Insert cell
import { select } from "@jashkenas/inputs"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more