Public
Edited
Dec 16, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataOfHours3 = d3.group(
dataOfName, //dataOfNameを加工する
(d) => d.date.getUTCHours(), //時間ごとに入れ子にする
(d) => d.turning //その後、ON OFFごとに入れ子にする
)
Insert cell
d3.group(dataOfName, (d) => d.shape)
Insert cell
Insert cell
{
//多い人のグラフが入り切らない
const width = 1000;
const height = 500;
const margin = { top: 30, right: 30, bottom: 30, left: 30 };

// const xScale = d3
// .scaleLinear() //scaleLinear、線を用意して、
// .domain([0, 23])
// .range([margin.left, width - margin.right]);
const xScale = d3
.scaleBand() //scaleBandは、帯をレンジの量に合わせた幅で用意してくれる
.domain(d3.range(24))
.range([margin.left, width - margin.right]);

const svg = d3.create("svg").attr("width", width).attr("height", height);

// 時間のグループ
const hourG = svg
.append("g") //<svg>の中に<g>を作る
.selectAll("g")
.data(dataOfHours3)
.join("g") //さっき作った<g>の下に、dataOfHours3の要素分(19個)の<g>を作る
.attr("class", "hour") //19この<g>にクラスを追加(みたときにわかりやすいようにしてくれた)
.attr("transform", (d) => `translate(${xScale(d[0])}, ${height / 2})`); //d[0]は時間に応じたmapの名前。0,1,2,...

//ON
hourG //さっきのhourGの下に要素を作っていく
.append("g")
.attr("class", "on")
.selectAll("rect")
.data((d) => d[1].get("ON") || []) //マップからON要素を取ってくる。ONがない場合もあるのでその時は空配列を入れる
.join("rect") //取れたデータの数だけrectをつける
.attr("y", (d, i) => i * -20) //ONなので上に積み上げていく
.attr("x", (d, i) => {
if (d.shape === "縦長") {
return -10;
} else {
return 0;
}
})
//.attr("transform", (d, i) => `translate(0, ${i * -20})`)
.attr("height", 20)
.attr("width", (d, i) => {
if (d.shape === "縦長") {
return 40;
} else {
return 20;
}
})
.attr("rx", (d, i) => {
if (d.shape === "丸" || d.shape === "まる") {
return 10;
} else {
return 3;
}
})
.attr("ry", (d, i) => {
if (d.shape === "丸" || d.shape === "まる") {
return 10;
} else {
return 3;
}
})
.attr("fill", (d, i) => {
if (d.hardness === "柔らかい") {
return "#3FC6D1"; //blue
} else if (d.hardness === "軽い") {
return "#A3E220"; //green
} else if (d.hardness === "普通") {
return "#FFD155"; //yellow
} else {
return "#FF8457"; //orenge
}
})
.attr("stroke", "#433C46")
.attr("stroke-width", 2);

//OFF
hourG //さっきのhourGの下に要素を作っていく
.append("g")
.attr("class", "off")
.selectAll("rect")
.data((d) => d[1].get("OFF") || [])
.join("rect")
.attr("y", (d, i) => 40 + i * 20) //OFFなので下に積み上げていく
.attr("x", (d, i) => {
if (d.shape === "縦長") {
return -10;
} else {
return 0;
}
})
.attr("height", 20)
.attr("width", (d, i) => {
if (d.shape === "縦長") {
return 40;
} else {
return 20;
}
})
.attr("rx", (d, i) => {
if (d.shape === "丸" || d.shape === "まる") {
return 10;
} else {
return 3;
}
})
.attr("ry", (d, i) => {
if (d.shape === "丸" || d.shape === "まる") {
return 10;
} else {
return 3;
}
})
.attr("fill", (d, i) => {
if (d.hardness === "柔らかい") {
return "#3FC6D1"; //blue
} else if (d.hardness === "軽い") {
return "#A3E220"; //green
} else if (d.hardness === "普通") {
return "#FFD155"; //yellow
} else {
return "#FF8457"; //orenge
}
})
.attr("stroke", "#433C46")
.attr("stroke-width", 2);

//if分のところをスケール関数でなんとかする??

return svg.node();
}
Insert cell

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.
Learn more