2e:null 2f:["$","title",null,{"children":"Gridded Region Editor | Jo Wood | Observable"}] 34:T4e3,const regionJson = JSON.parse(await regionFile.text()); const mapFeatureName = regionJson.objects ? Object.keys(regionJson.objects)[0] : null; const sourceFeatures = mapFeatureName ? topojson.feature(regionJson, regionJson.objects[mapFeatureName]) : regionJson; const mapFeatures = sourceFeatures?.features ? { ...sourceFeatures, features: sourceFeatures.features.filter( (feature) => feature.geometry !== null ) } : null; const attributeNames = mapFeatures ? (() => { const names = [ ...(mapFeatures.features.some((feature) => feature.id != null) ? ["id"] : []), ...[ ...new Set( mapFeatures.features.flatMap((feature) => Object.keys(feature.properties ?? {}) ) ) ] ]; return names.length ? names : ["id"]; })() : []; const attributeRows = attributeNames.map((name) => { const attribute = attributePath(name); const example = mapFeatures.features .map((feature) => resolve(feature, attribute)) .find((value) => value != null); return {attribute, example, spacer: ""}; }); const featureCentroids = mapFeatures ? mapFeatures.features.map(getCentroid) : null;35:T4ea,const mapLabels = mapFeatures ? mapFeatures.features.map((feature) => String(resolve(feature, attribute.attribute) ?? "") ) : null; const colourValues = mapFeatures ? mapFeatures.features.map((feature) => resolve(feature, attributePath(appearance.colourBy)) ) : null; const projectedCentroids = (() => { if (featureCentroids === null) { return null; } const projection = projections.get(projectionChoice); const points = featureCentroids.map((point) => projection(point)); return points.some((point) => point === null) ? null : points; })(); const spacedCentroids = projectedCentroids ? relax( projectedCentroids, avtSettings.alpha, avtSettings.dilation, avtSettings.iterations, gridSettings.rows, gridSettings.cols ) : null; const spacerHashes = Mutable(restoredSettings?.grid.spacers ?? []); const setSpacerHashes = (value) => { spacerHashes.value = value; }; const toggleSpacer = (hash) => { const totalCells = gridSettings.rows * gridSettings.cols; const next = new Set(spacerHashes); if (next.has(hash)) { next.delete(hash); } else if (featureCentroids.length + next.size < totalCells) { next.add(hash); } setSpacerHashes([...next]); }; 36:Tc3c,const candidates = spacedCentroids ? candidateCells(spacedCentroids, allocationGrid, gridSettings) : null; const cellCoefficients = candidates ? candidateVariablesByCell(candidates) : new Map(); const gridMap = spacedCentroids ? await pointsToGrid( spacedCentroids, allocationGrid, candidates, cellCoefficients ) : null; const metrics = (() => { if (mapFeatures === null) { return [["Invalid GeoJSON or TopoJSON", "", ""]]; } if (projectedCentroids === null) { return [["Invalid map projection", "", ""]]; } if (gridMap === null || gridMap.cells === null) { return [["Grid allocation not found", "", ""]]; } const numberOfPolygons = d3.sum(mapFeatures.features, (feature) => feature.geometry.type === "MultiPolygon" ? feature.geometry.coordinates.length : 1 ); const normalised = scalePtsToGrid( projectedCentroids, gridMap.nRows, gridMap.nCols ); const paired = d3.zip(normalised, gridMap.cells); const meanDisplacement = d3.mean(paired, ([[x, y], [row, col]]) => Math.hypot(x - col, y - row) ); const meanCost = d3.mean(paired, ([point, cell]) => allocationCost(point, cell) ); return [ ["Number of polygons", numberOfPolygons, ""], ["Number of regions", featureCentroids.length, ""], ["Number of spacers", spacerHashes.length, ""], [ "Average displacement (% of one grid cell)", d3.format(".0%")(meanDisplacement), "" ], ["Average cost (distance squared)", d3.format(".2f")(meanCost), ""] ]; })(); const boundaryInfo = featureCentroids ? (() => { const [west, east] = d3.extent(featureCentroids, ([x]) => x); const [south, north] = d3.extent(featureCentroids, ([, y]) => y); const {rows, cols} = gridSettings; const aspectRatio = rows / cols; const maxSize = Math.max(500, 120 * Math.log(rows * cols)); const [width, height] = aspectRatio <= 1 ? [maxSize, Math.max(400, maxSize * aspectRatio)] : [Math.max(400, maxSize / aspectRatio), maxSize]; return { nCols: cols, nRows: rows, west, east, south, north, w: Math.round(width), h: Math.round(height) }; })() : null; const gridCsvRows = gridMap?.cells ? [ [attribute.attribute, "row", "col", "x", "y"], ...featureCentroids.map(([x, y], index) => { const [row, col] = gridMap.cells[index]; return [mapLabels[index], row, col, x, y]; }) ] : null; const gridPolygons = gridMap?.cells ? (() => { const [[lngMin, latMin], [lngMax, latMax]] = mapBounds(mapFeatures); const {rows, cols} = gridSettings; const xScale = d3.scaleLinear([0, cols], [lngMin, lngMax]); const yScale = d3.scaleLinear([0, rows], [latMin, latMax]); return gridMap.cells.map(([row, col]) => [ [xScale(col - 0.5), yScale(row - 0.5)], [xScale(col + 0.5), yScale(row - 0.5)], [xScale(col + 0.5), yScale(row + 0.5)], [xScale(col - 0.5), yScale(row + 0.5)] ]); })() : null; 37:T796,### A.2 Linear Programming For each of the ${tex`j`} points allocated to one of ${tex`k`} grid cells, each possible point-to-cell assignment is represented by a decision variable ${tex`x_i`}. There are ${tex`n=jk`} decision variables before candidate filtering. Each variable is multiplied by the cost ${tex`c_i`} of its allocation. The objective minimises the sum of those costs: ${tex`\min \sum\limits_{i=0}^{n-1} c_i x_i`} Every point must be allocated to exactly one cell, while every cell can contain at most one point. Although the variables are declared as numeric, this assignment problem has an integral linear-programming solution. ${await FileAttachment("lpGridVars@1.png").image({width: 300})} The layout is determined by the allocation cost, here the squared distance between a point's scaled geographic position and a grid position. If points are scaled into the central part of the grid (compactness = 1), the minimum-cost allocation clusters regions around the centre. ${await FileAttachment("compactAllocation.png").image({width: 150})} If points are scaled to fill the grid (compactness = 0), the allocation is more geographically faithful but may contain gaps. ${await FileAttachment("faithfulAllocation.png").image({width: 150})} Negative compactness enlarges the scaling beyond the grid dimensions and moves allocations towards the edges. ${await FileAttachment("dispersedAllocation.png").image({width: 300})} For large datasets, considering every point-to-cell combination creates a very large model. The candidate limit retains only the lowest-cost cells for each point. If the limit is too small, no feasible solution may exist because dense groups of points can share the same small collection of candidates. The [AVT](https://observablehq.com/@jwolondon/avtequalising) spaces dense point locations before allocation, usually allowing a smaller candidate set at the cost of some geographic displacement.38:Tdd7,function gridLocations(nRows, nCols, spacers = []) { const spacerSet = new Set(spacers); const cells = []; for (let row = nRows - 1; row >= 0; row--) { for (let col = 0; col < nCols; col++) { if (!spacerSet.has(row * nCols + col)) { cells.push([row, col]); } } } return {nRows, nCols, cells}; } const allocationCost = ([x, y], [row, col]) => (x - col) ** 2 + (y - row) ** 2; function scalePtsToGrid(points, nRows, nCols, compactness = 0) { const centreX = d3.mean(points, ([x]) => x); const centreY = d3.mean(points, ([, y]) => y); const centred = points.map(([x, y]) => [x - centreX, y - centreY]); const xRadius = d3.max(centred, ([x]) => Math.abs(x)) || 1; const yRadius = d3.max(centred, ([, y]) => Math.abs(y)) || 1; const centreCol = (nCols - 1) / 2; const centreRow = (nRows - 1) / 2; const compactnessScale = 1.001 - (compactness < 0 ? 50 * compactness ** 3 : compactness); const gridScale = compactnessScale * Math.min(nCols / (2 * xRadius), nRows / (2 * yRadius)); return centred.map(([x, y]) => [ centreCol + x * gridScale, centreRow + y * gridScale ]); } function candidateCells(points, grid, settings) { if (points.length > grid.cells.length) { return []; } const normalised = scalePtsToGrid( points, grid.nRows, grid.nCols, settings.compactness ); const numberOfCandidates = Math.min( grid.cells.length, settings.maxCandidates ); let variableIndex = 0; return normalised.map((point, pointIndex) => grid.cells .map((cell, cellIndex) => ({ cellIndex, cost: allocationCost(point, cell) })) .sort((a, b) => a.cost - b.cost) .slice(0, numberOfCandidates) .map((candidate) => ({ ...candidate, pointIndex, variable: `x${variableIndex++}` })) ); } function candidateVariablesByCell(candidates) { return d3.group(candidates.flat(), ({cellIndex}) => cellIndex); } function objective(candidates) { const terms = candidates .flat() .filter(({cost}) => cost !== 0) .map(({cost, variable}) => `${cost === 1 ? "" : cost}${variable}`); return terms.join(" + ") || "0"; } function pointToOneCell(candidates) { return candidates.map( (pointCandidates) => `${pointCandidates.map(({variable}) => variable).join(" + ")} == 1` ); } function cellMaxOnePoint(cellCoefficients) { return [...cellCoefficients.values()].map( (cellCandidates) => `${cellCandidates.map(({variable}) => variable).join(" + ")} <= 1` ); } function solveLP(candidates, cellCoefficients) { const lp = mip().objective(Math.min, objective(candidates)); for (const expression of pointToOneCell(candidates)) { lp.subjectTo(expression); } for (const expression of cellMaxOnePoint(cellCoefficients)) { lp.subjectTo(expression); } for (const {variable} of candidates.flat()) { lp.var(variable, Number); } return lp.solve(); } async function pointsToGrid(points, grid, candidates, cellCoefficients) { if (points.length > grid.cells.length || candidates.length === 0) { return {...grid, cells: null}; } const solution = await solveLP(candidates, cellCoefficients); const cells = candidates .flat() .filter(({variable}) => (solution.vars[variable] ?? 0) > 0.5) .sort((a, b) => a.pointIndex - b.pointIndex) .map(({cellIndex}) => grid.cells[cellIndex]); return { nRows: grid.nRows, nCols: grid.nCols, cells: cells.length === points.length ? cells : null }; }39:T6aa,function relax( points, alpha, dilation, iterations = 100, nRows = 12, nCols = 12 ) { if (iterations === 0) { return points.map((point) => [...point]); } const xDomain = d3.extent(points, ([x]) => x); const yDomain = d3.extent(points, ([, y]) => y); const width = nCols * 1000; const height = nRows * 1000; const xScale = d3.scaleLinear(xDomain, [0, width]); const yScale = d3.scaleLinear(yDomain, [0, height]); const xInverse = d3.scaleLinear([0, width], xDomain); const yInverse = d3.scaleLinear([0, height], yDomain); const initial = points.flatMap(([x, y]) => [xScale(x), yScale(y)]); const delaunay = new d3.Delaunay(Float64Array.from(initial)); const positions = delaunay.points; const voronoi = delaunay.voronoi([0, 0, width, height]); const clipRegion = bounds(positions, alpha, dilation); const relaxation = 0.5; for (let iteration = 0; iteration < iterations; iteration++) { const polygons = [...voronoi.cellPolygons()]; for (let index = 0; index < polygons.length; index++) { const intersections = clip(clipRegion, [polygons[index]]); const cell = d3.greatest(intersections, (ring) => Math.abs(d3.polygonArea(ring)) ); if (cell) { const [targetX, targetY] = d3.polygonCentroid(cell); const pointIndex = index * 2; positions[pointIndex] += (targetX - positions[pointIndex]) * relaxation; positions[pointIndex + 1] += (targetY - positions[pointIndex + 1]) * relaxation; } } voronoi.update(); } return d3 .range(0, positions.length, 2) .map((index) => [ xInverse(positions[index]), yInverse(positions[index + 1]) ]); }3a:T5c2,const projections = new Map([ ["Unprojected", d3.geoIdentity().reflectY(true)], ["OSGB", d3.geoTransverseMercator().rotate([2, 0])], ["Equal Earth", d3.geoEqualEarth()], ["Orthographic", d3.geoOrthographic()], ["US Albers", d3.geoAlbersUsa()] ]); // For multipolygons (e.g. Western Isles), this will calculate the centroid of the polygon with the largest area function getCentroid(feature) { const {type, coordinates} = feature.geometry; if (type !== "Polygon" && type !== "MultiPolygon") { throw new TypeError(`Unsupported region geometry: ${type}`); } const polygons = type === "MultiPolygon" ? coordinates : [coordinates]; const polygon = d3.greatest(polygons, ([outerRing]) => Math.abs(d3.polygonArea(outerRing)) ); return d3.polygonCentroid(polygon[0]); } function mapBounds(featureCollection) { const points = featureCollection.features.flatMap((feature) => coordinatePairs(feature.geometry.coordinates) ); return [ [d3.min(points, ([x]) => x), d3.min(points, ([, y]) => y)], [d3.max(points, ([x]) => x), d3.max(points, ([, y]) => y)] ]; } function gridDisplaySize({rows, cols}) { const aspectRatio = rows / cols; const maximumSize = Math.max(500, 120 * Math.log(rows * cols)); return aspectRatio <= 1 ? { width: maximumSize, height: Math.max(400, maximumSize * aspectRatio) } : { width: Math.max(400, maximumSize / aspectRatio), height: maximumSize }; }3b:Tce8,function drawGrid( renderer, grid, points, { spacers = [], labels = [], colourValues = [], appearance, colourFunction, showDisplacements = false, onToggleSpacer = () => {} } = {} ) { if (grid.cells === null) { return renderer .push() .fit([ [0, 0], [1, 1] ]) .stroke() .fill("rgb(75,25,17)") .textSize(12) .textAlign("middle") .text( `Cannot fit ${points.length} regions into a ${grid.nRows}×${grid.nCols} grid`, 0.5, 0.5 ) .pop(); } const spacerSet = new Set(spacers); const normalised = scalePtsToGrid(points, grid.nRows, grid.nCols); renderer.fit([ [-0.5, -0.5], [grid.nCols - 0.5, grid.nRows - 0.5] ]); renderer.addListener("click", (event) => { const [col, row] = renderer.screenToData(d3.pointer(event)); const gridRow = Math.floor(row + 0.5); const gridCol = Math.floor(col + 0.5); if ( gridRow >= 0 && gridRow < grid.nRows && gridCol >= 0 && gridCol < grid.nCols ) { onToggleSpacer(gridRow * grid.nCols + gridCol); } }); const [x0] = renderer.dataToScreen([0, 0]); const [x1] = renderer.dataToScreen([1, 0]); const maximumLabelLength = Math.max( 1, ...labels.map((label) => String(label).length) ); const numberOfCharacters = appearance.labelLength < 0 ? maximumLabelLength : Math.max(1, appearance.labelLength); const textSize = Math.abs(x1 - x0) / numberOfCharacters; if (grid.cells.length === points.length) { renderer .stroke() .textSize(textSize) .textAlign("middle") .textBaseline("middle"); for (let index = 0; index < points.length; index++) { const [row, col] = grid.cells[index]; renderer.fill( colourFunction ? colourFunction[1](colourValues[index]) : "rgba(220,140,95,0.3)" ); renderer.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 (appearance.labelLength !== 0) { renderer .fill("rgb(75,25,17)") .text(truncateLabel(labels[index], appearance.labelLength), col, row); } } } renderer.stroke("#eee").fill(); for (let row = 0; row < grid.nRows; row++) { for (let col = 0; col < grid.nCols; col++) { if (spacerSet.has(row * grid.nCols + col)) { renderer .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(); } renderer.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 && grid.cells.length === points.length) { renderer.fill().stroke("firebrick").strokeWidth(0.4); for (let index = 0; index < normalised.length; index++) { const [row, col] = grid.cells[index]; renderer.bezier(dCurve(normalised[index], [col, row])); } } return renderer; }3c:T413,function drawAVT( original, relaxed, labels = [], appearance = { labelLength: 0 }, { width = 800, height = 450, padding = 30 } = {} ) { const renderer = new Renderer(width, height).fit( [...original, ...relaxed], padding ); const movements = d3 .zip(original, relaxed) .filter(([[x1, y1], [x2, y2]]) => x1 !== x2 || y1 !== y2); if (movements.length) { renderer.stroke("rgba(80,80,80,0.25)").strokeWidth(0.5).lines(movements); } // Original centroids renderer.stroke("#888").fill("white").pointSize(5).points(original); // AVT-relaxed centroids renderer.stroke().fill("firebrick").pointSize(8).points(relaxed); if (appearance.labelLength !== 0) { renderer .fill("rgba(0,0,0,0.65)") .textSize(8) .textAlign("middle") .textBaseline("bottom"); for (const [point, label] of d3.zip(relaxed, labels)) { renderer.text( truncateLabel(label, appearance.labelLength), point[0], point[1] ); } } return renderer.render(); }3d:[{"id":"22bf568a0e15ca27f0d557463d2f8309247623a9acceae2275c52287f5a45171c7ff110266c7bd98fecc6c0d2e31db36c3d8f91fddeb102ef70781cbd817a4f6","href":"https://static.observableusercontent.com/files/22bf568a0e15ca27f0d557463d2f8309247623a9acceae2275c52287f5a45171c7ff110266c7bd98fecc6c0d2e31db36c3d8f91fddeb102ef70781cbd817a4f6","name":"dispersedAllocation.png","type":"image/png","lastModified":1642678576435.038,"size":88076},{"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},{"id":"eef61b0c92163efd829bbdb501f89d5ab631000201c0ca943b5c836892be8c74d4c666e8d699f98c1470043efb05d1698d0d6e6f0f3159b03c1a2e2b8e3a274a","href":"https://static.observableusercontent.com/files/eef61b0c92163efd829bbdb501f89d5ab631000201c0ca943b5c836892be8c74d4c666e8d699f98c1470043efb05d1698d0d6e6f0f3159b03c1a2e2b8e3a274a","name":"compactAllocation.png","type":"image/png","lastModified":1642678340121.528,"size":15606}] 32:{"id":"6c6c90b590ae69f5","slug":"regioneditor","title":"Gridded Region Editor","thumbnail":"6a5a2d6ba7113a3b82dd20cf01c9315e42ea70a14637ec2f53cbcd5eadb815ed","access_level":"public","create_time":"$D2021-10-18T13:54:33.830Z","update_time":"$D2026-09-09T08:57:17.447Z","view_time":null,"first_public_time":"$D2022-01-24T14:15:29.708Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":3330,"publish_version":3330,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"a72f1bc92f211c9f","slug":"ramp","title":"ramp","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"## 1: Choose regions to use\n\nSelect a GeoJSON or TopoJSON file containing the regions you wish to grid.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"const regionFile = view(\n Inputs.file({\n label: \"Region file\",\n accept: \".json,.geojson,.topojson\",\n required: true\n })\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"## 2. Choose map projection\nIf the input regions are already in the required projection, select _Unprojected_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"const projectionControl = Inputs.select([...projections.keys()], {\n label: \"Projection\",\n value: restoredSettings?.projection ?? \"Unprojected\"\n});\n\nconst projectionChoice = view(projectionControl);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"## 3. Choose display settings\n\nSelect the region attribute used for map and grid labels. A label length of −1 shows the complete label, 0 hides labels, and a positive value truncates labels to that number of characters.\n\nRegions can also be coloured by an attribute. For TopoJSON files containing multi-level geographies, this helps assess how well higher-level geographies are maintained by the grid.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"const attributeControl = (() => {\n if (mapFeatures === null) {\n return md``;\n }\n\n const selected =\n attributeRows.find(\n ({attribute}) => attribute === restoredSettings?.attribute\n ) ?? attributeRows[0];\n\n return Inputs.table(attributeRows, {\n width: {spacer: 1000},\n layout: \"auto\",\n value: selected,\n multiple: false,\n header: {spacer: \"\"}\n });\n})();\n\nconst attribute = view(attributeControl);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"const appearanceControl =\n mapFeatures === null\n ? md``\n : Inputs.form({\n labelLength: Inputs.range([-1, 12], {\n value: restoredSettings?.appearance.labelLength ?? 3,\n step: 1,\n label: \"Label length\"\n }),\n scheme: Inputs.select([\"fixed\", \"browns\", \"muted\", \"bold\"], {\n value: restoredSettings?.appearance.scheme ?? \"browns\",\n label: \"Colour scheme\"\n }),\n colourBy: Inputs.select(attributeNames, {\n value: restoredSettings?.appearance.colourBy ?? attributeNames[0],\n label: \"Colour by\"\n })\n });\n\nconst appearance = view(appearanceControl);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2883,"value":"{\n if (projectedCentroids) {\n const renderer = new Renderer(800, 400);\n\n display(\n drawMap(renderer, mapFeatures, projections.get(projectionChoice), {\n centroids: featureCentroids,\n labels: mapLabels,\n appearance,\n colourFunction\n }).render()\n );\n } else {\n display(\n new Renderer(400, 20)\n .stroke()\n .text(\"Select map projection first.\", 30, 15)\n .render()\n );\n }\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2916,"value":"## 4. Generate grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"### 4.1 Grid settings\n\nChoose the dimensions of the grid into which the regions will be allocated. Compactness controls the attraction towards the centre: 0 uses the full grid, positive values cluster cells towards the centre, and negative values spread them towards the edges.\n\nFor large grids, allocation can be accelerated by considering only a fixed maximum number of candidate cells for each point.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1613,"value":"const gridControl = commitOnChange(\n Inputs.form({\n rows: Inputs.range([2, 40], {\n value: restoredSettings?.grid.rows ?? 12,\n step: 1,\n label: \"Rows\"\n }),\n cols: Inputs.range([2, 40], {\n value: restoredSettings?.grid.cols ?? 12,\n step: 1,\n label: \"Columns\"\n }),\n compactness: Inputs.range([-1, 1], {\n value: restoredSettings?.grid.compactness ?? 0,\n step: 0.01,\n label: \"Compactness\"\n }),\n maxCandidates: Inputs.range([1, 200], {\n value: restoredSettings?.grid.maxCandidates ?? 40,\n step: 1,\n label: \"Maximum number of cell candidates\"\n })\n })\n);\n\nconst gridSettings = view(gridControl);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"{\n if (projectedCentroids) {\n const {rows, cols} = gridSettings;\n const aspectRatio = rows / cols;\n const maxSize = Math.max(500, 120 * Math.log(rows * cols));\n\n const [width, height] =\n aspectRatio <= 1\n ? [maxSize, Math.max(400, maxSize * aspectRatio)]\n : [Math.max(400, maxSize / aspectRatio), maxSize];\n\n const renderer = new Renderer(width, height);\n const drawableGrid = gridMap ?? {nRows: rows, nCols: cols, cells: null};\n\n display(\n drawGrid(renderer, drawableGrid, spacedCentroids, {\n spacers: spacerHashes,\n labels: mapLabels,\n colourValues,\n appearance,\n colourFunction,\n showDisplacements,\n onToggleSpacer: toggleSpacer\n }).render()\n );\n } else {\n display(\n new Renderer(400, 20)\n .stroke()\n .text(\"Select map projection first.\", 30, 15)\n .render()\n );\n }\n}\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2132,"value":"Click on grid cell to toggle spacer at that location.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"view(\n Inputs.button(\"Clear spacers\", {\n value: null,\n reduce: () => setSpacerHashes([])\n })\n);\n\nconst showDisplacementsControl = Inputs.toggle({\n label: \"Show displacements\",\n value: restoredSettings?.showDisplacements ?? true\n});\n\nconst showDisplacements = view(showDisplacementsControl);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"display(\n mapFeatures === null || projectedCentroids === null\n ? md``\n : 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":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2885,"value":"display(\n gridDownload(\n () => d3.csvFormatRows(gridCsvRows),\n \"grid.csv\",\n \"Save grid as CSV\",\n \"text/csv\"\n )\n);\n\ndisplay(\n gridDownload(\n () => [JSON.stringify(boundaryInfo), d3.csvFormatRows(gridCsvRows)].join(\"\\n\"),\n \"grid.txt\",\n \"Save grid as text file with bounds\",\n \"text/plain\"\n )\n);\n\ndisplay(\n gridDownload(\n () => JSON.stringify(gridPolygons, null, 2),\n \"grid.json\",\n \"Save grid as polygon array\",\n \"application/json\"\n )\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1618,"value":"### 4.2 AVT settings\n\nThe Adaptive Voronoi Tessellation (AVT) can spread dense point locations before grid allocation above. Increasing the number of iterations increases the relaxation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1622,"value":"const avtControl = commitOnChange(\n Inputs.form({\n alpha: Inputs.range([0.01, 6], {\n value: restoredSettings?.avt.alpha ?? 5,\n step: 0.01,\n label: \"Alpha\"\n }),\n dilation: Inputs.range([0, 60], {\n value: restoredSettings?.avt.dilation ?? 18,\n step: 1,\n label: \"Dilation\"\n }),\n iterations: Inputs.range([0, 200], {\n value: restoredSettings?.avt.iterations ?? 0,\n step: 1,\n label: \"Number of iterations\"\n })\n })\n);\n\nconst avtSettings = view(avtControl);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"display(\n projectedCentroids\n ? drawAVT(\n projectedCentroids,\n spacedCentroids,\n mapLabels,\n appearance\n )\n : md``\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2551,"value":"## Save and restore settings\n\nThe region file itself is not stored in the settings file. Select the region file separately before restoring its associated settings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2281,"value":"const annotationControl = Inputs.textarea({\n label: \"Annotation\",\n value: restoredSettings?.annotation ?? \"\",\n placeholder: \"Add notes to be stored with the region editor settings.\"\n});\n\nconst annotation = view(annotationControl);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2257,"value":"display(\n DOM.download(\n new Blob([JSON.stringify(currentSettings, null, 2)], {\n type: \"application/json\"\n }),\n \"regionGridSettings.json\",\n \"Save region editor settings\"\n )\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2294,"value":"const settingsFile = view(\n Inputs.file({label: \"Load settings\", accept: \".json\"})\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2297,"value":"const loadedSettings = settingsFile\n ? JSON.parse(await settingsFile.text())\n : null;\n\nconst restoredSettings = normaliseSettings(loadedSettings);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2886,"value":"const currentSettings = {\n version: 2,\n annotation,\n regionFile: regionFile.name,\n projection: projectionChoice,\n attribute: attribute?.attribute,\n appearance,\n grid: {\n ...gridSettings,\n spacers: spacerHashes\n },\n showDisplacements,\n avt: avtSettings\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2879,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"### A.1 Spatial data and metrics\n\n*These will update when new input map data are selected:*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2892,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2893,"value":"$35","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2894,"value":"$36","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2896,"value":"const allocationGrid = gridLocations(\n gridSettings.rows,\n gridSettings.cols,\n spacerHashes\n);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2897,"value":"import {mip} from \"observable:@tomlarkworthy/mip\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2898,"value":"$38","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"### A.3 Voronoi and alpha-shape processing\n\nThe following functions create and dilate the clipping region used by the Adaptive Voronoi Tessellation (AVT).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2899,"value":"import {alphaHull, unconnected} from \"observable:@jwolondon/alpha-shapes\";\nimport ClipperLib from \"npm:clipper-lib@6.4\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2900,"value":"function clip(\n clipRings,\n subjectRings,\n clipType = ClipperLib.ClipType.ctIntersection\n) {\n const toPath = (ring) => ring.map(([X, Y]) => ({X, Y}));\n const fromPath = (path) => path.map(({X, Y}) => [X, Y]);\n const clipPaths = clipRings.map(toPath);\n const subjectPaths = subjectRings.map(toPath);\n const scale = 100;\n\n ClipperLib.JS.ScaleUpPaths(clipPaths, scale);\n ClipperLib.JS.ScaleUpPaths(subjectPaths, scale);\n\n const clipper = new ClipperLib.Clipper();\n clipper.AddPaths(clipPaths, ClipperLib.PolyType.ptClip, true);\n clipper.AddPaths(subjectPaths, ClipperLib.PolyType.ptSubject, true);\n\n const result = new ClipperLib.Paths();\n clipper.Execute(\n clipType,\n result,\n ClipperLib.PolyFillType.pftNonZero,\n ClipperLib.PolyFillType.pftNonZero\n );\n\n ClipperLib.JS.ScaleDownPaths(result, scale);\n return result.map(fromPath);\n}\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2901,"value":"function dilate(polygon, offset = 0, joinType = ClipperLib.JoinType.jtMiter) {\n const toPath = (ring) => ring.map(([X, Y]) => ({X, Y}));\n const fromPath = (path) => path.map(({X, Y}) => [X, Y]);\n const path = ClipperLib.Clipper.CleanPolygon(toPath(polygon), 0.1);\n const offsetter = new ClipperLib.ClipperOffset(2, 0.25);\n offsetter.AddPath(path, joinType, ClipperLib.EndType.etClosedPolygon);\n const result = new ClipperLib.Paths();\n offsetter.Execute(result, offset);\n return result.length ? fromPath(result[0]) : [];\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2902,"value":"function bounds(flatPoints, alpha, dilation) {\n const delaunay = new d3.Delaunay(flatPoints);\n const radius = avRadius(delaunay);\n const threshold = alpha * radius;\n const hexagonRadius = 10;\n\n const rings = unconnected(delaunay, threshold).map(([x, y]) =>\n dilate(\n [\n [x + 0.866 * hexagonRadius, y + 0.5 * hexagonRadius],\n [x + 0.866 * hexagonRadius, y - 0.5 * hexagonRadius],\n [x, y - hexagonRadius],\n [x - 0.866 * hexagonRadius, y - 0.5 * hexagonRadius],\n [x - 0.866 * hexagonRadius, y + 0.5 * hexagonRadius],\n [x, y + hexagonRadius]\n ],\n dilation\n )\n );\n\n for (const ring of alphaHull(delaunay, threshold)) {\n rings.push(\n dilate(\n ring.map((index) => [\n delaunay.points[2 * index],\n delaunay.points[2 * index + 1]\n ]),\n dilation,\n ClipperLib.JoinType.jtSquare\n )\n );\n }\n return rings.filter((ring) => ring.length);\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2903,"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 q1 = x1 ** 2 + y1 ** 2;\n const q2 = q1 - x2 ** 2 - y2 ** 2;\n const q3 = q1 - x3 ** 2 - y3 ** 2;\n const denominator = 2 * (a3 * b2 - a2 * b3);\n\n if (denominator === 0) {\n return 0;\n }\n const x = (b2 * q3 - b3 * q2) / denominator - x1;\n const y = (a3 * q2 - a2 * q3) / denominator - y1;\n return Math.hypot(x, y);\n };\n const {points, triangles} = delaunay;\n const radii = [];\n for (let i = 0; i < triangles.length; i += 3) {\n const triangle = [0, 1, 2].map((offset) => {\n const index = triangles[i + offset];\n return [points[2 * index], points[2 * index + 1]];\n });\n radii.push(circumradius(triangle));\n }\n return d3.mean(radii) ?? 0;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2904,"value":"$39","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2878,"value":"### A.4 Map data processing and rendering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"import {Renderer} from \"observable:@jwolondon/renderer\";\nimport {randGenerator} from \"observable:@jwolondon/seeded-random-numbers\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2906,"value":"$3a","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2907,"value":"function drawMap(\n renderer,\n geoJson,\n projection,\n {centroids, labels, appearance, colourFunction}\n) {\n renderer\n .push()\n .fill(\"rgba(220,140,95,0.3)\")\n .stroke(\"white\")\n .strokeWidth(0.3)\n .setProjection(projection);\n\n if (colourFunction) {\n renderer.geoShape(geoJson, ...colourFunction);\n } else {\n renderer.geoShape(geoJson);\n }\n\n if (appearance.labelLength !== 0) {\n renderer\n .fill(\"rgb(75,25,17)\")\n .textAlign(\"middle\")\n .textBaseline(\"middle\")\n .textSize(6)\n .stroke();\n\n for (let index = 0; index < centroids.length; index++) {\n renderer.text(\n truncateLabel(labels[index], appearance.labelLength),\n centroids[index][0],\n centroids[index][1]\n );\n }\n }\n\n return renderer.pop();\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2908,"value":"const colourFunction = (() => {\n const colourAttribute = attributePath(appearance.colourBy);\n switch (appearance.scheme) {\n case \"browns\": {\n const brown = (value) => {\n const random = randGenerator(String(value));\n return `hsla(20, ${20 + random() * 50}%, ${60 + random() * 20}%, 0.5)`;\n };\n return [colourAttribute, brown];\n }\n case \"bold\":\n return [colourAttribute, d3.scaleOrdinal(d3.schemeTableau10)];\n case \"muted\":\n return [colourAttribute, d3.scaleOrdinal(d3.schemeSet3)];\n default:\n return null;\n }\n})();","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2909,"value":"function drawCentroids(points, labels = [], appearance = {labelLength: 0}) {\n const [xMin, xMax] = d3.extent(points, ([x]) => x);\n const [yMin, yMax] = d3.extent(points, ([, y]) => y);\n const ellipseSize = (xMax - xMin) / 100;\n\n const renderer = new Renderer(300, 300)\n .fit(\n [\n [xMin, yMin],\n [xMax, yMax]\n ],\n 50\n )\n .textSize(6)\n .stroke();\n\n for (let index = 0; index < points.length; index++) {\n const [x, y] = points[index];\n renderer.fill(\"firebrick\").ellipse(x, y, ellipseSize);\n\n if (appearance.labelLength !== 0 && labels[index] != null) {\n renderer\n .fill(\"rgba(0,0,0,0.5)\")\n .stroke()\n .text(truncateLabel(labels[index], appearance.labelLength), x, y);\n }\n }\n\n return renderer.render();\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2910,"value":"$3b","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2911,"value":"$3c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2912,"value":"// Asymmetric flow curve between the given points\nfunction dCurve([oX, oY], [dX, dY], reverse = false) {\n const direction = reverse ? -0.25 : 0.25;\n return [\n [oX, oY],\n [dX - direction * (oX - dY), dY + direction * (oX - dX)],\n [dX, dY],\n [dX, dY]\n ];\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"### A.5 General helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2913,"value":"function commitOnChange(input) {\n return Object.assign(input, {\n oninput: (event) => {\n if (event.isTrusted) {\n event.stopImmediatePropagation();\n }\n },\n onchange: (event) => {\n event.currentTarget.dispatchEvent(new Event(\"input\"));\n }\n });\n}\n\nconst attributePath = (name) =>\n name === \"id\" || name?.startsWith(\"properties.\")\n ? name\n : `properties.${name}`;\n\nconst resolve = (object, path) =>\n path?.split(\".\").reduce((value, key) => value?.[key], object);\n\nfunction coordinatePairs(coords, output = []) {\n if (\n Array.isArray(coords) &&\n typeof coords[0] === \"number\" &&\n typeof coords[1] === \"number\"\n ) {\n output.push(coords);\n return output;\n }\n\n for (const child of coords ?? []) {\n coordinatePairs(child, output);\n }\n return output;\n}\n\nfunction truncateLabel(label, length) {\n return length < 0 ? String(label) : String(label).slice(0, length);\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2914,"value":"function gridDownload(content, filename, label, type) {\n if (\n featureCentroids === null ||\n projectedCentroids === null ||\n gridMap === null\n ) {\n return md``;\n }\n\n if (gridMap.cells === null) {\n return md`*Cannot save: attempting to fit ${featureCentroids.length}\nregions into a ${gridMap.nRows} by ${gridMap.nCols} grid of\n${gridMap.nRows * gridMap.nCols} cells.*`;\n }\n\n return DOM.download(\n new Blob([content()], {type}),\n filename,\n label\n );\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2915,"value":"function normaliseSettings(settings) {\n if (!settings) {\n return null;\n }\n return {\n annotation: settings.annotation ?? \"\",\n projection: settings.projection ?? settings.projChoice ?? \"Unprojected\",\n attribute: settings.attribute ?? settings.attrib?.attribute ?? \"id\",\n appearance: settings.appearance ?? {\n labelLength: settings.labelLength ?? 3,\n scheme: settings.scheme ?? \"browns\",\n colourBy: settings.colourBy ?? \"id\"\n },\n grid: settings.grid ?? {\n rows: settings.rows ?? 12,\n cols: settings.cols ?? 12,\n compactness: settings.compactness ?? 0,\n maxCandidates: settings.maxCandidates ?? 40,\n spacers: settings.spacerHashes ?? []\n },\n showDisplacements: settings.showDisplacements ?? true,\n avt: settings.avt ?? {\n alpha: settings.alpha ?? 5,\n dilation: settings.dilation ?? 18,\n iterations: settings.iterations ?? settings.numIterations ?? 0\n },\n regionFile: settings.regionFile ?? null\n };\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"2","titling":"auto"}} 33:"$32:body"