30:T48a,{ if ( mapCentroids === null || projectedCentroids === null || gridMap === null ) { return md``; } if (gridMap.cells == null) { return md`*Cannot save (attempting to fit ${ mapCentroids.length } regions into a ${gridMap.nRows} by ${gridMap.nCols} grid of ${ gridMap.nRows * gridMap.nCols } cells)*`; } const [lngMin, latMin, lngMax, latMax] = mapBounds(mapFeatures).flat(); const [rows, cols] = [gridInput[0], gridInput[1]]; const xSc = d3.scaleLinear().domain([0, cols]).range([lngMin, lngMax]); const ySc = d3.scaleLinear().domain([0, rows]).range([latMin, latMax]); const output = ["["]; mapCentroids.forEach((p, i) => { const [r, c] = [gridMap.cells[i][0], gridMap.cells[i][1]]; output.push( `[[${xSc(c - 0.5)},${ySc(r - 0.5)}],[${xSc(c + 0.5)},${ySc( r - 0.5 )}],[${xSc(c + 0.5)},${ySc(r + 0.5)}],[${xSc(c - 0.5)},${ySc(r + 0.5)}]],` ); }); output.push("]"); // Save rectangle arrays in button press. return DOM.download( new Blob([output.join("\n")], { type: "application/txt" }), "grid.txt", "Save grid as polygon array" ); }31:T4a1,{ const loaded = await loadSettings.json(); const setInput = (input, value) => { input.value = value; input.dispatchEvent(new Event("input")); }; if (loaded.annotation) { setInput(viewof annotation, loaded.annotation); } if (loaded.projChoice !== null) { setInput(viewof projChoice, loaded.projChoice); } if (loaded.attrib) { // Bug in Inputs.Table prevents this from working at the moment // setInput(viewof attrib.attribute, loaded.attrib); } if (loaded.appearance !== null) { setInput(viewof appearanceInput, [ loaded.labelLength, loaded.scheme, loaded.colourBy ]); } if (loaded.gridInput !== null) { setInput(viewof gridInput, [ loaded.rows, loaded.cols, loaded.compactness, loaded.maxCandidates ]); } if (loaded.spacerHashes !== null) { mutable spacerHashes = loaded.spacerHashes; } if (loaded.showDisplacements !== null) { setInput(viewof showDisplacements, loaded.showDisplacements); } if (loaded.avtInput !== null) { setInput(viewof avtInput, [ loaded.alpha, loaded.dilation, loaded.numIterations ]); } return loaded; }32:T43f,metrics = { if (mapFeatures === null) { return [["Invalid geo/topoJSON", "", ""]]; } if (projectedCentroids === null) { return [["Invalid map projection", "", ""]]; } if (gridMap === null || gridMap.cells === null) { return [["Grid allocation not yet found", "", ""]]; } const numPolys = mapFeatures.features.reduce( (n, f) => n + f.geometry.coordinates.length, 0 ); const numRegions = mapCentroids.length; const numSpacers = spacerHashes.length; const ptsNorm = scalePtsToGrid( projectedCentroids, gridMap.nRows, gridMap.nCols ); const avDisp = sum( map2(ptsNorm, gridMap.cells, ([x, y], [row, col]) => Math.hypot(x - col, y - row) ) ) / numRegions; const avCost = sum(map2(ptsNorm, gridMap.cells, cost)) / numRegions; return [ ["Number of polygons", numPolys, ""], ["Num region polys", numRegions], ["Num spacers", numSpacers], ["Average displacement (% of one grid cell)", d3.format(".0%")(avDisp)], ["Average cost (distance-squared)", d3.format(".2f")(avCost)] ]; }33:T55e,We multiply each decision variable by the cost ${tex`c_i`} of placing the point in its allocated grid cell. The objective function attempts to minimise the sum of those costs: ${tex`\min \sum\limits_{i=0}^{n-1} c_ix_i`} We need to constrain the allocation of points to cells such that every point is allocated to one cell only. Assuming decision variables are sorted by point to allocate then row-wise cell to be allocated, we can express these constraints as: ${tex`\sum\limits_{i=0}^{k-1} x_i = 1, \sum\limits_{i=0}^{k-1} x_{i+k} = 1, \dots \sum\limits_{i=0}^{k-1} x_{i+ (j-1)k} = 1`} And that each cell can have at most, one point allocated to it: ${tex`\sum\limits_{i=0}^{j-1} x_{ki} \leq 1, \sum\limits_{i=0}^{j-1} x_{ki+1} \leq 1, \dots \sum\limits_{i=0}^{j-1} x_{ki+k-1} \leq 1`} The nature of the layout for any given set of points and cells will be determined by that cost function. For example, it might be the squared distance between the point's scaled geographic location and its grid location. If we scale points such that the entire set of points occupy the region of a single central grid cell (compactness = 1), the minimal cost allocation will cluster all points in the most central cells of the grid available (satisfying the constraints of no more than one point per cell). For example, the following scales 5 points to be as central as possible:34:T412,#### Allocating larger set of points The LP described above creates a decision variable for every combination of point to cell, so for a map containing ${tex`500`} regions and a grid of ${tex`25*25=625`} cells, we would require ${tex`500*625=312500`} variables. To speed the solving of the LP we can limit the number of candidate cell allocations for each point by only considering the cheapest ${tex`n`} cells. If ${tex`n`} is too small there is a risk of not finding a solution as there may not be sufficient cells available to allocate only one point. This is particularly a problem where there are regions of high point density that share a common set of low-cost cell allocations. To overcome this problem we can space out high density point locations with [AVTs](https://observablehq.com/@jwolondon/avtequalising) before allocating the now more evenly distributed points to cells. The cost of doing so is in losing a little geographic accuracy, but with suitable selections this can be small in comparison to the grid allocation.35:T422,function clip( clipRings, subjectRings, clipType = ClipperLib.ClipType.ctIntersection ) { const toPath = (coords) => coords.map(([x, y]) => Object.fromEntries([ ["X", x], ["Y", y] ]) ); const fromPath = (path) => path.map((obj) => Object.entries(obj).map((o) => o[1])); const clipPaths = clipRings.map((ring) => toPath(ring)); const subjectPaths = subjectRings.map((ring) => toPath(ring)); const clipper = new ClipperLib.Clipper(); const scale = 100; ClipperLib.JS.ScaleUpPaths(clipPaths, scale); ClipperLib.JS.ScaleUpPaths(subjectPaths, scale); clipper.AddPaths(clipPaths, ClipperLib.PolyType.ptClip, true); clipper.AddPaths(subjectPaths, ClipperLib.PolyType.ptSubject, true); let result = new ClipperLib.Paths(); const subjectFillType = ClipperLib.PolyFillType.pftNonZero; const clipFillType = ClipperLib.PolyFillType.pftNonZero; clipper.Execute(clipType, result, subjectFillType, clipFillType); ClipperLib.JS.ScaleDownPaths(result, scale); return result.map(fromPath); }36:T59c,function relax(pts, alpha, dilation, numIterations = 100) { // Scale points to grid space before performing AVT const xDomain = d3.extent(pts.map((p) => p[0])); const yDomain = d3.extent(pts.map((p) => p[1])); const [w, h] = [gridInput[1] * 1000, gridInput[0] * 1000]; const xScale = d3.scaleLinear().domain(xDomain).range([0, w]); const yScale = d3.scaleLinear().domain(yDomain).range([0, h]); const xInvScale = d3.scaleLinear().domain([0, w]).range(xDomain); const yInvScale = d3.scaleLinear().domain([0, h]).range(yDomain); let scPts = pts.map(([x, y]) => [xScale(x), yScale(y)]).flat(); // Perform AVT within clipped dilated alphashape of points const delaunay = new d3.Delaunay(scPts); const voronoi = delaunay.voronoi([0, 0, w, h]); const omega = 0.5; // Site to centroid projection; const clipRegion = bounds(scPts, alpha, dilation, w, h); for (let it = 0; it < numIterations; it++) { [...voronoi.cellPolygons()].forEach((poly, i) => { clip(clipRegion, [poly]).forEach((cell) => { const x0 = scPts[i * 2]; const y0 = scPts[i * 2 + 1]; const [x1, y1] = d3.polygonCentroid(cell); scPts[i * 2] = x0 + (x1 - x0) * omega; scPts[i * 2 + 1] = y0 + (y1 - y0) * omega; }); }); voronoi.update(); } // Scale points back to geographic space and chunk into [x,y] pairs return chunk(scPts, 2).map(([x, y]) => [xInvScale(x), yInvScale(y)]); }37:Td64,function drawGrid(r, grid, pts, spacers = []) { const ptsNorm = scalePtsToGrid(pts, grid.nRows, grid.nCols, 0); const isSpacer = (r, c) => { let matched = false; spacerHashes.forEach((spacerHash) => { if (r * grid.nCols + c === spacerHash) matched = true; }); return matched; }; if (grid.cells == null) { r.push() .fit([ [0, 0], [1, 1] ]) .stroke() .fill("rgb(75,25,17)") .textSize(12) .textAlign("middle") .text( `Cannot fit ${pts.length} regions into a ${grid.nRows}x${grid.nCols} grid`, 0.5, 0.5 ) .pop(); return r; } r.push().fit([ [-0.5, -0.5], [grid.nCols, grid.nRows] ]); // Allow interaction const eventToGrid = (ev) => { const [col, row] = r.screenToData(d3.pointer(ev)); const yPos = Math.floor(row + 0.5); const xPos = Math.floor(col + 0.5); return yPos * grid.nCols + xPos; }; r.addListener("click", (ev) => { const newSpacers = mutable spacerHashes; const clickedHash = eventToGrid(ev); const index = newSpacers.indexOf(clickedHash); if (index === -1) { if (pts.length + newSpacers.length < grid.nCols * grid.nRows) { newSpacers.push(clickedHash); } } else { newSpacers.splice(index, 1); } mutable spacerHashes = newSpacers; }); // Size text so it fits within a cell. const [x0, y0] = r.dataToScreen([0, 0]); const [x1, y1] = r.dataToScreen([1, 0]); const maxLen = Math.max(...mapCentroids.map((c) => c[2].length)); const numChars = appearanceInput[0] < 0 ? maxLen : appearanceInput[0]; const tSize = (x1 - x0) / numChars; // If we have found a feasible solution, plot grid cells. if (grid.cells.length === pts.length) { r.stroke().textSize(tSize).textAlign("middle").textBaseline("middle"); pts.forEach((p, i) => { if (mapCentroids[i] != null) { colourFunction ? r.fill(colourFunction[1](mapCentroids[i][3])) : r.fill("rgba(220,140,95,0.3"); r.polygon([ [grid.cells[i][1] - 0.5, grid.cells[i][0] - 0.5], [grid.cells[i][1] - 0.5, grid.cells[i][0] + 0.5], [grid.cells[i][1] + 0.5, grid.cells[i][0] + 0.5], [grid.cells[i][1] + 0.5, grid.cells[i][0] - 0.5] ]); if (appearanceInput[0] !== 0) { r.fill("rgb(75,25,17)").text( mapCentroids[i][2].substring(0, numChars), grid.cells[i][1], grid.cells[i][0] ); } } }); } r.stroke("#eee").fill(); for (let row = 0; row < grid.nRows; row++) { for (let col = 0; col < grid.nCols; col++) { if (isSpacer(row, col)) { r.push() .stroke("#aaa") .lines([ [ [col - 0.5, row - 0.5], [col + 0.5, row + 0.5] ], [ [col - 0.5, row + 0.5], [col + 0.5, row - 0.5] ] ]) .pop(); } r.polygon([ [col - 0.5, row - 0.5], [col - 0.5, row + 0.5], [col + 0.5, row + 0.5], [col + 0.5, row - 0.5] ]); } } if (showDisplacements && gridMap != null) { r.fill().stroke("firebrick").strokeWidth(0.4); ptsNorm.forEach(([x, y], i) => { r.bezier(dCurve([x, y], [gridMap.cells[i][1], gridMap.cells[i][0]])); }); } return r.pop(); }38:[{"id":"22bf568a0e15ca27f0d557463d2f8309247623a9acceae2275c52287f5a45171c7ff110266c7bd98fecc6c0d2e31db36c3d8f91fddeb102ef70781cbd817a4f6","href":"https://static.observableusercontent.com/files/22bf568a0e15ca27f0d557463d2f8309247623a9acceae2275c52287f5a45171c7ff110266c7bd98fecc6c0d2e31db36c3d8f91fddeb102ef70781cbd817a4f6","name":"dispersedAllocation.png","type":"image/png","lastModified":1642678576435.038,"size":88076},{"id":"eef61b0c92163efd829bbdb501f89d5ab631000201c0ca943b5c836892be8c74d4c666e8d699f98c1470043efb05d1698d0d6e6f0f3159b03c1a2e2b8e3a274a","href":"https://static.observableusercontent.com/files/eef61b0c92163efd829bbdb501f89d5ab631000201c0ca943b5c836892be8c74d4c666e8d699f98c1470043efb05d1698d0d6e6f0f3159b03c1a2e2b8e3a274a","name":"compactAllocation.png","type":"image/png","lastModified":1642678340121.528,"size":15606},{"id":"4e06d4168bbee2a0a0a21210294f63b24a546515f43a2fd9fdb8dae67e808aa7164d5454c79d7b9de22f53b71e23be13c31d968c7394b72f95f0c5b7e407f01c","href":"https://static.observableusercontent.com/files/4e06d4168bbee2a0a0a21210294f63b24a546515f43a2fd9fdb8dae67e808aa7164d5454c79d7b9de22f53b71e23be13c31d968c7394b72f95f0c5b7e407f01c","name":"faithfulAllocation.png","type":"image/png","lastModified":1642679503048.131,"size":22071},{"id":"0c5b2c8cbfea8992bbdf7221972993ee0aca703eb040712447cdb08b7d6adde216442623cd955e0c54ecf2c7d0f1ac6c8b768f5627fe4d037a13501ad5e08439","href":"https://static.observableusercontent.com/files/0c5b2c8cbfea8992bbdf7221972993ee0aca703eb040712447cdb08b7d6adde216442623cd955e0c54ecf2c7d0f1ac6c8b768f5627fe4d037a13501ad5e08439","name":"lpGridVars@1.png","type":"image/png","lastModified":1642674743979.443,"size":51813}] 2e:{"title":"Gridded Region Editor","cells":[{"id":0,"value":"# Gridded Region Editor\n\nFor semi-automated and interactive generation of alternative region geographies.","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"## Step 1: Choose regions to use\n\nThis should be a topojson file containing a set of regions that you wish to grid.","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"viewof regionFile = Inputs.file({\n label: \"Region file:\",\n accept: \".json,.topojson\",\n required: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"## Step 2: Choose map projection\n\nIf the input regions are already in the correct projection, select 'Unprojected'.","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"viewof projChoice = Inputs.select(\n [\"Unprojected\", \"OSGB\", \"Equal Earth\", \"Orthographic\"],\n {\n label: \"Projection\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"## Step 3: Choose display settings\n\nSelect one of the region attributes from the table below to be used as map/grid labels. A label length of -1 will show entire label; a length of 0 will not show any labels, otherwise label truncated to given length. Regions may be coloured by one of the attributes with a given colour scheme. For topojson files that contain multi-level geographies this can be a useful way of assessing the degree to which higher level geographies are maintained when gridding.","pinned":false,"hidden":false,"mode":"md"},{"id":191,"value":"viewof attrib = {\n if (mapFeatures === null) {\n return md``;\n }\n const fs = mapFeatures.features[0];\n const atts = [];\n if (fs.id) {\n atts.push({ attribute: \"id\", example: fs.id, spacer: \"\" });\n }\n if (fs.properties) {\n Object.entries(fs.properties).map(([k, v]) =>\n atts.push({\n attribute: \"properties.\" + k,\n example: v,\n spacer: \"\"\n })\n );\n }\n return Inputs.table(atts, {\n width: { spacer: 1000 },\n layout: \"auto\",\n value: atts[0],\n multiple: false,\n header: { spacer: \"\" }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"viewof appearanceInput = mapFeatures === null\n ? md``\n : Inputs.form([\n Inputs.range([-1, 12], {\n value: 3,\n step: 1,\n label: \"Label length\"\n }),\n Inputs.select([\"fixed\", \"browns\", \"muted\", \"bold\"], {\n value: \"browns\",\n label: \"Colour scheme\"\n }),\n Inputs.select(attNames, {\n label: \"Colour by\"\n })\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"## Step 4: Generate Grid","pinned":false,"hidden":false,"mode":"md"},{"id":841,"value":"### Grid Settings\n\nChoose the dimensions of the grid into which you wish to allocate regions. The compactness measure determines the degree of attraction towards the centre of the grid. A value of 0 tries to use the full grid for allocation, values greater than 0 cluster cells to the centre, values less than 0 spread towards the edges.\n\nFor large grids, the allocation can be speeded up by considering up to a fixed maximum number of candidate cells to allocate, choosing the ${tex`n`} closest to each point.","pinned":false,"hidden":false,"mode":"md"},{"id":1613,"value":"viewof gridInput = Object.assign(\n Inputs.form([\n Inputs.range([2, 40], {\n value: 12,\n step: 1,\n label: \"Rows\"\n }),\n Inputs.range([2, 40], {\n value: 12,\n step: 1,\n label: \"Columns\"\n }),\n Inputs.range([-1, 1], {\n value: 0,\n step: 0.01,\n label: \"Compactness\"\n }),\n Inputs.range([1, 200], {\n value: 40,\n step: 1,\n label: \"Maximum number of cell candidates\"\n })\n ]),\n {\n oninput: (event) => {\n return event.isTrusted && event.stopImmediatePropagation();\n },\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"{\n if (projectedCentroids) {\n const r = new Renderer(800, 400);\n return drawMap(\n r,\n mapFeatures,\n projMap.get(projChoice),\n mapCentroids\n ).render();\n } else {\n return new Renderer(400, 20)\n .stroke()\n .text(\"Select map projection first.\", 30, 15)\n .render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2132,"value":"{\n if (projectedCentroids) {\n const ar = gridInput[0] / gridInput[1];\n const maxSize = Math.max(500, 120 * Math.log(gridInput[0] * gridInput[1]));\n const [w, h] =\n ar <= 1\n ? [maxSize, Math.max(400, maxSize * ar)]\n : [Math.max(400, maxSize / ar), maxSize];\n\n const r = new Renderer(w, h);\n if (gridMap === null) {\n const blankGrid = {\n nRows: gridInput[0],\n nCols: gridInput[1],\n cells: []\n };\n drawGrid(r, blankGrid, spacedCentroids, spacerHashes);\n return r.stroke().text(\"No feasible grid allocation\", 5, 15).render();\n }\n drawGrid(r, gridMap, spacedCentroids, spacerHashes);\n return r.render();\n } else {\n return new Renderer(400, 20)\n .stroke()\n .text(\"Select map projection first.\", 30, 15)\n .render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"Click on grid cell to toggle spacer at that location.","pinned":false,"hidden":false,"mode":"md"},{"id":827,"value":"viewof clearSpacers = Inputs.button(\"Clear spacers\", {\n value: null,\n reduce: () => (mutable spacerHashes = [])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"viewof showDisplacements = Inputs.toggle({\n label: \"Show displacements\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"viewof metricsTable = {\n if (mapFeatures === null || projectedCentroids === null) {\n return md``;\n }\n\n return Inputs.table(metrics, {\n layout: \"auto\",\n width: { 2: 1000 },\n align: { 1: \"right\" },\n header: { 0: \"Metrics\", 1: \"\", 2: \"\" },\n required: false\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"{\n if (\n mapCentroids === null ||\n projectedCentroids === null ||\n gridMap === null\n ) {\n return md``;\n }\n if (gridMap.cells == null) {\n return md`*Cannot save (attempting to fit ${\n mapCentroids.length\n } regions into a ${gridMap.nRows} by ${gridMap.nCols} grid of ${\n gridMap.nRows * gridMap.nCols\n } cells)*`;\n }\n\n const clean = (s) => (s.includes(\",\") ? `\"${s}\"` : s);\n\n // CSV header\n const output = [attrib.attribute + \",row,col,x,y\"];\n // CSV body\n mapCentroids.forEach((p, i) =>\n output.push(\n `${clean(\"\" + p[2])},${gridMap.cells[i][0]},${gridMap.cells[i][1]},${\n p[0]\n },${p[1]}`\n )\n );\n\n // Save CSV in button press.\n return DOM.download(\n new Blob([output.join(\"\\n\")], {\n type: \"application/txt\"\n }),\n \"grid.csv\",\n \"Save grid as CSV\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2877,"value":"{\n if (\n mapCentroids === null ||\n projectedCentroids === null ||\n gridMap === null\n ) {\n return md``;\n }\n if (gridMap.cells == null) {\n return md`*Cannot save (attempting to fit ${\n mapCentroids.length\n } regions into a ${gridMap.nRows} by ${gridMap.nCols} grid of ${\n gridMap.nRows * gridMap.nCols\n } cells)*`;\n }\n\n const clean = (s) => (s.includes(\",\") ? `\"${s}\"` : s);\n\n // Boundary info and header\n const output = [\n JSON.stringify(boundaryInfo),\n attrib.attribute + \",row,col,x,y\"\n ];\n\n // Grid info\n mapCentroids.forEach((p, i) =>\n output.push(\n `${clean(\"\" + p[2])},${gridMap.cells[i][0]},${gridMap.cells[i][1]},${\n p[0]\n },${p[1]}`\n )\n );\n\n // Save CSV in button press.\n return DOM.download(\n new Blob([output.join(\"\\n\")], {\n type: \"application/txt\"\n }),\n \"grid.txt\",\n \"Save grid as text file with bounds\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2806,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"### AVT Settings","pinned":false,"hidden":false,"mode":"md"},{"id":1622,"value":"viewof avtInput = Object.assign(\n Inputs.form([\n Inputs.range([0.01, 6], {\n label: \"alpha\",\n value: 5,\n step: 0.01\n }),\n Inputs.range([0, 60], {\n value: 18,\n label: \"Dilation\",\n step: 1\n }),\n\n Inputs.range([0, 200], {\n value: 0,\n label: \"Number of iterations\",\n step: 1\n })\n ]),\n {\n oninput: (event) => {\n return event.isTrusted && event.stopImmediatePropagation();\n },\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1625,"value":"drawCentroids(spacedCentroids)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2551,"value":"## Save and Restore Settings\n","pinned":false,"hidden":false,"mode":"md"},{"id":2281,"value":"viewof annotation = Inputs.textarea({\n label: \"Annotation\",\n placeholder: \"Add notes here to be stored when saving region editor settings.\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2257,"value":"{\n const settings = {\n annotation: annotation,\n regionFile: regionFile.name,\n projChoice: projChoice,\n attrib: attrib,\n labelLength: appearanceInput[0],\n scheme: appearanceInput[1],\n colourBy: appearanceInput[2],\n rows: gridInput[0],\n cols: gridInput[1],\n compactness: gridInput[2],\n maxCandidates: gridInput[3],\n spacerHashes: spacerHashes,\n showDisplacements: showDisplacements,\n alpha: avtInput[0],\n dilation: avtInput[1],\n numIterations: avtInput[2]\n };\n // Save user-input settings as JSON on button press.\n return DOM.download(\n new Blob([JSON.stringify(settings, null, 2)], {\n type: \"application/txt\"\n }),\n \"regionGridSettings.json\",\n \"Save region editor settings\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2294,"value":"viewof loadSettings = Inputs.file({\n label: \"Load settings\",\n accept: \".json\",\n required: true\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2297,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":539,"value":"### A.1 Spatial data\n\n*These will update when new input map data are selected:*","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"regionJson = await regionFile.json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"mapFeatureName = regionJson.objects ? Object.keys(regionJson.objects)[0] : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"mapFeatures = {\n const geo = mapFeatureName\n ? topojson.feature(regionJson, regionJson.objects[mapFeatureName])\n : regionJson;\n\n if (geo.features) {\n geo.features = geo.features.filter((f) => f.geometry !== null); // Exclude any features without geometry\n return geo;\n }\n // Neither a geoJSON or topoJSON.\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2777,"value":"attNames = {\n if (mapFeatures === null) {\n return [];\n }\n return mapFeatures.features[0].id\n ? [\"id\", ...Object.keys(mapFeatures.features[0].properties)]\n : Object.keys(mapFeatures.features[0].properties);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"nullFeatures = {\n const geo = mapFeatureName\n ? topojson.feature(regionJson, regionJson.objects[mapFeatureName])\n : regionJson;\n\n if (geo.features) {\n return geo.features.filter((f) => f.geometry === null);\n }\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"mapCentroids = {\n return mapFeatures\n ? mapFeatures.features.map((mapFeatureName) => [\n ...getCentroid(mapFeatureName),\n `` + resolve(mapFeatureName, attrib.attribute),\n `` + resolve(mapFeatureName, \"properties.\" + appearanceInput[2])\n ])\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"projectedCentroids = {\n if (mapFeatures === null) {\n return null;\n }\n\n const projCentroids = mapCentroids\n .map((b) => b.slice(0, 2))\n .map(projMap.get(projChoice));\n\n return projCentroids.some((e) => e === null) ? null : projCentroids;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2425,"value":"mapCoG = {\n const [totalX, totalY] = projectedCentroids.reduce(\n ([sumX, sumY], [x, y]) => [sumX + x, sumY + y],\n [0, 0]\n );\n return [\n totalX / projectedCentroids.length,\n totalY / projectedCentroids.length\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1842,"value":"gCentroids = {\n if (projectedCentroids === null) {\n return null;\n }\n const xDomain = d3.extent(projectedCentroids.map((p) => p[0]));\n const yDomain = d3.extent(projectedCentroids.map((p) => p[1]));\n const xSc = d3\n .scaleLinear()\n .domain(xDomain)\n .range([0, gridInput[1] - 1]);\n const ySc = d3\n .scaleLinear()\n .domain(yDomain)\n .range([0, gridInput[0] - 1]);\n return projectedCentroids.map(([x, y]) => [xSc(x), ySc(y)]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"*These will update when new grid or AVT settings are applied:*","pinned":false,"hidden":false,"mode":"md"},{"id":1240,"value":"spacedCentroids = projectedCentroids === null\n ? null\n : relax(projectedCentroids, ...avtInput)","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"*These will update when new grid settings are applied:*","pinned":false,"hidden":false,"mode":"md"},{"id":751,"value":"mutable spacerHashes = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"gridMap = {\n if (spacedCentroids) {\n try {\n return await pointsToGrid(\n spacedCentroids,\n gridInput[0],\n gridInput[1],\n gridInput[2]\n );\n } catch (err) {\n return null;\n }\n } else {\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1169,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2861,"value":"boundaryInfo = {\n const ewExtent = d3.extent(mapCentroids.map((c) => c[0]));\n const nsExtent = d3.extent(mapCentroids.map((c) => c[1]));\n\n const ar = gridInput[0] / gridInput[1];\n const maxSize = Math.max(500, 120 * Math.log(gridInput[0] * gridInput[1]));\n const [w, h] =\n ar <= 1\n ? [Math.round(maxSize), Math.round(Math.max(400, maxSize * ar))]\n : [Math.round(Math.max(400, maxSize / ar)), Math.round(maxSize)];\n\n return {\n nCols: gridInput[1],\n nRows: gridInput[0],\n west: ewExtent[0],\n east: ewExtent[1],\n south: nsExtent[0],\n north: nsExtent[1],\n w: w,\n h: h\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"### A.2 Linear Programming","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"*For the LP solver and algebraic parser, noting the GPL licence for the glpk backend:*","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"import { mip } from \"@tomlarkworthy/mip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"For each of the ${tex`j`} points that we wish to allocate to one of ${tex`k`} grid cells, we represent each of its possible grid positions as a Boolean decision variable ${tex`x_i`}. There will be ${tex`n = j k`} decision variables in total. For example, to allocate ${tex`j=2`} points ${tex`A, B`} to one of ${tex`k=3`} possible grid cells (bottom-right cell is a spacer so not available), we order the decision variables ${tex`x_0 \\dots x_5`} as follows:\n","pinned":false,"hidden":false,"mode":"md"},{"id":1553,"value":"FileAttachment(\"lpGridVars@1.png\").image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":1544,"value":"FileAttachment(\"compactAllocation.png\").image({ width: 150 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"If we scale the points to fit within the region of the entire grid (compactness = 0) the optimal solution is a more faithful point to grid allocation, but less compact with the possibility of gaps:","pinned":false,"hidden":false,"mode":"md"},{"id":1583,"value":"FileAttachment(\"faithfulAllocation.png\").image({ width: 150 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1561,"value":"Enlarging the scaling to be much greater than the grid dimensions (compactness = -1) generates an optimal allocation towards the edges of the grid:","pinned":false,"hidden":false,"mode":"md"},{"id":1568,"value":"FileAttachment(\"dispersedAllocation.png\").image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1573,"value":"We can therefore control the compactness of the allocation by this scaling coefficient, allowing a continuum between compact, faithful and dispersed allocations.","pinned":false,"hidden":false,"mode":"md"},{"id":1789,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"*For creating an array of grid locations with possible spacers:*","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"function gridLocations(nRows, nCols, spacers = []) {\n const isSpacer = (r, c) => {\n let matched = false;\n spacers.forEach((spacerHash) => {\n if (r * nCols + c === spacerHash) matched = true;\n });\n return matched;\n };\n\n const grd = [];\n for (let row = 0; row < nRows; row++) {\n for (let col = 0; col < nCols; col++) {\n if (!isSpacer(nRows - 1 - row, col)) {\n grd.push([nRows - 1 - row, col]);\n }\n }\n }\n return { nRows: nRows, nCols: nCols, cells: grd };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"*Cost function (how costly it is to move from point (x,y) to grid position (r,c)):*","pinned":false,"hidden":false,"mode":"md"},{"id":1639,"value":"cost = ([x, y], [r, c]) => (x - c) * (x - c) + (y - r) * (y - r)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1642,"value":"*Mapping of each point to grid cell possibilities, capped to some maximum number of lowest cost candidates:*","pinned":false,"hidden":false,"mode":"md"},{"id":1646,"value":"cellsPerPoint = Math.min(gridInput[0] * gridInput[1], gridInput[3])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1649,"value":"candidates = {\n if (spacedCentroids === null) {\n return null;\n }\n const pts = spacedCentroids;\n const grid = gridLocations(gridInput[0], gridInput[1], spacerHashes);\n const costOrder = ([i1, c1], [i2, c2]) => c1 - c2;\n\n // Too many points for the available number of grid cells.\n if (pts.length > grid.cells.length) {\n return [];\n }\n\n // Input points are AVT relaxed then scaled to grid, modified by compactness setting\n const ptsNorm = scalePtsToGrid(pts, grid.nRows, grid.nCols, gridInput[2]);\n\n // Generate array of candidate grid positions for each point, stored in same order as original points.\n // Each point has an ordered list of the n lowest cost grid position to which it could be allocated.\n const candidates = [];\n ptsNorm.forEach((pt) =>\n candidates.push(\n grid.cells\n .map((g, i) => [i, cost(pt, g)])\n .sort(costOrder)\n .slice(0, cellsPerPoint)\n )\n );\n return candidates;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1652,"value":"function scalePtsToGrid(pts, nRows, nCols, compactness = 0) {\n // Scale to rectangle centred at middle of gird.\n // Size of grid inversely proportional to compactness\n const cenPts = pts.map(([x, y]) => [x - mapCoG[0], y - mapCoG[1]]);\n\n const xRadius = Math.max(...cenPts.map(([x, y]) => Math.abs(x)));\n const yRadius = Math.max(...cenPts.map(([x, y]) => Math.abs(y)));\n const cc = (nCols - 1) / 2;\n const cr = (nRows - 1) / 2;\n\n const gScale =\n (1.001 - (compactness < 0 ? 50 * Math.pow(compactness, 3) : compactness)) *\n // Math.min((nCols - 1) / (2 * xRadius), (nRows - 1) / (2 * yRadius));\n Math.min(nCols / (2 * xRadius), nRows / (2 * yRadius));\n\n return cenPts.map(([x, y]) => [cc + x * gScale, cr + y * gScale]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"*The coefficient numbers of candidates grouped by cell:*","pinned":false,"hidden":false,"mode":"md"},{"id":1659,"value":"cellCoefficients = {\n const map = {};\n candidates.forEach((ptCandidates, i) => {\n ptCandidates.forEach(([gPos, _], j) => {\n if (map[gPos]) {\n map[gPos].push(i * ptCandidates.length + j);\n } else {\n map[gPos] = [i * ptCandidates.length + j];\n }\n });\n });\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"*LP objective function and constraints generators:*","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"function objective() {\n const vars = [];\n candidates.forEach((ptCandidates, i) => {\n ptCandidates.forEach(([gridIndex, cost], j) => {\n if (cost != 0) {\n vars.push(\n (cost == 1 ? \"\" : cost) + \"x\" + (i * ptCandidates.length + j)\n );\n }\n });\n });\n return vars.join(\"+\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"function pointToOneCell() {\n const vars = [];\n candidates.forEach((ptCandidates, i) =>\n vars.push(\n ptCandidates\n .map((cell, j) => \"x\" + (i * ptCandidates.length + j))\n .join(\" + \") + \" == 1\"\n )\n );\n return vars;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"function cellMaxOnePoint() {\n const constraints = [];\n Object.values(cellCoefficients).forEach((coeffs) =>\n constraints.push(coeffs.map((c) => \"x\" + c).join(\" + \") + \" <= 1\")\n );\n return constraints;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"function vars() {\n return Array.from(Array(candidates.flat().length)).map((_, i) => \"x\" + i);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"*For generating and solving the grid allocation LP:*","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"function solveLP() {\n const lp = mip().objective(Math.min, objective());\n pointToOneCell().forEach((expr) => lp.subjectTo(expr));\n cellMaxOnePoint().forEach((expr) => lp.subjectTo(expr));\n vars().forEach((expr) => lp.var(expr, Boolean));\n return lp.solve();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"*For converting a set of irregular point locations to grid cells:*","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"async function pointsToGrid(pts, nRows, nCols, compactness = 0) {\n const grid = gridLocations(nRows, nCols, spacerHashes);\n if (pts.length > grid.cells.length) {\n return { nRows: nRows, nCols: nCols, cells: null };\n }\n\n const solution = await solveLP();\n const gPos = Object.entries(solution.vars)\n .filter((v) => v[1] == 1) // Select true variables\n .map((v) => Number(v[0].slice(1))) // The x-number corresponds to grid allocation.\n .sort((a, b) => a - b); // Keep grid positions in original point order\n\n const cellIndices = candidates.flat().map((a) => a[0]);\n\n return {\n nRows: nRows,\n nCols: nCols,\n cells: gPos.map((v) => grid.cells[cellIndices[v]])\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"### A.3 Voronoi and alpha-shape processing","pinned":false,"hidden":false,"mode":"md"},{"id":1673,"value":"*Allows a clipping region to be set around a collection of points:*","pinned":false,"hidden":false,"mode":"md"},{"id":1677,"value":"import { alphaHull, unconnected } from \"@jwolondon/alpha-shapes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"ClipperLib = require(\"https://makio135.gitlab.io/js/clipper.min.js\").catch(\n () => window.ClipperLib\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1799,"value":"*Allow the boundaries of a clipped region to be expanded:*","pinned":false,"hidden":false,"mode":"md"},{"id":1686,"value":"function dilate(poly, offset = 0, jt = ClipperLib.JoinType.jtMiter) {\n const toPath = (coords) =>\n coords.map(([x, y]) =>\n Object.fromEntries([\n [\"X\", x],\n [\"Y\", y]\n ])\n );\n const fromPath = (path) =>\n path.map((obj) => Object.entries(obj).map((o) => o[1]));\n\n let path = toPath(poly);\n\n // Ensure we have no very close vertices before dilating\n const cleanDelta = 0.1;\n path = ClipperLib.Clipper.CleanPolygon(path, cleanDelta);\n\n // Create the offset object.\n const miterLimit = 2;\n const arcTolerance = 0.25;\n const co = new ClipperLib.ClipperOffset(miterLimit, arcTolerance);\n co.AddPath(path, jt, ClipperLib.EndType.etClosedPolygon);\n\n const result = new ClipperLib.Path();\n co.Execute(result, offset);\n return fromPath(result[0]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"function bounds(scPts, a, dil, w = 640, h = 480) {\n const delaunay = new d3.Delaunay(scPts);\n const avR = avRadius(delaunay);\n const voronoi = delaunay.voronoi([0, 0, w, h]);\n const hull = alphaHull(delaunay, a * avR);\n const k = 10; // Radius of unconnected hexagons in geo coordinates\n const rings = unconnected(delaunay, a * avR).map(([x, y]) =>\n dilate(\n [\n [x + 0.866 * k, y + 0.5 * k],\n [x + 0.866 * k, y - 0.5 * k],\n [x, y - k],\n [x - 0.866 * k, y - 0.5 * k],\n [x - 0.866 * k, y + 0.5 * k],\n [x, y + k]\n ],\n dil\n )\n );\n\n hull.forEach((ring) => {\n rings.push(\n dilate(\n ring.map((v) => [delaunay.points[2 * v], delaunay.points[2 * v + 1]]),\n dil,\n ClipperLib.JoinType.jtSquare\n )\n );\n });\n return rings;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1692,"value":"function avRadius(delaunay) {\n const circumRadius = ([[x1, y1], [x2, y2], [x3, y3]]) => {\n const a2 = x1 - x2;\n const a3 = x1 - x3;\n const b2 = y1 - y2;\n const b3 = y1 - y3;\n const d1 = x1 * x1 + y1 * y1;\n const d2 = d1 - x2 * x2 - y2 * y2;\n const d3 = d1 - x3 * x3 - y3 * y3;\n const ab = (a3 * b2 - a2 * b3) * 2;\n const xa = (b2 * d3 - b3 * d2) / ab - x1;\n const ya = (a3 * d2 - a2 * d3) / ab - y1;\n if (isNaN(xa) || isNaN(ya)) {\n return 0;\n }\n return Math.sqrt(xa * xa + ya * ya);\n };\n const { points, triangles } = delaunay;\n\n const pts = [];\n triangles.forEach((i) => pts.push([points[i * 2], points[i * 2 + 1]]));\n const radii = Array.from({ length: pts.length / 3 }, (v, i) =>\n pts.slice(i * 3, i * 3 + 3)\n ).map(circumRadius);\n\n return radii.reduce((a, b) => a + b, 0) / radii.length;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1803,"value":"*Perform the AVT relaxation to space points apart. The amount of spacing is determined by the number of iterations:*","pinned":false,"hidden":false,"mode":"md"},{"id":1695,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"### A.4 Map data processing and rendering","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"*For the rendering:*","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"import { Renderer } from \"@jwolondon/renderer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1939,"value":"import { randGenerator } from \"@jwolondon/seeded-random-numbers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"*For reading and converting topoJSON files:*","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2344,"value":"*Projection name to type mapping:*","pinned":false,"hidden":false,"mode":"md"},{"id":2348,"value":"projMap = {\n const map = new Map();\n map.set(\"Unprojected\", d3.geoIdentity().reflectY(true));\n map.set(\"OSGB\", d3.geoTransverseMercator().rotate([2, 0]));\n map.set(\"Equal Earth\", d3.geoEqualEarth());\n map.set(\"Orthographic\", d3.geoOrthographic());\n map.set(\"US Albers\", d3.geoAlbersUsa());\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"*For automatic calculation of centroids from areas in a topoJSON file. For multipolygons (e.g. Western Isles), this will calculate the centroid of the polygon with the largest area.*","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"function getCentroid(feat) {\n if (feat.geometry.type === \"MultiPolygon\") {\n const maxPoly = ([aMax, coords], cs) => {\n const area = Math.abs(d3.polygonArea(cs.flat()));\n return area > aMax ? [area, cs] : [aMax, coords];\n };\n const [area, coords] = feat.geometry.coordinates.reduce(maxPoly, [0, []]);\n return d3.polygonCentroid(coords.flat());\n } else {\n return d3.polygonCentroid(feat.geometry.coordinates.flat());\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"*Draw a given geoJSON with labelled centroids:*","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"function drawMap(r, geoJson, proj, centroids) {\n r.push()\n // Draw the map\n .fill(\"rgba(220,140,95,0.3\")\n .stroke(\"white\")\n .strokeWidth(0.3)\n .setProjection(proj);\n\n if (colourFunction) {\n colourFunction[0] === \"id\"\n ? r.geoShape(geoJson, ...colourFunction)\n : r.geoShape(\n geoJson,\n \"properties.\" + colourFunction[0],\n colourFunction[1]\n );\n } else {\n r.geoShape(geoJson);\n }\n\n // Map labels\n if (appearanceInput[0] !== 0) {\n r.fill(\"rgb(75,25,17)\")\n .textAlign(\"middle\")\n .textBaseline(\"middle\")\n .textSize(6)\n .stroke();\n centroids.forEach(([x, y, label, clrBy]) =>\n r.text(\n appearanceInput[0] === -1\n ? \"\" + label\n : (\"\" + label).substring(0, appearanceInput[0]),\n x,\n y\n )\n );\n }\n\n return r.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2812,"value":"_Calculate the bounding rectangle of the given feature collection:_","pinned":false,"hidden":false,"mode":"md"},{"id":2817,"value":"function mapBounds(mapFeatures) {\n // Find all coordinates from features, flattening to account for possible multi-polygons.\n const coords = chunk(\n deepFlatten(mapFeatures.features.map((f) => f.geometry.coordinates))\n );\n\n // Find the extent of the x and y coordinates separately.\n const xExtent = d3.extent(coords.map(([x, _]) => x));\n const yExtent = d3.extent(coords.map(([_, y]) => y));\n return [\n [xExtent[0], yExtent[0]],\n [xExtent[1], yExtent[1]]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"*Allow features to be coloured according to user selection:*","pinned":false,"hidden":false,"mode":"md"},{"id":2008,"value":"colourFunction = {\n switch (appearanceInput[1]) {\n case \"browns\":\n const brownFn = (att) => {\n const rand = randGenerator(`` + att);\n return `hsla(20, ${20 + rand() * 50}%, ${60 + rand() * 20}%, 0.5)`;\n };\n return [`` + appearanceInput[2], brownFn];\n\n case \"bold\":\n return [`` + appearanceInput[2], d3.scaleOrdinal(d3.schemeTableau10)];\n\n case \"muted\":\n return [`` + appearanceInput[2], d3.scaleOrdinal(d3.schemeSet3)];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"*Draw centroids and labels only:*","pinned":false,"hidden":false,"mode":"md"},{"id":1702,"value":"function drawCentroids(pts, labels) {\n const [xMin, xMax] = d3.extent(pts.map(([x, y]) => x));\n const [yMin, yMax] = d3.extent(pts.map(([x, y]) => y));\n const ellipseSize = (xMax - xMin) / 100;\n const border = 50;\n\n const r = new Renderer(300, 300)\n .fit(\n [\n [xMin, yMin],\n [xMax, yMax]\n ],\n border\n )\n .textSize(6)\n .stroke();\n\n pts.forEach(([x, y], i) => {\n r.fill(\"firebrick\").ellipse(x, y, ellipseSize);\n if (labels && appearanceInput[0] !== 0 && labels[i] != null) {\n r.fill(\"rgba(0,0,0,0.5)\")\n .stroke()\n .text(\n appearanceInput[0] === -1\n ? \"\" + labels[i]\n : (\"\" + labels[i]).substring(0, appearanceInput[0]),\n x,\n y\n );\n }\n });\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"*Draw grid cells as text labels:*","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"*Draw an asymmetric flow curve between the given points:*","pinned":false,"hidden":false,"mode":"md"},{"id":1847,"value":"function dCurve([ox, oy], [dx, dy], reverse = false) {\n return [\n [ox, oy],\n [\n dx - (reverse ? -0.25 : 0.25) * (oy - dy),\n dy + (reverse ? -0.25 : 0.25) * (ox - dx)\n ],\n [dx, dy],\n [dx, dy]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2521,"value":"### A.5 User interface components","pinned":false,"hidden":false,"mode":"md"},{"id":1253,"value":"### A.6 General utility functions","pinned":false,"hidden":false,"mode":"md"},{"id":290,"value":"*Convert dot notation into its object equivalent:*","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"resolve = (obj, expr) => expr.split(\".\").reduce((o, i) => o[i], obj)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"*Map two lists with the given 2-parameter function:*","pinned":false,"hidden":false,"mode":"md"},{"id":1261,"value":"function map2(xs, ys, fn) {\n const arr = [];\n for (let i = 0; i < Math.min(xs.length, ys.length); i++) {\n arr.push(fn(xs[i], ys[i]));\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"*Chunk an array into groups of n:*","pinned":false,"hidden":false,"mode":"md"},{"id":1268,"value":"function chunk(arr, n = 2) {\n return arr.reduce(\n (chunk, val) => {\n if (chunk[chunk.length - 1].length === n) {\n chunk.push([]);\n }\n chunk[chunk.length - 1].push(val);\n return chunk;\n },\n [[]]\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1716,"value":"*Sum of array values:*","pinned":false,"hidden":false,"mode":"md"},{"id":1713,"value":"function sum(xs) {\n return xs.reduce((a, b) => a + b, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2825,"value":"_Keep flattening nested arrays until only coordinate pairs:_","pinned":false,"hidden":false,"mode":"md"},{"id":2820,"value":"function deepFlatten(arr) {\n return arr.reduce(function (r, e) {\n return Array.isArray(e) ? r.push(...deepFlatten(e)) : r.push(e), r;\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}