Public
Edited
Nov 20, 2023
uri = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRczux7f1S_U3uSVpNg3cKq5P6uXzflHYE64c74yQ0K-ZET1E8zPF-yiXSNgd-4jU2tu_m0gfc8RmI7/pub?gid=2108724779&single=true&output=tsv"
rawdata = d3.tsv(uri, d3.autoType)
import {dataset, people} from "ad2642b7e4be8015"
dataset
X
day
Y
vessel
Color
drink
Size
—
Facet X
person
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
people
dataset.filter(d => d.person === "Uota")
[...d3.group(dataset, d => d.drink).keys()]
people.get("Uota")
dataOfPerson
viewof dataOfPerson = Inputs.select(people, { label: "Person" })
dataOfPerson.at(0).date.getUTCDate()
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);
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
