Published
Edited
Aug 1, 2021
Insert cell
Insert cell
Insert cell
Table(raw_data)
Insert cell
tokyoData = cases_per_day.find((d) => d.pref === "東京都").data
Insert cell
Table(tokyoData)
Insert cell
timeChart(tokyoData)
Insert cell
d3.greatestIndex(
movingAverage(
tokyoData.map((d) => d.value),
7
)
)
Insert cell
raw_data = (await d3.csv(datauri, d3.autoType)).map((d) => ({
date: new Date(d.日付),
pref: d.都道府県名,
case: d.各地の感染者数_1日ごとの発表数,
...d
}))
Insert cell
prefs = [...d3.group(raw_data, (d) => d.pref).keys()]
Insert cell
cases_per_day = d3.sort(
prefs.map((pref) => {
const pref_data = raw_data.filter((d) => d.pref === pref);

const data = pref_data.map((dd, i) => {
return {
date: dd.date,
value: dd.case
};
});

return {
pref,
data
};
}),
// Sort by the date where the moving average is the highest
(s) =>
-d3.greatestIndex(
movingAverage(
s.data.map((d) => d.value),
7
)
)
)
Insert cell
Insert cell
style = html`<style>
.bg {
background: #f8faff;
padding: 3em;
}
h3,
.description {
font-family: sans-serif;
font-weight: bold;
margin-bottom: .5em;
max-width: 100%;
}
.description .pref {
font-size: 80%;
margin: 0 0.15em;
}
.peak,
.pref {
display: inline-block;
font-family: sans-serif;
font-weight: bold;
margin: .12em .25em;
padding: .15em .5em;
background: #eef;
}
.peak {
width: 7em;
text-align: right;
border-radius: 0;
background: #224;
color: #fff;
}
.pref {
margin: 0;
}
.pref.emergency {
background: orange;
}
.pref.semi-emergency {
background: khaki;
}
</style>`
Insert cell
emergencyPrefs = ["東京都", "沖縄県"]
Insert cell
semiEmergencyPrefs = `埼玉県
千葉県
神奈川県
大阪府`.split("\n")
Insert cell
latestPeakGroup = d3.group(latestPeak, (d) => d.latestPeak)
Insert cell
latestPeak = cases_per_day.map((d) => ({
latestPeak:
d.data.length -
1 -
d3.greatestIndex(
movingAverage(
d.data.map((dd) => dd.value),
7
)
),
...d
}))
Insert cell
interval = d3.timeDay
Insert cell
interval()
Insert cell
start = d3.min(raw_data, (d) => d.date)
Insert cell
stop = new Date(d3.max(raw_data, (d) => d.date).getTime() + 1000 * 60 * 60 * 24)
Insert cell
datauri = `https://www3.nhk.or.jp/n-data/opendata/coronavirus/nhk_news_covid19_prefectures_daily_data.csv`
Insert cell
Insert cell
// Setting defaults
timeChart = TimeChart.defaults({
interval,
start,
stop,
dateFormat: "%Y/%m/%d",
width: width,
height: 40,
marginTop: 2,
scheme: "oranges"
})
Insert cell
import { Table } from "@observablehq/inputs"
Insert cell
import { movingAverage } from "@d3/moving-average"
Insert cell
import { TimeChart, TimeAxis, d3 } from "@observablehq/timechart"
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