31:T275d,{ const width = 800; const height = 400; const margin = { top: 30, right: 30, bottom: 30, left: 30 }; const dataWithDay = data.map((d) => ({ day: new Date( d.startDate.getUTCFullYear(), d.startDate.getUTCMonth(), d.startDate.getUTCDate() ).getTime(), time: (d.startDate.getUTCHours() * 60 + d.startDate.getUTCMinutes()) * 60 * 1000, ...d })); const dates = d3.group(dataWithDay, (d) => d.day); const xScale = d3 .scaleBand() .domain([...dates.keys()]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleUtc() .domain([0, 24 * 60 * 60 * 1000]) .range([margin.top, height - margin.bottom]); const svg = d3.create("svg").attr("width", width).attr("height", height); //背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eee9e6") .attr("opacity", 0.4); //品数分ピンクの縦線 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])) ]) ); const line_x = (d) => xScale( new Date( d.startDate.getUTCFullYear(), d.startDate.getUTCMonth(), d.startDate.getUTCDate() ).getTime() ) + xScale.bandwidth() / 2; //ピンクの線のx方向の位置補正関数 const line_x_i = (d, i, nodes) => { if (d3.select(nodes[i].parentNode).datum()[1].length == 1) { return 0; } else if (d3.select(nodes[i].parentNode).datum()[1].length == 2) { return (i - 1) * 10 + 5; } else if (d3.select(nodes[i].parentNode).datum()[1].length == 3) { return (i - 1) * 10; } else if (d3.select(nodes[i].parentNode).datum()[1].length == 4) { return (i - 2) * 10 + 5; } else if (d3.select(nodes[i].parentNode).datum()[1].length == 5) { return (i - 2) * 10; } else if (d3.select(nodes[i].parentNode).datum()[1].length == 6) { return (i - 3) * 10 + 5; } }; const line_y1 = (d) => yScale( (d.startDate.getUTCHours() * 60 + d.startDate.getUTCMinutes()) * 60 * 1000 ); const line_y2 = (d, i, nodes) => { if (nodes[i].parentNode.nextSibling) { //一個上の階層の次のデータが存在する場合 const nextData = d3 .select(nodes[i].parentNode.nextSibling) //親要素の次のデータを選択 .datum()[1][0]; //そのデータに関連づけられたデータ（子要素）を取得 if (d.startDate.getUTCDate() !== nextData.startDate.getUTCDate()) { // if not same day return height - margin.bottom; } else { return line_y1(nextData); } } else { //次のデータが存在しない場合 return height - margin.bottom; } }; //ピンクの線の描画 svg .append("g") .selectAll("g") .data(dataSpreadByNumItems) .join("g") .selectAll("line") .data((d) => d[1]) .join("line") .attr("x1", (d, i, nodes) => line_x(d) + line_x_i(d, i, nodes)) .attr("x2", (d, i, nodes) => line_x(d) + line_x_i(d, i, nodes)) .attr("y1", line_y1) .attr("y2", (d, i, nodes) => line_y2(d, i, nodes)) .attr("stroke-width", 2.2) // 線の太さ .attr("stroke", "#f5b2ac") // 線の色 .attr("stroke-linecap", "round"); //翌日の一番上から始まるピンクの線 const line_x_nextday = (d, i, nodes) => { if (nodes[i].parentNode.nextSibling) { //一個上の階層の次のデータが存在する場合 const nextData = d3 .select(nodes[i].parentNode.nextSibling) //親要素の次のデータを選択 .datum()[1][0]; //そのデータに関連づけられたデータ（子要素）を取得 if (d.startDate.getUTCDate() !== nextData.startDate.getUTCDate()) { // if not same day return line_x(nextData); } else { return line_x(d); } } else { //次のデータが存在しない場合 return line_x(d); } }; const line_y1_nextday = (d, i, nodes) => { if (nodes[i].parentNode.nextSibling) { //一個上の階層の次のデータが存在する場合 const nextData = d3 .select(nodes[i].parentNode.nextSibling) //親要素の次のデータを選択 .datum()[1][0]; //そのデータに関連づけられたデータ（子要素）を取得 if (d.startDate.getUTCDate() !== nextData.startDate.getUTCDate()) { // if not same day return margin.top; } else { return line_y1(d); } } else { //次のデータが存在しない場合 return line_y1(d); } }; const line_y2_nextday = (d, i, nodes) => { if (nodes[i].parentNode.nextSibling) { //一個上の階層の次のデータが存在する場合 const nextData = d3 .select(nodes[i].parentNode.nextSibling) //親要素の次のデータを選択 .datum()[1][0]; //そのデータに関連づけられたデータ（子要素）を取得 if (d.startDate.getUTCDate() !== nextData.startDate.getUTCDate()) { // if not same day return line_y1(nextData); } else { return line_y1(d); } } else { //次のデータが存在しない場合 return line_y1(d); } }; //翌日の一番上から始まるピンクの線の描画 svg .append("g") .selectAll("g") .data(dataSpreadByNumItems) .join("g") .selectAll("line") .data((d) => d[1]) .join("line") .attr( "x1", (d, i, nodes) => line_x_nextday(d, i, nodes) + line_x_i(d, i, nodes) ) .attr( "x2", (d, i, nodes) => line_x_nextday(d, i, nodes) + line_x_i(d, i, nodes) ) .attr("y1", (d, i, nodes) => line_y1_nextday(d, i, nodes)) .attr("y2", (d, i, nodes) => line_y2_nextday(d, i, nodes)) .attr("stroke-width", 2.2) // 線の太さ .attr("stroke", "#f5b2ac") // 線の色 .attr("stroke-linecap", "round"); //オレンジの図形 //位置補正関数 const orange_arrange = (d) => { if (d.colors.length == 1) { return `translate(${xScale(d.day) + xScale.bandwidth() / 2 - 6},${ yScale(d.time) - 13 })`; } else if (d.colors.length == 2) { return `translate(${xScale(d.day) + xScale.bandwidth() / 2 - 6},${ yScale(d.time) - 6 })`; } else if (d.colors.length == 3) { return `translate(${xScale(d.day) + xScale.bandwidth() / 2 - 6},${ yScale(d.time) - 16 })`; } else if (d.colors.length >= 4) { return `translate(${xScale(d.day) + xScale.bandwidth() / 2 - 13},${ yScale(d.time) - 14.5 })`; } }; const g = svg .append("g") .selectAll("g") .data(dataWithDay) .join("g") .attr("transform", orange_arrange) .attr("fill", "#f39700"); //オレンジの図形の描画 g.append("path").attr("d", (d) => { if (d.colors.length == 1) { return ichiPath.attr("d"); } else if (d.colors.length == 2) { return niPath.attr("d"); } else if (d.colors.length == 3) { return sanPath.attr("d"); } else if (d.colors.length >= 4) { return yonPath.attr("d"); } }); //横線(破線) //食べている時間に応じて線の長さを変える関数 const line_length_x1 = (d) => { if (d.duration >= 0 && d.duration <= 5) { return xScale(d.day) + xScale.bandwidth() / 2 - 8.5; } else if (d.duration >= 6 && d.duration <= 10) { return xScale(d.day) + xScale.bandwidth() / 2 - 20; } else if (d.duration >= 11 && d.duration <= 15) { return xScale(d.day) + xScale.bandwidth() / 2 - 31.5; } else { return xScale(d.day) + xScale.bandwidth() / 2 - 43; } }; const line_length_x2 = (d) => { if (d.duration >= 0 && d.duration <= 5) { return xScale(d.day) + xScale.bandwidth() / 2 + 8.5; } else if (d.duration >= 6 && d.duration <= 10) { return xScale(d.day) + xScale.bandwidth() / 2 + 20; } else if (d.duration >= 11 && d.duration <= 15) { return xScale(d.day) + xScale.bandwidth() / 2 + 31.5; } else { return xScale(d.day) + xScale.bandwidth() / 2 + 43; } }; //横線(破線)の描画 svg .append("g") .selectAll("line") .data(dataWithDay) .join("line") .attr("x1", line_length_x1) .attr("x2", line_length_x2) .attr("y1", (d) => yScale(d.time)) .attr("y2", (d) => yScale(d.time)) .attr("stroke-width", 2.2) //線の太さ .attr("stroke", (d) => { if (d.朝昼晩間食 == "朝") { return "#3eb370"; //緑 } else if (d.朝昼晩間食 == "昼") { return "#fbca4d"; //黄色 } else if (d.朝昼晩間食 == "晩") { return "#4d5aaf"; //青 } else if (d.朝昼晩間食 == "間") { return "#ff6347"; //赤 } else { return "#8fbc8f"; //緑 } }) //線の色 .attr("stroke-dasharray", "17, 6") .attr("stroke-linecap", "round"); //軸、メモリ // const dow = (d) => "土日月火水木金"[new Date(d).getDay()]; // const xAxis = d3 // .axisBottom() // .scale(xScale) // .ticks(7) // .tickFormat((d) => d3.utcFormat(`%Y年%m月%d日`)(d) + ` (${dow(d)})`) // .tickSize(-(height - margin.top - margin.bottom)); // const yAxis = d3 // .axisLeft() // .scale(yScale) // .ticks(10) // .tickFormat(d3.utcFormat("%H:%M")) // .tickSize(-(width - margin.left - margin.right)); // 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); // svg // .selectAll("g.xAxis, g.yAxis") // .selectAll("line, path") // .attr("stroke", "white") // .attr("opacity", 0.5); return svg.node(); }32:T7b5,{ const width = 400; const height = 200; const margin = { top: 30, right: 30, bottom: 30, left: 40 }; const dataWithDay = data.map((d) => ({ day: new Date( d.startDate.getUTCFullYear(), d.startDate.getUTCMonth(), d.startDate.getUTCDate() ).getTime(), time: (d.startDate.getUTCHours() * 60 + d.startDate.getUTCMinutes()) * 60 * 1000, ...d })); const dates = d3.group(dataWithDay, (d) => d.day); const xScale = d3 .scaleBand() .domain([...dates.keys()]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleUtc() .domain([0, 24 * 60 * 60 * 1000]) .range([margin.top, height - margin.bottom]); const svg = d3.create("svg").attr("width", width).attr("height", height); //背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eee9e6") .attr("opacity", 0.4); //メモリ const xAxis = d3 .axisBottom() .scale(xScale) .ticks(7) .tickFormat((d, i) => `${i + 1}日目`) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .ticks(4) .tickFormat(d3.utcFormat("%H:%M")) .tickSize(0); 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); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "black") .attr("opacity", 0.1); //メモリの外枠 svg .append("g") .append("rect") .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("x", margin.left) .attr("y", margin.top) .attr("fill", "rgba(1,1,1,0)") .attr("stroke", "black") .attr("opacity", 0.4); return svg.node(); }33:T601,{ const width = 400; const height = 155; const svg = d3.create("svg").attr("width", width).attr("height", height); //背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eee9e6") .attr("opacity", 0.4); const d = ["0 ~ 5分", "6 ~ 10分", "11 ~ 15分", "16分 ~"]; //横線(破線) const x1 = (d, i) => { if (i == 0) { return 250 - 8.5; } else if (i == 1) { return 250 - 20; } else if (i == 2) { return 250 - 31.5; } else { return 250 - 43; } }; const x2 = (d, i) => { if (i == 0) { return 250 + 8.5; } else if (i == 1) { return 250 + 20; } else if (i == 2) { return 250 + 31.5; } else { return 250 + 43; } }; const y = (d, i) => 40 + 25 * i; //横線(破線)の描画 svg .append("g") .selectAll("line") .data(d) .join("line") .attr("x1", (d, i) => x1(d, i)) .attr("x2", (d, i) => x2(d, i)) .attr("y1", (d, i) => y(d, i)) .attr("y2", (d, i) => y(d, i)) .attr("stroke-width", 2.2) //線の太さ .attr("stroke", "#00ac97") //線の色 .attr("stroke-dasharray", "17, 6") .attr("stroke-linecap", "round"); //テキスト svg .selectAll("text") .data(d) .join("text") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("fill", "black") .attr("text-anchor", "middle") .attr("x", 110) .attr("y", (d, i) => 5 + y(d, i)) .text((d) => d); return svg.node(); }34:T586,{ const width = 400; const height = 180; const svg = d3.create("svg").attr("width", width).attr("height", height); //背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eee9e6") .attr("opacity", 0.4); const d = ["朝食", "昼食", "夕食", "間食", "データなし"]; //横線(破線) const y = (d, i) => 40 + 25 * i; //横線(破線)の描画 svg .append("g") .selectAll("line") .data(d) .join("line") .attr("x1", 230) .attr("x2", 270) .attr("y1", (d, i) => y(d, i)) .attr("y2", (d, i) => y(d, i)) .attr("stroke-width", 2.2) //線の太さ .attr("stroke", (d) => { if (d == "朝食") { return "#3eb370"; //緑 } else if (d == "昼食") { return "#fbca4d"; //黄色 } else if (d == "夕食") { return "#4d5aaf"; //青 } else if (d == "間食") { return "#ff6347"; //赤 } else { return "#8fbc8f"; //抹茶 } }) //線の色 .attr("stroke-dasharray", "17, 6") .attr("stroke-linecap", "round"); //テキスト svg .selectAll("text") .data(d) .join("text") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("fill", "black") .attr("text-anchor", "middle") .attr("x", 110) .attr("y", (d, i) => 5 + y(d, i)) .text((d) => d); return svg.node(); }35:T615,{ const width = 400; const height = 200; const svg = d3.create("svg").attr("width", width).attr("height", height); //背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eee9e6") .attr("opacity", 0.4); const d = ["1色", "2色", "3色", "4色以上(カラフル)"]; const y = (d, i) => 40 + 40 * i; //オレンジの図形の描画 //位置補正関数 const orange_arrange = (d, i) => { if (i == 0) { return `translate(${250 - 6}, ${y(d, i) - 11})`; } else if (i == 1) { return `translate(${250 - 6}, ${y(d, i) - 11})`; } else if (i == 2) { return `translate(${250 - 6}, ${y(d, i) - 20})`; } else if (i == 3) { return `translate(${250 - 13}, ${y(d, i) - 11.5})`; } }; svg .append("g") .selectAll("g") .data(d) .join("g") .attr("transform", (d, i) => orange_arrange(d, i)) .attr("fill", "#f39700") .append("path") .attr("d", (d, i) => { if (i == 0) { return ichiPath.attr("d"); } else if (i == 1) { return niPath.attr("d"); } else if (i == 2) { return sanPath.attr("d"); } else if (i == 3) { return yonPath.attr("d"); } }); //テキスト svg .selectAll("text") .data(d) .join("text") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("fill", "black") .attr("text-anchor", "middle") .attr("x", 110) .attr("y", (d, i) => y(d, i)) .text((d) => d); return svg.node(); }36:T924,{ const width = 400; const height = 140; const svg = d3.create("svg").attr("width", width).attr("height", height); //背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eee9e6") .attr("opacity", 0.4); const d = ["up", "down"]; //ピンクの線 const data = [1, 1, 1, 1, 1]; //3本分 svg .append("g") .selectAll("line") .data(data) .join("line") .attr("x1", (d, i) => (i - 2) * 10 + 250) .attr("x2", (d, i) => (i - 2) * 10 + 250) .attr("y1", 40) .attr("y2", 100) .attr("stroke-width", 2.2) // 線の太さ .attr("stroke", "#f5b2ac") // 線の色 .attr("stroke-linecap", "round"); const y = (d, i) => 40 + 60 * i; const orange_arrange = (d, i) => { if (i == 0) { return `translate(${250 - 6}, ${y(d, i) - 13})`; } else if (i == 1) { return `translate(${250 - 6}, ${y(d, i) - 6})`; } }; svg .append("g") .selectAll("g") .data(d) .join("g") .attr("transform", (d, i) => orange_arrange(d, i)) .attr("fill", "#f39700") .append("path") .attr("d", (d, i) => { if (i == 0) { return ichiPath.attr("d"); } else if (i == 1) { return niPath.attr("d"); } }); //横線(破線) const x1 = (d, i) => { if (i == 0) { return 250 - 31.5; } else if (i == 1) { return 250 - 43; } }; const x2 = (d, i) => { if (i == 0) { return 250 + 31.5; } else if (i == 1) { return 250 + 43; } }; //横線(破線)の描画 svg .append("g") .selectAll("line") .data(d) .join("line") .attr("x1", (d, i) => x1(d, i)) .attr("x2", (d, i) => x2(d, i)) .attr("y1", (d, i) => y(d, i)) .attr("y2", (d, i) => y(d, i)) .attr("stroke-width", 2.2) //線の太さ .attr("stroke", (d, i) => { if (i == 0) { return "#3eb370"; } else { return "#fbca4d"; } }) //線の色 .attr("stroke-dasharray", "17, 6") .attr("stroke-linecap", "round"); //テキスト svg; svg .append("text") .attr("x", 110) .attr("y", height / 2) .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("fill", "black") .attr("text-anchor", "middle") .text("ex) 品数5"); return svg.node(); }37:[] 2f:{"title":"Our Seven-day Meal","cells":[{"id":0,"value":"# Our Seven-day Meal","pinned":false,"hidden":false,"mode":"md"},{"id":893,"value":"##### ７日間の食事のデータをビジュアライズ化しました。","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"viewof name = Inputs.select(names, { label: \"Name\", value: \"米田\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":799,"value":"# How to read","pinned":false,"hidden":false,"mode":"md"},{"id":860,"value":"**食事の開始時刻**にデータがプロットされます。
\n 縦軸：**時間** / 横軸：**日**","pinned":false,"hidden":false,"mode":"md"},{"id":803,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"**食べていた時間 ▷ 破線の長さ**","pinned":false,"hidden":false,"mode":"md"},{"id":912,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"**食事の種類 ▷ 破線の色**","pinned":false,"hidden":false,"mode":"md"},{"id":967,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"**食事に使われた色の数 ▷ 図形の形**","pinned":false,"hidden":false,"mode":"md"},{"id":987,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"**品数 ▷ 縦線の本数**","pinned":false,"hidden":false,"mode":"md"},{"id":1027,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"##### 以上です。","pinned":false,"hidden":false,"mode":"md"},{"id":1104,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"import { names, getData } from \"@sugi2000lab/2021-class-import-tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"data = getData(name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"ichi = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"ichiPath = d3.select(ichi).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"ni = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"niPath = d3.select(ni).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"san = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"sanPath = d3.select(san).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"yon = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"yonPath = d3.select(yon).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}