result = FileAttachment("sh-covid-19-2022-feb-may.csv").csv({typed: true})
Inputs.table(result)
hk = FileAttachment("situation_of_reported_cases_covid_19_eng_2022.csv").csv({typed: true})
Inputs.table(hk)
shForeignCases = result.map(({date, ...cases}) => ({date, cases: cases.newForeignCase + cases.newForeignNoSymptomCase}))
hkLocalCases = hk.map((record, i) => ({date: record['As of date'], cases: record['Number of cases tested positive for SARS-CoV-2 virus by nucleic acid tests'] - (hk[i - 1] || {})['Number of cases tested positive for SARS-CoV-2 virus by nucleic acid tests']})).slice(1)
compareShForeignAndHk = [['sh', shForeignCases], ['hk', hkLocalCases.slice(30, 150)]].flatMap(([reign, data]) => data.map(d => ({reign, ...d})))
Plot.plot({
color: {
legend: true
},
marks: [
Plot.line(compareShForeignAndHk, Plot.normalizeY('extent', {
x: "date",
y: "cases",
stroke: "reign",
curve: "catmull-rom"
})),
]
})
shLocalCases = result.map(({date, ...cases}) => ({date, cases: cases.newCase + cases.newNoSymptomCase}))
Plot.plot({
marks: [
Plot.line(shLocalCases, {
x: "date",
y: "cases",
curve: "catmull-rom",
stroke: "coral",
}),
]
})
Plot.plot({
marks: [
Plot.line(hkLocalCases, {
x: "date",
y: "cases",
curve: "catmull-rom",
stroke: "coral",
}),
]
})
compareShAndHk = [['sh', shLocalCases.slice(20)], ['hk', hkLocalCases.slice(10, 110)]].flatMap(([reign, data]) => data.map((d, i) => ({reign, ...d, day: i})))
Plot.plot({
color: {
legend: true
},
marks: [
Plot.line(compareShAndHk, Plot.normalizeY('mean', {
x: "day",
y: "cases",
stroke: "reign",
curve: "catmull-rom"
})),
]
})
shVocals = Object.fromEntries([
[shLocalCases[34].date, '探索更智慧的动态清零\n模式，要避免一刀切'],
[shLocalCases[41].date, '不意味着上海需要采取\n封城和全检测的策略'],
[shLocalCases[51].date, '形成拐点的条件已经具备'],
[shLocalCases[52].date, '指数级上升趋势已被打断'],
])
exponentialCases = shLocalCases.slice(30, 70).map((d, i) => ({...d, cases: Math.pow(Math.max(...shLocalCases.map(d => d.cases)), (i + 31)/70)}))
Plot.plot({
marks: [
Plot.line(shLocalCases.slice(30, 70), {
x: "date",
y: "cases",
curve: "catmull-rom",
stroke: "coral",
}),
Plot.line(exponentialCases, {
x: "date",
y: "cases",
stroke: "#4e79a7",
}),
Plot.text(shLocalCases.slice(30, 70), {
filter: (d, i) => i < 20 && shVocals[d.date],
x: "date",
y: "cases",
text: d => shVocals[d.date],
dy: -20,
dx: 40,
lineWidth: 10,
}),
Plot.text(shLocalCases.slice(30, 70), {
filter: (d, i) => i > 20 && shVocals[d.date],
x: "date",
y: "cases",
text: d => shVocals[d.date],
dx: 70,
lineWidth: 10,
}),
Plot.dot(shLocalCases.slice(30, 70), {filter: d => shVocals[d.date], x: "date", y: "cases", fill: "coral", r: 3})
]
})
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.
