2e:null 2f:["$","title",null,{"children":"Community garden footprints | Alec Barrett | Observable"}] 34:T63b,bainbridgeRaw = `

`35:T637,dorothyRaw = `

`36:T94d,elCoquiRaw = `

`37:[] 32:{"id":"eefc690adba1e54f","slug":"community-garden-footprints","title":"Community garden footprints","thumbnail":"8f911e8cbb26f6dd22d8616dea283989c14ad05b7ae7b465a5074eb44de48483","access_level":"public","create_time":"$D2021-02-06T23:25:47.607Z","update_time":"$D2021-02-20T20:06:40.897Z","view_time":null,"first_public_time":"$D2021-02-07T00:39:55.174Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":"starter_2024"},"version":193,"publish_version":193,"role":null,"authored":false,"authors":[{"type":"individual","id":"3efd68de913f5c25","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":null}],"members":[{"type":"individual","id":"3efd68de913f5c25","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a9711f622981658a","slug":"everyrow","title":"EveryRow","owner":{"id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett"}},"type":"notebook","body":{"title":"Community garden footprints","cells":[{"id":0,"value":"md`# Community garden footprints`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viz = {\n const h = 600;\n const w = 600;\n\n const el = d3.select(DOM.element('div'))\n \n const path = data => `M${\n data.map(([x, y]) => `${x},${y}`)\n .join('L')\n }Z`;\n \n const maxes = data.map(d => d.path.reduce((acc, v) => {\n return [\n Math.max(acc[0], v[0]),\n Math.max(acc[1], v[1])\n ]\n }, [0, 0]))\n \n el.selectAll('svg')\n .data(data)\n .join('svg')\n .attr('width', (_,i) => maxes[i][0])\n .attr('height', (_,i) => maxes[i][1])\n .append('path')\n .attr('d', d => path(d.path))\n .attr('fill', d => d3.interpolateGreens(2 * sizeData[d.id])) // domain [0, 0.5] acres\n .attr('stroke', 'black')\n .attr('stroke-width', '1px')\n \n return el.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`The purpose of this notebook is to **draw the footprints of my community gardens into SVG paths**. My first attempt used a circuitous process:\n* Draw the footprints on https://www.geosq.com/geomeasure\n* Copy the divs representing the vertices of the polygon\n* Paste the divs here, and parse them to extract the \\`left\\` and \\`top\\` styles\n* Convert these points into an SVG path\n\nThen I found a better process:\n* Paste the GeoJSON into https://geojson.io/\n* Copy the SVG paths of the polygon\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"data = [\n { id: 'M180-GT001', path: ringPath },\n { id: 'BGT002', path: bainbridgePath }, \n { id: 'M398-GT001', path: dorothyPath },\n { id: 'X350-GT001', path: elCoquiPath },\n { id: 'M311-GT001', path: greenOasisPath }\n].map(({ path, id }) => {\n const arr = path.slice(1, -1).split('L').map(e => e.split(' ').map(f => +f))\n // normalize the starting points to the upper left\n const offsetX = d3.min(arr, e => e[0])\n const offsetY = d3.min(arr, e => e[1])\n return {\n id,\n path: arr.map(d => [d[0] - offsetX, d[1] - offsetY])\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"sizeData = ({\n \"M180-GT001\": 0.19,\n \"X350-GT001\": 0.28,\n \"M398-GT001\": 0.04,\n \"M311-GT001\": 0.41,\n \"BGT002\": 0.13\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"ringPath = `M863 96L746 312L739 329L741 344L746 348L1105 392L1114 373L900 96L888 91z`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"greenOasisPath = `M52 -443L-83 -201L325 26L459 -213L170 -379z`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"bainbridgePath = `M171 532L159 534L205 824L339 805L295 513L240 522z`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"bainbridgeDims = getDims(bainbridgeRaw)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"dorothyPath = `M669 -327L531 -78L574 -54L712 -303z`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"dorothyDims = getDims(dorothyRaw)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"elCoquiPath = `M1463 151L1464 149L1377 110L1171 13L1031 -43L1008 17L1193 96L1109 301L1358 406z`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"elCoquiDims = getDims(elCoquiRaw)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"getDims = (raw) => {\n const ds = d3.select(DOM.element('div'))\n .html(raw)\n .selectAll('div')\n let dims = [];\n ds.each(function(){\n const l = +d3.select(this).style('left').replace('px', '')\n const t = +d3.select(this).style('top').replace('px', '')\n dims.push({ l, t })\n })\n return dims;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"