2b:null 2c:["$","title",null,{"children":"Place random rectangle in a box | Muhammad Usman | Observable"}] 31:[] 2f:{"id":"55308cce24e33366","slug":"place-random-rectangle-in-a-box","title":"Place random rectangle in a box","thumbnail":"c0d2654a95655775d25dcb0cf0a39296a0fa1372ecb0eeaf46a4483fc76679ad","access_level":"public","create_time":"$D2021-04-27T11:50:35.041Z","update_time":"$D2021-05-21T12:08:36.272Z","view_time":null,"first_public_time":"$D2021-05-21T11:50:37.678Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"093eb8c734de2cec","login":"muhammad-usman17","name":"Muhammad Usman","avatar_url":"https://avatars-next.observableusercontent.com/3b966ac93e5e492f148010515c60f068cab871a0be44b03324fcbe5884ba4e0f","tier":"starter_2024"},"version":72,"publish_version":72,"role":null,"authored":false,"authors":[{"type":"individual","id":"efd52393487ce9a5","login":"muhammad-usman17","name":"Muhammad Usman","avatar_url":"https://avatars-next.observableusercontent.com/3b966ac93e5e492f148010515c60f068cab871a0be44b03324fcbe5884ba4e0f","tier":null}],"members":[{"type":"individual","id":"efd52393487ce9a5","login":"muhammad-usman17","name":"Muhammad Usman","avatar_url":"https://avatars-next.observableusercontent.com/3b966ac93e5e492f148010515c60f068cab871a0be44b03324fcbe5884ba4e0f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Place random rectangle in a box","cells":[{"id":0,"value":"md`# Place random rectangle in a box`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"svg = {\n const rectangles = generateRectangles();\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 400, 200]);\n const g = svg.append(\"g\");\n\n g.selectAll(\"rect\")\n .data(rectangles)\n .join(\"rect\")\n .attr(\"x\", d => d.p1.x + 20)\n .attr(\"y\", d => d.p1.y + 0.5)\n .attr('width', d => d.p2.x - d.p1.x - 1)\n .attr('height', d => d.p2.y - d.p1.y - 1)\n .style('fill', (d, i) => getRandomColor());\n\n svg.call(\n d3\n .zoom()\n .extent([[0, 0], [400, 200]])\n .scaleExtent([1, 10])\n .on(\"zoom\", zoomed)\n );\n function zoomed({ transform }) {\n g.attr(\"transform\", transform);\n }\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"function getRandomColor() {\n var color = '#';\n for (var i = 0; i < 6; i++) {\n color += (Math.random() * 16 | 0).toString(16);\n }\n return color;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"function Point(x, y) {\n this.x = x;\n this.y = y;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"function Rectangle(p1, p2) {\n this.p1 = p1;\n this.p2 = p2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"(Rectangle.prototype.isInside = function(r) {\n function check(a, b) {\n return (\n (a.p1.x <= b.p1.x &&\n b.p1.x <= a.p2.x &&\n a.p1.y <= b.p1.y &&\n b.p1.y <= a.p2.y) ||\n (a.p1.x <= b.p2.x &&\n b.p2.x <= a.p2.x &&\n a.p1.y <= b.p2.y &&\n b.p2.y <= a.p2.y) ||\n (a.p1.x <= b.p2.x &&\n b.p2.x <= a.p2.x &&\n a.p1.y <= b.p1.y &&\n b.p1.y <= a.p2.y) ||\n (a.p1.x <= b.p1.x &&\n b.p1.x <= a.p2.x &&\n a.p1.y <= b.p2.y &&\n b.p2.y <= a.p2.y)\n );\n }\n return check(this, r) || check(r, this);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"function generateRectangles() {\n function p() {\n return (Math.random() * 100) | 0;\n }\n function s() {\n return (25 + Math.random() * 50) | 0;\n }\n\n var rectangles = [],\n r,\n size,\n x,\n y,\n isInside,\n i,\n counter = 0;\n\n for (i = 0; i < 20; i++) {\n counter = 0;\n do {\n counter++;\n x = p();\n y = p();\n size = s();\n r = new Rectangle(new Point(x, y), new Point(x + size, y + size));\n isInside = rectangles.some(function(a) {\n return a.isInside(r);\n });\n } while (isInside && counter < 1000);\n counter < 1000 && rectangles.push(r);\n }\n return rectangles;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"