async function* yamamotoChart(data) {
const height = (width * 150) / 215;
const margin = { top: height * 0.05, right: 30, bottom: 30, left: 120 };
const dataOfDatesTimes = getDataOfDatesTimes(data);
const xScale = d3
.scaleLinear()
.domain([0, 2])
.range([margin.left, width - margin.right]);
const yScale = d3
.scaleBand()
.domain([...dataOfDatesTimes.keys()])
.range([margin.top, height - margin.bottom]);
const arcGenerator = d3
.arc()
.innerRadius(9)
.outerRadius(10)
.startAngle(Math.PI / 2)
.endAngle((Math.PI * 3) / 2);
const arcGenerator_1 = d3
.arc()
.innerRadius(0)
.outerRadius(9)
.startAngle(Math.PI / 2)
.endAngle((Math.PI * 3) / 2);
const dow = (d) => "日月火水木金土".at(new Date(d).getDay());
const xAxis = d3
.axisBottom()
.scale(xScale)
.tickFormat(() => "");
const yAxis = d3
.axisLeft()
.scale(yScale)
.tickFormat(() => "");
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "white");
svg
.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xAxis);
svg
.append("g")
.attr("class", "yAxis")
.attr("transform", `translate(${margin.left}, 0)`)
.call(yAxis);
const dayG = svg
.selectAll("g.day")
.data(dataOfDatesTimes)
.join("g")
.attr("class", "day")
.attr("transform", (d) => `translate(0, ${yScale(d[0])})`);
dayG
.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", height * 0.065)
.attr("y2", height * 0.065)
.style("stroke", "black");
const timeG = dayG
.selectAll("g.time")
.data((d) => d[1])
.join("g")
.attr("class", "time")
.attr("transform", (d) => `translate(${xScale(d[0])}, 0)`);
const circleX = d3.scaleBand().range([10, xScale(1) - xScale(0) - 10]);
const pendulum = timeG
.selectAll("g")
.data((d) => d[1])
.join("g")
.attr("transform", (d, i, nodes) => {
circleX.domain(d3.range(nodes.length));
return `translate(${circleX(i) + circleX.bandwidth() / 2}, ${
yScale.bandwidth() / 2
})`;
})
.append("g");
const locationXScale = (location) => (location == "自宅" ? 20 : 0);
pendulum
.append("line")
.attr("y2", (d) => yScale.bandwidth() / 2 - locationXScale(d.location))
.attr("stroke", "#000");
timeG
.selectAll("path")
.data((d) => d[1])
.join("path")
.attr("transform", (d, i, nodes) => {
circleX.domain(d3.range(nodes.length));
return `translate(${circleX(i) + circleX.bandwidth() / 2}, ${
yScale.bandwidth() / 2
}) `;
})
.attr("d", arcGenerator)
.attr("fill", "black");
pendulum.append("circle").attr("r", 9).attr("fill", "white");
pendulum
.append("path")
.attr("d", starD)
.attr("fill", (d) => colorScale(d.drink))
.attr(
"transform",
(d) =>
`translate(-14, ${
yScale.bandwidth() / 2 - locationXScale(d.location) - 5
}) scale(0.025)`
);
svg
.selectAll("g.xAxis, g.yAxis")
.selectAll("line, path")
.attr("stroke", "white")
.attr("opacity", 0.5);
svg.selectAll("g.xAxis, g.yAxis").selectAll("text").attr("font-size", 16);
const angle = d3
.scaleOrdinal()
.domain(["あたたかい", "つめたい", "常温"])
.range([-45, 45, 0])
.unknown(0);
while (true) {
yield svg.node();
await pendulum
.transition()
.duration(1500)
.ease(d3.easeSinInOut)
.attr("transform", (d) => `rotate(${angle(d.temperature)})`)
.transition()
.duration(1500)
.ease(d3.easeSinInOut)
.attr("transform", "rotate(0)")
.end();
}
}