2f:T1b9b,subFunctions = { function createJitakuSvg() { return ``; } function createDaigakuSvg() { return ``; } function createTsugakuroSvg() { return ``; } function createRestaurantSvg() { return ``; } function createOtherLocationSvg() { return ``; } function createCupSvg() { return ``; } function createMagcupSvg() { return ``; const suitou = ``; } function createSuitouSvg() { return ``; } function createOtherVesselSvg() { return ``; } function createJouonSvg() { return ``; } function createColdSvg() { return ``; } function createHotSvg() { return ``; } function createOtherTemperatureSvg() { return ``; } return { createJitakuSvg, createDaigakuSvg, createTsugakuroSvg, createRestaurantSvg, createOtherLocationSvg, createCupSvg, createMagcupSvg, createSuitouSvg, createOtherVesselSvg, createJouonSvg, createColdSvg, createHotSvg, createOtherTemperatureSvg }; }30:T1330,tsuchiyaChart = (data) => { const { createJitakuSvg, createDaigakuSvg, createTsugakuroSvg, createRestaurantSvg, createOtherLocationSvg, createCupSvg, createMagcupSvg, createSuitouSvg, createOtherVesselSvg, createJouonSvg, createColdSvg, createHotSvg, createOtherTemperatureSvg } = subFunctions; const height = (width * 150) / 215; const margin = { top: 10, right: 40, bottom: 60, left: 10 }; // 時間軸（X軸）のスケールバンドを定義 const xScale = d3 .scaleBand() .domain(d3.range(0, 24)) // 0から23までの範囲（24時間） .range([margin.left, width - margin.right]) .paddingInner(0.4); // バンド間のパディング const drinks = d3.group(data, (d) => d.drink); // データの集計 const drinkCounts = Array.from(drinks.values()).map((d) => d.length); // y軸のスケールを再計算 const yScale = d3 .scaleBand() .domain([...drinks.keys()]) .range([margin.top, height - margin.bottom]) .paddingInner(0.1) .paddingOuter(0.1); const svg = d3.create("svg").attr("width", width).attr("height", height); const color = d3 .scaleOrdinal() .domain([...drinks.keys()]) .range(d3.schemeCategory10); const xAxis = d3 .axisBottom() .scale(xScale) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft(yScale) .tickSize(-(width - margin.left - margin.right)); const locationSvg = { 自宅: createJitakuSvg, 大学: createDaigakuSvg, 通学路: createTsugakuroSvg, レストラン: createRestaurantSvg, default: function () { return createOtherLocationSvg; } }; const vesselSvg = { コップ: createCupSvg, マグカップ: createMagcupSvg, 水筒: createSuitouSvg, default: function () { return createOtherVesselSvg; } }; const temperatureSvg = { 常温: createJouonSvg, つめたい: createColdSvg, 冷たい: createColdSvg, あたたかい: createHotSvg, 暖かい: createHotSvg, default: function () { return createOtherTemperatureSvg; } }; // ドリンクごとのグループの設定 const drinkG = svg .selectAll("g.drink") .data([...drinks.entries()]) .join("g") .attr("class", "drink") .attr("transform", (d) => { const groupIndex = Array.from(drinks.keys()).indexOf(d[0]); return `translate(0, ${yScale(d[0])})`; }); // 各時間におけるアイコンのインデックスを追跡するためのマップ const circleCountPerHour = new Map(); const createSvgNode = (svgString) => { const div = document.createElement("div"); div.innerHTML = svgString; return div.firstChild; }; const iconCountPerDrinkAndHour = new Map(); drinkG.each(function (d) { const drink = d[0]; d3.select(this) .selectAll(".icon-group") .data(d[1]) .join("g") .attr("class", "icon-group") .attr("transform", (data) => { const hour = data.hour; const drinkHourKey = `${drink}-${hour}`; const count = iconCountPerDrinkAndHour.get(drinkHourKey) || 0; iconCountPerDrinkAndHour.set(drinkHourKey, count + 1); const x = xScale(hour); const y = yScale(drink) + count * 25; // 同じドリンク内でのy座標を計算 return `translate(${x}, ${y})`; }) .each(function (data) { const group = d3.select(this); // locationのSVGノードを作成して追加 const locationFunction = locationSvg[data.location] || locationSvg["default"]; const locationNode = createSvgNode(locationFunction()); group.node().appendChild(locationNode); // vesselのSVGノードを作成して追加（位置を調整） const vesselFunction = vesselSvg[data.vessel] || vesselSvg["default"]; const vesselNode = createSvgNode(vesselFunction()); const vesselGroup = group .append("g") .attr("transform", "translate(26,4)"); vesselGroup.node().appendChild(vesselNode); // temperatureのSVGノードを作成して追加（位置を調整） const temperatureFunction = temperatureSvg[data.temperature] || temperatureSvg["default"]; const temperatureNode = createSvgNode(temperatureFunction()); const temperatureGroup = group .append("g") .attr("transform", "translate(26,14)"); temperatureGroup.node().appendChild(temperatureNode); }); }); 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); return svg.node(); } //スケールバンドで24Hぶん作る　グループ化の基準を0〜23 //transformで2個以上は下に31:Tae2,tsuchiyaLegend = () => { const {createJitakuSvg, createDaigakuSvg, createTsugakuroSvg, createRestaurantSvg, createOtherLocationSvg, createCupSvg, createMagcupSvg, createSuitouSvg, createOtherVesselSvg, createJouonSvg, createColdSvg, createHotSvg, createOtherTemperatureSvg} = subFunctions; const height = 440; const width = 800; // 凡例の幅を設定 // SVGコンテナの作成 const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //マークアップの定義 const jitaku = createJitakuSvg(); const daigaku = createDaigakuSvg(); const tsugakuro = createTsugakuroSvg(); const restaurant = createRestaurantSvg(); const otherLocation = createOtherLocationSvg(); const cup = createCupSvg(); const magcup = createMagcupSvg(); const suitou = createSuitouSvg(); const otherVessel = createOtherVesselSvg(); const jouon = createJouonSvg(); const cold = createColdSvg(); const hot = createHotSvg(); const otherTemperature = createOtherTemperatureSvg(); // 場所のカテゴリとSVGマークアップ const locationData = [ { name: '自宅', svg: jitaku }, { name: '大学', svg: daigaku }, { name: '通学路', svg: tsugakuro }, { name: 'レストラン', svg: restaurant }, { name: 'その他', svg: otherLocation } ]; // 容器のカテゴリとSVGマークアップ const vesselData = [ { name: 'コップ', svg: cup }, { name: 'マグカップ', svg: magcup }, { name: '水筒', svg: suitou }, { name: 'その他', svg: otherVessel } ]; // 温度のカテゴリとSVGマークアップ const temperatureData = [ { name: '常温', svg: jouon }, { name: 'つめたい/冷たい', svg: cold }, { name: 'あたたかい/暖かい', svg: hot }, { name: 'その他', svg: otherTemperature } ]; // 凡例の各セクションを作成する関数 const createLegendSection = (data, xPosition) => { const g = svg.append("g").selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(${xPosition}, ${20 + i * 50})`); g.each(function(d) { // SVGを追加するためにforeignObjectを使用 d3.select(this).append('foreignObject') .attr('width', 25) .attr('height', 25) .html(d.svg); // SVGマークアップをHTMLとして挿入 // テキストラベルを追加する d3.select(this).append("text") .attr("x", 30) .attr("dy", "1em") // 縦方向の位置を調整 .text(d.name); }); }; // 場所、容器、温度の凡例を作成 createLegendSection(locationData, 50); // 場所 createLegendSection(vesselData, 300); // 容器 createLegendSection(temperatureData, 550); // 温度 return svg.node(); }; 32:T2c7c, { const height = width * 150 / 215; const margin = { top: 10, right: 10, bottom: 60, left: 50 }; // 時間軸（X軸）のスケールバンドを定義 const xScale = d3.scaleBand() .domain(d3.range(0, 24)) // 0から23までの範囲（24時間） .range([margin.left, width - margin.right]) .paddingInner(0.1); // バンド間のパディング const drinks = d3.group(dataOfPerson, (d) => d.drink); // データの集計 const drinkCounts = Array.from(drinks.values()).map(d => d.length); // y軸のスケールを再計算 const yScale = d3.scaleBand() .domain([...drinks.keys()]) .range([margin.top, height - margin.bottom]) .paddingInner(0.1) .paddingOuter(0.1); const svg = d3.create("svg").attr("width", width).attr("height", height); // x軸の描画 const xAxis = d3.axisBottom(xScale).tickSize(-(height - margin.top - margin.bottom)); svg.append("g") .attr("class", "x-axis") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); // y軸の描画 const yAxis = d3.axisLeft(yScale).tickSize(-(width - margin.left - margin.right)); svg.append("g") .attr("class", "y-axis") .attr("transform", `translate(${margin.left},0)`) .call(yAxis); const color = d3 .scaleOrdinal() .domain([...drinks.keys()]) .range(d3.schemeCategory10); // 各要素に対応するSVGデータの関数またはマップ const defaultLocationSvg = ``; // デフォルトのSVGマークアップをここに入れる const defaultVesselSvg = ``; const defaultTemperatureSvg = `` ; const locationSvg = { "自宅": function() { return ``; }, "大学": function() { return ``; }, "通学路" : function() {　 return ``; }, "レストラン" : function() {　 return ``; }, "default": function() { return defaultLocationSvg; } }; const vesselSvg = { "コップ": function() { return ``; }, "マグカップ": function() { return ``; }, "水筒": function() { return ``; }, "default": function() { return defaultVesselSvg; } }; const temperatureSvg = { "常温": function() { return `` ; }, "つめたい": function() { return `` ; }, "冷たい": function() { return `` ; }, "あたたかい": function() { return `` ; }, "暖かい": function() { return `` ; }, "default": function() { return defaultTemperatureSvg; } }; // ドリンクごとのグループの設定 const drinkG = svg .selectAll("g.drink") .data([...drinks.entries()]) .join("g") .attr("class", "drink") .attr("transform", (d) => { const groupIndex = Array.from(drinks.keys()).indexOf(d[0]); return `translate(0, ${yScale(d[0])})`; }); // 各時間におけるアイコンのインデックスを追跡するためのマップ const circleCountPerHour = new Map(); const createSvgNode = (svgString) => { const div = document.createElement('div'); div.innerHTML = svgString; return div.firstChild; }; const iconCountPerDrinkAndHour = new Map(); drinkG.each(function(d) { const drink = d[0]; d3.select(this).selectAll(".icon-group") .data(d[1]) .join("g") .attr("class", "icon-group") .attr("transform", (data) => { const hour = data.hour; const drinkHourKey = `${drink}-${hour}`; const count = iconCountPerDrinkAndHour.get(drinkHourKey) || 0; iconCountPerDrinkAndHour.set(drinkHourKey, count + 1); const x = xScale(hour); const y = yScale(drink) + (count * 25); // 同じドリンク内でのy座標を計算 return `translate(${x}, ${y})`; }) .each(function(data) { const group = d3.select(this); // locationのSVGノードを作成して追加 const locationFunction = locationSvg[data.location] || locationSvg["default"]; const locationNode = createSvgNode(locationFunction()); group.node().appendChild(locationNode); // vesselのSVGノードを作成して追加（位置を調整） const vesselFunction = vesselSvg[data.vessel] || vesselSvg["default"]; const vesselNode = createSvgNode(vesselFunction()); const vesselGroup = group.append("g").attr("transform", "translate(26,4)"); vesselGroup.node().appendChild(vesselNode); // temperatureのSVGノードを作成して追加（位置を調整） const temperatureFunction = temperatureSvg[data.temperature] || temperatureSvg["default"]; const temperatureNode = createSvgNode(temperatureFunction()); const temperatureGroup = group.append("g").attr("transform", "translate(26,14)"); temperatureGroup.node().appendChild(temperatureNode); }); }); 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); return svg.node(); } //スケールバンドで24Hぶん作る　グループ化の基準を0〜23 //transformで2個以上は下に33:T443,_jitaku = svg ``34:T5fd,_tsugakuro = svg ``35:[] 2d:{"title":"DRINKING PATTERNS","cells":[{"id":0,"value":"### SHINO TSUCHIYA \n# DRINKING PATTERNS\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"uri = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRczux7f1S_U3uSVpNg3cKq5P6uXzflHYE64c74yQ0K-ZET1E8zPF-yiXSNgd-4jU2tu_m0gfc8RmI7/pub?gid=2108724779&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { dataset, people } from \"ad2642b7e4be8015\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"dataset.filter((d) => d.person === \"Tsuchiya\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"viewof dataOfPerson = Inputs.select(people, { label: \"Person\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"dataOfPerson","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"d3.group(dataOfPerson, d => d.drink, d => d.hour)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"dataOfDatesTimes = {\n // データに　day と time を追加\n // timeは6時間ごとの時間帯で0,1,2,3の値をとる\n const 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 (6 * 60 * 60 * 1000)\n )\n }));\n return d3.group(\n dataWithDayTime,\n (d) => d.dateOnly,\n (d) => d.time\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"tsuchiyaChart(dataOfPerson)","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"tsuchiyaLegend()","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"_daigaku = svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"_restaurant = svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"_cup = svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"_magcup = svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"_suitou = svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"_glass = svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"_jouon = svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"_cold = svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"_hot = svg ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"_nurui = svg ``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}