31:T5f0,graphic = { let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // draw hexagons let scale= () => 1; svg.selectAll(".hexgrid") .data(centers) .join("path") .attr("class", "hexgrid") .attr("transform", (d,i) => `translate(${d.x},${d.y}) scale(${scale(d,i)})` ) .attr("d", (d,i) => `m${hex.map((p) => p.map((d) => d*radius).join(',')).join('l')}z`) .attr("fill", d=>color(d.weight)) .attr("stroke", "white") .attr("stroke-width", .5) // draw centroids let centroid_rad = 1.25; svg.selectAll(".centroid") .data(centers) .join("circle") .attr("class", "centroid") .attr("transform", (d,i) => `translate(${d.x-centroid_rad},${d.y-centroid_rad}) scale(${scale(d,i)})`) .attr("cx", 1) .attr("cy", 1) .attr("r", centroid_rad) .attr("fill", "none") svg.selectAll(".text") .data(centers) .join("text") .attr("class", "text") .attr("transform", (d,i) => `translate(${d.x-centroid_rad},${d.y-centroid_rad}) scale(${scale(d,i)})`) .attr("x", 1) .attr("y", 4) .attr("text-anchor", "middle") .attr("fill", function(d){ if (d.weight > .96){ return "black" } else {return "white"} }) .attr("font-size", 10.5) .text((d,i)=> trimZero(Math.round(d.weight*100)/100)) // draw origin point svg.append("circle") .attr("class", "origin") .attr("cx", origin.x) .attr("cy", origin.y) .attr("r", 4) .attr("fill", "black") return svg.node(); }32:[] 2f:{"title":"Spatial Decay Functions","cells":[{"id":0,"value":"# Spatial Decay Functions","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"An interactive visualization of how different [distance decay](https://en.wikipedia.org/wiki/Distance_decay) functions look in 2D space. Based on [this interactive tool](https://urban-stack.shinyapps.io/access-decay/) by Carole Voulgaris. Hexgrid code adapted from [this notebook](https://observablehq.com/@kappanneo/hexagonal-grid) by Claudio Nicoli Pannacci.","pinned":false,"hidden":false,"mode":"md"},{"id":566,"value":"viewof decayFunction = Inputs.radio([\"Linear\", \"Step\", \"Exponential\", \"Logistic\"], {value: \"Linear\", label: html`Function Type:`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"viewof values_1 = columns({\n one: viewof linWid,\n two: viewof linMid,\n three: viewof stepLimit,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"viewof values_2 = columns({\nfour: viewof expHalflife,\n five: viewof logitInflection,\n six: viewof logitSD\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"Legend(d3.scaleSequential([0, 1], d3.interpolateMagma), {\n title: \"Accessibility Weight\",\n ticks: 5,\n width: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"#### Notes\nThis visualization uses a grid of hexagons as analysis zones and measures the distance (in pixels) from the origin point [ ${``} ] to each hexagon centroid. Each zone is then assigned a weight as a function of this distance and colored accordingly.","pinned":false,"hidden":false,"mode":"md"},{"id":741,"value":"If you imagine this digital space as a city where all the neighborhoods are hexagonal (and the pixel distance is the number of miles or minutes it takes to get to each one from the origin), then you can think of the weights as a *spatial discount rate*. This means that an amenity (a job, park, etc...) in a neighborhood with a weight of .5 is worth half as much to someone living at the origin as it would be if it was right outside their front door. A neighborhood with a weight of 0 means that its amenities are too far from the origin to be worth anything at all.","pinned":false,"hidden":false,"mode":"md"},{"id":765,"value":"---------","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"#### key variables","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"height = width*.625","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"cols = 40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"rows = 29;","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"origin = { \n let origin_array = [];\n for (var i = 0; i < rows; i++) {\n for (var j = 0; j < cols; j++) {\n origin_array.push( {\n x: (rotate? (j+2/3)*1.5: (i%2? j+1: j+0.5)*sqrt3) *radius, \n y: (rotate? (j%2? i+1: i+0.5)*sqrt3 :(i+2/3)*1.5) *radius,\n } );\n }\n }\n return origin_array[580]\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"sqrt3 = Math.sqrt(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"radius = d3.min(div([width,height],mul(add([cols,rows],r([0.5,1/3])),r([sqrt3,1.5]))));","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"rotate = false;","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"#### helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":324,"value":"linearScale = d3.scaleLinear()\n.domain([linMid-(linWid/2), linMid, linMid+(linWid/2)])\n.range([1,0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"color = d3.scaleSequential(d3.interpolateMagma)\n .domain([0,1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"trimZero = function(x){\n if (x > 0 && x < 1){\n let y = \".\";\n return y.concat(\"\",x.toString().split('.')[1])\n } else {\n return x\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"r = function r(x) { return rotate?[x[1],x[0]]:x }","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"add = function add(x,y) { return x.map( (d,i) => d+y[i] ) };","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":" div = function div(x,y) { return x.map( (d,i) => d/y[i] ) };","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":" mul = function mul(x,y) { return x.map( (d,i) => d*y[i] ) };","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"getDist = function(x,y){\n let a = origin.x - x;\n let b = origin.y - y;\n \n return Math.sqrt((a*a) + (b*b))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"calcWeight = function (dist) {\n if (decayFunction == \"Linear\"){\n if (linearScale(dist) < 0){\n return 0\n } else if (linearScale(dist) > 1){\n return 1\n } else {\n return linearScale(dist)\n }\n } \n else if (decayFunction == \"Step\") {\n if (dist >= stepLimit) {\n return 0\n } else {return 1}\n } \n else if (decayFunction == \"Exponential\") {\n let lambda = Math.log(2) / expHalflife; \n return Math.exp(dist*-1*lambda)\n } \n else if (decayFunction == \"Logistic\") {\n return 1/(1+Math.exp((dist - logitInflection)/logitSD))\n }\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"#### data structures","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"hex = [[0,-1],[sqrt3/2,0.5],[0,1],[-sqrt3/2,0.5],[-sqrt3/2,-0.5],[0,-1],[sqrt3/2,-0.5]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"// generate hexgrid centroids (adapted code from Claudio Nicoli Pannacci found at https://observablehq.com/@kappanneo/hexagonal-grid)\ncenters = { \n let center_array = [];\n for (var i = 0; i < rows; i++) {\n for (var j = 0; j < cols; j++) {\n center_array.push( {\n x: (rotate? (j+2/3)*1.5: (i%2? j+1: j+0.5)*sqrt3) *radius, \n y: (rotate? (j%2? i+1: i+0.5)*sqrt3 :(i+2/3)*1.5) *radius,\n dist: getDist(((rotate? (j+2/3)*1.5: (i%2? j+1: j+0.5)*sqrt3) *radius),((rotate? (j%2? i+1: i+0.5)*sqrt3 :(i+2/3)*1.5) *radius)),\n weight: calcWeight(getDist(((rotate? (j+2/3)*1.5: (i%2? j+1: j+0.5)*sqrt3) *radius),((rotate? (j%2? i+1: i+0.5)*sqrt3 :(i+2/3)*1.5) *radius)))\n } );\n }\n }\n return center_array\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"#### Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"viewof linWid = slider({\n min: 1, \n max: 1000, \n step: 1, \n value: 800, \n title: \"Width (Linear)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"viewof linMid = slider({\n min: 1, \n max: 500, \n step: 1, \n value: 400, \n title: \"Midpoint (Linear)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"viewof stepLimit = slider({\n min: 1, \n max: 500, \n step: 1, \n value: 200, \n title: \"Cut-off (Step)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"viewof expHalflife = slider({\n min: 1, \n max: 500, \n step: 1, \n value: 150, \n title: \"Half life (Exponential)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"viewof logitSD = slider({\n min: 1, \n max: 500, \n step: 1, \n value: 60, \n title: \"Standard Deviation (Logistic)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof logitInflection = slider({\n min: 1, \n max: 500, \n step: 1, \n value: 200, \n title: \"Inflection (Logistic)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"d3 = require(\"d3@5\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"import {button, radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}