30:T4da,notes = md`

## Notes / Todo * The notebook uses a simplified version of the [GADM](https://gadm.org/data.html) USA shape data. * There is no mechanism for preserving the shape of individual states that share a component, so the shared state boundaries in the tile map may be inaccurate. * The notebook is sluggish when the total number of counties is large. * See the [Make a Tile Map](https://observablehq.com/@gjmcn/make-a-tile-map) notebook for country-level tile maps. * This notebook is based on the 2017 Eurovis paper [Generating Tile Maps](https://www.researchgate.net/profile/Graham_Mcneill/publication/318202185_Generating_Tile_Maps/links/59f20caea6fdcc1dc7bb0eef/Generating-Tile-Maps.pdf), but with some new ideas. * Topojson does not consider counties that only share a corner (common in US) to be adjacent, but we do when counting missing neighbors. * Improve the algorithm for combining components. * Check if simplifying the shape data has removed any counties or affected adjacencies. * Switch figures so section figure on left and tile map on right? * Better scaling of figures, including label size and initial scale. * Code: check, clean, speed up ...`31:T756,//fit grid to polygon // p: polygon, n-by-2 cube // nGridPt: number of grid points // ops: object: // gridType: 'rect', 'tri-base' or 'tri-side' // xOffset: x shift of grid, in [0,1], fraction of estimated tile width // yOffset: y shift of grid, in [0,1], fraction of estimated tile height // aspectRatio: grid x-unit / y-unit // maxIter: return false if cannot find fit after this many attempts gridInPoly = (p, nGridPt, ops) => { //options const gridType = ops.gridType || 'rect', xOffset = ops.xOffset !== undefined ? ops.xOffset : 0, yOffset = ops.yOffset !== undefined ? ops.yOffset : 0, aspectRatio = ops.aspectRatio || 1, maxIter = ops.maxIter || 50; //intialize xStep and yStep const tileArea = p.poly.area() / nGridPt; let xStep, yStep; if (aspectRatio === 1) { xStep = yStep = Math.sqrt(tileArea); } else { yStep = Math.sqrt(tileArea / aspectRatio); xStep = yStep * aspectRatio; } //fit grid const [xMin, yMin] = p.min(), [xMax, yMax] = p.max(); let xStepMin, yStepMin, xStepMax, yStepMax; for (let i=1; i<=maxIter; i++) { const g = grid(xMin + xStep * xOffset, xMax, xStep, yMin + yStep * yOffset, yMax, yStep, gridType); const indIn = p.poly.contain(g).which(); if (indIn.length === nGridPt) { return { xy: g.row(indIn), xStep, yStep, iterations: i }; } else if (indIn.length < nGridPt) { //too few grid points xStepMax = xStep; yStepMax = yStep; xStep = (xStep + (xStepMin || xStep * 0.9)) / 2; yStep = (yStep + (yStepMin || yStep * 0.9)) / 2; } else { //too many grid points xStepMin = xStep; yStepMin = yStep; xStep = (xStep + (xStepMax || xStep * 1.1)) / 2; yStep = (yStep + (yStepMax || yStep * 1.1)) / 2; } } return false; }32:T455,polys = { //long-lat GeoJSON polys to x-y matrix polys const proj = d3.geoMercator(), bb = topoData.bbox, [xMin, yMax, xMax, yMin] = //switch y vals [... proj([bb[0], bb[1]]), ... proj([bb[2], bb[3]])], polys = dc.matrix(geoData.features) .col('geometry') .map(obj => { return obj.coordinates[0] .map(proj) .matrix(); }); //always scale to same size so viz easy //let range, mult, w, h; let range, w, h; const size = 450, xRange = xMax - xMin, yRange = yMax - yMin; if (xRange > yRange) { range = xRange; w = size; } else { range = yRange; h = size; } const xTrans = x => (x - xMin) / range * size, yTrans = y => (y - yMin) / range * size, trans = p => { // *changes p* p.$col(0, p.col(0).map(xTrans)); p.$col(1, p.col(1).map(yTrans)); }; polys.map(trans); polys.size = size; polys.trans = trans; polys.proj = proj; return polys; }33:T59b,//assign each region to a single component regs = { const regs = data.group(0, ids), //group poly data back to region nReg = regs.length, regIds = regs.key(), regComps = [nReg].cube(), regCents = [nReg,2].cube(), regPolys = [nReg].cube(), regPolyInds = [nReg].cube(); for (let ri=0; ri u.col('area').sum()[0]).maxPosn()[0], maxSub = grpComp.at(maxComp); regComps[ri] = maxComp; regCents.$row(ri, wtdCentroid( maxSub.colSlice('cent_x','cent_y'), maxSub.col('area') )); regPolys[ri] = maxSub.col('poly'); regPolyInds[ri] = maxSub.col('polyInd'); } } return regIds.horiz(regComps, regCents, regPolys, regPolyInds) .$key(1, ['id','comp','cent_x', 'cent_y', 'poly', 'polyInd']); }34:T67e,//each entry of array has 'weighted unit vectors' (2-column matrix) from //all tile comps to given tile comp; angles are from original geography, weights //are based on component distances in original geography idealFromTo = { // const origArrange = {}; const tileCompToComp = {}, nc = regsByComp.length; //number of used components //distances: each entry has weights from all used components to a given //used component; based on (sqd) original distances between //components: let d = pointSetDists(regCentsByComp).pow(2); d = d.wrap(1, 'array').toArray(); //normalized weights: // -based on point set dists // -use nearest used comp to get local scale for each used comp // -use exp(-v) to get high weights for small dists // -repeated to 2 cols since alwaysmultiplied with a point set const weights = d.map((dj, i) => { dj[i] = Infinity; let w = dj.div(-dj.min()[0]).exp(); dj[i] = 0; return w.div(w.sum()); }); //from-to vectors: each entry contains unit vectors from all used components //to one use component (except 0 0 for vector from a region to itself) const usedRegCents = bdrys.row(usedCompInds).map(b => b.poly.centroid()).matrix(), fromTo = usedRegCents.ind().map(i => { const uv = unitVecs(ptsToPt(usedRegCents, usedRegCents.row(i))); uv.$row(i, 0); return uv; }); // return origArrange; //??DISTANCES, WEIGHTS AND FROM-TO ALL LOOP OVER USED COMPS(?) //SO COULD HAVE SINGLE LOOP AN SIMPLIFY THIS CELL SIGNIFICANTLY? return weights.map((w, i) => w.tile(1).mul(fromTo[i])); //return tileCompToComp; }35:T864,//fully distorted centroids fullCents = { const nR = regs.n(), nP = polys.n(), xMult = +aspectRatio; let fullCents = regCents.copy(); //aspect ratio: stretch/contract x-axis let modGridStep = estGridStep, dispVecs = nebsToCent.map(m => m.copy()); //deep copy if (xMult !== 1) { fullCents.$col(0,fullCents.col(0).div(xMult)); dispVecs.map(m => m.$col(0, m.col(0).div(xMult))); modGridStep = estGridStep.map(v => v * Math.sqrt(1/xMult)); //skips unused components } dispVecs = dispVecs.map(unitVecs); //distort const scaledRepel = repel ? -repel/4 + 1.75 : null; for (let i=0; i<30; i++) { const updateOrder = regs.ind(0).shuffle(); for (let j of updateOrder) { const nb = regNebs[j]; if (nb.length) { //if no nebs, region must be on a 1-region component const cmp = regs.at(j, 'comp'), step = modGridStep[cmp]; let repelVec; if (repel) { //expensive if many non-nebs, use low-level code const rnn = regNonNebs[j], n_rnn = rnn.length; if (n_rnn) { repelVec = [1,2].cube(0); const x_j = fullCents[j], y_j = fullCents[j + nR]; for (let k=0; k { if (d) { //truthy if component i has >1 region let bNew; if (useHulls) { bNew = newCents.row(regsByComp.at(i)).hull(Math.pow(1.5, simplify)); if (bNew.n() < 4) { const mn = bNew.mean().tileTo(bNew); if (bNew.n() === 2) { //only 2 regions, use rectangle so +ve area to fit tiles in bNew = bNew.sub(mn).mul(1.25); let edge = ptsToPt(bNew.row(0), bNew.row(1)), normal = unitVecs([-edge[1], edge[0]].tp()); normal = normal.vert(normal.neg().tile(), normal); bNew = bNew.row(0).tile().vert(bNew.row(1).tile()).add(normal).add(mn.tile()); } else { //3 regions, scale triangle bNew = bNew.sub(mn).mul(1.25).add(mn); } } else { //>3 regions, push vertices of hull outwards bNew = bNew.rowSlice(0,-2); const e = unitVecs(bNew.roll(0, -1).sub(bNew)), //unit length edges shifts = unitVecs(e.add(e.roll())).mul(estGridStep[i] / 4); //unit length shifts bNew = bNew.add(shifts.col(1).horiz(shifts.col(0).neg())); bNew = bNew.vert(bNew.row(0)); } } else { //drag and simplify boundaries const v = newCents.distortVecs.row(regsByComp.at(i)), b = bdrys[i], n = b.n(); let w = d.div(d.min(1).neg().tileTo(d)).exp(); w = w.div(w.sum(1).tileTo(w)); bNew = b.copy('shell'); for (let j=0; j 0); //prevent boundary collapsing to line or point if (thresh) { //if thresh 0, no valid simplification found so stick with bNew bNew = bNewSimple; } } } //smooth return smooth ? limitBoundary(bNew.poly.smooth(smooth)) : bNew; } })37:T87d,result = { const nc = usedCompInds.length; const tileIds = usedCompInds.map(c => { const rtt = regsToTiles[c], rbc = regsByComp.at(c); return regs.col('id').row(rbc.row(rtt === true ? 0 : rtt)); }); //current tile component centroids - initialized below let tileCompCents = [usedCompInds.length, 2].cube(); //scale all components to same size tiles const xStep = usedCompInds .filter(i => !Array.isArray(rawGridPts[i])) //must be object (i.e. multiple tiles in component) .map(i => rawGridPts[i].xStep) .mean()[0]; //current grid pts (array of 2-col matrices), // -initialize these and tile component centroids let gridPts = usedCompInds.map((i, j) => { if (Array.isArray(rawGridPts[i])) { tileCompCents.$row(j, rawGridPts[i]); return rawGridPts[i]; } else { let xy = rawGridPts[i].xy, mn = xy.mean(); tileCompCents.$row(j, mn); mn = mn.tileTo(xy); return xy.sub(mn).mul(xStep/rawGridPts[i].xStep).add(mn); } }) //iterate layout if (nc > 1) { const idealDist = [2 * xStep * (aspectRatio < 1 ? 1/aspectRatio : 1)]; for (let j=0; j<30; j++) { let gridPtsNew = gridPts.copy('shell'), tileCompCentsNew = tileCompCents.copy('shell'); const d = pointSetDists(gridPts); //current distances between tile-component point sets for (let c=0; c { setAttr( viz.insertSVG('polygon'), { points: polyPath(p), 'stroke-width': 0.15, stroke: '#444', fill: countyColorsJittered[regOfPolys[i]] || '#ccc' } ) }); const [xCent, yCent] = regCents.wrap(); //centroid points setAttr( viz.insertSVG('circle', nReg), { cx: xCent, cy: yCent, r: 1.3, fill: '#000', stroke: 'none' } ); //labels setAttr( viz.insertSVG('text', nReg) .addClass('label') .$prop('textContent', counties), { x: xCent, y: yCent.sub(2), 'text-anchor': 'middle', 'font-family': 'sans-serif', 'font-size': '4px' } ); //neighbors regNebs.greaterIndex.forEach((nebs,i) => { if (nebs.length) { setAttr( viz.insertSVG('line', nebs.length) .addClass('adj'), { x1: xCent[i], y1: yCent[i], x2: xCent.vec(nebs), y2: yCent.vec(nebs), stroke: '#000', 'stroke-width': 0.25 } ); } }); addPanZoom(viz[0]); }39:T526,newBdryViz = { bdryCell; const viz = qa('#bdry-viz'); viz[0].innerHTML = ''; //polygons (these don't change) bdrys.map((p, i) => { setAttr(viz.insertSVG('polygon'), { points: polyPath(p), 'stroke-width': 0.7, stroke: '#666', fill: regsByComp.at(i).length > 1 ? 'none' : '#d8d8d8' }); }); //lines: orig centroids to new centroids setAttr(viz.insertSVG('line', regCents.n()), { x1: regCents.col(0), y1: regCents.col(1), x2: 200, //owise 0 by default which affects init of pan-zoom y2: 200, 'stroke-width': 0.6, stroke: '#888', }); //new centroids setAttr(viz.insertSVG('circle', nReg), { cx: 200, //owise 0 by default which affects init of pan-zoom cy: 200, r: 2.6, fill: countyColors, stroke: 'none' }); //polygons for smoothed boundaries - use bdryCentSqDists since entry //only truthy if smooth bdry (i.e. >1 region in component), but only //computed once for data set (unlike smoothBdrys) const smoothBdryPolys = bdryCentSqDists.map((d, i) => { if (d) { return setAttr(viz.insertSVG('polygon'), { 'stroke-width': 2, stroke: '#000', fill: 'none', 'stroke-opacity': 0.6 }); } }); addPanZoom(viz[0]); return { smoothBdryPolys }; }3a:T6df,newGridViz = { gridCell; const viz = qa('#grid-viz'); viz[0].innerHTML = ''; //polygons for smoothed boundaries - use bdryCentSqDists since entry //only truthy if smooth bdry (i.e. >1 region in component), but only //computed once for data set (unlike smoothBdrys) const bdryPolygons = bdryCentSqDists.map((d, i) => { if (d) { return setAttr(viz.insertSVG('polygon'), { 'stroke-width': 2, stroke: '#000', fill: 'none', 'stroke-opacity': 0.6 }); } }); const tiles = usedCompInds.map(i => { const rbc_i = regsByComp.at(i), nComp = rbc_i.n(), elmts = {}; //centroid to tile-center lines if (nComp > 1) { elmts.lines = viz.insertSVG('line', nComp) .$attr('stroke-width', 0.6) .$attr('stroke', '#888'); } //tile s elmts.g = viz.insertSVG('g', nComp) .$attr('transform', translate( regCents.subcube(rbc_i, 0), //for reasonable pan-zoom init regCents.subcube(rbc_i, 1))); //tile centers elmts.centers = setAttr(elmts.g.insertSVG('circle'), { r: 2.6, fill: tileColors[i].bright, stroke: 'none', cx: 0, cy: 0 }); //tiles elmts.polygons = setAttr(elmts.g.insertSVG('polygon'), { fill: 'none', stroke: 'gray', 'stroke-width': 0.6 }); return elmts; }).$key(0, usedCompInds); //fail text const failText = viz.insertSVG('text') .$attr('x', 0) .$attr('y', 0) .$attr('font-family', 'sans-serif') .$prop('textContent', 'Could not fit grid(s); adjust one or more parameters.'); const panZoom = addPanZoom(viz[0]); return { bdryPolygons, tiles, failText, panZoom }; }3b:T6ef,updateGridViz = { const { bdryPolygons, tiles, failText, panZoom } = newGridViz, gridFail = rawGridPts.includes(false), [elmtsVis, failVis] = gridFail ? ['hidden' ,'visible'] : ['visible','hidden']; tiles.forEach(obj => { obj.lines && obj.lines.$attr('visibility', elmtsVis); //no lines prop if 1-reg component obj.g.$attr('visibility', elmtsVis); }); bdryPolygons .filter(v => v) .forEach(ar => ar.$attr('visibility', elmtsVis)); failText .$attr('visibility', failVis); if (gridFail) { panZoom.reset(); } else { //boundarys bdryPolygons.forEach((p, i) => { if (p) { p.$attr('points', polyPath(smoothBdrys[i])) } }); //tiles for (let i of usedCompInds) { const g = rawGridPts[i], rbc_i = regsByComp.at(i), tiles_i = tiles.at(i); if (Array.isArray(g)) { //single grid point - i.e. 1-region component tiles_i.g .$attr('transform', `translate(${g[0]},${g[1]})`); //no tile size, use mean of estimated grid steps const area = estGridStep.filter(v => typeof v === 'number').mean().pow(2)[0], h = Math.sqrt(area / aspectRatio), w = aspectRatio * h; tiles_i.polygons .$attr('points', tileVertices(w, h)); } else { const [x, y] = g.xy.wrap(), rt_i = regsToTiles[i]; setAttr(tiles_i.lines, { x1: newCents.subcube(rbc_i.vec(rt_i), 0), y1: newCents.subcube(rbc_i.vec(rt_i), 1), x2: x, y2: y }); tiles_i.g .$attr('transform', translate(x,y)); tiles_i.polygons .$attr('points', tileVertices(g.xStep, g.yStep)); } } } }3c:T71c,//current approach is inefficient: identical copy of the same //tile map in each section, all updated every time anything changes tileMaps = { mapCell, centCell, bdryCell, gridCell, combineCell; let min = cents.min(), max = cents.max(), mrgn = max.sub(min).mul(0.1), [xMin, yMin] = min.sub(mrgn), [xMax, yMax] = max.add(mrgn), resultElm = qa('.result'); const tileMaps = resultElm.map(viz => { viz.innerHTML = ''; return usedCompInds.map(i => { const rbc_i = regsByComp.at(i), n_i = rbc_i.n(), elm = {}; // elements elm.gOuter = [viz].insertSVG('g'); //single for component elm.gInner = elm.gOuter.insertSVG('g', n_i); // for each region (tile) in component //tiles elm.polygons = setAttr(elm.gInner.insertSVG('polygon'), { fill: tileColors[i].faint, stroke: '#fff', 'stroke-width': 0.6, 'points': `${xMin},${yMin} ${xMax},${yMax}` //only for pan-zoom init }); //tile centers elm.centers = setAttr(elm.gInner.insertSVG('circle'), { fill: '#000', stroke: 'none', cx: 0, cy: 0 }) .addClass('tile-centers'); //labels elm.labels = setAttr(elm.gInner.insertSVG('text'), { fill: '#000', 'stroke-width': 0.6, 'text-anchor': 'middle', 'font-family': 'sans-serif' }) .addClass('label'); return elm; }); }); //errors, will insert error lines and sectors here // -add after all other elmts so errors on top tileMaps.forEach((tm,i) => { tm.svg = [resultElm[i]]; tm.errors = tm.svg.insertSVG('g'); addPanZoom(resultElm[i]); }); return tileMaps; }3d:Te55,updateTileMaps = { const xStep = result.xStep, yStep = xStep / aspectRatio, scale = Math.min(xStep, yStep); //missing neighbors and angle errors const frag = qa.fragment(); //will add missing nebs lines to here const angleDiff = (u,v) => { const d = Math.abs(u - v); return Math.min(2*Math.PI - d, d); }; const arc = d3.arc(); const addPie = (x, y, theta) => { frag.insertSVG('path') .$attr('d', arc({ innerRadius: 0, outerRadius: scale / 5, startAngle: 0, endAngle: theta})) .$attr('transform', `translate(${x},${y})`) .$attr('fill', '#000') .addClass('result-angle'); }; const addCurve = (x1, y1, x2, y2) => { let xNorm = y1 - y2, yNorm = x2 - x1, xMean = (x1 + x2) / 2, yMean = (y1 + y2) / 2, theta = Math.atan2(yNorm, xNorm); if (theta > 0) { xNorm = -xNorm; yNorm = -yNorm; } setAttr(frag.insertSVG('path'), { d: `M${x1},${y1} Q${xMean + xNorm/5},${yMean + yNorm/5} ${x2},${y2}`, fill: 'none', stroke: '#000', 'stroke-opacity': 0.7, 'stroke-width': scale/50 }) .addClass('result-neighbor'); }; const nebLimit = xStep * 1.2; let missingNebs = 0, totalNebs = 0, totalAngleError = 0; const errors = usedCompInds.map((c, i) => { const r = regsByComp.at(c); if (r.length !== 1) { let missingCents = new Set(); //indices of regions that have >0 missing nebs const g = result.gridPts[i].copy().$key(0, result.tileIds[i]); //tile centers, region names as keys r.forEach((rg, j) => { const rid = regs.at(rg, 'id'), [x, y] = g.row(rid), angles = regNebs.angle[rg]; let angleError = 0; totalNebs += regNebs[rg].length; regNebs[rg].forEach((nb, k) => { const [xnb, ynb] = g.row(regs.at(nb, 'id')), theta = Math.atan2(y - ynb, x - xnb); angleError += angleDiff(angles[k], theta); if (Math.abs(xnb - x) > nebLimit || Math.abs(ynb - y) * aspectRatio > nebLimit) { missingCents.add(rid); missingNebs++; if (nb > rg) { //only draw curve once addCurve(x, y, xnb, ynb); } }; }); if (angleError) { totalAngleError += angleError; addPie(x, y, angleError / regNebs[rg].length); } }); } }); //naively update all tile maps for (let tm of tileMaps) { result.gridPts.forEach((g, i) => { const elmts = tm[i]; //tile position elmts.gInner .$attr('transform', translate(g.col(0), g.col(1))); //tile vertices elmts.polygons .$attr('points', tileVertices(xStep, yStep)); //tile centers elmts.centers .$attr('r', scale/30); //labels elmts.labels .$style('fontSize', scale/6 + 'px') .$attr('transform', `translate(0,${-yStep/4})`) .$prop('textContent', result.tileIds[i].map(id => id.slice(0, Math.min(id.lastIndexOf(','), 10)))); //overlay angle and missing neighbor erros tm.errors.qa('.result-neighbor, .result-angle').remove(); tm.errors.insertSVG(frag[0].cloneNode(true)); //error totals qa('[data-error="neighbors"]') .$prop('textContent', `Missing neighbors: ${(missingNebs / totalNebs * 100).toPrecision(3)}%`); qa('[data-error="angle"]') .$prop('textContent', `Mean angle error: ${(totalAngleError / totalNebs).toPrecision(3)}`); }); } }3e:[] 2e:{"title":"Tile Maps: US Counties","cells":[{"id":0,"value":"md`# Tile Maps: US Counties \n\nUse this notebook to make a __county-level__ tile map of one or more US states.\n\n_Note: this is a work in progress — there are improvements to make, features to add and the code is ugly. See the [Notes](#notes) section for more information._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof keepStates = text({value: 'florida', description: \"Comma-separated list of states (case-insensitive)\", submit: \"Go\", title: 'States'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`Figures are shown in pairs. The tile map corresponding to the current parameter values is shown on the left (this depends on all sections so don't worry if it looks bad initially); the plot on the right is section-specific. Use the mouse to pan-zoom figures.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2342,"value":"viewof mapOps = checkbox({\n title: 'Map options',\n options: [\n { value: 'labels', label: 'region name' },\n { value: 'adjacency', label: 'neighbors' },\n ],\n value: ['labels']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"mapCell = vizCell('map')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3325,"value":"md`Each county is assigned to a connected component. A county that straddles multiple components is assigned to the component where the county has the most area.\n\n[More details: Each county's centroid is computed from its polygons that are in the component the county is assigned to. Any polygons that are in other components (shaded on the map) *are not* used to calculate the county's centroid or neighbors, but are used to compute component boundaries.]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6594,"value":"md`## Tile Map Display\n\nThe percentage of neighboring counties that are separated and the mean angle error between (original) neighbors are shown above the tile map. These errors can also be shown per tile:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6597,"value":"viewof tileOps = checkbox({\n title: 'Show on tile maps',\n options: [\n { value: 'result-neighbor', label: 'missing neighbors' },\n { value: 'result-angle', label: 'mean angle error' }\n ],\n value: ['result-neighbor', 'result-angle']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6600,"value":"md`These errors are helpful when creating a tile map, though the global boundary shape and specific geographic features (e.g. a county with famous beaches should not be assigned to a landlocked tile) are also important.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3097,"value":"md`## Distort Centroids\n\nCounty centroids are distorted so that the distances between neighboring centroids are (roughly) the same, but the angles between them are (roughly) preserved. Don't worry if connected components overlap or if the centroid spacing is different for different components; tile maps are fitted to each component independently and combined at the end.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2624,"value":"viewof aspectRatio = select({\n title: 'Tile aspect ratio (width : height)',\n // description: 'Even though tiles are fitted later, centroid distortion depends on the tile aspect ratio.',\n options: [\n { label: '2 : 1', value: 2/1 },\n { label: '16 : 9', value: 16/9 },\n { label: '4 : 3', value: 4/3 },\n { label: '1 : 1', value: 1 },\n { label: '3 : 4', value: 3/4 },\n { label: '9 : 16', value: 9/16 },\n { label: '1 : 2', value: 1/2 },\n { label: `region geometric mean (${meanAspectRatio.toFixed(2)} : 1)`, value: meanAspectRatio }\n ],\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2516,"value":"viewof repel = slider({\n min: 0, \n max: 4, \n step: 1, \n value: 1,\n title: 'Repel non-neighbors',\n description: 'This applies to non-neighbors in the same component.'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2503,"value":"viewof distortion = slider({\n min: -0.4, \n max: 1.4, \n step: 0.2, \n value: 1, \n title: 'Distortion',\n description: '0: original centroids, 1: \\'full\\' distortion.'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2564,"value":"centCell = vizCell('cent')\n\n// centCell = {\n// const wrapper = qa.create('div');\n// wrapper.insert('div', 2)\n// .$prop('textContent', ['Original','Distorted'])\n// .$style('width', polys.size + 'px')\n// .$style('display', 'inline-block');\n// wrapper.insert('div')\n// .$style('clear', 'both');\n// wrapper.insertSVG(vizCell('pre-cent-viz'));\n// wrapper.insertSVG(vizCell('post-cent-viz'));\n// return wrapper[0];\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":3130,"value":"md`## Distort Boundaries\n\nWhen centroids are distorted, they 'drag' nearby boundary points with them. Alternatively, we can discard the original boundaries and use the **hulls** of the distorted centroids (with a little padding added).\n\nAs before, don't worry if components start to overlap. Note that components that only contain a single county (shaded below) are ignored until the end since the tile maps for such components are single tiles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5358,"value":"viewof useHulls = checkbox({\n options: [\n { value: 'hull', label: 'Use hulls' },\n ],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5017,"value":"viewof simplify = {\n \n if (useHulls) {\n return slider({\n min: 0, \n max: 16, \n step: 1, \n value: 10, \n title: 'Hull convexity'\n})\n }\n \n else {\n return slider({\n min: 0, \n max: 10, \n step: 1, \n value: 0, \n title: 'Simplify dragged boundaries'\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4574,"value":"viewof smooth = slider({\n min: 0, \n max: 3, \n step: 1, \n value: 0, \n title: 'Smooth'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4176,"value":"bdryCell = vizCell('bdry')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3352,"value":"md`## Fit Tiles\n\nThe tile size is chosen so that the required number of tile centers fit inside each component. Altering the origin of the tile grid (x-shift and y-shift) produces different sets of tiles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3010,"value":"viewof tileShape = select({\n title: 'Tile shape',\n options: [\n { label: 'rectangle', value: 'rect' },\n { label: 'hexagon - flat base', value: 'hex-base' },\n { label: 'hexagon - flat side', value: 'hex-side' }\n ],\n value: 'rect'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2485,"value":"viewof xShift = slider({\n min: 0, \n max: 0.8, \n step: 0.2, \n value: 0, \n title: 'Grid: x-shift'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3071,"value":"viewof yShift = slider({\n min: 0, \n max: 0.8, \n step: 0.2, \n value: 0, \n title: 'Grid: y-shift'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4917,"value":"gridCell = vizCell('grid')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6709,"value":"md`Counties are assigned to tiles by minimizing the sum of squared distances between distorted centroids and their corresponding tile centers. Each 'trail' in the plot above (right) connects a county's distorted centroid to its tile center. Shorter lines indicate that the distorted centroids fit more naturally into the grid(s) and are suggestive of a better tile map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5452,"value":"combiningComponents = md`## Combine Components\n\nIf the map has multiple components, the layout algorithm (which needs to be improved!) attempts to produce a compact layout, but such that the angle between nearby components is preserved.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5685,"value":"viewof repelComps = slider({\n min: 0, \n max: 6, \n step: 1, \n value: 1,\n title: 'Repel components'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5457,"value":"combineCell = vizCell('combine')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2537,"value":"md`## Download Tile Map\n\nOnly csv for now:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7680,"value":"{ \n const subTables = result.tileIds.map((ids, i) => {\n return result.gridPts[i].vec().$shape(ids.length).horiz(ids, [ids.length].cube(i));\n });\n let table = subTables[0];\n if (subTables.length > 1) table = table.vert(...subTables.slice(1));\n table.$key(1, ['x', 'y', 'name', 'component']);\n return DOM.download(\n new Blob([table.dsv()]),\n \"tiles.csv\",\n \"Download csv\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7708,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md` \n\n

