31:T219e,{ const width = 1000; const height = 670; const margin = { top: 5, right: 80, bottom: 5, left: 18 }; const circle = 8.5; //半円1の半径 const circle_d = 4; //半円1の半径 + circle_d const back = "snow"; //背景色 const all_color = "dimgray"; //記号などの全ての色 const rect_h = circle_d * 8 - circle_d / 2; //半円下を隠すrectの高さ const rect_time_h = 1.5; //時間を表す棒の高さ const rect_time_d = 3; //時間を表す棒と棒の感覚 const xScale = d3 .scaleLinear() .domain([0, 23]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dates.keys()]) .range([margin.top, height - margin.bottom]); const xAxis = d3.axisBottom().scale(xScale).ticks(23); //.tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3.axisLeft().scale(yScale).ticks(7); //.tickSize(-(width - margin.left - margin.right)); const svg = d3.create("svg").attr("width", width).attr("height", height); svg //背景 .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", back); //.attr("opacity", 0.1); /* svg //x軸 .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis) .attr("font-size", "5"); svg //y軸 .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis) .attr("font-size", "5"); */ const circle_mx = (d) => xScale(d.startDate.getUTCHours()); //circleの中心の座標x const circle_my = (d) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2; //circleの中心の座標y const color_h = (d) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 10 - (d.numItem - 1) * circle_d; //color（circle）の y const color_hr = (d) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 10 - (d.numItem - 1) * circle_d - 2.5; //color（rect）の y const color_w = (d) => xScale(d.startDate.getUTCHours()) - 24; //color（white）の x const color_g = (d) => xScale(d.startDate.getUTCHours()) - 24 + 6 * 6; //color（green）の x const color_br = (d) => xScale(d.startDate.getUTCHours()) - 24 + 6 * 7; //color（brown）の x const color_b = (d) => xScale(d.startDate.getUTCHours()) - 24 + 6 * 9 + 2; //color（black）の x const dataByDate = d3.group(data, (d) => d.startDate); const dataSpreadByNumItems = new Map( [...dataByDate].map(([date, values]) => [ date, d3 .range(values[0].numItem) .map((d) => (d < values.length ? values[d] : values[0])) ]) ); // return dataSpreadByNumItems; svg .append("g") .selectAll("g") .data(dataSpreadByNumItems) .join("g") .selectAll("circle") .data((d) => d[1]) .join("circle") .attr("cx", circle_mx) .attr("cy", circle_my) .attr("r", (d, i) => circle + circle_d * (i - 1)) .attr("fill", "none") /* .attr("stroke", (d) => { if (d.朝昼晩 == "朝") { return "coral"; } else if (d.朝昼晩 == "昼") { return "khaki"; } else if (d.朝昼晩 == "晩") { return "lightsteelblue"; } else { return all_color; } })*/ .attr("stroke", all_color) .attr("stroke-dasharray", (d) => { if (d.主食間食 == "主食") { return "0, 0"; } else if (d.主食間食 == "間食") { return "1, 1"; } else { return "0, 0"; } }); svg //rect.hide .selectAll("rect.hide") .data(data) .join("rect") .attr("class", "hide") .attr("x", "0") .attr("y", circle_my) .attr("width", width) .attr("height", rect_h) .attr("fill", back); const g = svg.append("g").selectAll("g").data(dataByDate).join("g"); g.selectAll("rect") .data((d) => d3.range(Math.floor(d[1][0].duration / 10) + 1).map((e) => d[1][0]) ) .join("rect") .attr( "x", (d) => xScale(d.startDate.getUTCHours()) - (circle + circle_d * (d.numItem - 1)) ) .attr( "y", (d, i) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 + rect_time_d * i ) .attr("width", (d) => (circle + circle_d * (d.numItem - 1)) * 2) .attr("height", rect_time_h) .attr("fill", all_color); // group for colors item const colorsG = svg .select("g") .selectAll("g") .data(dataByDate) .join("g") .attr( "transform", (d) => `translate(${xScale(d[0].getUTCHours())}, ${ yScale(d[0].getUTCDate()) + yScale.bandwidth() / 2 - 13 - (d[1][0].numItem - 1) * circle_d })` ); // append each color empty group colorsG .selectAll("g") .data((d) => d[1]) .join("g") .attr( "transform", (d, i, nodes) => `translate(${(-nodes.length * 10) / 2 + i * 10}, 0)` ) .attr("class", (d) => color(d.color)); // select color group and append path colorsG //黄 .selectAll("g.yellow") .attr("fill", "none") .attr("stroke", all_color) .append("path") .attr("d", yellowPath.attr("d")); colorsG //橙 .selectAll("g.orange") .attr("fill", all_color) .attr("stroke", all_color) .append("path") .attr("d", yellowPath.attr("d")); colorsG //赤 .selectAll("g.red") .attr("fill", "none") .attr("stroke", all_color) .append("path") .attr("d", redPath.attr("d")); colorsG //桃色 .selectAll("g.pink") .attr("fill", all_color) .attr("stroke", all_color) .append("path") .attr("d", redPath.attr("d")); colorsG //紫1 .selectAll("g.purple") .attr("fill", all_color) .attr("stroke", all_color) .append("path") .attr("d", purplePath.attr("d")); colorsG //紫2 .selectAll("g.purple") .attr("stroke", all_color) .append("path") .attr("d", purple2Path.attr("d")) .attr("fill", "none"); colorsG //灰1 .selectAll("g.gray") .attr("fill", all_color) .append("path") .attr("d", gray1Path.attr("d")) .attr("stroke", all_color); colorsG //灰2 .selectAll("g.gray") .attr("stroke", all_color) .append("path") .attr("d", gray2Path.attr("d")) .attr("fill", "none"); colorsG //白 .selectAll("g.white") .attr("fill", "white") .attr("stroke", all_color) .append("circle") .attr("cx", 5) .attr("cy", 3) .attr("r", 3); colorsG //緑 .selectAll("g.green") .attr("fill", "none") .attr("stroke", all_color) .append("rect") .attr("width", 5) .attr("height", 5); colorsG //茶 .selectAll("g.brown") .attr("fill", all_color) .attr("stroke", all_color) .append("rect") .attr("width", 5) .attr("height", 5); colorsG //黒 .selectAll("g.black") .attr("fill", all_color) .attr("stroke", all_color) .append("circle") .attr("cx", 5) .attr("cy", 3) .attr("r", 3); /* svg //text（始まりの時間） .append("g") .selectAll("text") .data(data) .join("text") .attr("x", (d) => xScale(d.startDate.getUTCHours()) - 15) .attr( "y", (d) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 10 ) .text((d) => d.startDate.getUTCHours()) .attr("font-size", "15"); svg //text（終わりの時間） .append("g") .selectAll("text") .data(data) .join("text") .attr("x", (d) => xScale(d.startDate.getUTCHours()) + 5) .attr( "y", (d) => yScale(d.endDate.getUTCDate()) + yScale.bandwidth() / 2 - 10 ) .text((d) => d.endDate.getUTCHours()) .attr("font-size", "15"); */ /* svg //text（食べていた時間） .append("g") .selectAll("text.duration") .data(data) .join("text") .attr("class", "duration") .attr("x", (d) => xScale(d.startDate.getUTCHours()) - 15) .attr( "y", (d) => yScale(d.endDate.getUTCDate()) + yScale.bandwidth() / 2 + 30 ) .text((d) => d.duration) .attr("fill", "blue") .attr("font-size", "15"); svg //text（品数） .append("g") .selectAll("text.numItem") .data(data) .join("text") .attr("class", "numItem") .attr("x", (d) => xScale(d.startDate.getUTCHours()) + 10) .attr( "y", (d) => yScale(d.endDate.getUTCDate()) + yScale.bandwidth() / 2 + 30 ) .text((d) => d.numItem) .attr("fill", "pink") .attr("font-size", "15"); */ return svg.node(); }32:T522,{ const width = 1000 / 2.5; const height = 670 / 2.5; const margin = { top: 20, right: 20, bottom: 25, left: 20 }; const all_color = "dimgray"; const xScale = d3 .scaleLinear() .domain([0, 23]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dates.keys()]) .range([margin.top, height - margin.bottom]); const xAxis = d3 .axisBottom() .scale(xScale) .ticks(23) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .ticks(7) .tickSize(-(width - margin.left - margin.right)); const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "snow"); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis) .attr("font-size", "7"); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis) .attr("font-size", "7") .attr("stroke-dasharray", "2, 3.5"); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", all_color); return svg.node(); }33:T857,{ const width = 400; const height = 100; const x = width / 2; const y = height / 1.7; const svg = d3.create("svg").attr("width", width).attr("height", height); const all_color = "dimgray"; const circle = 8.5; //半円1の半径 const circle_d = 4; //半円1の半径 + circle_d const rect_time_h = 1.5; //時間を表す棒の高さ const rect_time_d = 3; //時間を表す棒と棒の感覚 svg //背景 .append("g") .append("rect") .attr("class", "left") .attr("width", width) .attr("height", height) .attr("fill", "snow"); //.attr("opacity", 0.1); svg //1-1 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", circle) .attr("fill", "none") .attr("stroke", all_color); svg //1-2 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", circle + circle_d) .attr("fill", "none") .attr("stroke", all_color); svg //1-3 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", circle + circle_d * 2) .attr("fill", "none") .attr("stroke", all_color); svg //1-4 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", circle + circle_d * 3) .attr("fill", "none") .attr("stroke", all_color); svg //1-5 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", circle + circle_d * 4) .attr("fill", "none") .attr("stroke", all_color); svg //1-6 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", circle + circle_d * 5) .attr("fill", "none") .attr("stroke", all_color); svg //rect_hide .append("rect") .attr("x", 0) .attr("y", y) .attr("width", width) .attr("height", height / 2) .attr("fill", "snow"); svg //rect .append("rect") .attr("x", width / 2.4) .attr("y", y) .attr("width", width / 6) .attr("height", rect_time_h) .attr("fill", all_color); svg //rect .append("rect") .attr("x", width / 2.4) .attr("y", y + rect_time_d) .attr("width", width / 6) .attr("height", rect_time_h) .attr("fill", all_color); return svg.node(); }34:Tc22,{ const width = 550; const height = 50; const x = width / 4; const y = height / 1.7; const svg = d3.create("svg").attr("width", width).attr("height", height); const all_color = "dimgray"; const circle = 8.5; //半円1の半径 const circle_d = 4; //半円1の半径 + circle_d const rect_time_h = 1.5; //時間を表す棒の高さ const rect_time_d = 3; //時間を表す棒と棒の感覚 svg //背景 .append("g") .append("rect") .attr("class", "left") .attr("width", width) .attr("height", height) .attr("fill", "snow"); const d = [ "white", "yellow", //1 "orange", //2 "red", //3 "pink", //4 "purple", //5 "green", //6 "brown", //7 "black", //8 "gray" //9 ]; const x_1 = (d, i) => 50 + 50 * i; const place = (d, i) => { return `translate(${x_1(d, i)}, 20)`; }; svg //white .append("g") .append("circle") .attr("cx", 50) .attr("cy", 24) .attr("r", 3) .attr("fill", "none") .attr("stroke", all_color); svg //black .append("g") .append("circle") .attr("cx", 50 + 50 * 9) .attr("cy", 24) .attr("r", 3) .attr("fill", all_color) .attr("stroke", all_color); svg //green .append("g") .append("rect") .attr("x", 50 + 50 * 6) .attr("y", 20) .attr("width", 5) .attr("height", 5) .attr("fill", "none") .attr("stroke", all_color); svg //brown .append("g") .append("rect") .attr("x", 50 + 50 * 7) .attr("y", 20) .attr("width", 5) .attr("height", 5) .attr("fill", all_color) .attr("stroke", all_color); svg .append("g") .selectAll("g") .data(d) .join("g") .attr("transform", (d, i) => place(d, i)) .append("path") .attr("d", (d, i) => { if (i == 1 || i == 2) { return yellowPath.attr("d"); } else if (i == 3 || i == 4) { return redPath.attr("d"); } else if (i == 5) { return purplePath.attr("d"); } else if (i == 8) { return gray1Path.attr("d"); } }) .attr("fill", (d, i) => { if (i == 1) { return "snow"; } else if (i == 2) { return all_color; } else if (i == 3) { return "snow"; } else if (i == 4 || i == 5 || i == 8) { return all_color; } }) .attr("stroke", all_color); svg .append("g") .selectAll("g") .data(d) .join("g") .attr("transform", (d, i) => place(d, i)) .append("path") .attr("d", (d, i) => { if (i == 8) { return gray2Path.attr("d"); } }) .attr("fill", (d, i) => { if (i == 8) { return "none"; } }) .attr("stroke", all_color); svg .append("g") .selectAll("g") .data(d) .join("g") .attr("transform", (d, i) => place(d, i)) .append("path") .attr("d", (d, i) => { if (i == 5) { return purple2Path.attr("d"); } }) .attr("fill", (d, i) => { if (i == 5) { return "none"; } }) .attr("stroke", all_color); return svg.node(); }35:Tb17,{ const width = 400; const height = 100; const x = width / 4; const y = height / 1.7; const svg = d3.create("svg").attr("width", width).attr("height", height); const all_color = "dimgray"; const circle = 8.5; //半円1の半径 const circle_d = 4; //半円1の半径 + circle_d const rect_time_h = 1.5; //時間を表す棒の高さ const rect_time_d = 3; //時間を表す棒と棒の感覚 svg //背景 .append("g") .append("rect") .attr("class", "left") .attr("width", width / 2) .attr("height", height) .attr("fill", "snow"); //.attr("opacity", 0.1); svg //背景 .append("g") .append("rect") .attr("class", "left") .attr("x", width / 2) .attr("width", width / 2) .attr("height", height) .attr("fill", "snow"); //.attr("opacity", 0.1); svg //1-1 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", circle) .attr("fill", "none") .attr("stroke", all_color); svg //1-2 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", circle + circle_d) .attr("fill", "none") .attr("stroke", all_color); svg //1-3 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", circle + circle_d * 2) .attr("fill", "none") .attr("stroke", all_color); svg //2-1 .append("circle") .attr("cx", x * 3) .attr("cy", y) .attr("r", circle) .attr("fill", "none") .attr("stroke", all_color) .attr("stroke-dasharray", "1, 1"); svg //2-2 .append("circle") .attr("cx", x * 3) .attr("cy", y) .attr("r", circle + circle_d) .attr("fill", "none") .attr("stroke", all_color) .attr("stroke-dasharray", "1, 1"); svg //2-3 .append("circle") .attr("cx", x * 3) .attr("cy", y) .attr("r", circle + circle_d * 2) .attr("fill", "none") .attr("stroke", all_color) .attr("stroke-dasharray", "1, 1"); svg //rect_hide .append("rect") .attr("x", 0) .attr("y", y) .attr("width", width) .attr("height", height / 2) .attr("fill", "snow"); svg //rect .append("rect") .attr("x", width / 5) .attr("y", y) .attr("width", width / 10) .attr("height", rect_time_h) .attr("fill", all_color); svg //rect .append("rect") .attr("x", width / 5) .attr("y", y + rect_time_d) .attr("width", width / 10) .attr("height", rect_time_h) .attr("fill", all_color); svg //rect_2 .append("rect") .attr("x", (width / 5) * 3.5) .attr("y", y) .attr("width", width / 10) .attr("height", rect_time_h) .attr("fill", all_color); svg //rect_2 .append("rect") .attr("x", (width / 5) * 3.5) .attr("y", y + rect_time_d) .attr("width", width / 10) .attr("height", rect_time_h) .attr("fill", all_color); return svg.node(); }36:T446b,{ const width = 1000; const height = 600; const margin = { top: 3, right: 80, bottom: 15, left: 18 }; const circle = 5; //半円1の半径 const circle_d = 4; //半円1の半径 + circle_d const back = "snow"; //背景色 const all_color = "dimgray"; //記号などの全ての色 const rect_h = circle_d * 8 - circle_d / 2; //半円下を隠すrectの高さ const rect_time_h = 1.5; //時間を表す棒の高さ const rect_time_d = 3; //時間を表す棒と棒の感覚 const xScale = d3 .scaleLinear() .domain([0, 23]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dates.keys()]) .range([margin.top, height - margin.bottom]); const xAxis = d3.axisBottom().scale(xScale).ticks(23); //.tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3.axisLeft().scale(yScale).ticks(7); //.tickSize(-(width - margin.left - margin.right)); const svg = d3.create("svg").attr("width", width).attr("height", height); svg //背景 .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", back); //.attr("opacity", 0.1); /* svg //x軸 .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis) .attr("font-size", "5"); svg //y軸 .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis) .attr("font-size", "5"); */ const circle_mx = (d) => xScale(d.startDate.getUTCHours()); //circleの中心の座標x const circle_my = (d) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2; //circleの中心の座標y //色 const colors = d3.group(data, (d) => d.color); const color = d3 .scaleOrdinal() // 順序尺度のためのスケール関数 .domain(["白", "黄", "橙", "赤", "桃", "紫", "緑", "茶", "黒", "灰"]) // 入力ドメインは、データ内の値の配列 .range([ "white", "yellow", "orange", "red", "pink", "purple", "green", "brown", "black", "gray" ]); const color_h = (d) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 10 - (d.numItem - 1) * circle_d; //color（circle）の y const color_hr = (d) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 10 - (d.numItem - 1) * circle_d - 2.5; //color（rect）の y const color_w = (d) => xScale(d.startDate.getUTCHours()) - 24; //color（white）の x const color_g = (d) => xScale(d.startDate.getUTCHours()) - 24 + 6 * 6; //color（green）の x const color_br = (d) => xScale(d.startDate.getUTCHours()) - 24 + 6 * 7; //color（brown）の x const color_b = (d) => xScale(d.startDate.getUTCHours()) - 24 + 6 * 9 + 2; //color（black）の x svg //1 .selectAll("circle.one") .data(data) .join("circle") .attr("class", "one") .attr("cx", circle_mx) .attr("cy", circle_my) .attr("r", (d) => { if (d.numItem >= 1) { return circle; } }) .attr("fill", "none") .attr("stroke", all_color); svg //2 .selectAll("circle.second") .data(data) .join("circle") .attr("class", "second") .attr("cx", circle_mx) .attr("cy", circle_my) .attr("r", (d) => { if (d.numItem >= 2) { return circle + circle_d; } else { return circle; } }) .attr("fill", "none") .attr("stroke", all_color); svg //3 .selectAll("circle.third") .data(data) .join("circle") .attr("class", "third") .attr("cx", circle_mx) .attr("cy", circle_my) .attr("r", (d) => { if (d.numItem >= 3) { return circle + circle_d * 2; } else { return circle; } }) .attr("fill", "none") .attr("stroke", all_color); svg //4 .selectAll("circle.forth") .data(data) .join("circle") .attr("class", "forth") .attr("cx", circle_mx) .attr("cy", circle_my) .attr("r", (d) => { if (d.numItem >= 4) { return circle + circle_d * 3; } else { return circle; } }) .attr("fill", "none") .attr("stroke", all_color); svg //5 .selectAll("circle.fifth") .data(data) .join("circle") .attr("class", "fifth") .attr("cx", circle_mx) .attr("cy", circle_my) .attr("r", (d) => { if (d.numItem >= 5) { return circle + circle_d * 4; } else { return circle; } }) .attr("fill", "none") .attr("stroke", all_color); svg //6 .selectAll("circle.sisth") .data(data) .join("circle") .attr("class", "sixth") .attr("cx", circle_mx) .attr("cy", circle_my) .attr("r", (d) => { if (d.numItem >= 6) { return circle + circle_d * 5; } else { return circle; } }) .attr("fill", "none") .attr("stroke", all_color); svg //7 .selectAll("circle.seventh") .data(data) .join("circle") .attr("class", "seventh") .attr("cx", circle_mx) .attr("cy", circle_my) .attr("r", (d) => { if (d.numItem >= 7) { return circle + circle_d * 6; } else { return circle; } }) .attr("fill", "none") .attr("stroke", all_color); svg //rect.hide .selectAll("rect.hide") .data(data) .join("rect") .attr("class", "hide") .attr("x", "0") .attr("y", circle_my) .attr("width", width) .attr("height", rect_h) .attr("fill", back); svg //rect.ten（食べていた時間を表す） .selectAll("rect.ten") .data(data) .join("rect") .attr("class", "ten") .attr( "x", (d) => xScale(d.startDate.getUTCHours()) - (circle + circle_d * (d.numItem - 1)) ) .attr("y", (d) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2) .attr("width", (d) => (circle + circle_d * (d.numItem - 1)) * 2) .attr("height", rect_time_h) .attr("fill", all_color); svg //rect.twenty（10以上食べていた時間を表す） .selectAll("rect.twenty") .data(data) .join("rect") .attr("class", "twenty") .attr( "x", (d) => xScale(d.startDate.getUTCHours()) - (circle + circle_d * (d.numItem - 1)) ) .attr("y", (d) => { if (d.duration >= 10) { return ( yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 + rect_time_d ); } else { return yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2; } }) .attr("width", (d) => (circle + circle_d * (d.numItem - 1)) * 2) .attr("height", rect_time_h) .attr("fill", all_color); svg //rect.thirty（20分以上食べていた時間を表す） .selectAll("rect.thirty") .data(data) .join("rect") .attr("class", "thirty") .attr( "x", (d) => xScale(d.startDate.getUTCHours()) - (circle + circle_d * (d.numItem - 1)) ) .attr("y", (d) => { if (d.duration >= 20) { return ( yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 + rect_time_d * 2 ); } else { return yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2; } }) .attr("width", (d) => (circle + circle_d * (d.numItem - 1)) * 2) .attr("height", rect_time_h) .attr("fill", all_color); svg //rect.forty（30分以上食べていた時間を表す） .selectAll("rect.forty") .data(data) .join("rect") .attr("class", "forty") .attr( "x", (d) => xScale(d.startDate.getUTCHours()) - (circle + circle_d * (d.numItem - 1)) ) .attr("y", (d) => { if (d.duration >= 30) { return ( yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 + rect_time_d * 3 ); } else { return yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2; } }) .attr("width", (d) => (circle + circle_d * (d.numItem - 1)) * 2) .attr("height", rect_time_h) .attr("fill", all_color); //colors const yellow = svg //yellow .selectAll("g.yellow") .data(data) .join("g") .attr("class", "yellow") .attr( "transform", (d) => `translate(${xScale(d.startDate.getUTCHours()) - 24 + 3}, ${ yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 13 - (d.numItem - 1) * circle_d })` ) .attr("fill", (d) => { if (color(d.color) == "yellow") { return back; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "yellow") { return all_color; } else { return "none"; } }); yellow.append("path").attr("d", yellowPath.attr("d")); const orange = svg //orange .selectAll("g.orange") .data(data) .join("g") .attr("class", "orange") .attr( "transform", (d) => `translate(${xScale(d.startDate.getUTCHours()) - 24 + 3 + 6}, ${ yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 13 - (d.numItem - 1) * circle_d })` ) .attr("fill", (d) => { if (color(d.color) == "orange") { return all_color; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "orange") { return all_color; } else { return "none"; } }); orange.append("path").attr("d", yellowPath.attr("d")); const red = svg //red .selectAll("g.red") .data(data) .join("g") .attr("class", "red") .attr( "transform", (d) => `translate(${xScale(d.startDate.getUTCHours()) - 24 + 3 + 6 * 2}, ${ yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 13 - (d.numItem - 1) * circle_d })` ) .attr("fill", (d) => { if (color(d.color) == "red") { return back; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "red") { return all_color; } else { return "none"; } }); red.append("path").attr("d", redPath.attr("d")); const pink = svg //pink .selectAll("g.pink") .data(data) .join("g") .attr("class", "pink") .attr( "transform", (d) => `translate(${xScale(d.startDate.getUTCHours()) - 24 + 3 + 6 * 3}, ${ yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 13 - (d.numItem - 1) * circle_d })` ) .attr("fill", (d) => { if (color(d.color) == "pink") { return all_color; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "pink") { return all_color; } else { return "none"; } }); pink.append("path").attr("d", redPath.attr("d")); const purple1 = svg //purple1 .selectAll("g.purple1") .data(data) .join("g") .attr("class", "purple1") .attr( "transform", (d) => `translate(${xScale(d.startDate.getUTCHours()) - 24 + 3 + 6 * 4}, ${ yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 13 - (d.numItem - 1) * circle_d })` ) .attr("fill", (d) => { if (color(d.color) == "purple") { return all_color; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "purple") { return all_color; } else { return "none"; } }); purple1.append("path").attr("d", purplePath.attr("d")); const purple2 = svg //purple1 .selectAll("g.purple2") .data(data) .join("g") .attr("class", "purple2") .attr( "transform", (d) => `translate(${xScale(d.startDate.getUTCHours()) - 24 + 3 + 6 * 4}, ${ yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 13 - (d.numItem - 1) * circle_d })` ) .attr("fill", (d) => { if (color(d.color) == "purple") { return back; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "purple") { return all_color; } else { return "none"; } }); purple2.append("path").attr("d", purple2Path.attr("d")); const gray1 = svg //gray1 .selectAll("g.gray1") .data(data) .join("g") .attr("class", "gray1") .attr( "transform", (d) => `translate(${xScale(d.startDate.getUTCHours()) - 24 + 6 * 8 - 1}, ${ yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 13 - (d.numItem - 1) * circle_d })` ) .attr("fill", (d) => { if (color(d.color) == "gray") { return all_color; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "gray") { return all_color; } else { return "none"; } }); gray1.append("path").attr("d", gray1Path.attr("d")); const gray2 = svg //gray2 .selectAll("g.gray2") .data(data) .join("g") .attr("class", "gray2") .attr( "transform", (d) => `translate(${xScale(d.startDate.getUTCHours()) - 24 + 6 * 8 - 1}, ${ yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 13 - (d.numItem - 1) * circle_d })` ) .attr("fill", (d) => { if (color(d.color) == "gray") { return back; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "gray") { return all_color; } else { return "none"; } }); gray2.append("path").attr("d", gray2Path.attr("d")); svg //white .selectAll("circle.white") .data(data) .join("circle") .attr("class", "white") .attr("cx", color_w) .attr("cy", color_h) .attr("r", 3) .attr("fill", (d) => { if (color(d.color) == "white") { return back; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "white") { return all_color; } else { return "none"; } }); svg //green .selectAll("rect.green") .data(data) .join("rect") .attr("class", "green") .attr("x", color_g) .attr("y", color_hr) .attr("width", 5) .attr("height", 5) .attr("fill", (d) => { if (color(d.color) == "green") { return back; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "green") { return all_color; } else { return "none"; } }); svg //brown .selectAll("rect.brown") .data(data) .join("rect") .attr("class", "brown") .attr("x", color_br) .attr("y", color_hr) .attr("width", 5) .attr("height", 5) .attr("fill", (d) => { if (color(d.color) == "brown") { return all_color; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "brown") { return all_color; } else { return "none"; } }); svg //black .selectAll("circle.black") .data(data) .join("circle") .attr("class", "black") .attr("cx", color_b) .attr("cy", color_h) .attr("r", 3) .attr("fill", (d) => { if (color(d.color) == "black") { return all_color; } else { return "none"; } }) .attr("stroke", (d) => { if (color(d.color) == "black") { return all_color; } else { return "none"; } }); /* svg //text（始まりの時間） .append("g") .selectAll("text") .data(data) .join("text") .attr("x", (d) => xScale(d.startDate.getUTCHours()) - 15) .attr( "y", (d) => yScale(d.startDate.getUTCDate()) + yScale.bandwidth() / 2 - 10 ) .text((d) => d.startDate.getUTCHours()) .attr("font-size", "15"); svg //text（終わりの時間） .append("g") .selectAll("text") .data(data) .join("text") .attr("x", (d) => xScale(d.startDate.getUTCHours()) + 5) .attr( "y", (d) => yScale(d.endDate.getUTCDate()) + yScale.bandwidth() / 2 - 10 ) .text((d) => d.endDate.getUTCHours()) .attr("font-size", "15"); */ /* svg //text（食べていた時間） .append("g") .selectAll("text.duration") .data(data) .join("text") .attr("class", "duration") .attr("x", (d) => xScale(d.startDate.getUTCHours()) - 15) .attr( "y", (d) => yScale(d.endDate.getUTCDate()) + yScale.bandwidth() / 2 + 30 ) .text((d) => d.duration) .attr("fill", "blue") .attr("font-size", "15"); svg //text（品数） .append("g") .selectAll("text.numItem") .data(data) .join("text") .attr("class", "numItem") .attr("x", (d) => xScale(d.startDate.getUTCHours()) + 10) .attr( "y", (d) => yScale(d.endDate.getUTCDate()) + yScale.bandwidth() / 2 + 30 ) .text((d) => d.numItem) .attr("fill", "pink") .attr("font-size", "15"); */ return svg.node(); }37:[{"id":"5852f620c8d3c634ea2fa28138f8df7dd01a9c9d54709fd236c55dd7013462c83168f5b7658932d483ae3d4e593ed7cc9d4dd79cd5b58c2e33ffdc30bdd4960f","href":"https://static.observableusercontent.com/files/5852f620c8d3c634ea2fa28138f8df7dd01a9c9d54709fd236c55dd7013462c83168f5b7658932d483ae3d4e593ed7cc9d4dd79cd5b58c2e33ffdc30bdd4960f","name":"スクリーンショット 2021-11-23 22@1.54.04.png","type":"image/png","lastModified":1637675808860.511,"size":183588},{"id":"146bb2f54c1be693a135db3a6445940c369d59fce0c1afe67b8e0fdca87195135bbcfe145b1d2f7e10567e42080660f1eeca82b8e249b3738aacdb2e76951b72","href":"https://static.observableusercontent.com/files/146bb2f54c1be693a135db3a6445940c369d59fce0c1afe67b8e0fdca87195135bbcfe145b1d2f7e10567e42080660f1eeca82b8e249b3738aacdb2e76951b72","name":"スクリーンショット 2021-11-23 22.54.11.png","type":"image/png","lastModified":1637675819263.941,"size":215364},{"id":"a09b9257eef8113b485c9f526a0e7527d1716a318a86eab7ab1e3de86e5d8f5baab0c3513e683ad88fbb1c740c122d3b486e57fa567767f45e139cf9ee82662f","href":"https://static.observableusercontent.com/files/a09b9257eef8113b485c9f526a0e7527d1716a318a86eab7ab1e3de86e5d8f5baab0c3513e683ad88fbb1c740c122d3b486e57fa567767f45e139cf9ee82662f","name":"スクリーンショット 2021-11-26 0.17.43.png","type":"image/png","lastModified":1637853485122.111,"size":83840},{"id":"559f198422d3867f0e72592e56ffc748c0be63df29bbe8908b46d9c0d3391ac31ee7b665c75b1ea0a39a381e40456502e63d922aa8d9fe5cb206ebd8a4db6d9f","href":"https://static.observableusercontent.com/files/559f198422d3867f0e72592e56ffc748c0be63df29bbe8908b46d9c0d3391ac31ee7b665c75b1ea0a39a381e40456502e63d922aa8d9fe5cb206ebd8a4db6d9f","name":"nishimori.jpg","type":"image/jpeg","lastModified":1637903412454.346,"size":175877},{"id":"ae7cad6201cad9c090275c3b3c117eb38a0dc96793a351fd7b78d04f1b2c34a5940dddff3ecda0683ab7d266bc8892469d11241332f0bea07f6229b9cb273523","href":"https://static.observableusercontent.com/files/ae7cad6201cad9c090275c3b3c117eb38a0dc96793a351fd7b78d04f1b2c34a5940dddff3ecda0683ab7d266bc8892469d11241332f0bea07f6229b9cb273523","name":"nishimori-legend@1.jpg","type":"image/jpeg","lastModified":1637903438858.677,"size":190612}] 2f:{"title":"私の食生活","cells":[{"id":0,"value":"# 私の食生活","pinned":false,"hidden":false,"mode":"md"},{"id":1739,"value":"2021年10月9日〜2021年10月15日までの1週間の食事の記録です。
\n一つ一つの記号の記号のかたまりが、1食事を表します。","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"viewof name = Inputs.select(names, { label: \"名前\", value: \"西森\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1732,"value":"***\n### 読み方\n縦軸：日にち（2021年10月9日〜2021年10月15日）
\n横軸：時間
\n###### 注意　12時15分に食事と 12時55分の食事は、同じ場所に表示されます","pinned":false,"hidden":false,"mode":"md"},{"id":2269,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1756,"value":"***\n### 食べていた時間　　　　　　品数\n\n横棒の本数（1本 10分以内）　　　円周の本数（1本 1品）
\n\n###### 例
\n###### 食べていた時間　...　20分以内　　　　　　　　　品数　...　6品","pinned":false,"hidden":false,"mode":"md"},{"id":1918,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1750,"value":"***\n### 食事に含まれていた色
","pinned":false,"hidden":false,"mode":"md"},{"id":2163,"value":"　　白　　黄　　橙　　赤　　桃　　紫　　緑　　茶　　灰　　黒","pinned":false,"hidden":false,"mode":"md"},{"id":2013,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2342,"value":"###### 　　上記に当てはまらない色は、近い色の記号で代替されます","pinned":false,"hidden":false,"mode":"md"},{"id":2066,"value":"***\n### 食事の種類
\n円周の線　実線　...　主食
\n　　　　　点線　...　間食\n###### 例\n###### 右　...　主食　　　　　　　　　　　　左　...　間食\n###### データがない場合はすべて実線になります","pinned":false,"hidden":false,"mode":"md"},{"id":2045,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1779,"value":"***\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"https://observablehq.com/@sugi2000lab/2021-dataviz-8","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import { names, getData, allColors } from \"@sugi2000lab/2021-class-import-tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"(await getData(\"杉本\")).map((d) => ({ ...d, location: d.場所 }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"data = getData(name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"dates = d3.group(data, (d) => d.startDate.getUTCDate())","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"duration = d3.group(data, (d) => d.duration)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1855,"value":"colors = d3.group(data, (d) => d.color)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1871,"value":"color = d3\n .scaleOrdinal() // 順序尺度のためのスケール関数\n .domain([\n \"白\",\n \"透明\",\n \"黄\",\n \"うす黄\",\n \"薄黄\",\n \"橙\",\n \"オレンジ\",\n \"うすオレンジ\",\n \"赤\",\n \"桃\",\n \"ピンク\",\n \"紫\",\n \"うす紫\",\n \"緑\",\n \"うす緑\",\n \"薄緑\",\n \"黄緑\",\n \"うす黄緑\",\n \"茶\",\n \"うす茶\",\n \"栗\",\n \"黄土\",\n \"薄茶\",\n \"薄い茶\",\n \"黒\",\n \"灰\"\n ]) // 入力ドメインは、データ内の値の配列\n .range([\n \"white\",\n \"white\",\n \"yellow\",\n \"yellow\",\n \"yellow\",\n \"orange\",\n \"orange\",\n \"orange\",\n \"red\",\n \"pink\",\n \"pink\",\n \"purple\",\n \"purple\",\n \"green\",\n \"green\",\n \"green\",\n \"green\",\n \"green\",\n \"brown\",\n \"brown\",\n \"brown\",\n \"brown\",\n \"brown\",\n \"brown\",\n \"black\",\n \"gray\"\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"yellow1 = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"yellowPath = d3.select(yellow1).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"red1 = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"redPath = d3.select(red1).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"purple1 = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"purplePath = d3.select(purple1).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"purple2 = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"purple2Path = d3.select(purple2).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"gray1 = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"gray2 = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"gray1Path = d3.select(gray1).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"gray2Path = d3.select(gray2).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", 10);\n\n // 10個のグループ要素を生成　X座標、色、透明度を指定\n const g = svg\n .selectAll(\"g\")\n .data(d3.range(1))\n .join(\"g\")\n .attr(\"transform\", (d) => `translate(${d * 75}, 0)`);\n\n // グループ要素にpath要素を追加し、d属性にheartPathのd属性を指定\n g.append(\"path\").attr(\"d\", gray1Path.attr(\"d\"));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", 10);\n\n // 10個のグループ要素を生成　X座標、色、透明度を指定\n const g = svg\n .selectAll(\"g\")\n .data(d3.range(1))\n .join(\"g\")\n .attr(\"transform\", (d) => `translate(${d * 75}, 0)`);\n\n // グループ要素にpath要素を追加し、d属性にheartPathのd属性を指定\n g.append(\"path\").attr(\"d\", yellowPath.attr(\"d\"));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1811,"value":"完成前試作1","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}