Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
viewof pref = Inputs.select(prefs)
Plot.plot({
width: width,
height: width * 0.5,
marginRight: 40,
y: {
type: "log",
tickFormat: ",d",
ticks: 3,
grid: true,
label: "↑ Cases"
},
x: {
grid: true,
type: "time",
domain: [new Date(2020, 6 - 1, 1), new Date()],
tickFormat: "%Y/%m"
},
marks: [
Plot.line(tokyo_data, {
x: "date",
y: "cases",
stroke: "steelblue",
strokeOpacity: 0.15
}),
Plot.text(
tokyo_data,
Plot.selectLast({
x: "date",
y: "cases",
text: (d) => `Confirmed cases: ${d3.format(",d")(d.cases)}`,
textAnchor: "end",
dx: -0,
fill: "steelblue"
})
),
Plot.line(tokyo_data, {
x: "date",
y: "casesAvg",
stroke: "steelblue"
}),
Plot.text(
tokyo_data,
Plot.selectLast({
x: "date",
y: "severe",
text: (d) => `Severe cases: ${d.severe}`,
textAnchor: "end",
dx: -0,
fill: "orange"
})
),
Plot.line(tokyo_data, {
x: "date",
y: "severe",
stroke: "orange"
}),
Plot.line(tokyo_data, {
x: "date",
y: "deaths",
stroke: "maroon",
strokeOpacity: 0.15
}),
Plot.text(
tokyo_data,
Plot.selectLast({
x: "date",
y: "deaths",
text: (d) => `Deaths: ${d.deaths}`,
textAnchor: "end",
dx: -0,
fill: "maroon"
})
),
Plot.line(tokyo_data, {
x: "date",
y: "deathsAvg",
stroke: "maroon"
})
]
})
daily_uri = `https://www3.nhk.or.jp/n-data/opendata/coronavirus/nhk_news_covid19_domestic_daily_data.csv`
pref_data = getPrefData(pref)
getPrefData = (pref) => pref_daily_data.filter((d) => d.都道府県名 === pref)
pref_daily_uri = `https://www3.nhk.or.jp/n-data/opendata/coronavirus/nhk_news_covid19_prefectures_daily_data.csv`
severe_data.slice(-10)
severe_data = (
await d3.csv("https://sugi2000cors.herokuapp.com/" + severe_uri, d3.autoType)
).map((d) => ({
date: new Date(d.日付),
severe: d.重症者数
}))
severe_uri = `https://toyokeizai.net/sp/visual/tko/covid19/csv/severe_daily.csv`
tokyo_data.slice(-10)
tokyo_data = (
await d3.csv("https://sugi2000cors.herokuapp.com/" + tokyo_uri, d3.autoType)
)
.map((d) => ({
casesAccumlated: d["陽性者数（累計）"],
severe: d.重症,
deathsAccumlated: d.死亡,
...d
}))
.map((d, i, arr) => ({
date: new Date(d.日付),
cases: d.casesAccumlated - (arr[i - 1] ? arr[i - 1].casesAccumlated : 0),
// severe: d.severeAccumlated - (arr[i - 1] ? arr[i - 1].severeAccumlated : 0),
deaths: d.deathsAccumlated - (arr[i - 1] ? arr[i - 1].deathsAccumlated : 0),
...d
}))
.map((d, i, arr) => ({
casesAvg: d3.mean(arr.slice(Math.max(0, i - 7), i), (d) => d.cases),
deathsAvg: d3.mean(arr.slice(Math.max(0, i - 7), i), (d) => d.deaths),
day: d.date.getDay(),
...d
}))
tokyo_uri = `https://stopcovid19.metro.tokyo.lg.jp/data/130001_tokyo_covid19_details_testing_positive_cases.csv`
import { Plot, d3 } from "@observablehq/plot"
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.
