2b:null 2c:["$","title",null,{"children":"DRINK MAZE?　Yuka.N | TMU Dataviz Class | Observable"}] 31: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(); }32: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(); }33: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(); }34: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(); }35: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(); }36:[{"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}] 2f:{"id":"91eccdaf18ac6245","slug":null,"title":"DRINK MAZE?　Yuka.N","thumbnail":"7b4451373c06e41945e2afc22a730769e9314acaa0f05d51802ba5a133cf08ab","access_level":"public","create_time":"$D2023-11-20T07:04:28.713Z","update_time":"$D2024-01-27T16:31:01.665Z","view_time":null,"first_public_time":"$D2023-11-20T07:04:28.713Z","has_unpublished_edits":null,"fork":{"id":"a77cbc5888ed3000","slug":null,"title":"Drawing","owner":{"id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class"}},"stars":0,"starred":false,"owner":{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026"},"version":1115,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f19c39809ab9f21","login":"nagayuka","name":"Nagayuka","avatar_url":"https://avatars-next.observableusercontent.com/412e84621a78b1c108dacfd573aec41893ceb4e5cba629cba46e10a5a37415c6","tier":null}],"members":[{"type":"individual","id":"1f19c39809ab9f21","login":"nagayuka","name":"Nagayuka","avatar_url":"https://avatars-next.observableusercontent.com/412e84621a78b1c108dacfd573aec41893ceb4e5cba629cba46e10a5a37415c6","tier":null,"role":"editor"},{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bee304cb6fa195b9","slug":"data-drawing","title":"2023/Data Drawing","owner":{"id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class"}},"type":"notebook","body":{"titling":"auto","title":"DRINK MAZE?　Yuka.N","cells":[{"id":0,"value":"# DRINK MAZE?　Yuka.N\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"import { dataset, people } from \"ad2642b7e4be8015\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof dataOfPerson = Inputs.select(people, { label: \"Person\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"nagakuboChart(dataOfPerson)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"temperatureColor = d3.scaleOrdinal()\n .domain(['あたたかい', 'つめたい', '常温'])\n .range([\"#F875AA\", \"#AEDEFC\", \"yellow\"])\n .unknown(\"green\"); // 未知の値に対するデフォルトの色","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"nagakuboChart2(dataOfPerson)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"nagakubo011 = FileAttachment(\"nagakubo01@1.png\").image()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"nagakubo02 = FileAttachment(\"nagakubo02.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"[...d3.group(dataset, (d)=>d.date).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"people","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"water = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"cup = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"tea = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"bottle = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"soda = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"pet = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"juice = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"glass = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"alcohol = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"paperPack = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"anotherDrink = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"AnoterVessel = svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"drinks = [...d3. group(dataset, (d) => d.drink).keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 30:"$2f:body"