2f:T161a,nagakuboChart = (data) => { //function myChart(data){ //一行目と同じ意味 const small = 1; const dataOfDatesTimes = getDataOfDatesTimes(data); const n = 50 * small; const m = 75 * small; const height = m * 7 + 100; const margin = { top: 50, right: 0, bottom: 50, left: 0 }; //中央配置にする------------------------------------------------------ // ... let maxCount = 0; let maxDate; let maxMorningCount = 0; let maxAfternoonCount = 0; // 各日付について反復処理 dataOfDatesTimes.forEach((dateData, date) => { let morningCount = 0; // 午前のエントリー数を初期化 let afternoonCount = 0; // 午後のエントリー数を初期化 // 各時間帯のエントリー数を計算 dateData.forEach((timeData, time) => { const arrayCount = timeData.length; // 午前（time === 0）と午後（time === 1）のエントリー数を加算 if (time === 0) { morningCount += arrayCount; } else if (time === 1) { afternoonCount += arrayCount; } }); // 現在の日付がより多くのエントリを午前と午後それぞれで持つ場合、maxCountとmaxDateを更新 if (morningCount > maxMorningCount) { maxMorningCount = morningCount; } if (afternoonCount > maxAfternoonCount) { maxAfternoonCount = afternoonCount; } const totalCount = morningCount + afternoonCount; if (totalCount > maxCount) { maxCount = totalCount; maxDate = date; } }); // 一週間のうちの午前と午後の最大値の合計を計算 const maxCountOfWeek = maxMorningCount + maxAfternoonCount; // zurasu を計算 const zurasu = (maxCountOfWeek / 2 - maxMorningCount) * 50; // widthをmaxCountOfWeek * 50に設定 //const width = maxCountOfWeek * 50; console.log( `エントリー数: ${maxCountOfWeek}, 午前の最大値: ${maxMorningCount}, 午後の最大値: ${maxAfternoonCount},zurasu: ${zurasu},${width}` ); //------------------------------------------------------ const widthScale = d3 .scaleBand() .domain([0, width]) .range([0, maxCountOfWeek * 50]); 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 svg = d3.create("svg").attr("width", width).attr("height", height); //.attr("transform", `scale(${small})`); const dayG = svg .append("g") .selectAll("g") .data(dataOfDatesTimes) .join("g") .attr("class", "day") .attr( "transform", (d) => `translate(0, ${yScale(d[0]) + yScale.bandwidth() / 2})` ); // 垂直軸の原点を移動しておく const timeG = dayG .selectAll("g.time") .data((d) => d[1]) .join("g") .attr("class", "time") .attr("transform", (d) => `translate(${xScale(d[0])}, 0)`); // time0に対するtransform const time0Transform = (d, i) => `translate(${width / 2 - zurasu - i * n - n}, -50)`; // time1に対するtransform const time1Transform = (d, i) => `translate(${margin.left + i * n - zurasu}, -50)`; const blockG = timeG .selectAll("g") .data((d) => d[1]) // データの値（配列）をバインドする .join("g") .attr("transform", (d, i) => { let initialTransform = d.time === 0 ? time0Transform(d, i) : time1Transform(d, i); return `${initialTransform} scale(${small})`; }); blockG .append("rect") .attr("width", 50) .attr("height", 75) .attr("fill", (d) => temperatureColor(d.temperature)) .attr("opacity", 0.25); // white const drinkBlank = d3 .scaleOrdinal() .domain([ "水", "茶", "麦茶", "緑茶", "紅茶", "ほうじ茶", "炭酸", "ジュース", "酒" ]) .range([ "0,0 25,0 0,75", "0,0 0,75 25,75", "0,0 0,75 25,75", "0,0 0,75 25,75", "0,0 0,75 25,75", "0,0 0,75 25,75", "0,37.5 25,0 0,0 0,75 25,75 0,37.5", "25,37.5 0,0 0,75", "0,37.5 25,0 0,0 0,75 25,75 25,37.5 0,75" ]) .unknown("0 0"); blockG .append("polygon") .attr("points", (d) => drinkBlank(d.drink)) .attr("fill", "white"); const vesselBlank = d3 .scaleOrdinal() .domain(["コップ", "水筒", "ペットボトル", "グラス", "紙パック"]) .range([ "50,0 25,75 50,75", "25,0 50,75 50,0", "25,37.5 50,0 50,75", "50,37.5 25,0 50,0 50,75 25,75 50,37.5", "25,37.5 50,0 25,0 25,75 50,75 50,37.5 25,75" ]) .unknown("25,0 25,75 50,75 50,0 "); blockG .append("polygon") .attr("points", (d) => vesselBlank(d.vessel)) .attr("fill", "white"); blockG .append("path") .attr("d", (d) => drinkPath(d.drink)) .attr("stroke", "#000") .attr("stroke-width", 2); // vessel line blockG .append("path") .attr("d", (d) => vesselPath(d.vessel)) .attr("stroke", "#000") .attr("stroke-width", 2); //三角 svg .append("text") .data("▼") .join("text") .attr("x", width / 2 - zurasu * small) .attr("y", 30 * small) .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("fill", "black") .text((d) => d); svg .append("text") .data("▼") .join("text") .attr("x", width / 2 - zurasu * small) .attr("y", m * 7 + 70 * small) .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("fill", "black") .text((d) => d); return svg.node(); }30:Tdc6,nagakuboChart3 = (data) => { //function myChart(data){ //一行目と同じ意味 const dataOfDates = getDataOfDates(data); const n = 50; const m = 75; // const height = width * 150 / 215; const height = m * 7 + 100; const margin = { top: 50, right: 30, bottom: 50, left: 30 }; const xScale = d3 .scaleBand() .domain([0, d3.max(dataOfDates, (d) => d.length)]) // 各日付ごとのデータ数の最大値を取得 .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dataOfDates.keys()]) .range([margin.top, height - margin.bottom]); const svg = d3.create("svg").attr("width", width).attr("height", height); // 日付グループ const dayG = svg .append("g") .selectAll("g") .data(dataOfDates) .join("g") .attr("class", "day") .attr( "transform", (d) => `translate(0, ${yScale(d[0]) + yScale.bandwidth() / 2})` ); // 垂直軸の原点を移動しておく // ブロックグループ（四角を線を入れるグループ） const blockG = dayG .selectAll("g") .data((d) => d[1]) // データの値（配列）をバインドする .join("g") .attr("transform", (d, i) => `translate(${margin.left + i * 50}, -50)`); // 単純に101pxずつ右にずらしている blockG .append("rect") .attr("width", n) .attr("height", m) .attr("fill", (d) => temperatureColor(d.temperature)) .attr("opacity", 0.25); // white const drinkBlank = d3 .scaleOrdinal() .domain([ "水", "茶", "麦茶", "緑茶", "紅茶", "ほうじ茶", "炭酸", "ジュース", "酒" ]) .range([ "0,0 25,0 0,75", "0,0 0,75 25,75", "0,0 0,75 25,75", "0,0 0,75 25,75", "0,0 0,75 25,75", "0,0 0,75 25,75", "0,37.5 25,0 0,0 0,75 25,75 0,37.5", "25,37.5 0,0 0,75", "0,37.5 25,0 0,0 0,75 25,75 25,37.5 0,75" ]) .unknown("0 0"); blockG .append("polygon") .attr("points", (d) => drinkBlank(d.drink)) .attr("fill", "white"); const vesselBlank = d3 .scaleOrdinal() .domain(["コップ", "水筒", "ペットボトル", "グラス", "紙パック"]) .range([ "50,0 25,75 50,75", "25,0 50,75 50,0", "25,37.5 50,0 50,75", "50,37.5 25,0 50,0 50,75 25,75 50,37.5", "25,37.5 50,0 25,0 25,75 50,75 50,37.5 25,75" ]) .unknown("25,0 25,75 50,75 50,0 "); blockG .append("polygon") .attr("points", (d) => vesselBlank(d.vessel)) .attr("fill", "white"); blockG .append("path") .attr("d", (d) => drinkPath(d.drink)) .attr("stroke", "#000") .attr("stroke-width", 2); blockG .append("path") .attr("d", (d) => vesselPath(d.vessel)) .attr("stroke", "black") .attr("stroke-width", 2); 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); svg .append("text") .data("▼") .join("text") .attr("x", 110) .attr("y", 30) .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("fill", "black") .text((d) => d); svg .append("text") .data("▼") .join("text") .attr("x", 110) .attr("y", height - 40) .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("fill", "black") .text((d) => d); return svg.node(); }31:T820,nagakuboLegend = { const height = 440; const temperatureData = ['あたたかい', 'つめたい','常温','その他']; const drinkData = ['水','茶','炭酸','ジュース','酒','その他']; const vesselData = ['コップ', '水筒' ,'ペットボトル','グラス', '紙パック','その他']; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("rect") .attr("width",width) .attr("height",height) .attr("fill", "#EAC2E9") .attr("opacity", 0.2); const g = svg .append("g") .selectAll("g") .data(temperatureData) .join("g") .attr("transform", (d, i) => `translate(50, ${40 + i * 50})`) g.append("circle") .attr("r", 15) .attr("fill", "white") .attr("stroke", temperatureColor); g.append("circle") .attr("r", 10) .attr("fill", temperatureColor) .attr("opacity", 0.7); g.append("text") .attr("x", 30) .attr("dy", 5) .text((d) => d); const drinkG = svg .append("g") .selectAll("g") .data(drinkData) .join("g") .attr("transform", (d, i) => `translate(300, ${20 + i * 70})`); drinkG .append("rect") .attr("width", 25) .attr('height', 37.5) .attr('fill', "white"); drinkG .append("path") .attr("d", (d) => drinkPath(d)) .attr("stroke", "black") .attr("fill", "none") .attr("stroke-width", 3) .attr("transform", "scale(0.5)"); drinkG .append("text") .attr("x", 40) .attr("dy", 25) .text((d) => d); // 容器の凡例 const vesselG = svg .append("g") .selectAll("g") .data(vesselData) .join("g") .attr("transform", (d, i) => `translate(450, ${20 + i * 70})`); vesselG .append("rect") .attr("width", 25) .attr('height', 37.5) .attr('fill', "white"); vesselG .append("path") .attr("d", (d) => vesselPath(d)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 3) .attr("transform", "scale(0.5)"); vesselG .append("text") .attr("x", 40) .attr("dy", 25) .text((d) => d); return svg.node(); }32:Teff,nagakuboChart2 = (data) => { //function myChart(data){ //一行目と同じ意味 const dataOfDatesTimes = getDataOfDatesTimes(data); const n = 50 const m = 75 const height = (m*7)+100; const margin = { top: 50, right: 0, bottom: 50, left: 0 }; 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 svg = d3.create("svg").attr("width", width).attr("height", height); // 各日時ごとの配列の個数をコンソールに表示 dataOfDatesTimes.forEach((dateData, date) => { dateData.forEach((timeData, time) => { const arrayCount = timeData.length; console.log(`Date: ${date}, Time: ${time}, Array Count: ${arrayCount}`); }); }); const dayG = svg .append("g") .selectAll("g") .data(dataOfDatesTimes) .join("g") .attr("class", "day") .attr( "transform", (d) => `translate(0, ${yScale(d[0]) + yScale.bandwidth() / 2})` ) ; // 垂直軸の原点を移動しておく const timeG = dayG .selectAll("g.time") .data((d) => d[1]) .join("g") .attr("class", "time") .attr("transform", (d) => `translate(${xScale(d[0])}, 0)`); // time0に対するtransform const time0Transform = (d, i) => `translate(${(width/2-200) - (i * 50)-50}, -50)`; // time1に対するtransform const time1Transform = (d, i) => `translate(${(margin.left + i * 50)-200}, -50)`; const blockG = timeG.selectAll('g') .data((d) => d[1]) // データの値（配列）をバインドする .join('g') .attr('transform', (d, i) => (d.time === 0 ? time0Transform(d, i) : time1Transform(d, i))); blockG .append("rect") .attr("width", 50) .attr('height', m) .attr('fill', d => temperatureColor(d.temperature)) .attr("opacity", 0.25); // white const drinkBlank = d3.scaleOrdinal() .domain([ '水', '茶','麦茶','緑茶','紅茶','ほうじ茶', '炭酸', 'ジュース', '酒']) .range([ '0,0 25,0 0,75', '0,0 0,75 25,75','0,0 0,75 25,75','0,0 0,75 25,75','0,0 0,75 25,75','0,0 0,75 25,75', "0,37.5 25,0 0,0 0,75 25,75 0,37.5", "25,37.5 0,0 0,75", "0,37.5 25,0 0,0 0,75 25,75 25,37.5 0,75" ]) .unknown("0 0") blockG .append('polygon') .attr('points', d => drinkBlank(d.drink)) .attr('fill', 'white') const vesselBlank = d3.scaleOrdinal() .domain(['コップ', '水筒' ,'ペットボトル','グラス', '紙パック']) .range([ '50,0 25,75 50,75', '25,0 50,75 50,0', "25,37.5 50,0 50,75", "50,37.5 25,0 50,0 50,75 25,75 50,37.5", "25,37.5 50,0 25,0 25,75 50,75 50,37.5 25,75" ]) .unknown("25,0 25,75 50,75 50,0 ") blockG .append('polygon') .attr('points', d => vesselBlank(d.vessel)) .attr('fill', 'white') blockG .append('path') .attr('d', d => drinkPath(d.drink)) .attr('stroke', '#000') .attr('stroke-width', 2); // vessel line blockG .append('path') .attr('d', d => vesselPath(d.vessel)) .attr('stroke', '#000') .attr('stroke-width', 2); //三角 svg .append('text') .data("▼") .join('text') .attr('x', width/2-200) .attr('y', 30) .attr('font-family', 'sans-serif') .attr('font-size', 15) .attr('fill', 'black') .text(d => d); svg .append('text') .data("▼") .join('text') .attr('x', width/2-200) .attr('y', height-40) .attr('font-family', 'sans-serif') .attr('font-size', 15) .attr('fill', 'black') .text(d => d); return svg.node(); }33:T11d6, { //function myChart(data){ //一行目と同じ意味 const n = 50 const m = 75 // const height = width * 150 / 215; const height = (m*7)+100; const margin = { top: 50, right: 30, bottom: 50, left: 30 }; const xScale = d3 .scaleBand() .domain([0, d3.max(dataOfDates, d => d.length)]) // 各日付ごとのデータ数の最大値を取得 .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dataOfDates.keys()]) .range([margin.top, height - margin.bottom]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) // 日付グループ const dayG = svg .append("g") .selectAll("g") .data(dataOfDates) .join("g") .attr("class", "day") .attr( "transform", (d) => `translate(0, ${yScale(d[0]) + yScale.bandwidth() / 2})` ); // 垂直軸の原点を移動しておく // ブロックグループ（四角を線を入れるグループ） const blockG = dayG.selectAll('g') .data((d) => d[1]) // データの値（配列）をバインドする .join('g') .attr('transform', (d,i) => `translate(${margin.left + i * 50}, -50)`) // 単純に101pxずつ右にずらしている // 四角 const temperatureColor = d3.scaleOrdinal() .domain(['その他','あたたかい', 'つめたい','常温']) .range(["green","#F875AA","#AEDEFC","yellow"]) blockG .append("rect") .attr("width", n) .attr('height', m) .attr('fill', d => temperatureColor(d.temperature)) .attr("opacity", 0.25); // white // drink const drinkBlank = d3.scaleOrdinal() .domain(['その他', '水', '茶','麦茶','緑茶','紅茶','ほうじ茶', '炭酸', 'ジュース', '酒']) .range(["0 0", '0,0 25,0 0,75', '0,0 0,75 25,75','0,0 0,75 25,75','0,0 0,75 25,75','0,0 0,75 25,75','0,0 0,75 25,75', "0,37.5 25,0 0,0 0,75 25,75 0,37.5", "25,37.5 0,0 0,75", "0,37.5 25,0 0,0 0,75 25,75 25,37.5 0,75" ]) blockG .append('polygon') .attr('points', d => drinkBlank(d.drink)) .attr('fill', 'white') const vesselBlank = d3.scaleOrdinal() .domain(['その他','コップ', '水筒' ,'ペットボトル','グラス', '紙パック']) .range(["25,0 25,75 50,75 50,0 ", '50,0 25,75 50,75', '25,0 50,75 50,0', "25,37.5 50,0 50,75", "50,37.5 25,0 50,0 50,75 25,75 50,37.5", "25,37.5 50,0 25,0 25,75 50,75 50,37.5 25,75" ]) blockG .append('polygon') .attr('points', d => vesselBlank(d.vessel)) .attr('fill', 'white') // drink line const drinkPath = d3.scaleOrdinal() .domain(['その他', '水', '茶','麦茶','緑茶','紅茶','ほうじ茶', '炭酸', 'ジュース', '酒']) .range(["M0 0 V75", 'M25,0 L0,75', 'M0,0 L25,75','M0,0 L25,75','M0,0 L25,75','M0,0 L25,75','M0,0 L25,75', "M0 37.5 L25 0 M0 37.5 L25 75", "M25 37.5 L0 0 M25 37.5 L0 75", "M0 37.5 L25 0 M25 37.5 L0 75" ]) blockG .append('path') .attr('d', d => drinkPath(d.drink)) .attr('stroke', '#000') .attr('stroke-width', 2); // vessel line const vesselPath = d3.scaleOrdinal() .domain(['その他','コップ', '水筒' ,'ペットボトル','グラス', '紙パック']) .range(["M25 0 V75", 'M50,0 L25,75', 'M25,0 L50,75', "M25 37.5 L50 0 M25 37.5 L50 75", "M50 37.5 L25 0 M50 37.5 L25 75", "M25 37.5 L50 0 M50 37.5 L25 75" ]) blockG .append('path') .attr('d', d => vesselPath(d.vessel)) .attr('stroke', 'black') .attr('stroke-width', 2); 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); svg .append('text') .data("▼") .join('text') .attr('x', 110) .attr('y', 30) .attr('font-family', 'sans-serif') .attr('font-size', 15) .attr('fill', 'black') .text(d => d); svg .append('text') .data("▼") .join('text') .attr('x', 110) .attr('y', height-40) .attr('font-family', 'sans-serif') .attr('font-size', 15) .attr('fill', 'black') .text(d => d); return svg.node(); }34:[{"id":"60a1630d3eb3b54e822cb1984e501c3a9e7d918035ff4759a7c71cd9e4a16c0574eb75d9b53b7d3dd4ca575743cc234c454594675fc61cc986c74f79a398cb32","href":"https://static.observableusercontent.com/files/60a1630d3eb3b54e822cb1984e501c3a9e7d918035ff4759a7c71cd9e4a16c0574eb75d9b53b7d3dd4ca575743cc234c454594675fc61cc986c74f79a398cb32","name":"nagakubo01.png","type":"image/png","lastModified":1701064881491.422,"size":3492333},{"id":"60a1630d3eb3b54e822cb1984e501c3a9e7d918035ff4759a7c71cd9e4a16c0574eb75d9b53b7d3dd4ca575743cc234c454594675fc61cc986c74f79a398cb32","href":"https://static.observableusercontent.com/files/60a1630d3eb3b54e822cb1984e501c3a9e7d918035ff4759a7c71cd9e4a16c0574eb75d9b53b7d3dd4ca575743cc234c454594675fc61cc986c74f79a398cb32","name":"nagakubo01@1.png","type":"image/png","lastModified":1701064904048.159,"size":3492333},{"id":"12dab832dcb322ccabee3147f4522a9585f096ef9768d43199a6d46dcb756395aa93d92381cccdeb4f324de2b342d6065dae622e8b8876c6208e9d942de3bf8b","href":"https://static.observableusercontent.com/files/12dab832dcb322ccabee3147f4522a9585f096ef9768d43199a6d46dcb756395aa93d92381cccdeb4f324de2b342d6065dae622e8b8876c6208e9d942de3bf8b","name":"nagakubo02.png","type":"image/png","lastModified":1701064940665.524,"size":3308019}] 2d:{"title":"DRINK MAZE?　Yuka.N","cells":[{"id":0,"value":"# DRINK MAZE?　Yuka.N\n","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import { dataset, people } from \"ad2642b7e4be8015\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"dataOfDates = {\n // データに　dateOnly と msec を追加\n // msecは、00:00からのミリ秒\n const dataWithDayMsec = dataOfPerson.map((d) => ({\n ...d,\n dateOnly: new Date(\n Date.UTC(\n d.date.getUTCFullYear(),\n d.date.getUTCMonth(),\n d.date.getUTCDate()\n )\n ),\n msec: (d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000\n }));\n\n return d3.group(dataWithDayMsec, (d) => d.dateOnly);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"getDataOfDates = (data) => {\n // データに　dateOnly と msec を追加\n // msecは、00:00からのミリ秒\n const dataWithDayMsec = dataOfPerson.map((d) => ({\n ...d,\n dateOnly: new Date(\n Date.UTC(\n d.date.getUTCFullYear(),\n d.date.getUTCMonth(),\n d.date.getUTCDate()\n )\n ),\n msec: (d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000\n }));\n\n return d3.group(dataWithDayMsec, (d) => d.dateOnly);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"dataOfDatesTimes = {\n// データに day と time を追加\n// timeは12時間ごとの時間帯で0,1の値をとる\nconst dataWithDayTime = dataOfPerson.map((d) => ({\n ...d,\n dateOnly: new Date(\n Date.UTC(\n d.date.getUTCFullYear(),\n d.date.getUTCMonth(),\n d.date.getUTCDate()\n )\n ),\n time: Math.floor(\n ((d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000) /\n (12 * 60 * 60 * 1000)\n )\n}));\n\n// グループ化\nconst groupedData = d3.group(\n dataWithDayTime,\n (d) => d.dateOnly,\n (d) => d.time\n);\n\n// 時間帯が逆順になるように並び替える（最初のグループだけ逆順）\ngroupedData.forEach((value) => {\n if (value instanceof Map) {\n const timeGroups = Array.from(value.values());\n if (timeGroups.length > 0 && Array.isArray(timeGroups[0])) {\n timeGroups[0].reverse();\n }\n }\n});\n\nreturn groupedData;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"getDataOfDatesTimes = (data) => {\n // データに day と time を追加\n // timeは12時間ごとの時間帯で0,1の値をとる\n const dataWithDayTime = data.map((d) => ({\n ...d,\n dateOnly: new Date(\n Date.UTC(\n d.date.getUTCFullYear(),\n d.date.getUTCMonth(),\n d.date.getUTCDate()\n )\n ),\n time: Math.floor(\n ((d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000) /\n (12 * 60 * 60 * 1000)\n )\n }));\n\n // グループ化\n const groupedData = d3.group(\n dataWithDayTime,\n (d) => d.dateOnly,\n (d) => d.time\n );\n\n // 時間帯が逆順になるように並び替える（最初のグループだけ逆順）\n groupedData.forEach((value) => {\n if (value instanceof Map) {\n const timeGroups = Array.from(value.values());\n if (timeGroups.length > 0 && Array.isArray(timeGroups[0])) {\n timeGroups[0].reverse();\n }\n }\n });\n\n return groupedData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof dataOfPerson = Inputs.select(people, { label: \"Person\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"nagakuboChart(dataOfPerson)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"temperatureColor = d3.scaleOrdinal()\n .domain(['あたたかい', 'つめたい', '常温'])\n .range([\"#F875AA\", \"#AEDEFC\", \"yellow\"])\n .unknown(\"green\"); // 未知の値に対するデフォルトの色","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"drinkPath = d3.scaleOrdinal()\n .domain(['水', \n '茶','麦茶','緑茶','紅茶','ほうじ茶',\n '炭酸',\n 'ジュース',\n '酒'])\n .range(['M25,0 L0,75', \n 'M0,0 L25,75','M0,0 L25,75','M0,0 L25,75','M0,0 L25,75','M0,0 L25,75',\n \"M0 37.5 L25 0 M0 37.5 L25 75\",\n \"M25 37.5 L0 0 M25 37.5 L0 75\",\n \"M0 37.5 L25 0 M25 37.5 L0 75\"\n ])\n .unknown(\"M1 0 V75\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"vesselPath = d3.scaleOrdinal()\n .domain(['コップ', '水筒' ,'ペットボトル','グラス', '紙パック'])\n .range(['M50,0 L25,75', \n 'M25,0 L50,75', \n \"M25 37.5 L50 0 M25 37.5 L50 75\",\n \"M50 37.5 L25 0 M50 37.5 L25 75\",\n \"M25 37.5 L50 0 M50 37.5 L25 75\"\n ])\n .unknown(\"M25 0 V75\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"nagakuboChart2(dataOfPerson)","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"nagakubo011 = FileAttachment(\"nagakubo01@1.png\").image()\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"nagakubo02 = FileAttachment(\"nagakubo02.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"[...d3.group(dataset, (d)=>d.date).keys()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"people","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"water = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"cup = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"tea = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"bottle = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"soda = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"pet = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"juice = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"glass = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"alcohol = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"paperPack = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"anotherDrink = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"AnoterVessel = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"drinks = [...d3. group(dataset, (d) => d.drink).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"sugimotoLegend = {\n const height = (width * 150) / 215;\n\n const data = drinks;\n\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const g = svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(10, ${20 + i * 20})`);\n\n g.append(\"circle\").attr(\"r\", 10).attr(\"fill\", colorScale);\n\n g.append(\"text\")\n .attr(\"x\", 20)\n .attr(\"dy\", 8)\n .text((d) => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([...drinks.keys()])\n .range([\n \"white\",\n \"orange\",\n \"silver\",\n \"black\",\n \"paleblue\",\n \"gray\",\n \"green\",\n \"yellow\",\n \"none\",\n \"silver\",\n \"red\",\n \"blue\",\n \"gold\",\n \"green\",\n \"gray\",\n \"white\",\n \"purple\"\n ])","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}