2f:T1084,drinkPath = { let glass = svg``; let glassd = d3.select(glass).select("path").attr("d"); let suito = svg``; let suitod = d3.select(suito).select("path").attr("d"); let mag = svg``; let magd = d3.select(mag).select("path").attr("d"); let pet = svg``; let petd = d3.select(pet).select("path").attr("d"); let cup = svg``; let cupd = d3.select(cup).select("path").attr("d"); let sonota = svg``; let sonotad = d3.select(sonota).select("path").attr("d"); let dp = { glass: glassd, suito: suitod, mag: magd, pet: petd, cup: cupd, sonota: sonotad }; return dp; }30:Ta8c,kitabatakeChart = (data) => { //const data=dataOfDates; const height = (width * 150) / 215; const kukiDst = 90; const dataOfOdd = MakeOddEven(data, "odd"); const dataOfEven = MakeOddEven(data, "even"); let svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.02); let alignCenter = 55; let right = svg .append("g") .attr("class", "rightAxis") .attr( "transform", `translate(${width / 2 - alignCenter},${(height * 2) / 3 + 3})` ); let left = svg .append("g") .attr("class", "leftAxis") .attr( "transform", `translate(${width / 2 + alignCenter},${ (height * 2) / 3 - kukiDst / 2 + 5 }) scale(-1,1)` ); // 茎と葉 dataOfOdd.forEach((dd, di) => { let base = height / 2 - (dataOfOdd.length * kukiDst) / 4; createKuki(svg, width / 2, di * kukiDst + base); right .append("g") .selectAll("path") .data(dd) .join("path") .attr("fill", (d) => fillSwitch(d.drink)) .attr("transform", (d) => transSwitch(d, di, base)) .attr("d", (d) => vesselSwitch(d.vessel)); }); dataOfEven.forEach((dd, di) => { let base = height / 2 - (dataOfEven.length * kukiDst) / 4; createKuki(svg, width / 2, di * kukiDst + base, "left"); left .append("g") .selectAll("path") .data(dd) .join("path") .attr("fill", (d) => fillSwitch(d.drink)) .attr("transform", (d) => transSwitch(d, di, base, "left")) .attr("d", (d) => vesselSwitch(d.vessel)); }); svg .selectAll("g.rightAxis, g.leftAxis") .selectAll("line, path") .attr("stroke", "gray") .attr("opacity", 0.5); svg .selectAll("g.rightAxis, g.leftAxis, g.yAxis") .selectAll("text") .attr("font-size", 16); /*===================================== Switch =====================================*/ function transSwitch(d, i, base, rl) { let x = kukid[d.hour + 6][0]; let y = kukid[d.hour + 6][1] - i * kukiDst - 25; let tp = ""; let rtt = 0; switch (d.temperature) { case "あたたかい": case "暖かい": break; case "常温": case "ぬるい": rtt += 10; case "つめたい": case "冷たい": rtt += 50; break; default: break; } let rttForXY = rtt; if (d.location !== "自宅") { rtt = 180 - rtt; } x += rttForXY * rttForXY * 0.021; y += rtt * rtt * 0.0045; tp = ` rotate(${rtt})`; let tl = `translate(${x},${y})` + tp; return tl; } return svg.node(); }31:T9a5,kitabatakeLegend = { const height = (width * 150) / 215; /*=============================== 中身と色 ===============================*/ let drinkNames = [], drinkColors = [], sonota = []; drinks.forEach((d) => { if (fillSwitch(d) == "rgba(20,130,70,0.5)") { sonota.push(d); } else { let idx = drinkColors.indexOf(fillSwitch(d)); if (idx == -1) { drinkColors.push(fillSwitch(d)); drinkNames.push(d); } else { drinkNames[idx] += `, ${d}`; } } }); let sonotaR = ""; sonota.forEach((d, i) => { i == 0 ? (sonotaR += `その他(${d}`) : (sonotaR += `, ${d}`); }); sonotaR += ")"; drinkNames.push(sonotaR); drinkColors.push("rgba(20,130,70,0.5)"); /*=============================== 入れ物 ===============================*/ let drinkPathes = []; let vesselNames = []; sonota = []; vessels.forEach((d) => { if (vesselSwitch(d) == drinkPath["sonota"]) { sonota.push(d); } else { let idx = drinkPathes.indexOf(vesselSwitch(d)); if (idx == -1) { drinkPathes.push(vesselSwitch(d)); vesselNames.push(d); } else { vesselNames[idx] += `, ${d}`; } } }); sonotaR = ""; sonota.forEach((d, i) => { i == 0 ? (sonotaR += `その他(${d}`) : (sonotaR += `, ${d}`); }); sonotaR += ")"; vesselNames.push(sonotaR); drinkPathes.push(drinkPath["sonota"]); /*=============================== svg ===============================*/ let svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.02); const g = svg .append("g") .selectAll("g") .data(drinkColors) .join("g") .attr("transform", (d, i) => `translate(30, ${30 + i * 40})`); g.append("circle") .attr("r", 15) .attr("fill", (d) => d); g.append("text") .attr("x", 20) .attr("dy", 7) .text((d, i) => drinkNames[i]); const pg = svg .append("g") .selectAll("g") .data(drinkPathes) .join("g") .attr("transform", (d, i) => `translate(15, ${280 + i * 50})`); pg.append("path") .attr("fill", "rgba(0,0,0,0)") .attr("stroke", "rgba(0,0,0,1)") .attr("transform", "scale(0.6,0.6)") .attr("d", (d) => d); pg.append("text") .attr("x", 35) .attr("dy", 25) .text((d, i) => vesselNames[i]); return svg.node(); }32:[] 2d:{"title":"飲み物の樹","cells":[{"id":0,"value":"# 飲み物の樹","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import { dataset, people } from \"ad2642b7e4be8015\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"dataOfDates = {\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":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"kukisource=[[375,230],[390,210],[395,204],[404,196],[422,186],[439,181],[454,180],[464,180],\n [478,180],[491,180],[504,180],[519,180],[534,181],[545,181],[560,183],[577,185],\n [587,187],[602,188],[617,191],[629,192],[645,195],[660,195],[673,196],[688,196],\n [706,196],[718,196],[734,192],[746,188],[757,180],[764,169]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"kukid=kukisource.map(d=>{\n let x=d[0]-kukisource[0][0];\n let y=d[1]-kukisource[0][1];\n return [x,y];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"function createKuki(svg,dx,dy,rl){\n let scale=[1,1];\n let tf=[0,0];\n if(rl==\"left\")tf[1]=23;\n \n const data =kukid.map((d)=>{\n let x=d[0];let y=d[1];\n x-=kukid[4][0]/2;\n if(rl==\"left\")x*=-1;\n x+=dx; y+=dy;\n return [x, y];\n })\n \n const line = d3.line(data)\n .x((d) => d[0])\n .y((d) => d[1])\n .curve(d3.curveCatmullRom.alpha(0.5));\n\n svg\n .append(\"g\").data([data]).append(\"path\").attr(\"d\", line)\n .attr(\"stroke\", \"rgba(120,90,0,1)\")\n .attr(\"fill\", \"none\")\n .attr(\"transform\",`translate(${tf[0]},${tf[1]}) scale(${scale[0]},${scale[1]})`);\n\n svg\n .append(\"g\").selectAll(\"circle\").data(data).join(\"circle\")\n .attr(\"cx\", (d) => d.x)\n .attr(\"cy\", (d) => d.y)\n .attr(\"r\", 4)\n .attr(\"opacity\",\"0\")\n .attr(\"transform\",`translate(${tf[0]},${tf[1]}) scale(${scale[0]},${scale[1]})`);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"function MakeOddEven(data,oe){\n let ori=[];\n let da=[];\n let recentDay=data[0].day;\n data.forEach(d=>{\n let amari=d.day%2;\n if(d.day!==recentDay){\n if(da[0])ori.push(da);\n da=[];\n recentDay=d.day;\n }\n if((oe==\"odd\" && amari==1)||(oe==\"even\" && amari==0))da.push(d);\n })\n if(da[0])ori.push(da);\n return ori;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"https://jakearchibald.github.io/svgomg/","pinned":false,"hidden":false,"mode":"md"},{"id":587,"value":"viewof dataOfPerson = Inputs.select(people, { label: \"Person\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"dataOfPerson","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"kitabatakeChart(dataOfPerson);","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":988,"value":"drinks = [...d3.group(dataset, (d) => d.drink).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"vessels = [...d3.group(dataset, (d) => d.vessel).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"temperatures = [...d3.group(dataset, (d) => d.temperature).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"function fillSwitch(d) {\n let r = \"rgba(20,130,70,0.5)\";\n\n switch (d) {\n case \"水\":\n r = \"rgba(40,120,150,0.5)\";\n break;\n case \"茶\":\n case \"麦茶\":\n case \"緑茶\":\n case \"煎茶\":\n case \"紅茶\":\n case \"ほうじ茶\":\n r = \"rgba(50,60,10,0.5)\";\n break;\n case \"牛乳\":\n case \"豆乳\":\n r = \"rgba(200,200,180,0.5)\";\n break;\n case \"コーヒー\":\n case \"ラテ\":\n case \"カフェオレ\":\n case \"ココア\":\n case \"ミルクティー\":\n r = \"rgba(200,140,120,0.5)\";\n break;\n case \"ジュース\":\n case \"酒\":\n case \"炭酸\":\n case \"エナドリ\":\n r = \"rgba(220,140,70,0.5)\";\n break;\n default:\n break;\n }\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"function vesselSwitch(vessel) {\n let path = \"\";\n switch (vessel) {\n case \"ペットボトル\":\n path = drinkPath.pet;\n break;\n case \"コップ\":\n case \"カップ\":\n case \"紙コップ\":\n case \"プラコップ\":\n case \"プラカップ\":\n case \"プラスチックコップ\":\n case \"プラスチックカップ\":\n case \"コップ(樹脂)\":\n path = drinkPath.cup;\n break;\n case \"グラス\":\n path = drinkPath.glass;\n break;\n case \"水筒\":\n path = drinkPath.suito;\n break;\n case \"マグカップ\":\n case \"ジョッキ\":\n path = drinkPath.mag;\n break;\n default:\n path = drinkPath.sonota;\n break;\n }\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}