31:[] 2f:{"title":"geometric.pointInPolygon","cells":[{"id":0,"value":"md`# geometric.pointInPolygon\n\n[geometric.pointInPolygon](https://github.com/HarryStevens/geometric#pointInPolygon)(point, polygon) returns a boolean representing whether a point is inside a polygon.\n\nDrag the point to see it in action.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"inside = geometric.pointInPolygon(point, polygon)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"polygon\")\n .attr(\"points\", polygon);\n \n const point = svg.append(\"circle\")\n .attr(\"r\", radius)\n .attr(\"transform\", `translate(${[width / 2, height / 2]})`)\n .call(drag);\n \n function drag(sel){\n const selPoint = sel.attr(\"data-point\");\n \n const dragGenerator = d3.drag()\n .on(\"start\", start)\n .on(\"drag\", dragging)\n .on(\"end\", end);\n \n function start(){\n sel.classed(\"active\", 1);\n }\n \n function dragging(event){\n let x = Math.round(event.x);\n x = x < radius ? radius : x > width - radius ? width - radius : x;\n let y = Math.round(event.y);\n y = y < radius ? radius : y > height - radius ? height - radius : y;\n\n point\n .attr(\"transform\", `translate(${[x, y]})`);\n }\n \n function end(){\n sel.classed(\"active\", 0);\n }\n \n sel.call(dragGenerator);\n }\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"point = {\n while (true){\n const circle = d3.select(\"circle\");\n if (circle._groups[0][0]){\n yield circle.attr(\"transform\").split(\"(\")[1].split(\")\")[0].split(\",\").map(d => +d); \n }\n else {\n yield [0, 0];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"polygon = {\n const center = [width / 2, height / 2].map(d => Math.round(d));\n return [\n [center[0] - 100, center[1]],\n [center[0] - 30, center[1]],\n [center[0] - 30, center[1] - 40],\n [center[0] - 10, center[1] - 97],\n [center[0] - 2, center[1] - 100],\n [center[0], center[1] - 130],\n [center[0] + 2, center[1] - 100],\n [center[0] + 10, center[1] - 97],\n [center[0] + 30, center[1] - 40],\n [center[0] + 30, center[1]],\n [center[0] + 100, center[1]],\n [center[0] + 100, center[1] + 120],\n [center[0] - 100, center[1] + 120]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"{\n d3.select(\"polygon\").classed(\"inside\", inside);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"height = 300;","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"radius = 8;","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}