31:T7ea,md`# Grid map quality criteria We provide a function to compute the quality metrics created by [Krist Wongsuphasawat](https://twitter.com/kristw) to qualify a grid map against its geographic map. See https://beta.observablehq.com/@severo/whose-grid-map-is-better and https://medium.com/@kristw/whose-grid-map-is-better-quality-metrics-for-grid-map-layouts-e3d6075d9e80. The prototype is: function computeGridMapMetrics(gridData, geoData, parameters) with the following inputs - gridData: an array of objects, minimally with the keys: - x: integer, 0 is left position - y: integer, 0 is top position - key: identifier of the region Example: [{'x': 0, 'y': 0, 'key': "AK", 'name': "Alaska"}, {'x': 11, 'y': 0, 'key': "ME", 'name': "Maine"}] - geoData: a topojson object. In case of using geojson object, see https://github.com/topojson/topojson-server/blob/master/README.md#topology to convert it. Example (note that every geometry properties.key parameter MUST correspond with one key in gridData): {'type': "Topology", 'bbox': […], 'transform': {…}, 'objects': { 'states': { 'type': "GeometryCollection", 'geometries': { '0': { 'type': "Polygon", 'arcs': […], 'properties': { 'key': "AK"} }, …}}}, 'arcs': […]} - parameters: - projection: geographic projection - objectname: name of the topojson object to use for the computations ('state' in the example above) Example: {'projection': d3.geoAlbersUsa(), 'objectname': 'counties'} and the following output: - object containing metrics values Example: {'recall': 0.8962264150943396, 'inaccuracy': 0.08275862068965517, 'misdirection': 0.05263157894736842, 'area': 96} `32:T62a,function computeGridMapMetricsWithGeoPairs(gridData, geoPairs) { /* Computations on gridData */ var gridPairs = computeGridPairs(gridData) var gridPairsLookup = _.keyBy(gridPairs, function(d){return d.key;}) /* Computing quality measures */ var diff1 = _.differenceBy(geoPairs, gridPairs, function(d){return d.key;}) var diff2 = _.differenceBy(gridPairs.filter(function(d){return !d.secondary;}), geoPairs, function(d){return d.key;}) var intersection = _.intersectionBy(geoPairs, gridPairs, function(d){return d.key;}).map(function(original){ var pair = gridPairsLookup[original.key]; return { key: original.key, region1: original.region1, region2: original.region2, realAngle: original.angle, angle: pair.angle, diffAngle: (original.angle - pair.angle + 180) % 360 -180, secondary: pair.secondary }; }) var primary = intersection.filter(function(d){return !d.secondary;}) var secondary = intersection.filter(function(d){return d.secondary;}) var misdirections = intersection.filter(function(pair){ return pair.diffAngle > 45; }).sort(function(a,b){ return b.diffAngle - a.diffAngle; }) var area = computeGridArea(gridData) var measures = { 'recall': intersection.length / geoPairs.length, 'primaryNeighborsRecall': primary.length / geoPairs.length, 'secondaryNeighborsRecall': secondary.length / geoPairs.length, 'inaccuracy': diff2.length / gridPairs.length, 'misdirection': misdirections.length / intersection.length, 'area': area } return measures }33:[] 2f:{"title":"Grid map quality criteria","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`## computeGridMapMetrics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"function computeGridMapMetrics(gridData, geoData, parameters) {\n \n /* Computations on geoData */\n var geoPairs = precomputeGeoPairs(geoData, parameters)\n\n /* Computations on gridData */\n var measures = computeGridMapMetricsWithGeoPairs(gridData, geoPairs)\n \n return measures\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`In order to save time when geoData and parameters are invariant between various calls to computeGridMapMetrics, we may first compute geoPairs with:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"function precomputeGeoPairs(geoData, parameters) {\n /* Computations on geoData */\n var geoFeatures = computeCentroid(topojson.feature(geoData, geoData.objects[parameters.objectname]).features, parameters.projection)\n var geoGeometries = geoData.objects[parameters.objectname].geometries\n var geoFeaturesLookup = _.keyBy(geoFeatures, function(d){return d.properties.key;})\n var geoNeighborsLookup = computeGeoNeighbors(geoGeometries)\n var geoPairs = computeGeoPairs(geoNeighborsLookup, geoFeaturesLookup)\n\n return geoPairs\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`and then apply the metrics computation for every gridData value:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`## Internal functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"function computeCentroid(features, projection) {\n var path = d3.geoPath().projection(projection);\n \n return features.map(\n function(feature){\n var centroid = path.centroid(feature);\n feature.x = centroid[0];\n feature.y = centroid[1];\n return feature;\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"function computeGeoNeighbors(objects){\n var neighbors = topojson.neighbors(objects);\n var neighborLookup = {};\n neighbors.forEach(function(nb, i){\n if(nb.length>0){\n var source = objects[i];\n nb.forEach(function(j){\n var target = objects[j];\n neighborLookup[neighborKey(source.properties.key, target.properties.key)] = true;\n });\n }\n });\n return neighborLookup;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"function computeGeoPairs(neighborLookup, featureLookup){\n return Object.keys(neighborLookup).map(function(d){\n var regions = d.split(',').map(function(key){return featureLookup[key];});\n var region1 = regions[0];\n var region2 = regions[1];\n var angle = computeAngle(region1, region2);\n return {\n key: d,\n region1: region1.properties.key,\n region2: region2.properties.key,\n angle: angle\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"function computeGridPairs(gridData) {\n var cellLookup = _.keyBy(gridData, function(d){return [d.x,d.y].join(',');});\n \n var pairs = [];\n for (var i in gridData) {\n var cell = gridData[i]\n var candidates = [\n [cell.x+1, cell.y],\n [cell.x, cell.y+1],\n [cell.x+1, cell.y+1],\n [cell.x-1, cell.y+1]\n ].map(function(d){\n return cellLookup[d.join(',')];\n })\n .filter(function(d){return d;})\n .forEach(function(d, i){\n var regions = [cell.key, d.key].sort();\n var region1 = regions[0]===cell.key ? cell : d;\n var region2 = regions[1]===cell.key ? cell : d;\n var angle = computeAngle(region1, region2);\n var key = regions.join(',');\n pairs.push({\n key: regions.join(','),\n region1: region1.key,\n region2: region2.key,\n secondary: (Math.abs(region1.x - region2.x) + Math.abs(region1.y - region2.y)) === 2,\n angle: angle\n });\n });\n }\n return (pairs)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"function computeGridArea(gridMap) {\n /* Area: A good Grid Map should be compact. This is simply calculated from No. of Rows x No. of Columns */\n let xMin = d3.min(gridMap, function(d){return d.x;})\n let xMax = d3.max(gridMap, function(d){return d.x;})\n let yMin = d3.min(gridMap, function(d){return d.y;})\n let yMax = d3.max(gridMap, function(d){return d.y;})\n let cols = xMax - xMin + 1\n let rows = yMax - yMin + 1\n return(cols * rows)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"function computeAngle(region1, region2){\n return (Math.atan2(region2.y-region1.y, region2.x-region1.x) * 180 / Math.PI + 360) %360;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"function neighborKey(source, target){\n return [source, target].sort().join(',');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"function loadCSVGridMap(url) {\n return d3.text(url).then(function(text) {\n return d3.csvParseRows(text)\n }).then(function(matrix) {\n return convertMatrixToList(matrix)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"function convertMatrixToList(matrix){\n var cells = [];\n for(var i=0;i