2b:null 2c:["$","title",null,{"children":"Table Cartograms | Jo Wood | Observable"}] 31:T484,This is an Observable-friendly port of Andrew McNutt's [table cartograms repo](https://github.com/mcnuttandrew/table-cartogram), which itself is an implementation of the approach described by ${bib.cite("evans_table_2013","evans_table_2018")}. To use: ```javascript import {tableCartogram} from "@jwolondon/table-cartograms" ``` You can also import the other variants `tableCartogramWithUpdate` and `tableCartogramAdaptive`. For use of the functions, see McNutt's [table cartograms documentation](https://github.com/mcnuttandrew/table-cartogram) (this Observable API should match Andrew's). Table cartograms (sometimes called TACOs for short) are transformations of table cells from a rectilinear to non-rectilinear planar layout where the area of each transformed cell is proportional to the numeric value it represents. It represents an alternative to table 'heatmaps' where size rather than colour is used to encode magnitude. For example, consider this simple 3x3 table storing values from 1 to 9: | | col 1 | col 2 | col 3 | | :------- | :-: | :-: | :-: | | **row 1** | 1 | 2 | 3 | | **row 2** | 4 | 5 | 6 | | **row 3** | 7 | 8 | 9 | 32:T427,bib = Refs.create(` @inproceedings{evans_table_2013, title={Table cartograms}, author={Evans, William and Felsner, Stefan and Kaufmann, Michael and Kobourov, Stephen G and Mondal, Debajyoti and Nishat, Rahnuma Islam and Verbeek, Kevin}, booktitle={European Symposium on Algorithms}, pages={421--432}, year={2013}, organization={Springer}, url={https://www.cs.ubc.ca/~will/papers/tablecart.pdf} } @article{evans_table_2018, title={Table cartogram}, author={Evans, William and Felsner, Stefan and Kaufmann, Michael and Kobourov, Stephen G and Mondal, Debajyoti and Nishat, Rahnuma Islam and Verbeek, Kevin}, journal={Computational Geometry}, volume={68}, pages={174--185}, year={2018}, publisher={Elsevier}, doi={10.1016/j.comgeo.2017.06.010} } @inproceedings{mcnutt_what_2021, title={What are table cartograms good for anyway? an algebraic analysis}, author={McNutt, Andrew}, booktitle={Computer Graphics Forum}, volume={40}, number={3}, pages={61--73}, year={2021}, url={https://arxiv.org/pdf/2104.04042.pdf} } `)33:T42b,function tableCartogramWithUpdate(params) { const { data, accessor = (d) => d, layout = "pickBest", height = 1, width = 1, fixes = null } = params ?? {}; const optimizationParams = { ...defaultOptimizationParams, ...(params?.optimizationParams ?? {}) }; const localTableRaw = data.map((row) => row.map((cell) => accessor(cell))); const allowZero = !!fixes?.allowZero; const epsilon = fixes?.epsilon ?? 1e-12; const localTable = allowZero ? sanitizeLocalTable(localTableRaw, { epsilon }) : localTableRaw; const validateWithUpdateOnLocalTable = !!fixes?.validateWithUpdateOnLocalTable; const invalid = validateWithUpdateOnLocalTable ? inputTableIsInvalid(localTable) : inputTableIsInvalid(data); if (invalid) { throw new Error("INVALID INPUT TABLE", data); } const updateFunction = buildIterativeCartogram( localTable, layout, { height, width }, optimizationParams ); return (numIterations) => prepareRects(updateFunction(numIterations), data, accessor); }34:T6a8,function tableCartogramAdaptive(params) { const { data, maxNumberOfSteps = 1000, targetAccuracy = 0.01, iterationStepSize = 10, layout = "pickBest", accessor = (d) => d, logging = false, height = 1, width = 1, fixes = null, annotateIndividualError = false } = params ?? {}; const optimizationParams = { ...defaultOptimizationParams, ...(params?.optimizationParams ?? {}) }; const allowZero = !!fixes?.allowZero; const epsilon = fixes?.epsilon ?? 1e-12; const invalid = inputTableIsInvalid(data); if (invalid) { throw new Error("INVALID INPUT TABLE", data); } const localTableRaw = data.map((row) => row.map((cell) => accessor(cell))); const localTable = allowZero ? sanitizeLocalTable(localTableRaw, { epsilon }) : localTableRaw; const updateFunction = buildIterativeCartogram( localTable, layout, { height, width }, optimizationParams ); const boundUpdate = (iterations) => prepareRects(updateFunction(iterations), data, accessor); let stillRunning = true; let currentLayout = null; let stepsTaken = 0; let currentScore = { error: null, maxError: null }; while (stillRunning) { currentLayout = boundUpdate(iterationStepSize); currentScore = computeErrors( data, currentLayout, accessor, { height, width }, { annotate: !!annotateIndividualError } ); stepsTaken += iterationStepSize; if (stepsTaken > maxNumberOfSteps || currentScore.error < targetAccuracy) { stillRunning = false; } } return { gons: currentLayout, error: currentScore.error, maxError: currentScore.maxError, stepsTaken }; }35:T583,function plotTaco(taco, options = {}) { const { w = 340, fontSize = 14, showLabels = false, showFrame = true, scheme = "Oranges", fill = "value", stroke = null, strokeWidth = 1, inset = 0, extra = [] } = options; const geo = taco.reduce( (geo, d) => geo.polygon([d.vertices.map((v) => [v.x, v.y])], { properties: { value: d.value, cx: (d.vertices[0].x + d.vertices[1].x + d.vertices[2].x + d.vertices[3].x) / 4, cy: (d.vertices[0].y + d.vertices[1].y + d.vertices[2].y + d.vertices[3].y) / 4 } }), new GeoJSON() ); const [data, bounds] = [geo.featureCollection, geo.boundingRect({ inset })]; return Plot.plot({ width: w, color: { scheme }, projection: { type: "identity", domain: bounds }, marks: [ Plot.geo(data, { fill, stroke, strokeWidth }), showLabels ? [ Plot.text(data, { x: (d) => d.properties.cx, y: (d) => d.properties.cy, fontSize, text: "value", fill: "black", stroke: "white", strokeOpacity: 0.3 }) ] : [], extra, showFrame ? [Plot.frame()] : [] ] }); }36:T2152,zionVisitorsData = [ { Year: 2016, JAN: 84145, FEB: 117510, MAR: 359920, APR: 395768, MAY: 447976, JUN: 544890, JUL: 599961, AUG: 477507, SEP: 497825, OCT: 412916, NOV: 232271, DEC: 124438 }, { Year: 2015, JAN: 78318, FEB: 106314, MAR: 291118, APR: 392417, MAY: 400048, JUN: 458546, JUL: 479538, AUG: 455487, SEP: 394201, OCT: 314966, NOV: 180390, DEC: 97503 }, { Year: 2014, JAN: 70862, FEB: 74625, MAR: 226424, APR: 312381, MAY: 391969, JUN: 397753, JUL: 407153, AUG: 391973, SEP: 340855, OCT: 304108, NOV: 169607, DEC: 101986 }, { Year: 2013, JAN: 56972, FEB: 64994, MAR: 227899, APR: 292765, MAY: 313594, JUN: 367217, JUL: 379129, AUG: 345014, SEP: 339593, OCT: 203056, NOV: 141251, DEC: 75903 }, { Year: 2012, JAN: 68202, FEB: 74382, MAR: 165242, APR: 352192, MAY: 343488, JUN: 370280, JUL: 392359, AUG: 364857, SEP: 355140, OCT: 276134, NOV: 140350, DEC: 70981 }, { Year: 2011, JAN: 64524, FEB: 67801, MAR: 164037, APR: 255813, MAY: 325089, JUN: 376453, JUL: 391144, AUG: 360196, SEP: 324727, OCT: 273876, NOV: 145158, DEC: 76687 }, { Year: 2010, JAN: 54928, FEB: 62099, MAR: 171079, APR: 277599, MAY: 304278, JUN: 331185, JUL: 362881, AUG: 332796, SEP: 319838, OCT: 236316, NOV: 143272, DEC: 69701 }, { Year: 2009, JAN: 60204, FEB: 62964, MAR: 167246, APR: 271709, MAY: 296330, JUN: 366004, JUL: 368933, AUG: 372157, SEP: 306161, OCT: 265095, NOV: 132998, DEC: 65601 }, { Year: 2008, JAN: 56137, FEB: 62044, MAR: 187814, APR: 242778, MAY: 302002, JUN: 354527, JUL: 360046, AUG: 368739, SEP: 312606, OCT: 254187, NOV: 126588, DEC: 62686 }, { Year: 2007, JAN: 68640, FEB: 71530, MAR: 176622, APR: 286701, MAY: 281149, JUN: 333005, JUL: 338116, AUG: 337824, SEP: 314290, OCT: 253572, NOV: 129962, DEC: 65870 }, { Year: 2006, JAN: 71680, FEB: 70170, MAR: 144186, APR: 264821, MAY: 277849, JUN: 325124, JUL: 347105, AUG: 337212, SEP: 298587, OCT: 235952, NOV: 128339, DEC: 66325 }, { Year: 2005, JAN: 63566, FEB: 70260, MAR: 195530, APR: 230366, MAY: 283547, JUN: 339849, JUL: 347745, AUG: 340826, SEP: 298465, OCT: 227570, NOV: 118083, DEC: 70858 }, { Year: 2004, JAN: 67913, FEB: 81970, MAR: 190919, APR: 297906, MAY: 295304, JUN: 326499, JUL: 337145, AUG: 338899, SEP: 323156, OCT: 227332, NOV: 113626, DEC: 76673 }, { Year: 2003, JAN: 71233, FEB: 72781, MAR: 143284, APR: 244910, MAY: 304556, JUN: 308634, JUL: 294996, AUG: 312162, SEP: 280970, OCT: 229992, NOV: 119860, DEC: 75414 }, { Year: 2002, JAN: 55866, FEB: 66575, MAR: 158518, APR: 279225, MAY: 301163, JUN: 329355, JUL: 347541, AUG: 322920, SEP: 312931, OCT: 229989, NOV: 112489, DEC: 75973 }, { Year: 2001, JAN: 61795, FEB: 53960, MAR: 95231, APR: 207864, MAY: 210707, JUN: 323759, JUL: 321920, AUG: 344531, SEP: 261476, OCT: 179932, NOV: 105821, DEC: 50783 }, { Year: 2000, JAN: 80141, FEB: 73390, MAR: 126843, APR: 220905, MAY: 239579, JUN: 341054, JUL: 341050, AUG: 331474, SEP: 289827, OCT: 232685, NOV: 105733, DEC: 49667 }, { Year: 1999, JAN: 73220, FEB: 69337, MAR: 122668, APR: 218059, MAY: 218639, JUN: 298448, JUL: 335012, AUG: 373744, SEP: 309215, OCT: 237279, NOV: 124086, DEC: 69957 }, { Year: 1998, JAN: 70167, FEB: 62429, MAR: 112119, APR: 201553, MAY: 230959, JUN: 325129, JUL: 318876, AUG: 359490, SEP: 284343, OCT: 229844, NOV: 112117, DEC: 63022 }, { Year: 1997, JAN: 65244, FEB: 68431, MAR: 128143, APR: 230390, MAY: 226370, JUN: 326154, JUL: 333883, AUG: 367010, SEP: 304847, OCT: 230274, NOV: 104605, DEC: 60183 }, { Year: 1996, JAN: 58277, FEB: 70136, MAR: 126044, APR: 237607, MAY: 238705, JUN: 339727, JUL: 340812, AUG: 372426, SEP: 310840, OCT: 239701, NOV: 102777, DEC: 60949 }, { Year: 1995, JAN: 60215, FEB: 70317, MAR: 119841, APR: 189511, MAY: 202000, JUN: 337268, JUL: 363645, AUG: 377107, SEP: 312443, OCT: 224457, NOV: 119920, DEC: 53438 }, { Year: 1994, JAN: 60598, FEB: 55083, MAR: 103289, APR: 205846, MAY: 198731, JUN: 304478, JUL: 326536, AUG: 361394, SEP: 295720, OCT: 221345, NOV: 90568, DEC: 47283 }, { Year: 1993, JAN: 52236, FEB: 50599, MAR: 106142, APR: 206549, MAY: 220669, JUN: 335945, JUL: 348106, AUG: 376382, SEP: 290893, OCT: 258341, NOV: 92657, DEC: 54061 }, { Year: 1992, JAN: 55002, FEB: 58579, MAR: 81606, APR: 138140, MAY: 257471, JUN: 338363, JUL: 353454, AUG: 415549, SEP: 318549, OCT: 225259, NOV: 89896, DEC: 58758 }, { Year: 1991, JAN: 54687, FEB: 64780, MAR: 71951, APR: 131160, MAY: 255396, JUN: 336422, JUL: 349020, AUG: 362064, SEP: 278614, OCT: 208030, NOV: 80061, DEC: 44812 }, { Year: 1990, JAN: 54093, FEB: 48346, MAR: 77423, APR: 154762, MAY: 237277, JUN: 316983, JUL: 308335, AUG: 340603, SEP: 257272, OCT: 166148, NOV: 98844, DEC: 42314 }, { Year: 1989, JAN: 33534, FEB: 38254, MAR: 94224, APR: 132387, MAY: 235179, JUN: 300330, JUL: 304532, AUG: 321244, SEP: 248105, OCT: 163695, NOV: 86055, DEC: 41317 }, { Year: 1988, JAN: 38333, FEB: 46684, MAR: 65640, APR: 129748, MAY: 208323, JUN: 308566, JUL: 305583, AUG: 314482, SEP: 262166, OCT: 157715, NOV: 71847, DEC: 39245 }, { Year: 1987, JAN: 35783, FEB: 37091, MAR: 57095, APR: 117924, MAY: 203914, JUN: 267237, JUL: 296526, AUG: 300993, SEP: 231095, OCT: 131044, NOV: 61714, DEC: 37203 }, { Year: 1986, JAN: 35763, FEB: 35919, MAR: 80728, APR: 92993, MAY: 246440, JUN: 252715, JUL: 261818, AUG: 269267, SEP: 194138, OCT: 110052, NOV: 50783, DEC: 39887 }, { Year: 1985, JAN: 23339, FEB: 30716, MAR: 54763, APR: 95748, MAY: 201599, JUN: 229265, JUL: 253508, AUG: 253802, SEP: 182744, OCT: 100050, NOV: 44125, DEC: 33613 }, { Year: 1984, JAN: 21848, FEB: 26463, MAR: 48492, APR: 89509, MAY: 160492, JUN: 231037, JUL: 232872, AUG: 226230, SEP: 174514, OCT: 102092, NOV: 42409, DEC: 21296 }, { Year: 1983, JAN: 18578, FEB: 24133, MAR: 36086, APR: 75772, MAY: 183803, JUN: 201746, JUL: 227243, AUG: 202119, SEP: 154567, OCT: 90204, NOV: 37866, DEC: 20913 }, { Year: 1982, JAN: 15445, FEB: 20958, MAR: 38731, APR: 72295, MAY: 146438, JUN: 221168, JUL: 252010, AUG: 196725, SEP: 140672, OCT: 85304, NOV: 32936, DEC: 23608 }, { Year: 1981, JAN: 24349, FEB: 22594, MAR: 35058, APR: 63036, MAY: 132198, JUN: 221905, JUL: 233041, AUG: 262514, SEP: 150219, OCT: 86905, NOV: 34820, DEC: 22169 }, { Year: 1980, JAN: 15637, FEB: 17832, MAR: 32537, APR: 58225, MAY: 134747, JUN: 175129, JUL: 212492, AUG: 212223, SEP: 136648, OCT: 75312, NOV: 32542, DEC: 20522 }, { Year: 1979, JAN: 8994, FEB: 12106, MAR: 23079, APR: 63306, MAY: 122964, JUN: 156734, JUL: 168614, AUG: 187461, SEP: 173883, OCT: 77131, NOV: 29139, DEC: 17117 } ]37:T7e8,layouts = (() => { const gridLayout = buildZigZag(0, 0); const zigZagOnX = buildZigZag(0.5, 0); const zigZagOnY = buildZigZag(0, 0.5); const zigZagOnXY = buildZigZag(0.25, 0.25); const psuedoCartogramLayout = (numRows, numCols, colSums, rowSums, total) => { return [...new Array(numCols + 1)].map((_, y) => { return [...new Array(numRows + 1)].map((__, x) => ({ x: x ? colSums[x - 1] / total : 0, y: y ? rowSums[y - 1] / total : 0 })); }); }; const psuedoCartogramLayoutZigZag = ( numRows, numCols, colSums, rowSums, total ) => { return [...new Array(numCols + 1)].map((_, y) => { return [...new Array(numRows + 1)].map((__, x) => ({ x: (x ? colSums[x - 1] / total : 0) + (0.025 / numRows) * (y % 2 ? -1 : 1), y: (y ? rowSums[y - 1] / total : 0) + (0.025 / numCols) * (x % 2 ? -1 : 1) })); }); }; const partialPsuedoCartogram = ( numRows, numCols, colSums, rowSums, total ) => { return [...new Array(numCols + 1)].map((_, y) => { return [...new Array(numRows + 1)].map((__, x) => ({ x: x ? colSums[x - 1] / total : 0, y: y / numCols })); }); }; function makeRamp(rampOnX, rampOnY) { return (numRows, numCols) => { const Xsum = makeSum(numRows + 1); const Ysum = makeSum(numCols + 1); return [...new Array(numCols + 1)].map((_, y) => [...new Array(numRows + 1)].map((__, x) => ({ y: rampOnY ? makeSum(y + 1) / Ysum : y / numCols, x: rampOnX ? makeSum(x + 1) / Xsum : x / numRows })) ); }; } return { gridLayout, zigZagOnX, zigZagOnY, zigZagOnXY, psuedoCartogramLayout, psuedoCartogramLayoutZigZag, partialPsuedoCartogram, rampX: makeRamp(true, false), rampY: makeRamp(false, true), // Not in your types.ts union, but exists in the repo’s layouts.ts. rampXY: makeRamp(true, true) }; })()38:T5f5,function generateInitialTable(numCols, numRows, table, objFunc, layout, dims) { const rowSums = table.map((row) => findSumForTable([row])); const tableTranspose = transposeMatrix(table); const colSums = tableTranspose.map((row) => findSumForTable([row])); for (let i = 1; i < rowSums.length; i++) { rowSums[i] += rowSums[i - 1]; } for (let i = 1; i < colSums.length; i++) { colSums[i] += colSums[i - 1]; } const total = findSumForTable(table); const layoutMethod = layouts[layout]; if (layoutMethod) { const builtLayout = layoutMethod(numRows, numCols, colSums, rowSums, total); return scaleLayoutsToDims(builtLayout, dims); } const layoutKeys = Object.keys(layouts); const constructedLayouts = layoutKeys.map((key) => layouts[key](numRows, numCols, colSums, rowSums, total) ); const measurements = constructedLayouts.reduce( (acc, newTable, idx) => { const currentVec = translateTableToVector(newTable); const newScore = objFunc(currentVec); const pickBest = layout === "pickBest"; const better = pickBest ? acc.bestScore > newScore : acc.bestScore < newScore; if (better) { return { bestIndex: idx, bestScore: newScore }; } return acc; }, { bestIndex: -1, bestScore: layout === "pickWorst" ? -Infinity : Infinity } ); // console.log([layout, Object.keys(layouts)[measurements.bestIndex]]); return scaleLayoutsToDims(constructedLayouts[measurements.bestIndex], dims); }39:T663,function evansContinuousBuildPenalties(newTable, dims, optimizationParams) { // This is the Evans "smoothness" penalty let penalties = 0; for (let i = 0; i < newTable.length; i++) { for (let j = 0; j < newTable[0].length; j++) { const { inRightColumn, inLastRow } = computeEdges(newTable, i, j); if (inRightColumn || inLastRow) { continue; } const upLeft = newTable[i][j]; const upRght = newTable[i][j + 1]; const dnLeft = newTable[i + 1][j]; const dnRght = newTable[i + 1][j + 1]; // area ratios (as in TS) const areaTR = 0.5 * ((upRght.x - dnRght.x) * (dnLeft.y - dnRght.y) - (upRght.y - dnRght.y) * (dnLeft.x - dnRght.x)); const areaLB = 0.5 * ((dnLeft.x - upLeft.x) * (upRght.y - upLeft.y) - (dnLeft.y - upLeft.y) * (upRght.x - upLeft.x)); const areaTL = 0.5 * ((upLeft.x - upRght.x) * (dnRght.y - upRght.y) - (upLeft.y - upRght.y) * (dnRght.x - upRght.x)); const areaRB = 0.5 * ((dnRght.x - dnLeft.x) * (upLeft.y - dnLeft.y) - (dnRght.y - dnLeft.y) * (upLeft.x - dnLeft.x)); penalties += 10 * Math.pow(Math.log(areaTR / areaLB), 2); penalties += 10 * Math.pow(Math.log(areaTL / areaRB), 2); // diagonal ratio penalties += Math.pow( Math.log(distPos(upLeft, dnRght) / distPos(dnLeft, upRght)), 2 ); // min length penalties += Math.pow(Math.log(distPos(upLeft, dnLeft)), 2); penalties += Math.pow(Math.log(distPos(upLeft, upRght)), 2); } } return penalties; }3a:T405,function objectiveFunction( vector, targetTable, dims, onlyShowPenalty, optimizationParams ) { const newTable = translateVectorToTable( vector, targetTable, dims.height, dims.width ); const rects = getRectsFromTable(newTable); const areas = rects.map((row) => row.map((rect) => signedArea(rect))); const sumArea = findSumForTable(areas); const sumTrueArea = findSumForTable(targetTable); const sumRatio = sumTrueArea / sumArea; let errorSum = 0; for (let i = 0; i < rects.length; i++) { for (let j = 0; j < rects[0].length; j++) { const denom = Math.pow(targetTable[i][j] - sumRatio * areas[i][j], 2); if (optimizationParams.useGreedy) { errorSum += denom / targetTable[i][j]; } else { errorSum += denom / Math.pow(targetTable[i][j], 2); } } } const penal = continuousBuildPenalties(newTable, dims, optimizationParams); if (onlyShowPenalty) { return penal; } return errorSum / (rects.length * rects[0].length) + penal; }3b:T4ad,function descentInnerLoop( objFunc, currentVec, table, dims, optimizationParams ) { const { lineSearchSteps, useAnalytic, stepSize, nonDeterministic } = optimizationParams; const phases = phaseShuffle(nonDeterministic); for (let phase = 0; phase < 4; phase++) { const currTable = translateVectorToTable( currentVec, table, dims.height, dims.width ); const searchIndices = getIndicesInVectorOfInterest( currTable, phases[phase] ); const dx = useAnalytic ? buildErrorGradient( currentVec, table, dims, searchIndices, optimizationParams ) : finiteDifferenceForIndices( objFunc, currentVec, stepSize / 10, searchIndices ); const localNorm = norm2(dx); const bestStepSize = lineSearch({ objFunc, stepSize, currentVec, localNorm, dx, searchIndices, lineSearchSteps }); for (let jdx = 0; jdx < dx.length; jdx++) { if (dx[jdx] && localNorm) { currentVec[searchIndices[jdx]] += (-dx[jdx] / localNorm) * bestStepSize; } } } }3c:T485,function getIndicesInVectorOfInterest(table, phase) { const vector = []; let vecIdx = 0; for (let i = 0; i < table.length; i++) { for (let j = 0; j < table[0].length; j++) { const inFirstRow = i === 0; const inLeftColumn = j === 0; const inRightColumn = j === table[0].length - 1; const inLastRow = i === table.length - 1; const inCorner = (inFirstRow && (inLeftColumn || inRightColumn)) || (inLastRow && (inLeftColumn || inRightColumn)); const evenRow = i % 2; const evenColumn = j % 2; const inPhase = ((phase < 2 && !evenRow) || (phase >= 2 && evenRow)) && evenColumn === phase % 2; if (inCorner) { // do nothing } else if (inFirstRow || inLastRow) { if (inPhase) { vector.push(vecIdx); } vecIdx += 1; } else if (inLeftColumn || inRightColumn) { if (inPhase) { vector.push(vecIdx); } vecIdx += 1; } else { if (inPhase) { vector.push(vecIdx); vector.push(vecIdx + 1); } vecIdx += 2; } } } return vector; }3d:T498,function translateVectorToTable(vector, targetTable, height, width) { let vectorIndex = 0; const newTable = []; for (let i = 0; i <= targetTable.length; i++) { const newRow = []; for (let j = 0; j <= targetTable[0].length; j++) { const inFirstRow = i === 0; const inLeftColumn = j === 0; const inRightColumn = j === targetTable[0].length; const inLastRow = i === targetTable.length; const inCorner = (inFirstRow && (inLeftColumn || inRightColumn)) || (inLastRow && (inLeftColumn || inRightColumn)); if (inCorner) { newRow.push({ x: inLeftColumn ? 0 : width, y: inFirstRow ? 0 : height }); } else if (inFirstRow || inLastRow) { newRow.push({ x: vector[vectorIndex], y: inFirstRow ? 0 : height }); vectorIndex += 1; } else if (inLeftColumn || inRightColumn) { newRow.push({ x: inLeftColumn ? 0 : width, y: vector[vectorIndex] }); vectorIndex += 1; } else { newRow.push({ x: vector[vectorIndex], y: vector[vectorIndex + 1] }); vectorIndex += 2; } } newTable.push(newRow); } return newTable; }3e:T478,function gradBuildPenalties(newTable, dims, optimizationParams) { const tableGradient = []; const { borderPenalty, orderPenalty, overlapPenalty } = optimizationParams; for (let i = 0; i < newTable.length; i++) { const rowGradient = []; for (let j = 0; j < newTable[0].length; j++) { const cell = newTable[i][j]; const grad = { x: 0, y: 0 }; grad.x += borderPenalty * derivPenalty(dims.width - cell.x); grad.x += -borderPenalty * derivPenalty(cell.x); grad.y += borderPenalty * derivPenalty(dims.height - cell.y); grad.y += -borderPenalty * derivPenalty(cell.y); const penalArgs = { ...computeEdges(newTable, i, j), cell, newTable, i, j }; const orderGrad = gradOrderPenalty(penalArgs); grad.x += orderPenalty * orderGrad.x; grad.y += orderPenalty * orderGrad.y; const overlapGrad = gradOverlapPenalty(penalArgs); grad.x += overlapPenalty * overlapGrad.x; grad.y += overlapPenalty * overlapGrad.y; rowGradient.push(grad); } tableGradient.push(rowGradient); } return tableGradient; }3f:Ta23,function gradOverlapPenalty(props) { const { cell, newTable, inCorner, inFirstRow, inLastRow, i, j, inLeftColumn, inRightColumn } = props; let neighbors = []; if (inCorner) { // none } else if (inFirstRow) { neighbors = [ { y: -newTable[i + 1][j - 1].y, x: newTable[i + 1][j - 1].x }, { y: -newTable[i + 1][j + 1].y, x: newTable[i + 1][j + 1].x }, newTable[i][j + 1], newTable[i + 1][j + 1], newTable[i + 1][j], newTable[i + 1][j - 1], newTable[i][j - 1] ]; } else if (inLastRow) { const delta = Math.max( Math.abs(newTable[i - 1][j - 1].y - newTable[i][j - 1].y), Math.abs(newTable[i - 1][j + 1].y - newTable[i][j + 1].y) ); neighbors = [ newTable[i - 1][j - 1], newTable[i - 1][j], newTable[i - 1][j + 1], newTable[i][j + 1], { x: newTable[i][j + 1].x, y: newTable[i][j + 1].y + delta }, { x: newTable[i][j - 1].x, y: newTable[i][j - 1].y + delta }, newTable[i][j - 1] ]; } else if (inLeftColumn) { neighbors = [ { x: -newTable[i - 1][j + 1].x, y: newTable[i - 1][j + 1].y }, newTable[i - 1][j], newTable[i - 1][j + 1], newTable[i][j + 1], newTable[i + 1][j + 1], newTable[i + 1][j], { x: -newTable[i + 1][j + 1].x, y: newTable[i + 1][j + 1].y } ]; } else if (inRightColumn) { const delta = Math.max( Math.abs(newTable[i - 1][j - 1].x - newTable[i - 1][j].x), Math.abs(newTable[i + 1][j - 1].x - newTable[i + 1][j].x) ); neighbors = [ newTable[i - 1][j - 1], newTable[i - 1][j], { x: newTable[i - 1][j].x + delta, y: newTable[i - 1][j].y }, { x: newTable[i + 1][j].x + delta, y: newTable[i + 1][j].y }, newTable[i + 1][j], newTable[i + 1][j - 1], newTable[i][j - 1] ]; } else { neighbors = [ newTable[i - 1][j - 1], newTable[i - 1][j], newTable[i - 1][j + 1], newTable[i][j + 1], newTable[i + 1][j + 1], newTable[i + 1][j], newTable[i + 1][j - 1], newTable[i][j - 1] ]; } const points = neighbors.map(({ x, y }) => [x, y]); if (neighbors.length && !pointInPolygon([cell.x, cell.y], points)) { const { minPoint, minDist } = computeMinDistPoint(points, cell); const d = Number.isFinite(minDist) ? minDist : 0; const xDeriv = derivPenalty(d) * (cell.x - minPoint[0]); const yDeriv = derivPenalty(d) * (cell.y - minPoint[1]); return { x: xDeriv ? xDeriv : 0, y: yDeriv ? yDeriv : 0 }; } return { x: 0, y: 0 }; }40:T574,function gradOrderPenalty(props) { const { cell, inFirstRow, inLastRow, inRightColumn, inLeftColumn, newTable, inCorner, i, j } = props; let evalTarget = []; if (inCorner) { // none } else if (inFirstRow || inLastRow) { evalTarget = [ { lessThan: true, dim: "x", val: newTable[i][j - 1].x }, { lessThan: false, dim: "x", val: newTable[i][j + 1].x }, { lessThan: !inFirstRow, dim: "y", val: newTable[i + (inFirstRow ? 1 : -1)][j].y } ]; } else if (inLeftColumn || inRightColumn) { evalTarget = [ { lessThan: true, dim: "y", val: newTable[i - 1][j].y }, { lessThan: false, dim: "y", val: newTable[i + 1][j].y }, { lessThan: !inLeftColumn, dim: "x", val: newTable[i][j + (inLeftColumn ? 1 : -1)].x } ]; } else { evalTarget = [ { lessThan: true, dim: "y", val: newTable[i - 1][j].y }, { lessThan: false, dim: "y", val: newTable[i + 1][j].y }, { lessThan: true, dim: "x", val: newTable[i][j - 1].x }, { lessThan: false, dim: "x", val: newTable[i][j + 1].x } ]; } return evalTarget.reduce( (grad, { val, dim, lessThan }) => { grad[dim] += (lessThan ? -1 : 1) * derivPenalty(lessThan ? cell[dim] - val : val - cell[dim]); return grad; }, { x: 0, y: 0 } ); }41:T409,function continuousBuildPenalties(newTable, dims, optimizationParams) { let penalties = 0; const { orderPenalty, borderPenalty, overlapPenalty } = optimizationParams; for (let i = 0; i < newTable.length; i++) { for (let j = 0; j < newTable[0].length; j++) { const { inFirstRow, inLeftColumn, inRightColumn, inLastRow, inCorner } = computeEdges(newTable, i, j); const cell = newTable[i][j]; penalties += borderPenalty * expPenalty(dims.width - cell.x); penalties += borderPenalty * expPenalty(cell.x); penalties += borderPenalty * expPenalty(dims.height - cell.y); penalties += borderPenalty * expPenalty(cell.y); const penaltyProps = { cell, i, inCorner, inFirstRow, inLastRow, inLeftColumn, inRightColumn, j, newTable }; penalties += orderPenalty * contOrderPenalty(penaltyProps); penalties += overlapPenalty * continOverlapPenalty(penaltyProps); } } return penalties; }42:T51b,function contOrderPenalty(props) { const { cell, inFirstRow, inLastRow, inRightColumn, inLeftColumn, newTable, inCorner, i, j } = props; let evalTarget = []; if (inCorner) { // none } else if (inFirstRow || inLastRow) { evalTarget = [ { lessThan: true, dim: "x", val: newTable[i][j - 1].x }, { lessThan: false, dim: "x", val: newTable[i][j + 1].x }, { lessThan: !inFirstRow, dim: "y", val: newTable[i + (inFirstRow ? 1 : -1)][j].y } ]; } else if (inLeftColumn || inRightColumn) { evalTarget = [ { lessThan: true, dim: "y", val: newTable[i - 1][j].y }, { lessThan: false, dim: "y", val: newTable[i + 1][j].y }, { lessThan: !inLeftColumn, dim: "x", val: newTable[i][j + (inLeftColumn ? 1 : -1)].x } ]; } else { evalTarget = [ { lessThan: true, dim: "y", val: newTable[i - 1][j].y }, { lessThan: false, dim: "y", val: newTable[i + 1][j].y }, { lessThan: true, dim: "x", val: newTable[i][j - 1].x }, { lessThan: false, dim: "x", val: newTable[i][j + 1].x } ]; } return evalTarget.reduce((acc, { val, dim, lessThan }) => { return acc + expPenalty(lessThan ? cell[dim] - val : val - cell[dim]); }, 0); }43:T958,function continOverlapPenalty(props) { const { cell, newTable, inCorner, inFirstRow, inLastRow, i, j, inLeftColumn, inRightColumn } = props; let neighbors = []; if (inCorner) { // none } else if (inFirstRow) { neighbors = [ { y: -newTable[i + 1][j - 1].y, x: newTable[i + 1][j - 1].x }, { y: -newTable[i + 1][j + 1].y, x: newTable[i + 1][j + 1].x }, newTable[i][j + 1], newTable[i + 1][j + 1], newTable[i + 1][j], newTable[i + 1][j - 1], newTable[i][j - 1] ]; } else if (inLastRow) { const delta = Math.max( Math.abs(newTable[i - 1][j - 1].y - newTable[i][j - 1].y), Math.abs(newTable[i - 1][j + 1].y - newTable[i][j + 1].y) ); neighbors = [ newTable[i - 1][j - 1], newTable[i - 1][j], newTable[i - 1][j + 1], newTable[i][j + 1], { x: newTable[i][j + 1].x, y: newTable[i][j + 1].y + delta }, { x: newTable[i][j - 1].x, y: newTable[i][j - 1].y + delta }, newTable[i][j - 1] ]; } else if (inLeftColumn) { neighbors = [ { x: -newTable[i - 1][j + 1].x, y: newTable[i - 1][j + 1].y }, newTable[i - 1][j], newTable[i - 1][j + 1], newTable[i][j + 1], newTable[i + 1][j + 1], newTable[i + 1][j], { x: -newTable[i + 1][j + 1].x, y: newTable[i + 1][j + 1].y } ]; } else if (inRightColumn) { const delta = Math.max( Math.abs(newTable[i - 1][j - 1].x - newTable[i - 1][j].x), Math.abs(newTable[i + 1][j - 1].x - newTable[i + 1][j].x) ); neighbors = [ newTable[i - 1][j - 1], newTable[i - 1][j], { x: newTable[i - 1][j].x + delta, y: newTable[i - 1][j].y }, { x: newTable[i + 1][j].x + delta, y: newTable[i + 1][j].y }, newTable[i + 1][j], newTable[i + 1][j - 1], newTable[i][j - 1] ]; } else { neighbors = [ newTable[i - 1][j - 1], newTable[i - 1][j], newTable[i - 1][j + 1], newTable[i][j + 1], newTable[i + 1][j + 1], newTable[i + 1][j], newTable[i + 1][j - 1], newTable[i][j - 1] ]; } const points = neighbors.map(({ x, y }) => [x, y]); if (neighbors.length && !pointInPolygon([cell.x, cell.y], points)) { const minDist = computeMinDist(points, cell); return expPenalty(-(Number.isFinite(minDist) ? minDist : 0)); } return 0; }44:T9a4,function errorGrad(newTable, targetTable) { const rects = getRectsFromTable(newTable); const areas = rects.map((row) => row.map((rect) => signedArea(rect))); const sumArea = findSumForTable(areas); const sumTrueArea = findSumForTable(targetTable); const sumRatio = sumTrueArea / sumArea; const gradientTable = newTable .map((row) => row.map(() => ({ x: 0, y: 0 }))) .reverse(); for (let i = 0; i < rects.length; i++) { for (let j = 0; j < rects[0].length; j++) { const target = targetTable[i][j]; const cellArea = areas[i][j]; const gradPrefix = (target - cellArea * sumRatio) / target; const offsets = [ { x: 0, y: 0 }, { x: 1, y: 0 }, { x: 1, y: 1 }, { x: 0, y: 1 } ]; for (let index = 0; index < offsets.length; index++) { const offset = offsets[index]; const idx0 = i + offset.y; const jdx0 = j + offset.x; const nextOffset = offsets[(index + 1) % offsets.length]; const nextVertex = newTable[i + nextOffset.y][j + nextOffset.x]; const prevOffset = offsets[index - 1 >= 0 ? index - 1 : 3]; const prevVertex = newTable[i + prevOffset.y][j + prevOffset.x]; const { inFirstRow, inLeftColumn, inRightColumn, inLastRow, inCorner } = computeEdges(newTable, idx0, jdx0); if (inCorner) { // no action } else if (inFirstRow || inLastRow) { const prevX = newTable[idx0][jdx0 - 1]; const nextX = newTable[idx0][jdx0 + 1]; const xGrad = gradPrefix * (-sumRatio * (nextVertex.y - prevVertex.y) + ((cellArea * sumRatio) / sumArea) * (prevX.y - nextX.y)); gradientTable[idx0][jdx0].x += xGrad; } else if (inLeftColumn || inRightColumn) { const prevY = newTable[idx0 - 1][jdx0]; const nextY = newTable[idx0 + 1][jdx0]; const yGrad = gradPrefix * (-sumRatio * (nextVertex.x - prevVertex.x) + ((cellArea * sumRatio) / sumArea) * (prevY.x - nextY.x)); gradientTable[idx0][jdx0].y -= yGrad; } else { const xGrad = gradPrefix * -sumRatio * (nextVertex.y - prevVertex.y); const yGrad = gradPrefix * -sumRatio * (nextVertex.x - prevVertex.x); gradientTable[idx0][jdx0].x += xGrad; gradientTable[idx0][jdx0].y -= yGrad; } } } } return gradientTable; }45:[] 2f:{"id":"f56d9d973742e6b4","slug":"table-cartograms","title":"Table Cartograms","thumbnail":"f5c634ea2f32ccfb492aa70fa0e25e944b084475560c7da38fd4b4f16e15e268","access_level":"public","create_time":"$D2026-02-09T09:11:26.872Z","update_time":"$D2026-08-29T05:12:33.968Z","view_time":null,"first_public_time":"$D2026-02-10T09:51:18.921Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":636,"publish_version":null,"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":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"editor"},{"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,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Table Cartograms","cells":[{"id":0,"value":"# Table Cartograms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"We might choose to visualize the table as a 'heatmap' where each table cell is a heatmap square coloured by the table cell's value:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":401,"value":"plotHeatmap(example1Data, { showLabels: true, w: 160 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"The table cartogram adjusts the area of each cell so their areas are proportional to the cell's value:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"tc1 = tableCartogram({\n data: example1Data,\n iterations: 300\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"plotTaco(tc1, { showLabels: true, w: 160 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"With area encoding value, we no longer need to double-encode with colour:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":420,"value":"plotTaco(tc1, { showLabels: true, w: 160, stroke: \"black\", fill: \"Cornsilk\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"Here is a table cartogram of a calendar view of visitor numbers other than Zion National Park, as shown in ${bib.cite(\"mcnutt_what_2021\")}, Figure 9a:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":488,"value":"zionExample = {\n const tc = tableCartogram({\n data: zionVisitorsArr,\n iterations: 10\n });\n\n const monthLabels = tc.slice(0, 12).map((d, i) => ({\n x:\n (d.vertices[0].x + d.vertices[1].x + d.vertices[2].x + d.vertices[3].x) /\n 4,\n y: i % 2 === 0 ? -0.035 : -0.015,\n month: months[i]\n }));\n\n const yearLabels = tc\n .filter((_, i) => i % 12 === 0)\n .map((d, i) => ({\n y:\n (d.vertices[0].y +\n d.vertices[1].y +\n d.vertices[2].y +\n d.vertices[3].y) /\n 4,\n year: 2016 - i\n }));\n\n return plotTaco(tc, {\n showLabels: false,\n w: 600,\n scheme: \"YlGnBu\",\n stroke: \"black\",\n strokeWidth: 0.5,\n inset: 0.1,\n showFrame: false,\n extra: [\n Plot.text(monthLabels, { x: \"x\", y: \"y\", text: \"month\" }),\n Plot.text(yearLabels, {\n x: 0,\n y: \"y\",\n dx: -4,\n text: (d) => `${d.year}`,\n textAnchor: \"end\"\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"For more details on working with and validating table cartograms, see ${bib.cite(\"mcnutt_what_2021\")}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"## References","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"bib.bibliography()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"_To convert to geoJSON format:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"import { GeoJSON } from \"@jwolondon/geojson-generator\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"_For referencing:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"import { Refs } from \"@gicentre/references-class\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"_Table cartograms API functions:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"function tableCartogram(params) {\n const {\n data,\n layout = \"pickBest\",\n iterations = MAX_ITERATIONS,\n accessor = (d) => d,\n height = 1,\n width = 1\n } = params ?? {};\n\n const optimizationParams = {\n ...defaultOptimizationParams,\n ...(params?.optimizationParams ?? {})\n };\n\n const localTableRaw = data.map((row) => row.map((cell) => accessor(cell)));\n const allowZero = true;\n const epsilon = 1e-12;\n\n const localTable = allowZero\n ? sanitizeLocalTable(localTableRaw, { epsilon })\n : localTableRaw;\n\n if (inputTableIsInvalid(localTable)) {\n throw new Error(`Invalid input table: ${data}`);\n }\n\n const updateFunction = buildIterativeCartogram(\n localTable,\n layout,\n { height, width },\n optimizationParams\n );\n\n return prepareRects(updateFunction(iterations), data, accessor);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"_Drawing functions:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"function plotHeatmap(dataArr, options = {}) {\n const {\n w = 340,\n fontSize = 14,\n showLabels = false,\n showFrame = true,\n scheme = \"Oranges\",\n fill = \"value\",\n stroke = null,\n strokeWidth = 1,\n inset = -3\n } = options;\n\n const dataObj = dataArr.flatMap((dRow, row) =>\n dRow.map((cell, col) => ({ row, col, value: cell }))\n );\n\n return Plot.plot({\n width: w,\n aspectRatio: 1,\n inset: -3,\n axis: null,\n color: { scheme },\n marks: [\n Plot.cell(dataObj, {\n x: \"col\",\n y: \"row\",\n fill,\n stroke,\n strokeWidth,\n inset\n }),\n showLabels\n ? [\n Plot.text(dataObj, {\n x: \"col\",\n y: \"row\",\n fontSize,\n text: \"value\",\n fill: \"black\",\n stroke: \"white\",\n strokeOpacity: 0.3\n })\n ]\n : [],\n showFrame ? [Plot.frame()] : []\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"_Data for examples:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"example1Data = [\n [1, 2, 3],\n [4, 5, 6],\n [7, 8, 9]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"months = [\n \"JAN\",\n \"FEB\",\n \"MAR\",\n \"APR\",\n \"MAY\",\n \"JUN\",\n \"JUL\",\n \"AUG\",\n \"SEP\",\n \"OCT\",\n \"NOV\",\n \"DEC\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"zionVisitorsArr = zionVisitorsData\n .map((year) => months.map((month) => year[month]))\n .slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"_For page styling:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"import { defaultStyle } from \"@jwolondon/cdt-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"_Internal ported functions from https://github.com/mcnuttandrew/table-cartogram :_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"defaultOptimizationParams = ({\n lineSearchSteps: 30,\n useAnalytic: false,\n stepSize: 0.01,\n nonDeterministic: false,\n useGreedy: true,\n orderPenalty: 1,\n borderPenalty: 1,\n overlapPenalty: 4,\n useEvans: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"MAX_ITERATIONS = 3000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function prepareRects(outputTable, table, accessor) {\n const rects = [];\n for (let i = 0; i < outputTable.length - 1; i++) {\n for (let j = 0; j < outputTable[0].length - 1; j++) {\n const newRect = [\n outputTable[i][j], // TL\n outputTable[i + 1][j], // BL\n outputTable[i + 1][j + 1], // BR\n outputTable[i][j + 1] // TR\n ];\n rects.push(\n table\n ? {\n vertices: newRect,\n value: accessor(table[i][j]),\n data: table[i][j]\n }\n : newRect\n );\n }\n }\n return rects;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function sanitizeLocalTable(localTable, { epsilon = 1e-12 } = {}) {\n // Make everything strictly positive (helps avoid division by 0 / degenerate cells).\n // This is ONLY used when fixes.allowZero is true.\n return localTable.map((row) =>\n row.map((v) => {\n const x = Number(v);\n return Number.isFinite(x) && x > 0 ? x : epsilon;\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"function inputTableIsInvalid(table) {\n if (!Array.isArray(table) || table.length === 0) {\n return true;\n }\n const width = table[0]?.length ?? 0;\n if (!width) {\n return true;\n }\n for (const row of table) {\n if (!Array.isArray(row) || row.length !== width) {\n return true;\n }\n for (const cell of row) {\n const v = Number(cell);\n if (!Number.isFinite(v)) {\n return true;\n }\n }\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function buildIterativeCartogram(table, layout, dims, optimizationParams) {\n const nowCols = table[0].length;\n const numRows = table.length;\n\n const baseObj = optimizationParams.useEvans\n ? evansObjectiveFunction\n : objectiveFunction;\n const objFunc = (vec, onlyShowPenalty) =>\n baseObj(vec, table, dims, !!onlyShowPenalty, optimizationParams);\n\n const newTable =\n typeof layout === \"string\"\n ? generateInitialTable(numRows, nowCols, table, objFunc, layout, dims)\n : layout;\n\n let candidateVector = translateTableToVector(newTable);\n\n return (iterations = 10) => {\n if (!iterations) {\n return translateVectorToTable(\n candidateVector,\n table,\n dims.height,\n dims.width\n );\n }\n const resultTable = descent(\n objFunc,\n candidateVector,\n table,\n optimizationParams,\n dims,\n iterations\n );\n candidateVector = translateTableToVector(resultTable);\n return resultTable;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"function makeSum(x) {\n return (x * (x - 1)) / 2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"function buildZigZag(xAmount, yAmount) {\n return (numRows, numCols) => {\n return [...new Array(numCols + 1)].map((_, y) => {\n return [...new Array(numRows + 1)].map((__, x) => ({\n x: x / numRows + (xAmount / numRows) * (y % 2 ? -1 : 1),\n y: y / numCols + (yAmount / numCols) * (x % 2 ? -1 : 1)\n }));\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"function scaleLayoutsToDims(layout, dims) {\n return layout.map((row) =>\n row.map((cell) => ({ x: dims.width * cell.x, y: dims.height * cell.y }))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"function computeErrors(data, gons, accessor, dims, { annotate = false } = {}) {\n const H = dims?.height ?? 1;\n const W = dims?.width ?? 1;\n\n const tableSum = data.reduce(\n (acc, row) => acc + row.reduce((mem, cell) => accessor(cell) + mem, 0),\n 0\n );\n\n let maxError = -Infinity;\n let sumError = 0;\n\n for (let i = 0; i < data.length; i++) {\n for (let j = 0; j < data[0].length; j++) {\n const idx = i * data[0].length + j;\n const gonArea = area(gons[idx].vertices);\n const expectedArea = accessor(data[i][j]) / tableSum;\n const computedArea = gonArea / (H * W);\n const computedErr =\n Math.abs(computedArea - expectedArea) /\n Math.max(computedArea, expectedArea);\n\n sumError += computedErr;\n if (computedErr > maxError) {\n maxError = computedErr;\n }\n if (annotate) {\n gons[idx].individualError = computedErr;\n }\n }\n }\n\n return {\n error: sumError / (data.length * data[0].length),\n maxError\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"function evansObjectiveFunction(\n vector,\n targetTable,\n dims,\n onlyShowPenalty,\n optimizationParams\n) {\n const newTable = translateVectorToTable(\n vector,\n targetTable,\n dims.height,\n dims.width\n );\n const rects = getRectsFromTable(newTable);\n const areas = rects.map((row) => row.map((rect) => signedArea(rect)));\n const sumArea = findSumForTable(areas);\n const sumTrueArea = findSumForTable(targetTable);\n const sumRatio = sumTrueArea / sumArea;\n\n let errorSum = 0;\n for (let i = 0; i < rects.length; i++) {\n for (let j = 0; j < rects[0].length; j++) {\n errorSum += Math.pow(\n (targetTable[i][j] - sumRatio * areas[i][j]) / targetTable[i][j],\n 2\n );\n }\n }\n\n const penal =\n evansContinuousBuildPenalties(newTable, dims, optimizationParams) * 0.1;\n if (onlyShowPenalty) {\n return penal;\n }\n return errorSum + penal;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"function descent(\n objFunc,\n candidateVector,\n table,\n optimizationParams,\n dims,\n iterations\n) {\n if (!iterations) {\n return translateVectorToTable(\n candidateVector,\n table,\n dims.height,\n dims.width\n );\n }\n const currentVec = candidateVector.slice();\n for (let i = 0; i < iterations; i++) {\n descentInnerLoop(objFunc, currentVec, table, dims, optimizationParams);\n }\n return translateVectorToTable(currentVec, table, dims.height, dims.width);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"function finiteDifferenceForIndices(\n objFunc,\n currentPos,\n stepSize,\n indices,\n onlyShowPenalty\n) {\n const out = new Array(indices.length);\n for (let k = 0; k < indices.length; k++) {\n const i = indices[k];\n const forward = objFunc(\n currentPos.map((v, idx) => v + (idx === i ? stepSize : 0)),\n onlyShowPenalty\n );\n const backward = objFunc(\n currentPos.map((v, idx) => v - (idx === i ? stepSize : 0)),\n onlyShowPenalty\n );\n out[k] = (forward - backward) / (2 * stepSize);\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"function translateTableToVector(table) {\n const vector = [];\n for (let i = 0; i < table.length; i++) {\n for (let j = 0; j < table[0].length; j++) {\n const inFirstRow = i === 0;\n const inLeftColumn = j === 0;\n const inRightColumn = j === table[0].length - 1;\n const inLastRow = i === table.length - 1;\n const inCorner =\n (inFirstRow && (inLeftColumn || inRightColumn)) ||\n (inLastRow && (inLeftColumn || inRightColumn));\n\n const cell = table[i][j];\n if (inCorner) {\n // do nothing\n } else if (inFirstRow || inLastRow) {\n vector.push(cell.x);\n } else if (inLeftColumn || inRightColumn) {\n vector.push(cell.y);\n } else {\n vector.push(cell.x);\n vector.push(cell.y);\n }\n }\n }\n return vector;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"function getRectsFromTable(table) {\n const rects = [];\n for (let i = 0; i < table.length - 1; i++) {\n const rowRects = [];\n for (let j = 0; j < table[0].length - 1; j++) {\n rowRects.push([\n table[i][j],\n table[i + 1][j],\n table[i + 1][j + 1],\n table[i][j + 1]\n ]);\n }\n rects.push(rowRects);\n }\n return rects;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function lineSearch({\n objFunc,\n stepSize,\n currentVec,\n localNorm,\n dx,\n searchIndices,\n lineSearchSteps\n}) {\n if (!lineSearchSteps) {\n return stepSize;\n }\n let trialStepSize = stepSize;\n let bestStepSize = stepSize;\n let bestScore = objFunc(currentVec);\n\n for (let i = 0; i < lineSearchSteps; i++) {\n const tempVec = currentVec.slice();\n for (let jdx = 0; jdx < dx.length; jdx++) {\n if (dx[jdx] && localNorm) {\n tempVec[searchIndices[jdx]] += (-dx[jdx] / localNorm) * trialStepSize;\n }\n }\n const newScore = objFunc(tempVec);\n if (newScore < bestScore) {\n bestScore = newScore;\n bestStepSize = trialStepSize;\n }\n trialStepSize *= 0.4;\n }\n return bestStepSize;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"function signedArea(points) {\n const segmentSum = points.reduce((acc, row, index) => {\n const nextRow = points[(index + 1) % points.length];\n return acc + (row.x * nextRow.y - nextRow.x * row.y);\n }, 0);\n return 0.5 * segmentSum;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"function area(points) {\n return Math.abs(signedArea(points));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"function phaseShuffle(nonDet) {\n if (nonDet) {\n return shuffleInPlace([0, 1, 2, 3]);\n }\n return [0, 1, 2, 3];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function shuffleInPlace(a) {\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const t = a[i];\n a[i] = a[j];\n a[j] = t;\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function buildErrorGradient(\n vector,\n targetTable,\n dims,\n searchIndices,\n optimizationParams\n) {\n const newTable = translateVectorToTable(\n vector,\n targetTable,\n dims.height,\n dims.width\n );\n const gradientTable = errorGrad(newTable, targetTable);\n const gradPenal = gradBuildPenalties(newTable, dims, optimizationParams);\n\n for (let i = 0; i < gradPenal.length; i++) {\n for (let j = 0; j < gradPenal[0].length; j++) {\n gradientTable[i][j].x += 10 * gradPenal[i][j].x;\n gradientTable[i][j].y += 10 * gradPenal[i][j].y;\n gradientTable[i][j].x *= -1;\n gradientTable[i][j].y *= -1;\n }\n }\n\n const allowed = searchIndices.reduce((acc, idx) => {\n acc[idx] = true;\n return acc;\n }, {});\n\n const gradVec = translateTableToVector(gradientTable);\n const out = [];\n for (let i = 0; i < gradVec.length; i++) {\n if (allowed[i]) {\n out.push(gradVec[i]);\n }\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"function derivPenalty(x) {\n if (x === 0) {\n return 0;\n }\n return (-(1 + Math.abs(x)) * expPenalty(x)) / Math.abs(x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"function expPenalty(x) {\n return continuousMax(0, -x) * Math.exp(-x) * 100;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"function continuousMax(x, y) {\n return 0.5 * (x + y + Math.abs(x - y));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"function computeMinDistPoint(points, cell) {\n let minDist = Infinity;\n let minPoint = points[0];\n for (let jdx = 0; jdx < points.length; jdx++) {\n const d = points[jdx];\n const r = dist2([cell.x, cell.y], d);\n const ang = getAngle([cell.x, cell.y], d);\n const newDist = r * Math.sin(ang);\n if (newDist < minDist) {\n minDist = newDist;\n minPoint = d;\n }\n }\n return { minPoint, minDist };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"function computeMinDist(points, cell) {\n let minDist = Infinity;\n for (let jdx = 0; jdx < points.length; jdx++) {\n const d = points[jdx];\n const r = dist2([cell.x, cell.y], d);\n const ang = getAngle([cell.x, cell.y], d);\n const newDist = r * Math.sin(ang);\n if (newDist < minDist) {\n minDist = newDist;\n }\n }\n return minDist;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"function dist2(a, b) {\n const dx = a[0] - b[0];\n const dy = a[1] - b[1];\n return Math.sqrt(dx * dx + dy * dy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function computeEdges(table, i, j) {\n const inFirstRow = i === 0;\n const inLeftColumn = j === 0;\n const inRightColumn = j === table[0].length - 1;\n const inLastRow = i === table.length - 1;\n const inCorner =\n (inFirstRow && (inLeftColumn || inRightColumn)) ||\n (inLastRow && (inLeftColumn || inRightColumn));\n return { inFirstRow, inLeftColumn, inRightColumn, inLastRow, inCorner };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function findSumForTable(mat) {\n return mat.reduce(\n (sum, row) => row.reduce((acc, cell) => acc + cell, sum),\n 0\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"function pointInPolygon([x, y], poly) {\n let inside = false;\n for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {\n const xi = poly[i][0];\n const yi = poly[i][1];\n const xj = poly[j][0];\n const yj = poly[j][1];\n\n const crosses = yi > y !== yj > y;\n if (!crosses) {\n continue;\n }\n const xAtY = xi + ((xj - xi) * (y - yi)) / (yj - yi);\n if (x < xAtY) {\n inside = !inside;\n }\n }\n return inside;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"function getAngle(a, b) {\n const na = normV(a);\n const nb = normV(b);\n if (!(na > 0) || !(nb > 0)) {\n return 0;\n }\n const c = (a[0] * b[0] + a[1] * b[1]) / (na * nb);\n const cc = Math.max(-1, Math.min(1, c));\n return Math.acos(cc);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"function normV(a) {\n return Math.sqrt(a[0] * a[0] + a[1] * a[1]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"function norm2(a) {\n return Math.sqrt(dotProd(a, a));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"function transposeMatrix(mat) {\n return mat[0].map((_, i) => mat.map((row) => row[i]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"function distPos(a, b) {\n const dx = a.x - b.x;\n const dy = a.y - b.y;\n return Math.sqrt(dx * dx + dy * dy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"function dotProd(a, b) {\n let ret = 0;\n for (let i = 0; i < a.length; i++) {\n ret += a[i] * b[i];\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1","titling":"auto"}} 30:"$2f:body"