The workspace is for a data visualization class at the Tokyo Metropolitan University.
Instructor: @sugi2000lab @sugi2000
viewof dataOfPerson = Inputs.select(people, { label: "Person" })
people = d3.group(dataset, d => d.person)
dataset = (await d3.tsv(uri, d3.autoType)).map(d => ({
date: new Date(Date.UTC(d.year, d.month-1, d.day, d.hour, d.minute)),
...d,
}))
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
rawdata = d3.tsv(uri, d3.autoType)
new Date(
Date.UTC(
rawdata.at(0).year,
rawdata.at(0).month - 1,
rawdata.at(0).day,
rawdata.at(0).hour,
rawdata.at(0).minute
)
)
demo_dataset = rawdata.map((d) => ({
date: new Date(Date.UTC(d.year, d.month - 1, d.day, d.hour, d.minute)),
...d
}))
dataset.filter((d) => d.person === "Tsuchiya")
[...d3.group(dataset, (d) => d.drink).keys()]
dataOfDates = {
// データに dateOnly と msec を追加
// msecは、00:00からのミリ秒
const dataWithDayMsec = dataOfPerson.map((d) => ({
...d,
dateOnly: new Date(
Date.UTC(
d.date.getUTCFullYear(),
d.date.getUTCMonth(),
d.date.getUTCDate()
)
),
msec: (d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000
}));
return d3.group(dataWithDayMsec, (d) => d.dateOnly);
}
getDataOfDatesTimes = (data) => {
// データに day と time を追加
// timeは6時間ごとの時間帯で0,1,2,3の値をとる
const dataWithDayTime = data.map((d) => ({
...d,
dateOnly: new Date(
Date.UTC(
d.date.getUTCFullYear(),
d.date.getUTCMonth(),
d.date.getUTCDate()
)
),
time: Math.floor(
((d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000) /
(6 * 60 * 60 * 1000)
)
}));
return d3.group(
dataWithDayTime,
(d) => d.dateOnly,
(d) => d.time
);
}
drinks = d3.group(dataset, (d) => d.drink)
colorScale = d3
.scaleOrdinal()
.domain([...drinks.keys()])
.range([
"#4682b4",
"#f0f8ff",
"#000000",
"#ffffe0",
"#ffa500",
"#ff0000",
"#ffff00",
"#98fb98",
"#b8860b",
"#d2b48c",
"#708090",
"#f5deb3",
"#0000ff",
"#556b2f",
"#da70d6",
"#f5deb3",
"#8b4513",
"#bc8f8f",
"#00ff00",
"#8b0000",
"#7fff00",
"#ffe4b5"
])
colorScale("炭酸")
suiteki = svg`<svg xmlns="http://www.w3.org/2000/svg" data-name="レイヤー 2" viewBox="0 0 131.62 128"width="100"><path d="M131.62 48.83c0-14.11-9.78-25.86-22.73-28.46C99.97 7.99 85.98 0 70.24 0 57.15 0 45.28 5.53 36.52 14.51 15.16 22.09 0 41.16 0 63.5c0 13.56 5.58 25.91 14.74 35.22.37 15.68 12.82 28.27 28.12 28.27 3.6 0 7.04-.71 10.21-1.98A61.35 61.35 0 0 0 72 127.99c31.48 0 57-23.51 57-52.5 0-4.01-.51-7.92-1.43-11.67 2.57-4.38 4.05-9.51 4.05-15Z" data-name="レイヤー 1"/></svg>`
suitekiPath = d3.select(suiteki).select("path")
suitekiD = suitekiPath.attr("d")
d3suiteki = d3.select(suiteki)
uri = `https://docs.google.com/spreadsheets/d/e/2PACX-1vRczux7f1S_U3uSVpNg3cKq5P6uXzflHYE64c74yQ0K-ZET1E8zPF-yiXSNgd-4jU2tu_m0gfc8RmI7/pub?gid=2108724779&single=true&output=tsv`
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.
