Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
dataOfDates = {
// データに day と msec を追加
// msecは、00:00からのミリ秒
const dataWithDayMsec = dataOfName.map((d) => ({
day: new Date( //新たにdayという時間の情報を抜いた属性を作る
Date.UTC(
d.date.getUTCFullYear(),
d.date.getUTCMonth(),
d.date.getUTCDate()
)
),
msec: (d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000,
...d
}));
return d3.group(dataWithDayMsec, (d) => d.day);
}
{
const width = 1000;
const height = 1500;
const margin = { top: 20, right: 20, bottom: 50, left: 20 };
const interval = -15;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width);
//keyの数でwidthを等分
const xScale = d3
.scaleBand()
.domain([...dataOfDates.keys()])
.range([margin.left, width - margin.right]);
var burger_top = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.78 7.66" width="100"><path d="M.16 6.38S.8.14 8.99.14s8.62 6.24 8.62 6.24.29.83-1.22.97-7.26.28-14.8 0c0 0-1.62-.14-1.44-.97Z" style="fill:#f18d1a;stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px"/></svg>`;
var burger_topPath = d3.select(burger_top).select("path");
var burger_topD = burger_topPath.attr("d");
var burger_buttom = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.21 5.88" width="100"><path d="M.32.81S3.65.19 8.67.14s8.12 1.15 8.12 1.15.64 1.29 0 3.02S2.73 6.38.68 4.31c0 0-.91-.72-.36-3.5Z" style="fill:#f18d1a;stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px"/></svg>`;
var burger_buttomPath = d3.select(burger_buttom).select("path");
var burger_buttomD = burger_buttomPath.attr("d");
const apple = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.54 14.99" width="60"><defs><style>.cls-2{stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px;fill:none}</style></defs><path d="M6.43 2.63s.64.34 1.27 0 4.5-1.66 5.52 2.69-2.49 9.31-3.4 9.49-1.35-.31-2.67-.75-1.09.7-2.05.71S.81 13.13.22 8.52 2.42.58 6.43 2.63Z" style="stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px;fill:#e71e24"/><path d="M6.87 3.95s-.7-1.76.28-3.81" class="cls-2"/><path d="M5.42 3.56s1.25.83 3.15 0" class="cls-2"/></svg>`;
const tenpura = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.89 5.95" width="100"><path d="M12.06 4.69s-.45.92-1.74.22c0 0-.65.87-1.85.25 0 0-.35.79-.99.23 0 0-.6.94-1.17 0 0 0-1.29.77-1.8-.18 0 0-.93.48-1.46-.04 0 0-.88.23-1.13-.33 0 0-1.57.52-1.06-.8 0 0-1.14 0-.51-1.33 0 0 0-.85.89-.76 0 0 .17-.71 1.27-.38 0 0 .25-.85 1.15-.28 0 0 .13-.99 1.53-.52 0 0 .13-.66 1.32-.33 0 0 .84-.61 1.7-.04 0 0 .44-.67 1.37.19 0 0 .54-.71 1.39-.14 0 0 1.1-.52 1.36.38 0 0 .68-.47 1.15.47 0 0 1.06-.28 1.06.66 0 0 .47.02.55.41v1.48s-2.12 1.51-3.02.85Z" style="fill:#ffde42;stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px"/><path d="M15.07 3.84s.58 1.3 3.25 1.31c0 0 .89-.34-1.63-1.98 0 0 1.92-1.11 2.05-1.99s-2.92-.08-3.67 1.18v1.48Z" style="stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px;fill:#c31e1f"/></svg>`;
const tomato = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.65 3.29" width="100"><path d="M.14.9v1.23S5 4.2 16.5 2.43V.6S4.47-.14.14.26V.9Z" style="fill:#e60037;stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px"/></svg>`;
const lettuce = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.97 5.9" width="100"><path d="M.47 2.65s-.34 1.28.93 1.48.61-.54 1.81 0 .13.94 1.61 1.07 2.28-.81 3.29 0 1.41-.17 1.98.01 1.85.9 3.19.31 2.35-.79 3.56-.79 1.21.4 1.95.34-.1-.92.62-.86 1.99-.81 1.12-1.55-1.43 0-1.68-.66S18.1.39 17.37.99 16.3.58 15.02.35s-.81.84-1.54.78-.34-.74-1.34-.81-2.35 1.01-3.15.47S7.45.18 6.64.31 5.1 1.32 4.56.92 3.96-.2 2.68.34 2.01 1.45 1.4 1.45s-1.86-.27-.93 1.2Z" style="fill:#92c41d;stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px"/></svg>`;
const egg = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.05 6.04" width="100"><path d="M.15 3.72s-.19.91 2.04 1.36 13.77.95 14.56.79 2-.72.3-2.46S11.51 1.9 8.29.96C5.07.01-.11-.93.15 3.72Z" style="stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px;fill:#fff"/><path d="M9.03 3.82s-3.71.04-5.19-1.36S4.67-.09 6.98.18c0 0 1.85.24 2.76 1.56s.25 2.12-.71 2.08Z" style="fill:#fbc400;stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px"/></svg>`;
const ebi = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" id="_レイヤー_9" viewBox="0 0 18.39 4.63" width="100"><defs><style>.cls-1{fill:#fff}</style></defs><path d="M14.57 3.18s.58 1.3 3.25 1.31c0 0 .89-.34-1.63-1.98 0 0 1.92-1.11 2.05-1.99S15.32.44 14.57 1.7v1.48Z" style="stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px;fill:#c31e1f"/><path d="M14.57 3.18s-4.73 1.47-9.1 1.31S-.65 2.23.47.8 5.8.82 8.3.8s6.26.89 6.26.89v1.48Z" style="fill:#f19591"/><path d="M2.56.22s-.59 1.96-.82 3.42l1.78.6.82-3.85L2.56.23ZM6.38.72s-.3 2.84-.2 3.76l2.47-.12s.23-3.01 0-3.55L6.38.73ZM11 1.11s.55.99 0 2.88l1.75-.34s.26-1.13 0-2.35L11 1.11Z" class="cls-1"/><path d="M14.57 3.16s-4.73 1.47-9.1 1.31S-.65 2.21.47.78 5.8.8 8.3.78s6.26.89 6.26.89v1.48Z" style="fill:none;stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px"/></svg>`;
const meat = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.24 4.01" width="100"><path d="M.25 1.77s-.11.95.6 1.15 2.39 1.19 8.78.91c6.39-.29 7.08-.52 7.26-.81s.35-1.42 0-1.81-1.97-1.38-7.9-.97S1.71-.04.75.43s-.5 1.34-.5 1.34Z" style="fill:#9b4523;stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px"/></svg>`;
const takosan = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.75 13.33" width="100"><path d="M13.64 2.85s-2.91.64-4.46.74S-.11 2.92.15 7.05s9.18 2.5 10.01 2.5 3.71-.38 5.35 2.21 2.87 1.06 2.44 0-2.25-2.84-2.25-2.84 3.94 2.32 4.9 1.91 0-2.26-3.23-3.31c0 0 4.76 0 5.15-1.15s-1.55-1.63-4.57-.96c0 0 4.09-.87 4.62-2.31s-4.13.29-4.93.19c0 0 3.05-.77 3.05-2.4s-2.33-.19-3.62.38-3.44 1.57-3.44 1.57Z" style="fill:#ec662a;stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px"/></svg>`;
const dayG = svg
.selectAll("g")
.data(dataOfDates)
.join("g")
.attr("class", "day")
.attr("transform", (d) => `translate(${xScale(d[0])}, 0)`);
const posG = dayG
.selectAll("g")
.attr("class", "ing")
.data((d) => d[1])
.join("g")
.attr(
"transform",
(d, i) => `translate(0, ${i * interval + height - margin.bottom - 740})`
);
const bottomG = dayG
.append("g")
.attr("class", "bottom")
.attr("transform", `translate(15, ${height - 40}) scale(4)`);
const topG = dayG
.append("g")
.attr("class", "top")
.attr(
"transform",
(d, i) =>
`translate(10, ${
d[1].length * interval + height - margin.bottom
}) scale(4)`
);
bottomG
.append("path")
.attr("d", burger_buttomD)
.attr("width", "100")
.attr("fill", "#f18d1a")
.attr("stroke-width", "0.4")
.attr("stroke", "black");
topG
.append("path")
.attr("d", burger_topD)
.attr("width", "100")
.attr("fill", "#f18d1a")
.attr("stroke-width", "0.4")
.attr("stroke", "black");
posG.each(function (d, i) {
switch (d.type) {
case "携帯":
case "スマホ":
case "スマホ電源":
d3.select(this).node().appendChild(lettuce.cloneNode(true));
break;
case "照明":
case "自室照明":
case "リビング照明":
d3.select(this).node().appendChild(meat.cloneNode(true));
break;
case "電子レンジ":
d3.select(this).node().appendChild(apple.cloneNode(true));
break;
case "洗濯機":
d3.select(this).node().appendChild(ebi.cloneNode(true));
case "IH":
d3.select(this).node().appendChild(egg.cloneNode(true));
break;
case "トイレ":
case "トイレ照明":
d3.select(this).node().appendChild(tomato.cloneNode(true));
break;
case "脱衣所":
case "洗面所":
case "脱衣所照明":
case "洗面所照明":
d3.select(this).node().appendChild(takosan.cloneNode(true));
break;
default:
d3.select(this).node().appendChild(tenpura.cloneNode(true));
break;
}
});
bottomG.lower();
return svg.node();
}
<svg id="_レイヤー_10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.54 14.99"><defs><style>.cls-1{fill:#e71e24;}.cls-1,.cls-2{stroke:#231815;stroke-linecap:round;stroke-linejoin:round;stroke-width:.28px;}.cls-2{fill:none;}</style></defs><path class="cls-1" d="M6.43,2.63s.64,.34,1.27,0,4.5-1.66,5.52,2.69-2.49,9.31-3.4,9.49-1.35-.31-2.67-.75-1.09,.7-2.05,.71S.81,13.13,.22,8.52,2.42,.58,6.43,2.63Z"/><path class="cls-2" d="M6.87,3.95s-.7-1.76,.28-3.81"/><path class="cls-2" d="M5.42,3.56s1.25,.83,3.15,0"/></svg>
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.