\n\n## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3232,"value":"md`### Load`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"dc = {\n let dc = await require('@gjmcn/data-cube@0.2.1');\n await require('@gjmcn/data-cube-polygon@0.2.0');\n await require('@gjmcn/data-cube-hull@0.2.0');\n await require('@gjmcn/data-cube-print-html@0.2.0');\n dc._qa = await require('@gjmcn/data-cube-html@0.2.2'); \n return dc;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"qa = dc._qa","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"// import {css} from \"@gjmcn/data-cube-array-oriented-javascript\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"// useCss = css","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"topo = require('https://unpkg.com/topojson@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5248,"value":"munkres = require('munkres-js@1.2.2/munkres.js').catch(() => window[\"computeMunkres\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3240,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3243,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3249,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4954,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7772,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3723,"value":"svgPanZoom = await require('https://unpkg.com/svg-pan-zoom@3.5.3/dist/svg-pan-zoom.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3238,"value":"md`### Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"//Connected components of sparse adjacency matrix.\n// x: array of arrays; inner array i: neighbors of i\n// returns: array same length as x, each entry is the index\n// of a component\nconnComp = x => {\n \n const n = x.length,\n cc = new Array(n);\n \n //node and its neighbors belong to component comp\n const fillComp = (node, comp) => {\n cc[node] = comp;\n for (let neighb of x[node]) {\n if (cc[neighb] === undefined) { //avoid infinite recursion\n fillComp(neighb, comp); \n }\n } \n };\n \n for (let i=0, j=0; i {\n w = w.div(w.sum());\n return p.mul(w.tile(1)).sum();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3434,"value":"//vectors from points q to a point p, fast\n// q: n-by-2\n// p: 1-by-2\n// returns: n-array\nptsToPt = (q, p) => {\n const x = p[0],\n y = p[1],\n n = q.n(),\n r = [n,2].cube();\n for (let i=0; i {\n const n = q.n(),\n m = w.n(),\n d = [n,m].cube();\n for (let j=0; j { \n const n = ps.length,\n d = [n,n].cube(0);\n for (let i=1; i {\n const n = q.n(),\n r = [n,2].cube();\n for (let i=0; i {\n const n = q.n(),\n d = new Array(n);\n for (let i=0; i {\n let i = 0;\n while (b.n() > 400 && i++ < 10) {\n b = b.poly.simplify(0.3, true, true); \n }\n return b;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3730,"value":"function grid(xMin, xMax, xStep, yMin, yMax, yStep, type = 'rect') {\n if (type === 'rect') {\n return ([xMin,xMax].seq(xStep).grid([yMin,yMax].seq(yStep)));\n }\n else if (type === 'tri-base') {\n yStep *= Math.sqrt(3) / 2;\n const ys = [yMin,yMax].seq(yStep),\n ny = ys.length;\n if (ny > 1) {\n xMax = Math.max(xMax - xStep / 2, xMin + 1e-12);\n }\n const xs = [xMin,xMax].seq(xStep),\n nx = xs.length,\n g = xs.grid(ys),\n shift = xStep / 2;\n for (let j=1; j response.json());\n geo.features = //remove null geometries and 'counties' that are actually parts of great lakes\n geo.features.filter(county => county.geometry && !lakes.test(county.id));\n const countyStates = geo.features.map(county => {\n const id = county.id;\n const s = id.slice(id.lastIndexOf(',') + 1).trim();\n return s.toLowerCase();\n })\n return {geo, countyStates};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"geoData = {\n const keep = new Set(uniqueStates);\n return {\n type: 'FeatureCollection',\n features: allData.geo.features.filter((county, i) => keep.has(allData.countyStates[i]))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1467,"value":"topoData = topo.topology([geoData])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1460,"value":"nebs = topo.neighbors(topoData.objects[0].geometries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"ids = geoData.features.map(ft => ft.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"cents = polys.map(p => p.poly.centroid()).matrix()","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"areas = polys.map(p => p.poly.area())","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"comps = connComp(nebs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"indsByComp = polys.ind().group(0, comps).orderKey(0, 'asc').$key()","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"data = ids.horiz(cents, areas, polys, polys.ind(), comps)\n .$key(1, ['id','cent_x','cent_y','area','poly', 'polyInd', 'comp'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7942,"value":"states = regs.col('id').map(id => id.slice(id.lastIndexOf(',') + 1).trim().toLowerCase())","pinned":false,"hidden":false,"mode":"ojs"},{"id":7946,"value":"counties = regs.col('id').map(id => id.slice(0, id.lastIndexOf(',')))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2954,"value":"regCents = regs.col(['cent_x','cent_y']).$strip()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"regNebs = {\n \n const nPoly = polys.length,\n nReg = regs.n(),\n polyDest = new Array(nPoly), //region that each poly belongs to (or undefined)\n regNebs = new Array(nReg); //each region will have an array of nebs\n \n for (let i=0; i {\n const [x, y] = regCents.row(i).tile(0, nb.length).sub(regCents.row(nb)).wrap();\n return y.atan2(x);\n });\n \n regNebs.greaterIndex = regNebs.map((nb, i) => nb.filter(j => j > i));\n \n return regNebs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6832,"value":"nReg = regNebs.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":3362,"value":"//row for each used comp, row key is comp index \nregsByComp = regs.ind().group(0, regs.col('comp')).orderKey(0, 'asc')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5650,"value":"regCentsByComp = regsByComp.call(inds => regCents.row(inds))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3497,"value":"//for each region, indices of regions in same component that are not neighbors\nregNonNebs = regNebs.map((nb, i) => {\n return nb.length\n ? regsByComp.at(regs.at(i,'comp')).diff([i].concat(nb))\n : []; //must be only region in component\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2240,"value":"regOfPolys = {\n \n const nP = polys.length,\n regOfPolys = new Array(nP); //discarded polys will be left as undefined\n \n regs.col('polyInd').map((inds, j) => regOfPolys.$row(inds, j));\n \n return regOfPolys; \n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6051,"value":"colors = d3.schemeCategory10.row(dc([0,1,2,3,4,5,6,8,9])) //remove gray","pinned":false,"hidden":false,"mode":"ojs"},{"id":3103,"value":"//mean region aspect ratio\nmeanAspectRatio = regs.col('poly').map(p => {\n if (p.length === 1) {\n const rng = p[0].range();\n return rng[0] / rng[1];\n }\n else {\n let xMin = Infinity,\n xMax = -Infinity,\n yMin = Infinity,\n yMax = -Infinity;\n for (let q of p) {\n const qMin = q.min(),\n qMax = q.max();\n xMin = Math.min(xMin, qMin[0]);\n xMax = Math.max(xMax, qMax[0]);\n yMin = Math.min(yMin, qMin[1]);\n yMax = Math.max(yMax, qMax[1]);\n }\n return (xMax - xMin) / (yMax - yMin);\n }\n}).geoMean()[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"usedComps = comps.ind().isIn(regs.col('comp'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5567,"value":"//same as keys of regsByComp\nusedCompInds = usedComps.which()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3939,"value":"stateColors = {\n dc;\n let j = 0;\n return uniqueStates.map(() => colors[j++ % colors.length]).$key(0, uniqueStates);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3949,"value":"countyColors = stateColors.row(states, 'array')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7921,"value":"countyColorsJittered = countyColors.map(c => d3.interpolateLab('#fff', c)(Math.random() * 0.2 + 0.2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1819,"value":"bdrys = {\n const n = comps.length,\n bdrys = new Array(n);\n for (let i=0; i {\n if (b && regsByComp.at(i).length > 1) {\n return ptsToPtsDist(b, regCents.row(regsByComp.at(i))).pow(2);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2698,"value":"//displacement vectors from nebs to centroid for each region\nnebsToCent = regNebs.map((nb,i) => ptsToPt(regCents.row(nb), regCents.row(i)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2645,"value":"//mean distance from centroid to neighbors for each region\nmeanDistToNebs = nebsToCent.map(m => {\n if (m.length === 0) return 0;\n return vecLength(m).mean()[0];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2717,"value":"//estimated grid step for each component - empty for unused components\nestGridStep = {\n const nRegByComp = regs.col('comp').freq('vector') //row keys are inds of components\n return bdrys.map((b,i) => Math.sqrt(b.poly.area() / nRegByComp.at(i)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5462,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"md`### Values that depend on UI options`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8152,"value":"uniqueStates = dc(keepStates.trim().toLowerCase().split(/\\s*,\\s*/)).unique()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3208,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3210,"value":"newCents = {\n let newCents;\n if (distortion === 1) {\n newCents = fullCents.copy();\n }\n else if (distortion === 0) { \n newCents = regCents.copy();\n }\n else {\n newCents = regCents.mul(1 - distortion).add(fullCents.mul(distortion)); \n }\n newCents.distortVecs = newCents.sub(regCents);\n return newCents;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4580,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4900,"value":"//grids for different comps have different sized tiles\nrawGridPts = usedComps.map((u, i) => {\n if (u) {\n const rgs = regsByComp.at(i);\n if (rgs.length === 1) {\n return newCents.row(rgs[0]);\n }\n else {\n const gridType = (tileShape === 'rect')\n ? 'rect'\n : (tileShape === 'hex-base')\n ? 'tri-side'\n : 'tri-base';\n return gridInPoly(\n smoothBdrys[i],\n rgs.length,\n {\n gridType: gridType,\n xOffset: xShift,\n yOffset: yShift,\n aspectRatio: aspectRatio,\n maxIter: 50\n });\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5253,"value":"regsToTiles = rawGridPts.map((gp, i) => {\n if (gp) {\n if (Array.isArray(gp)) {\n return true; \n }\n else {\n let assign = munkres(\n ptsToPtsDist(gp.xy, newCents.row(regsByComp.at(i))).pow(2).arAr()\n ).matrix();\n //return permutation that matches regions to their tiles\n return assign.col(1).order(0, assign.col(0), 'asc');\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7981,"value":"tileColors = regsToTiles.map((rt, i) => {\n dc;\n if (Array.isArray(rt)) {\n const bright = countyColors.row(regsByComp.at(i).row(rt, 'array'));\n const faint = bright.map(col => d3.interpolateLab('#fff', col)(0.3));\n return {bright, faint};\n }\n else if (rt) {\n const bright = [countyColors[regsByComp.at(i)[0]]];\n const faint = [d3.interpolateLab('#fff', bright[0])(0.3)];\n return {bright, faint};\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5556,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":6579,"value":"tileDisplay = ['result-neighbor', 'result-angle'].forEach(cls => {\n qa(`.result .${cls}`).\n $style('visibility', tileOps.includes(cls) ? 'visible' : 'hidden');\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3213,"value":"md`### Visualization: helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5122,"value":"polyPath = p => p.sew(1).sew(0, ' ')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7434,"value":"//translation string for transform attribute\ntranslate = (x, y) => ['translate('].add(x, ',', y, ')')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5119,"value":"addPanZoom = {\n return elm => {\n if (elm._panZoom) {\n elm._panZoom.destroy();\n elm._panZoom = undefined;\n }\n elm._panZoom = svgPanZoom(elm, {\n controlIconsEnabled: false\n , zoomScaleSensitivity: 0.3\n , minZoom: 0.5\n , maxZoom: 25\n });\n return elm._panZoom\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3847,"value":"vizCell = id => {\n \n const wrapper = qa.create('div'); \n \n wrapper.insert('div', 2)\n .$style('display', 'inline-block')\n .$style('font', '14px sans-serif')\n .$style('cursor', 'default')\n .$style('width', ['200px', 'auto'])\n .$attr('data-error', ['neighbors', 'angle']);\n \n wrapper.insert('div')\n .$style('clear', 'both');\n \n const subCell = isResult => {\n return qa.createSVG('svg')\n .$attr('width', polys.size)\n .$attr('height', polys.size)\n .$style('border', 'solid 0.5px')\n .$attr('id', id + (isResult ? '-result' : '-viz'))\n .addClass(isResult ? 'result' : 'setting');\n };\n \n wrapper.insertSVG(subCell(true));\n wrapper.insertSVG(subCell());\n \n return wrapper[0];\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6848,"value":"setAttr = (elmArray, attr) => {\n for (let k in attr) {\n elmArray.$attr(k, attr[k]);\n }\n return elmArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7074,"value":"//vertices of tile centered at (0,0)\n// -returns string to use as points attribute\ntileVertices = (xStep, yStep) => {\n\n const xHalf = xStep / 2,\n yHalf = yStep / 2;\n\n if (tileShape === 'rect') {\n return -xHalf + ',' + yHalf + ' ' + \n xHalf + ',' + yHalf + ' ' + \n xHalf + ',' + -yHalf + ' ' + \n -xHalf + ',' + -yHalf;\n }\n else if (tileShape === 'hex-base') {\n const q = yHalf / Math.sqrt(3) * aspectRatio;\n return -q + ',' + yHalf + ' ' + \n q + ',' + yHalf + ' ' + \n 2*q + ',' + 0 + ' ' +\n q + ',' + -yHalf + ' ' + \n -q + ',' + -yHalf + ' ' + \n -2*q + ',' + 0;\n }\n else { //hex-side\n const q = xHalf / Math.sqrt(3) / aspectRatio;\n return -xHalf + ',' + q + ' ' + \n 0 + ',' + 2*q + ' ' + \n xHalf + ',' + q + ' ' +\n xHalf + ',' + -q + ' ' + \n 0 + ',' + -2*q + ' ' + \n -xHalf + ',' + -q;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6820,"value":"md`### Visualization: draw/update`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6584,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":6791,"value":"updateMapViz = {\n \n newMapViz;\n\n qa('#map-viz .label')\n .$attr('visibility', mapOps.includes('labels') ? 'visible' : 'hidden');\n \n qa('#map-viz .adj')\n .$attr('visibility', mapOps.includes('adjacency') ? 'visible' : 'hidden');\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3219,"value":"newCentViz = {\n \n centCell;\n\n const viz = qa('#cent-viz');\n viz[0].innerHTML = '';\n \n //neighbors\n const nebLines = regNebs.greaterIndex.map((nebs, i) => {\n if (nebs.length) {\n return setAttr(viz.insertSVG('line', nebs.length), {\n stroke: 'gray',\n 'stroke-width': 0.8,\n x1: 200, //owise 0 by default which affects init of pan-zoom\n y1: 200,\n x2: 200,\n y2: 200\n });\n } \n });\n \n //centroids\n setAttr(viz.insertSVG('circle', nReg), {\n r: 2.6,\n fill: countyColors,\n stroke: 'none',\n cx: regCents.col(0), //for reasonable pan-zoom init\n cy: regCents.col(1),\n });\n \n return {\n panZoom: addPanZoom(viz[0]),\n nebLines\n };\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6822,"value":"updateCentViz = {\n \n const [xNew, yNew] = newCents.wrap();\n\n //centroids\n setAttr(\n qa('#cent-viz circle'),\n {\n cx: xNew,\n cy: yNew, \n }\n );\n \n //neighbors\n regNebs.greaterIndex.forEach((nebs, i) => {\n if (nebs.length) {\n setAttr(\n newCentViz.nebLines[i],\n {\n x1: xNew[i],\n y1: yNew[i],\n x2: xNew.row(nebs),\n y2: yNew.row(nebs)\n }\n );\n }\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4542,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":7019,"value":"updateBdryViz = {\n \n const [xNew, yNew] = newCents.wrap();\n \n //lines: original centroids to new centroids\n setAttr(\n qa('#bdry-viz line'),\n {\n x2: xNew,\n y2: yNew, \n }\n );\n \n \n //new centroids\n setAttr(\n qa('#bdry-viz circle'),\n {\n cx: xNew,\n cy: yNew, \n }\n );\n \n //boundarys\n newBdryViz.smoothBdryPolys.forEach((p, i) => {\n if (p) {\n setAttr(\n p,\n {\n points: polyPath(smoothBdrys[i]),\n }\n );\n }\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4914,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":7063,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":6718,"value":"newCombineViz = {\n \n combineCell;\n \n const viz = qa('#combine-viz');\n viz[0].innerHTML = '';\n\n let min = cents.min(),\n max = cents.max(),\n mrgn = max.sub(min).mul(0.1),\n [xMin, yMin] = min.sub(mrgn),\n [xMax, yMax] = max.add(mrgn);\n \n const tilePolygons = usedCompInds.map(i => {\n return setAttr(viz.insertSVG('polygon', regsByComp.at(i).n()), {\n fill: 'none',\n stroke: 'gray',\n 'stroke-width': 0.6,\n 'points': `${xMin},${yMin} ${xMax},${yMax}` //only for pan-zoom init \n }) \n });\n\n addPanZoom(viz[0]);\n\n return { tilePolygons }; \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7288,"value":"updateCombineViz = {\n \n const verts = tileVertices(result.xStep, result.xStep / aspectRatio);\n\n result.gridPts.forEach((g, i) => {\n newCombineViz.tilePolygons[i]\n .$attr('points', verts)\n .$attr('transform', translate(g.col(0), g.col(1)));\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6588,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":7331,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":7632,"value":"tileOpsToggle = {\n \n updateTileMaps;\n\n qa('.result-neighbor, .tile-centers')\n .$attr('visibility', tileOps.includes('result-neighbor') ? 'visible' : 'hidden');\n \n qa('.result-angle')\n .$attr('visibility', tileOps.includes('result-angle') ? 'visible' : 'hidden');\n\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}