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})
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.