The avatar for @sugi2000
SUGIMOTO Tatsuo
Designer, Artist, Researcher, Educator @sugi2000lab . co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
Published
COVID-19
Edited
Nov 22, 2020
1 fork
COVID-19
Heatmap of COVID-19 Confirmed Cases by Age over Time in JapanHeatmap of COVID-19 Confirmed Cases by Age over Time in Kyushu and Okinawa, JapanCalendar of COVID-19 Confirmed Cases in Tokyo[Internal] COVID-19 Confirmed Cases by Municipality in TokyoInternal page for COVID-19 in OsakaCOVID-19 Confirmed Cases in OsakaCOVID-19 Confirmed Cases by Municipality in TokyoCOVID-19 in Osaka
COVID-19 in Hokkaido
COVID-19 Data in JapanCOVID-19 Data in OsakaCOVID-19 in Japan Time ChartJapan Prefectural Grid MapCOVID-19 Data in HokkaidoCOVID-19 Data in TokyoCOVID-19 Data in Hyogo Pref., JapanCOVID-19 Data in FukuokaCOVID-19 Confirmed Cases in Japan by Day of the WeekCoronavirus Vaccinations in JapanHeatmap of COVID-19 Confirmed Cases in Tokyo
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
color = d3.scaleSequentialLog(d3.interpolateInferno).domain([1, 100])
Insert cell
getCaseRatio = d =>
(d.values.length /
populations.find(e => e.subprefecture === d.key).population) *
100000
Insert cell
weeks = d3.range(-38, 1).map(d => {
const originDate = new Date(latestDate.getTime()); //new Date('2020-11-01');

return new Date(originDate.setDate(originDate.getDate() + d * 7));
})
Insert cell
ages = d3.range(80, -10, -10)
Insert cell
getAreas(casesOfWeek(weeks[weeks.length - 1]))
Insert cell
Insert cell
Insert cell
Insert cell
subprefsColor = d3.scaleSequentialLog(d3.interpolateInferno).domain([1, 100])
Insert cell
Insert cell
Insert cell
getAreas(cases)
Insert cell
getAreas = cases =>
Array.from(
d3.groups(cases.filter(d => /管内$/.test(d.居住地)), d => d.居住地),
([key, values]) => ({
key: key.replace(/(総合|)振興局管内/, ''),
values
})
).sort((a, b) => b.values.length - a.values.length)
Insert cell
getAges(cases)
Insert cell
getAges = cases =>
Array.from(
d3.groups(cases.filter(d => d.age >= 0), d => d.age),
([key, values]) => ({ key, values })
).sort((a, b) => b.key - a.key)
Insert cell
casesOfWeek = date => {
const fromDate = new Date(date).setDate(date.getDate() - 7);
return cases.filter(d => d.リリース日 > fromDate && d.リリース日 <= date);
}
Insert cell
latestDate = getLatestDate(cases)
Insert cell
getLatestDate = data => d3.max(data, d => d.リリース日)
Insert cell
cases.slice(-10)
Insert cell
d3.group(cases, d => d.age)
Insert cell
cases.filter(d => /胆振/.test(d.居住地))
Insert cell
cases.find(d => /ｵﾎｰﾂｸ/.test(d.居住地))
Insert cell
cases = getCases({ prefName: 'Hokkaido', maxAge: 80 })
Insert cell
Insert cell
csvString = iconv.decode(arrayData, 'Shift_JIS')
Insert cell
arrayData = new Uint8Array(await d3.buffer(uri))
Insert cell
uri = `https://www.harp.lg.jp/opendata/dataset/1369/resource/2828/patients.csv`
Insert cell
Insert cell
populations.find(d => d.subprefecture === '石狩')
Insert cell
Insert cell
popsData = `287802
2381920
206592
387621
65586
389500
35119
490,316
44,638
62,707
277,502
336,986
227,420
74,053 `
Insert cell
Insert cell
agePops = d3.tsvParse(agePopsData)
Insert cell
agePopsData = `市区町村名 性別 総数 0～4歳 5～9 10～14 15～19 20～24 25～29 30～34 35～39 40～44 45～49 50～54 55～59 60～64 65～69 70～74 75～79 80～84 85～89 90～94 95～99 100歳以上
北　海　道 計 5,267,762 169,948 194,891 206,987 225,713 233,277 235,043 261,204 299,645 353,265 393,243 349,972 342,233 343,957 416,880 400,590 315,831 245,114 169,777 81,316 23,451 3,388`
Insert cell
iconv = require('https://bundle.run/iconv-lite@0.6.2')
Insert cell
Insert cell
Insert cell
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