31:T1cad,{ width; const height = 500; const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = { top: 250, right: 30, bottom: 30, left: 30 }; //x軸を日時 const xScale = d3 .scaleUtc() .domain([d3.min(data, (d) => d.startDate), d3.max(data, (d) => d.endDate)]) .range([margin.left, width - margin.right]); //y軸を品数 const yScale = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.numItem)]) .range([height - margin.bottom, margin.top]); //色 // const color = d3 // .scaleOrdinal() // .domain([...colors.keys()]) // .range(d3.schemeCategory10); const xAxis = d3 .axisBottom() .scale(xScale) .tickFormat(d3.utcFormat("%d日 %H時")); const yAxis = d3 .axisLeft() .scale(yScale) .ticks(d3.max(data, (d) => d.numItem)); //1品1メモリにしたい const g = svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); // // remove svg's attributes // clonedTya.attr("viewBox", null); // clonedTya.attr("width", null); // clonedTya.attr("height", null); // // append cloned svg node // g.node().appendChild(clonedTya.node()); // // remove svg's attributes // clonedShiro.attr("viewBox", null); // clonedShiro.attr("width", null); // clonedShiro.attr("height", null); // // append cloned svg node // g.node().appendChild(clonedShiro.node()); // // remove svg's attributes // clonedMidori.attr("viewBox", null); // clonedMidori.attr("width", null); // clonedMidori.attr("height", null); // // append cloned svg node // g.node().appendChild(clonedMidori.node()); // // remove svg's attributes // clonedKi.attr("viewBox", null); // clonedKi.attr("width", null); // clonedKi.attr("height", null); // // append cloned svg node // g.node().appendChild(clonedKi.node()); // // remove svg's attributes // clonedKuro.attr("viewBox", null); // clonedKuro.attr("width", null); // clonedKuro.attr("height", null); // // append cloned svg node // g.node().appendChild(clonedKuro.node()); // // remove svg's attributes // clonedAka.attr("viewBox", null); // clonedAka.attr("width", null); // clonedAka.attr("height", null); // // append cloned svg node // g.node().appendChild(clonedAka.node()); // // remove svg's attributes // clonedDaidai.attr("viewBox", null); // clonedDaidai.attr("width", null); // clonedDaidai.attr("height", null); // // append cloned svg node // g.node().appendChild(clonedDaidai.node()); // // remove svg's attributes // clonedNashi.attr("viewBox", null); // clonedNashi.attr("width", null); // clonedNashi.attr("height", null); // // append cloned svg node // g.node().appendChild(clonedNashi.node()); // function version const appendSVG = (selection, svg) => { // clone svg const clonedSvg = d3.select(svg).clone(true); // remove svg's attributes clonedSvg.attr("viewBox", null); clonedSvg.attr("width", null); clonedSvg.attr("height", null); // append cloned svg node selection.node().appendChild(clonedSvg.node()); }; // call function // svg.append("g").call(appendSVG, tya); // svg.append("g").call(appendSVG, shiro); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "gray") .attr("fill-opacity", 0.1); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis); 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); const colorG = svg .append("g") .selectAll("g") .data(dataSameDay) .join("g") .selectAll("g") .data((d) => d[1]) .join("g") .attr( "transform", (d, i) => `translate(${ xScale(d.startDate) + (xScale(d.endDate) - xScale(d.startDate)) / 2 }, ${yScale(d.numItem) - 60 - 20 * i})` ) .attr("fill", (d) => allcolor(d.color)) .attr("class", (d) => allcolor(d.color)); svg .selectAll("g.brown") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, tya)); svg .selectAll("g.white") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, shiro)); svg .selectAll("g.green") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, midori)); svg .selectAll("g.yellow") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, ki)); svg .selectAll("g.black") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, kuro)); svg .selectAll("g.red") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, aka)); svg .selectAll("g.orange") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, daidai)); svg .selectAll("g.no") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, nashi)); // svg // .append("g") // .selectAll("g") // .data(dataSameDay) // .join("g") // .selectAll("circle") // .data((d) => d[1]) // .join("circle") // .attr( // "cx", // (d) => xScale(d.startDate) + (xScale(d.endDate) - xScale(d.startDate)) / 2 // ) //x座標の中間にしたい // .attr("cy", (d, i) => yScale(d.numItem) - 60 - 20 * i) //y座標の60px上にしたい // .attr("r", 10) // .attr("fill", (d) => allcolor(d.color)) // .attr("opacity", 0.1); // if (allcolor == "brown") { // svg // .append("g") // .selectAll("g") // .data(dataSameDay) // .join("g") // .selectAll("Path") //ここどうしたら？ // .data((d) => d[1]) // .join("Path") //ここもどうしたら？ // .call(appendSVG, tya) // .attr( // "transform", // `translate((d) => xScale(d.startDate) + (xScale(d.endDate) - xScale(d.startDate)) / 2, (d, i) => yScale(d.numItem) - 60 - 20 * i` // ); // } else if (allcolor == "white") { // } else if (allcolor == "yellow") { // } else if (allcolor == "black") { // } else if (allcolor == "green") { // } else if (allcolor == "orange") { // } else if (allcolor == "red") { // } else if (allcolor == "no") { // } const line1 = d3 .line() .x((d) => xScale(d.startDate)) .y((d) => yScale(d.numItem)); const line2 = d3 .line() .x((d) => xScale(d.endDate)) .y((d) => yScale(d.numItem)); const strokeWidth = 1.5; const strokeLinecap = "round"; const strokeLinejoin = "round"; const I = d3.range(d3.map(data, (d) => d.startDate).length); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "lightblue") .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", 1) .attr("d", line1); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "purple") .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", 0.5) .attr("d", line2); return svg.node(); }32:T112f,{ const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = { top: 100, right: 100, bottom: 100, left: 100 }; let g = svg .append("g") .attr("transform", `translate(${width / 2},${height / 2})`); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "gray") .attr("fill-opacity", 0.1); let gr = g.append("g").call(rAxis); let ga = g.append("g").call(angleAxis); // function version const appendSVG = (selection, svg) => { // clone svg const clonedSvg = d3.select(svg).clone(true); // remove svg's attributes clonedSvg.attr("viewBox", null); clonedSvg.attr("width", null); clonedSvg.attr("height", null); // append cloned svg node selection.node().appendChild(clonedSvg.node()); }; const angle = d3 .scaleUtc() .domain([d3.min(data, (d) => d.startDate), d3.max(data, (d) => d.endDate)]) .range([ 0 - (1 / 3) * Math.PI - (1 / 12) * Math.PI, Math.PI * 2 - (1 / 3) * Math.PI - (1 / 12) * Math.PI ]); const radius = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.numItem)]) .range([0, Math.min(width, height) / 2 - 30]); const polarX = (d) => Math.cos(angle(d.startDate)) * radius(d.numItem); const polarY = (d) => Math.sin(angle(d.startDate)) * radius(d.numItem); const polarX2 = (d) => Math.cos(angle(d.endDate)) * radius(d.numItem); const polarY2 = (d) => Math.sin(angle(d.endDate)) * radius(d.numItem); const polarLine = d3.line().x(polarX).y(polarY); const polarLine2 = d3.line().x(polarX2).y(polarY2); svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`) .append("path") .datum(data) .attr("d", polarLine) .attr("fill", "none") .attr("stroke", "lightblue"); svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`) .append("path") .datum(data) .attr("d", polarLine2) .attr("fill", "none") .attr("stroke", "purple") .attr("stroke-opacity", 0.5); // svg // .append("g") // .selectAll("g") // .data(d3.group(data, (d) => d.startDate)) // .join("g") // .selectAll("circle") // .data((d) => d[1]) // .join("circle") // .attr("cx", polarX) // .attr("cy", (d, i) => polarY + 20 * i) // .attr("r", 10) // .attr("fill", (d) => color(d.color)) // .attr("opacity", 0.5); const dataByDate = d3.group(data, (d) => d.startDate); const dotX = (d, i) => Math.cos(angle(d.startDate)) * (radius(d.numItem) + 20 * i); const dotY = (d, i) => Math.sin(angle(d.startDate)) * (radius(d.numItem) + 20 * i); //ここ読み解く // svg // .append("g") // .attr("transform", `translate(${width / 2}, ${height / 2})`) // .selectAll("g") // .data(dataSameDay) // .join("g") // .selectAll("circle") // .data((d) => d[1]) // .join("circle") // .attr("cx", (d, i) => dotX(d, i)) // .attr("cy", (d, i) => dotY(d, i)) // .attr("r", 10) // .attr("fill", (d) => allcolor(d.color)) // .attr("opacity", 0.5); const colorG = svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`) .selectAll("g") .data(dataSameDay) .join("g") .selectAll("g") .data((d) => d[1]) .join("g") .attr("transform", (d, i) => `translate(${dotX(d, i)}, ${dotY(d, i)})`) //.attr("transform", (d, i) => `rotate(${i})`) .attr("fill", (d) => allcolor(d.color)) .attr("class", (d) => allcolor(d.color)); svg .selectAll("g.brown") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, tya)); svg .selectAll("g.white") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, shiro)); svg .selectAll("g.green") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, midori)); svg .selectAll("g.yellow") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, ki)); svg .selectAll("g.black") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, kuro)); svg .selectAll("g.red") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, aka)); svg .selectAll("g.orange") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, daidai)); svg .selectAll("g.no") .each((d, i, nodes) => d3.select(nodes[i]).call(appendSVG, nashi)); return svg.node(); }33:[{"id":"ef0fc6c8face43c5d01e0dbad0e8d97b4ade3d040b73345e79dc8fa87a40b8fe1a860d27a2a05e6935704c8f5f1ed4ea47f7d0bf4d724f2494d0596e2c0c11b0","href":"https://static.observableusercontent.com/files/ef0fc6c8face43c5d01e0dbad0e8d97b4ade3d040b73345e79dc8fa87a40b8fe1a860d27a2a05e6935704c8f5f1ed4ea47f7d0bf4d724f2494d0596e2c0c11b0","name":"image@1.png","type":"image/png","lastModified":1637899912893.011,"size":1035036},{"id":"0c0e76ca5728bcf6819df3a28b9f0c11c7d2481889c886f2c0cc8c29e4750e02f2ad715767e4aca73696869e1d7fa676a1aad5d38cc1aea347d1c1a49a6fcd45","href":"https://static.observableusercontent.com/files/0c0e76ca5728bcf6819df3a28b9f0c11c7d2481889c886f2c0cc8c29e4750e02f2ad715767e4aca73696869e1d7fa676a1aad5d38cc1aea347d1c1a49a6fcd45","name":"image.png","type":"image/png","lastModified":1637899879380.027,"size":1227779},{"id":"946d201700481761d2d103ccbadd967653ea1c655cf0785b0f6ad32e08b610c1b1b6ec06bf701d7ad6184291028d79394d375ecacccabc57b2d5ca474c0c833e","href":"https://static.observableusercontent.com/files/946d201700481761d2d103ccbadd967653ea1c655cf0785b0f6ad32e08b610c1b1b6ec06bf701d7ad6184291028d79394d375ecacccabc57b2d5ca474c0c833e","name":"image@2.png","type":"image/png","lastModified":1638002905191.562,"size":1291195}] 2f:{"title":"Meals for a week","cells":[{"id":0,"value":"# Meals for a week","pinned":true,"hidden":false,"mode":"md"},{"id":8,"value":"viewof name = Inputs.select(names, { label: \"Name\", value: \"佐久間\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"## 対応ルール\n### 直交座標\n　横軸に日時、縦軸に品数をとり、何日の何時に何品食べたのかを折れ線グラフで表しています。\n\n　　水色のライン：食事の開始時間（横軸）と品数（縦軸）\n\n　　紫色のライン：食事の終了時間（横軸）と品数（縦軸）\n \n　　　水色のラインと紫色のラインの“ズレ”から食事にかかった時間を読み取れます。\n\n　　折れ線グラフの頂点の上部にある三角形のマークでその食事の色を表します。\n\n### 極座標\n 円の1周に日時（品数のメモリがあるところから時計回りに1周）、半径に品数をとっています。\n\n　　折れ線グラフから放射状にのびる三角形のマークでその食事の色を表します。","pinned":false,"hidden":false,"mode":"md"},{"id":971,"value":"#### 色とマークの対応","pinned":false,"hidden":false,"mode":"md"},{"id":981,"value":"茶色","pinned":false,"hidden":false,"mode":"md"},{"id":490,"value":"tya = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"白色","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"shiro = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"緑色","pinned":false,"hidden":false,"mode":"md"},{"id":508,"value":"midori = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"黄色","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"ki = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"黒色","pinned":false,"hidden":false,"mode":"md"},{"id":518,"value":"kuro = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"赤色","pinned":false,"hidden":false,"mode":"md"},{"id":539,"value":"aka = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"橙色","pinned":false,"hidden":false,"mode":"md"},{"id":546,"value":"daidai = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"その他の色","pinned":false,"hidden":false,"mode":"md"},{"id":781,"value":"nashi = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"#### 終\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n以下コード","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":"function rAxis(g) {\n let gr = g\n .attr(\"class\", \"r axis\")\n .selectAll(\"g\")\n .data(r.ticks(5).slice(1))\n .enter()\n .append(\"g\");\n\n gr.append(\"circle\")\n .attr(\"r\", r)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#777\")\n .attr(\"stroke-dasharray\", \"1,4\");\n\n g.selectAll(\".axis :last-of-type circle\")\n .attr(\"stroke\", \"#333\")\n .attr(\"stroke-dasharray\", \"none\");\n gr.append(\"text\")\n .attr(\"y\", function (d) {\n return -r(d) - 4;\n })\n .attr(\"transform\", \"rotate(15)\")\n .style(\"text-anchor\", \"middle\")\n .text(function (d) {\n return d;\n })\n .attr(\"font-size\", 10)\n .attr(\"font-family\", \"sans-serif\");\n return gr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"function angleAxis(g) {\n let ga = g\n .attr(\"class\", \"a axis\")\n .selectAll(\"g\")\n //.data(d3.range(0, 360, 30)) //ここを日付に\n .data(d3.range(0 + 15, 360 + 15, 360 / days))\n .enter()\n .append(\"g\")\n .attr(\"transform\", function (d) {\n return `rotate(${d - 90})`;\n });\n\n ga.append(\"line\")\n .attr(\"x2\", radius)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#777\")\n .attr(\"stroke-dasharray\", \"1,4\");\n\n //日付表示したい\n // ga.append(\"text\")\n // .attr(\"x\", radius + 6)\n // .attr(\"dy\", \".35em\")\n // .style(\"text-anchor\", function (d) {\n // return d - 90 < 270 && d - 90 > 90 ? \"end\" : null;\n // })\n // .attr(\"transform\", function (d) {\n // return d - 90 < 270 && d - 90 > 90\n // ? \"rotate(180 \" + (radius + 6) + \",0)\"\n // : null;\n // })\n // .text(function (d) {\n // return d + \"°\";\n // })\n // .attr(\"font-size\", 10)\n // .attr(\"font-family\", \"sans-serif\");\n return ga;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"r = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.numItem)])\n .nice()\n .range([0, radius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"line = d3\n .radialLine()\n .radius(function (d) {\n return r(d[1]);\n })\n .angle(function (d) {\n return -d[0] - Math.PI / 2;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"radius = Math.min(width, height) / 2 - 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"width","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"days = dates.size","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { names, getData, allColors } from \"@sugi2000lab/2021-class-import-tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = getData(name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"dataSameDay = d3.group(data, (d) => d.startDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"dataWithDay = data.map((d) => ({\n day: new Date(\n d.startDate.getUTCFullYear(),\n d.startDate.getUTCMonth(),\n d.startDate.getUTCDate()\n ).getTime(),\n time: Math.floor(\n ((d.startDate.getUTCHours() * 60 + d.startDate.getUTCMinutes()) *\n 60 *\n 1000) /\n (6 * 60 * 60 * 1000)\n ),\n ...d\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"dates = d3.group(dataWithDay, (d) => d.day)","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"groupedData = d3.group(\n dataWithDay,\n (d) => d.day,\n (d) => d.time\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"colors = d3.group(data, (d) => d.color)","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"[...colors.keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"allColors","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"clonedTya = d3.select(tya).clone(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"clonedShiro = d3.select(shiro).clone(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"clonedMidori = d3.select(midori).clone(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"clonedKi = d3.select(ki).clone(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"clonedKuro = d3.select(kuro).clone(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"clonedAka = d3.select(aka).clone(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"clonedDaidai = d3.select(daidai).clone(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"clonedNashi = d3.select(nashi).clone(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"allcolor = d3\n .scaleOrdinal()\n .domain([\n \"白\",\n \"うす黄\",\n \"ピンク\",\n \"茶\",\n \"灰\",\n \"黒\",\n \"うす茶\",\n \"緑\",\n \"うす緑\",\n \"オレンジ\",\n \"赤\",\n \"黄緑\",\n \"黄\",\n \"うすオレンジ\",\n \"紫\",\n \"うす紫\",\n \"うす黄緑\",\n \"橙\",\n \"桃\",\n \"栗\",\n \"薄黄\",\n \"透明\",\n \"黄土\",\n \"薄茶\",\n \"薄緑\",\n \"薄い茶\"\n ])\n //.range(d3.schemeCategory10);\n .range([\n \"white\",\n \"yellow\",\n \"no\",\n \"brown\",\n \"no\",\n \"black\",\n \"brown\",\n \"green\",\n \"green\",\n \"orange\",\n \"red\",\n \"green\",\n \"yellow\",\n \"orange\",\n \"no\",\n \"no\",\n \"green\",\n \"orange\",\n \"no\",\n \"brown\",\n \"yellow\",\n \"no\",\n \"yellow\",\n \"brown\",\n \"green\",\n \"brown\"\n ])","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}