31:T45b,{ /* From http://bl.ocks.org/kristw/2f628465e36f9821325d */ const svg = d3.select(DOM.svg(width, height)) .attr("class", "gridmap") var options = { rectWidth: 45, rectHeight: 45 }; // Define color scale var color = d3.scaleQuantize() .domain([1, 20]) .range(['#b2ddf0', '#92bcd8', '#769cbf', '#5d7da7', '#46608f', '#334577', '#232d5f']); var sEnter = svg.append('g') .selectAll('g') .data(usGridMaps.filter(d => d.name==gridMap)[0].gridData) .enter().append('g') .attr('transform', function(d){ return 'translate('+(d.x*options.rectWidth)+','+(d.y*options.rectHeight)+')'; }); sEnter.append('rect') .attr('width', options.rectWidth) .attr('height', options.rectHeight) .attr('vector-effect', 'non-scaling-stroke') .style('opacity', 0.5) .style('stroke', '#aaa') .style('fill', function(d){return color(d.name.length);}); sEnter.append('text') .attr('x', options.rectWidth/2) .attr('y', options.rectHeight/2 + 2) .style('text-anchor', 'middle') .text(function(d){return d.key;}); return svg.node(); }32:T72c,function drawCostFunction(data) { var sortedData = data.sort((a, b) => a.costFunction.cost - b.costFunction.cost) var margin = ({top: 10, right: 30, bottom: 30, left: 150}) var graphWidth = Math.min(600, width) var height = sortedData.length * 25 + margin.top + margin.bottom const svg = d3.select(DOM.svg(graphWidth, height)); var x = d3.scaleLinear() .domain([0, sortedData[sortedData.length -1].costFunction.cost]) .range([margin.left, graphWidth - margin.right]) var y = d3.scaleBand() .domain(sortedData.map(d => d.name)) .range([margin.top, height - margin.bottom]) .padding(0.1) var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(graphWidth / 80).tickFormat(function(v){return(v.toFixed(0));})) var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .attr("style", "font-size: 0.8em") svg.append("g") .selectAll("rect") .data(sortedData) .enter().append("rect") .attr("fill", d => (d.name == gridMap) ? "#4A8B83" : "#CCC") .attr("x", x(0)) .attr("y", d => y(d.name)) .attr("width", d => x(d.costFunction.cost) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .style("font", "12px sans-serif") .selectAll("text") .data(sortedData) .enter().append("text") .attr("x", d => x(d.costFunction.cost)-4) .attr("text-anchor", "end") .attr("style", "fill: white") .attr("y", d => y(d.name) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d.costFunction.cost.toFixed(1)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }33:T9be,function drawDetailedCostFunction(data) { var sortedData = data.sort((a, b) => a.costFunction.cost - b.costFunction.cost) /* We add the name property in the partialCosts list, to simplify code when managing stackedData */ sortedData.map(d => {d.costFunction.partialCosts.name = d.name; return d}) var margin = ({top: 10, right: 30, bottom: 30, left: 150}) var graphWidth = Math.min(600, width) var height = sortedData.length * 25 + margin.top + margin.bottom const svg = d3.select(DOM.svg(graphWidth, height)) var criteriaNames = Object.keys(criteriaList) var x = d3.scaleLinear() .domain([0, sortedData[sortedData.length-1].costFunction.cost]) .range([margin.left, graphWidth - margin.right]) var y = d3.scaleBand() .domain(sortedData.map(d => d.name)) .range([margin.top, height - margin.bottom]) .padding(0.1) var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(graphWidth / sortedData[0].costFunction.cost).tickFormat(function(v){return(v.toFixed(0));})) var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .attr("style", "font-size: 0.8em") var stack = d3.stack() .keys(criteriaNames) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); var stackedData = stack(sortedData.map(d => d.costFunction.partialCosts)); svg.append("g") .selectAll("rect") .data(stackedData) .enter().append("g") .selectAll("rect") .data(d => d.map(cell => {var c = cell; c.key = d.key; return c})) .enter().append("rect") .attr("fill", d => criteriaColor(d.key)) .attr("x", d => x(d[0])) .attr("y", d => y(d.data.name)) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .style("font", "12px sans-serif") .selectAll("g") .data(stackedData) .enter().append("g") .selectAll("text") .data(d => d.map(cell => {var c = cell; c.key = d.key; return c})) .enter().append("text") .attr("x", d => x(d[1])-4) .attr("text-anchor", "end") .attr("style", "fill: white") .attr("y", d => y(d.data.name) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d.data[d.key].toFixed(0)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }34:[] 2f:{"title":"Square grid maps of the USA","cells":[{"id":0,"value":"md`# Square grid maps of the USA\n\nHere we show a collection of square grid maps of the USA, and compare them using the quality measures established by by [Krist Wongsuphasawat](https://twitter.com/kristw) (see [the original article](https://medium.com/@kristw/whose-grid-map-is-better-quality-metrics-for-grid-map-layouts-e3d6075d9e80) and [two](https://beta.observablehq.com/@severo/whose-grid-map-is-better) [notebooks](https://beta.observablehq.com/@severo/quality-criteria-for-existing-grid-maps)).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"viewof gridMap = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"CSS=html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"height = 8*45","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`## Cost function\n\nIn order to class the maps, we build a global criteria, that we will call a cost-function, based on the various measures. The lower the cost-function, the better the grid map.\n\nWe want to maximize the recall and primary recall, and minimize the secondary recall, inaccuracy, misdirection and area. So we propose:\n\n*fc = l1.(1-recall) + l2.(1-primary_recall) + l3.secondary_recall + l4.inaccuracy + l5.misdirection + l6.area*\n\nwith l1 to l6 being parameters that we can adjust with the following controls:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"weightsList = ({\n recall: l1_recall,\n primaryRecall: l2_primaryRecall,\n secondaryRecall: l3_secondaryRecall,\n inaccuracy: l4_inaccuracy,\n misdirection: l5_misdirection,\n area: l6_area\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"viewof l1_recall = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof l2_primaryRecall = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof l3_secondaryRecall = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"viewof l4_inaccuracy = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof l5_misdirection = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof l6_area = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"drawDetailedCostFunction(usGridMaps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"drawCostFunction(usGridMaps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"md`## Criteria`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"criteriaList = ({\n recall: measure => 1 - measure.recall,\n primaryRecall: measure => 1-measure.primaryNeighborsRecall,\n secondaryRecall: measure => 1-measure.secondaryNeighborsRecall,\n inaccuracy: measure => isNaN(measure.inaccuracy)?1:measure.inaccuracy,\n misdirection: measure => isNaN(measure.misdirection)?1:measure.misdirection,\n area: measure => measure.area\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"criteriaColor = function(criteria) {\n var keys = Object.keys(criteriaList)\n var z = d3.scaleSequential()\n .domain([0, keys.length - 1])\n .interpolator(d3.interpolateViridis);\n\n return z(keys.indexOf(criteria))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"function computeCostFunction(measure) {\n var criteria = {}\n var partialCosts = {}\n Object.keys(criteriaList).map(key => {\n var name = key,\n value = criteriaList[key](measure),\n weight = weightsList[key],\n cost = weight * value\n criteria[key] = value\n partialCosts[key] = cost\n })\n var cost = Object.keys(criteriaList).reduce((total, key) => total + partialCosts[key], 0)\n return {\n criteria: criteria,\n partialCosts: partialCosts,\n cost: cost\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"usTopojson = d3.json(\n \"https://raw.githubusercontent.com/kristw/gridmap-layout-usa/master/src/input/usa.topo.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"usStates = d3.csv(\"https://raw.githubusercontent.com/kristw/gridmap-layout-usa/master/src/input/states.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"usGridMapsList = d3.json(\"https://raw.githubusercontent.com/severo/20180429_us_square_grid_maps/master/us-grid-maps.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"usGridMapsData = Promise.all(\n usGridMapsList.map(o => {\n // For each URL, we download the CSV file, then...\n return loadCSVGridMap(o.file).then(data => {\n // ... we first add the name of the US state\n data.map(c => {c.name = usStateKeyLookup[c.key].name})\n // ... and we return the original cell from urlList, with 'gridData' as an extra property containing the data\n return {\n ...o,\n ...{'gridData': data}\n }\n })\n })\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Data preparation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"usStateNameLookup = _.keyBy(usStates, function(d){return d.name.toLowerCase();})","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"usStateKeyLookup = _.keyBy(usStates, function(d){return d.key;})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"usGeoData = {\n var geoData = usTopojson\n geoData.objects.units.geometries = geoData.objects.units.geometries.map(function(o){\n o.properties.key = usStateNameLookup[o.properties.name.toLowerCase()].key;\n return o;\n })\n return geoData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"usGeoPairs = precomputeGeoPairs(usGeoData, {objectname: \"units\", projection: d3.geoAlbersUsa()})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"usGridMaps = usGridMapsData.map(function (d) {\n var cell = {\n ...d\n }\n cell.measures = computeGridMapMetricsWithGeoPairs(cell.gridData, usGeoPairs)\n if (!cell.withDC) {\n cell.measures = adjustWithoutWashingtonDC(cell.measures)\n }\n cell.costFunction = computeCostFunction(cell.measures) \n return cell\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {precomputeGeoPairs, computeGridMapMetricsWithGeoPairs, loadCSVGridMap, adjustWithoutWashingtonDC, d3, _} from \"@severo/grid-map-quality-criteria\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}