45:["$","title",null,{"children":"Find Rectangles in a 2D Grid | victor mutai | Observable"}] 4d:T433,function getChart(dataset_) { dataset_ = dataset_[0].map((col, i) => dataset_.map(row => row[i])); var cols = dataset_.length; var rows = dataset_[0].length; var cellSize = ( radius * 2 ) + margin; const grid = d3.create("svg") .attr("width", cols * cellSize ) .attr("height", rows * cellSize ); grid.selectAll("g") .data(dataset_) .enter().append("g") .attr("transform", function (d, i) { return "translate(" + i * cellSize + ")" }) .selectAll("circle") .data(function(d) {return d;}) .enter().append("circle") .attr("fill", function(d) { if (d == 1) return "rgba(150,150,150,0.5)" else return "rgba(70, 130, 180,0.5)" }) .attr("stroke", function(d) { if (d==3) return "green" else if (d==4) return "#7E57C2" }) .attr("stroke-width", 3) .attr("fill-opacity", function (d) { return 1 }) .attr("r", radius) .attr("cx", radius) .attr("cy", function(d, i) { return radius + i * cellSize; }); return grid.node() }4e:[] 49:{"id":"2827a4dc2ac5c4cc","slug":"find-rectangles-in-a-2d-grid","title":"Find Rectangles in a 2D Grid","thumbnail":"8ccd759dc22ff750e0a64e67f3bca3fdb57c98b6d068ee973c98cc7069c99609","access_level":"public","create_time":"$D2019-08-06T20:37:05.988Z","update_time":"$D2019-08-08T12:46:47.580Z","view_time":null,"first_public_time":"$D2019-08-06T22:13:12.587Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"63e2f21b055afa2e","login":"victormutai","name":"victor mutai","avatar_url":"https://avatars-next.observableusercontent.com/36107ea5a8626eaf72070aa9ae4b32b42575b7e4e803b308f2edcecbaf96c2b1","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":402,"publish_version":402,"role":null,"authored":false,"authors":[{"type":"individual","id":"b1178843ca959bd9","login":"victormutai","name":"victor mutai","avatar_url":"https://avatars-next.observableusercontent.com/36107ea5a8626eaf72070aa9ae4b32b42575b7e4e803b308f2edcecbaf96c2b1","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"b1178843ca959bd9","login":"victormutai","name":"victor mutai","avatar_url":"https://avatars-next.observableusercontent.com/36107ea5a8626eaf72070aa9ae4b32b42575b7e4e803b308f2edcecbaf96c2b1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Find Rectangles in a 2D Grid","cells":[{"id":0,"value":"md`# Find Rectangles in a 2D Grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`## Algorithms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`1. isStart: finds the start of a rectangle\n2. findCurrentEnd: finds the end of the current rectangle \n3. findRectangles: uses 1 and 2 to find all rectangles. It returns an array that contains start and end of each rectangle\n\nCredit: these algorithms were written by Alexandra Beautyman.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"function isStart(indices, image) {\n let y = indices[0]\n let x = indices[1]\n if (image[y][x] !== 0) {\n return false\n }\n if ((-1 < y - 1 < image.length) && !!image[y - 1] && image[y - 1][x] === 0) {\n return false\n }\n if ((-1 < x - 1 < image[0].length) && image[y][x - 1] === 0) {\n return false\n }\n return true\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"function findCurrentEnd(indices, image) {\n let startJ = indices[0]\n let startI = indices[1]\n let endJ = startJ\n let endI = startI\n while (image[endJ][endI] === 0) {\n endI++\n }\n while (!!image[endJ] && image[endJ][startI] === 0) {\n endJ++\n }\n return [endJ - 1, endI - 1]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"function findRectangles(image) {\n let arrayOfStartsAndEnds = []\n for (let j = 0; j < image.length; j++) {\n for (let i = 0; i < image[0].length; i++) {\n if (isStart([j, i], image)) {\n let currentStart = [j, i]\n let currentEnd = findCurrentEnd(currentStart, image)\n arrayOfStartsAndEnds.push([currentStart, currentEnd])\n }\n }\n }\n return arrayOfStartsAndEnds\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`# Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"md`### Color Codes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`\nGrey: not part of a rectangle
\nSteelblue: part of a rectangle
\nGreen ring: start of a rectangle
\nPurple ring: end of a rectangle
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"md`Important: if a rectangle is composed of only one circle, then the circle will be steelblue with a purple ring`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`### Image1 - Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"grid_1 = { \n var res = JSON.parse(JSON.stringify(image1));\n var res2 = modifyData(res)\n console.log(res2)\n return getChart(res2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`### Image2 - Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"grid_2 = { \n var res = JSON.parse(JSON.stringify(image2));\n var res2 = modifyData(res)\n console.log(res2)\n return getChart(res2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`### Image3 - Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"grid_3 = { \n var res = JSON.parse(JSON.stringify(image3));\n var res2 = modifyData(res)\n console.log(res2)\n return getChart(res2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`### Image4 - Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"grid_4 = { \n var res = JSON.parse(JSON.stringify(image4));\n var res2 = modifyData(res)\n console.log(res2)\n return getChart(res2)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`## Example on how to use your own data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`#### Step 1: Get the data (image5)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"image5 = [\n [0, 1, 1, 0, 0],\n [0, 1, 1, 0, 0],\n [0, 1, 1, 0, 0],\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md`#### Step 2: Visualize the data (image5) and the results`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"grid_5 = { \n var res = JSON.parse(JSON.stringify(image5));\n var res2 = modifyData(res)\n console.log(res2)\n return getChart(res2)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"md`#### Step 2: Run your own experiments by modifying image5 or duplicating step 1 & 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md`## Visualization Section`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"function modifyData(data) { \n var rectangles = findRectangles(data)\n for (let i=0; i