31:T837,{ const k = height / width; const svg = d3.select(scene(sx, sy)); // Keep centroid at the center of screen? const polygon = svg .append("path") .attr( "d", d3 .line() .x(d => sx(d.x)) .y(d => sy(d.y))(vertices.concat(vertices[0])) ) .attr("fill", "rgba(12, 170, 220, 0.25)") .attr("stroke", "rgba(20, 129, 186, 1)") .attr("stroke-width", 2) .on("zoom", function({ transform }) { d3.select(this) .attr("transform", transform) .attr("stroke-width", 2 / transform.k); }); const points = svg .selectAll("circle.vertex") .data(vertices.concat(centroid)) .enter() .append("circle") .attr("class", "vertex") .attr("r", 5) .attr("cx", d => sx(d.x)) .attr("cy", d => sy(d.y)) .attr("fill", "darkblue") .on("zoom", function({ transform }) { d3.select(this) .attr("transform", transform) .attr("r", 5 / transform.k); }); svg .append("circle") .attr("id", "centroid") .attr("r", 5) .attr("cx", sx(centroid.x)) .attr("cy", sy(centroid.y)) .attr("fill", "red") .on("zoom", function({ transform }) { d3.select(this) .attr("transform", transform) .attr("r", 5 / transform.k); }); const arrowLength = Math.min(width, height) / 5; svg .append("line") .attr("id", "1") .attr("x1", sx(centroid.x)) .attr("y1", sy(centroid.y)) .attr("x2", sx(centroid.x) + arrowLength * Math.cos(theta)) .attr("y2", sy(centroid.y) - arrowLength * Math.sin(theta)) .attr("stroke", "red") .on("zoom", function({ transform }) { d3.select(this).attr("transform", transform); }); svg .append("line") .attr("id", "1") .attr("x1", sx(centroid.x)) .attr("y1", sy(centroid.y)) .attr("x2", sx(centroid.x) - arrowLength * Math.cos(theta)) .attr("y2", sy(centroid.y) - arrowLength * Math.sin(theta)) .attr("stroke", "red") .on("zoom", function({ transform }) { d3.select(this).attr("transform", transform); }); return svg.node(); }32:[] 2f:{"title":"Section Properties Calculator","cells":[{"id":0,"value":"md`# Section Properties Calculator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"table = html`\n\n\n\n\n\n\n\n

no.	x	y
1	5	5
2	5	4
3	-4	4
4	-4	-5
5	-5	-5
6	-5	5

\n${Object.assign(html``, {\n onclick() {\n addRow(\"#data-table\");\n }\n})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"html`\n\n\n

${tex`A`}	${tex`I_{xx}`}	${tex`I_{yy}`}	${tex`I_{xy}`}	${tex`\\theta`}
${Math.round(area, 2)}	${Math.round(\n Ix,\n 2\n)}	${Math.round(Iy, 2)}	${Math.round(\n Ixy,\n 2\n)}	${Math.round(theta * (180 / Math.PI) * 100, 2) / 100}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`## Section Properties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"centroid = verticesCentroid(vertices)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"area = verticesArea(vertices)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"Ix = verticesMoI2(vertices, \"x\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"Iy = verticesMoI2(vertices, \"y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"Ixy = verticesMoI2(vertices, \"xy\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"theta = Math.atan(Ixy / (Iy - 0.5 * (Ix + Iy))) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`## Scene Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"sx = d3\n .scaleLinear()\n .domain(d3.extent(vertices, d => 1.2 * d.x))\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"sy = d3\n .scaleLinear()\n .domain(d3.extent(vertices, d => 1.2*d.y))\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`## Table Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"function addRow(selector) {\n const numOfRows = d3\n .select(selector)\n .selectAll(\"tr\")\n .size();\n const row = d3.select(selector).append(\"tr\");\n\n row.append(\"td\").text(numOfRows);\n row.append(\"td\").attr(\"contenteditable\", true);\n row.append(\"td\").attr(\"contenteditable\", true);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"vertices = tableData\n .map(d => ({ x: d.x, y: d.y }))\n .filter(d => d.x !== \"\" && d.y !== \"\")\n .map(d => ({ x: +d.x, y: +d.y }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"tableData = Generators.observe(notify => {\n const keyinput = event => notify(parseTableData(table));\n table.addEventListener(\"input\", keyinput, false);\n notify(parseTableData(table));\n return () => window.removeEventListener(\"input\", keyinput);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"import { parseTableData } from \"@tomgp/editable-table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"import {\n verticesCentroid,\n verticesArea,\n verticesMoI2\n} from \"@syaleni/algebra-helper-functions\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"import { scene } from \"@syaleni/parametric-curve-viewer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"import { components } from \"@syaleni/svg-plugins\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}