31:T63b,bainbridgeRaw = `

`32:T637,dorothyRaw = `

`33:T94d,elCoquiRaw = `

`34:[] 2f:{"title":"Community garden footprints","cells":[{"id":0,"value":"md`# Community garden footprints`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":138,"value":"ringPath = `M863 96L746 312L739 329L741 344L746 348L1105 392L1114 373L900 96L888 91z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"greenOasisPath = `M52 -443L-83 -201L325 26L459 -213L170 -379z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"bainbridgePath = `M171 532L159 534L205 824L339 805L295 513L240 522z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"bainbridgeDims = getDims(bainbridgeRaw)","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"dorothyPath = `M669 -327L531 -78L574 -54L712 -303z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"dorothyDims = getDims(dorothyRaw)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"elCoquiPath = `M1463 151L1464 149L1377 110L1171 13L1031 -43L1008 17L1193 96L1109 301L1358 406z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"elCoquiDims = getDims(elCoquiRaw)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}