The workspace is for a data visualization class at the Tokyo Metropolitan University.
Instructor: @sugi2000lab @sugi2000
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);
}
getDataOfDates = (data) => {
// データに 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);
}
dataOfDatesTimes = {
// データに day と time を追加
// timeは12時間ごとの時間帯で0,1の値をとる
const dataWithDayTime = dataOfPerson.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) /
(12 * 60 * 60 * 1000)
)
}));
// グループ化
const groupedData = d3.group(
dataWithDayTime,
(d) => d.dateOnly,
(d) => d.time
);
// 時間帯が逆順になるように並び替える（最初のグループだけ逆順）
groupedData.forEach((value) => {
if (value instanceof Map) {
const timeGroups = Array.from(value.values());
if (timeGroups.length > 0 && Array.isArray(timeGroups[0])) {
timeGroups[0].reverse();
}
}
});
return groupedData;
}
getDataOfDatesTimes = (data) => {
// データに day と time を追加
// timeは12時間ごとの時間帯で0,1の値をとる
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) /
(12 * 60 * 60 * 1000)
)
}));
// グループ化
const groupedData = d3.group(
dataWithDayTime,
(d) => d.dateOnly,
(d) => d.time
);
// 時間帯が逆順になるように並び替える（最初のグループだけ逆順）
groupedData.forEach((value) => {
if (value instanceof Map) {
const timeGroups = Array.from(value.values());
if (timeGroups.length > 0 && Array.isArray(timeGroups[0])) {
timeGroups[0].reverse();
}
}
});
return groupedData;
}
nagakuboChart2(dataOfPerson)
[...d3.group(dataset, (d)=>d.date).keys()]
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.
