3f:null 40:["$","title",null,{"children":"Crowdsim-binning | Tom van Tilburg | Observable"}] 46:[{"id":"1faa9392721a04e863c58f7876e6334410fdc97869f9c9333582050894e569664fb940e42b434be36703f113c7cda450decdab6d6ba775a08026f2e4abed70a3","href":"https://static.observableusercontent.com/files/1faa9392721a04e863c58f7876e6334410fdc97869f9c9333582050894e569664fb940e42b434be36703f113c7cda450decdab6d6ba775a08026f2e4abed70a3","name":"examples_DT_results_jca_10_1.json","type":"application/json","lastModified":1605530652758.752,"size":2762159},{"id":"abb74201bc3d992ba150ca5e5e9380b863d21f09c1473a8afb96851abc3ec7f188e4a6e24c8b7eb1bf0a4650c5d531abeea5c950945f9715366827192e492f85","href":"https://static.observableusercontent.com/files/abb74201bc3d992ba150ca5e5e9380b863d21f09c1473a8afb96851abc3ec7f188e4a6e24c8b7eb1bf0a4650c5d531abeea5c950945f9715366827192e492f85","name":"zwolle_5_01.json","type":"application/json","lastModified":1605632120227.008,"size":7703747}] 44:{"id":"cd4e848c4ce76dbf","slug":"crowdsim-binning","title":"Crowdsim-binning","thumbnail":"a489f25d32559c6343ca5ac51254368a9eea71bde9e27a2bb8545081e1136273","access_level":"public","create_time":"$D2020-11-16T12:44:01.113Z","update_time":"$D2020-11-23T09:26:41.596Z","view_time":null,"first_public_time":"$D2020-11-16T13:20:16.420Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"b647bc22a67ec061","login":"tomvantilburg","name":"Tom van Tilburg","avatar_url":"https://avatars-next.observableusercontent.com/4313679a18b29c09b91353f3603285bcd54596364413fe36d682d5984c147b15","tier":"starter_2024","bio":"","following":false},"version":1308,"publish_version":1308,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a7a260a29251abf","login":"tomvantilburg","name":"Tom van Tilburg","avatar_url":"https://avatars-next.observableusercontent.com/4313679a18b29c09b91353f3603285bcd54596364413fe36d682d5984c147b15","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6a7a260a29251abf","login":"tomvantilburg","name":"Tom van Tilburg","avatar_url":"https://avatars-next.observableusercontent.com/4313679a18b29c09b91353f3603285bcd54596364413fe36d682d5984c147b15","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Crowdsim-binning","cells":[{"id":0,"value":"md`# Crowdsim-binning`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"md`This replay of a crowd-simulation model shows: \n - the movement of the agents (blue dots) \n - locations where the crowd density currently exceeds (bright red) or has exceeded ${maxdensity} people per ${Math.round(hexradius * hexradius * Math.PI)} m² at any moment in time (light red)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"container = html`\n

\n \n ${canvasLayer}\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"md`*maxdensity* sets the treshold of agents per hexagon that will make the hexagon red`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"maxdensity = 8 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"md`*hexradius* sets the size of the hexagon`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"hexradius = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"md`Set the *stepsize* in mseconds (higher is slower replay)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"viewof stepsize = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"stepsize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"timestep = {\n while (true) {\n yield* range(0, 200);\n }\n}\n//viewof timestep = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"timestep","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"md`Set the number of the *activeagent* (the one agent colored red)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"viewof activeagent = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"activeagent","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"md`# Viz`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"center = [6.094, 52.5135]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"zoomlevel = 19","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"rendercycle = {\n while (true) {\n yield draw();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"// draw the points based on their current layout\ndraw = function()\n{\n context.save();\n context.clearRect(0, 0, width, height);\n\n let elements = custom.selectAll('custom.rect');\n elements.each(function(d,i) {\n\t\t\t\t// for each virtual/custom element...\n\t\t\t\tvar node = d3.select(this);\n\t\t\t\tcontext.fillStyle = node.attr('fillStyle');\n\t\t\t\tcontext.fillRect(node.attr('x'), node.attr('y'), node.attr('width'), node.attr('height'))\n\t});\n context.restore();\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"function* range(start, stop) {\n start = Math.floor(start);\n stop = Math.ceil(stop);\n while (start < stop) yield Promises.delay(stepsize,start++);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"moving_dots = \n{\n let selection = custom.selectAll('custom.rect').data(projdata.filter(d=>d.date==timestep),d=>d.agent).join(\n enter => enter.append('custom')\n\t\t\t\t.attr('class', 'rect')\n .attr(\"x\", d=>d[0])\n .attr(\"y\", d=>d[1])\n ,\n update => update.call(update => update.transition().duration(stepsize)\n .ease(d3.easeLinear)\n .attr('fillStyle',d=>d.agent==activeagent?'red':'steelblue')\n .attr('width', d=>d.agent==activeagent?5:2)\n .attr('height', d=>d.agent==activeagent?5:2)\n .attr(\"x\", d=>d[0])\n .attr(\"y\", d=>d[1])\n ),\n exit => exit.remove()\n );\n return selection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"//Needed to do a shadow DOM\ncustom = {\n let customBase = document.createElement('custom');\n return d3.select(customBase);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"context = DOM.context2d(width, height);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"canvasLayer = {\n // get our canvas\n const canvas = context.canvas;\n canvas.style.position = 'absolute';\n canvas.style.top = '0';\n canvas.style.left = '0';\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"// Init SVG\nsvgLayer = { \n const svg = d3.select('svg');\n const g = svg\n .append('g')\n .attr('transform', `translate(${0},${0})`)\n .attr('pointer-events', 'none')\n .attr('class', 'svg-plot');\n g.selectAll('.tile').data(tiles).enter()\n .append('image')\n .attr('xlink:href',d=>url(d.x,d.y,d.z))\n .attr('x',d=>(d.x + d.tx) * d.k)\n .attr('y',d=>(d.y + d.ty) * d.k)\n .attr('width',d=>d.k)\n .attr('height',d=>d.k);\n const hexgroup = svg.append('g').attr('id','hexgroup');\n return svg; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"hexbinlayer = {\n if (timestep==1){\n d3.select(\"#hexgroup\").selectAll(\"path\").remove();\n }\n\n return d3.select(\"#hexgroup\").selectAll(\"path\").data(hexbindata,d=>d.x + \",\" + d.y)\n .join(\n enter=>\n enter.append(\"path\")\n .attr(\"transform\", d => `translate(${d.x},${d.y})`)\n .attr(\"d\", d => hexbin.hexagon(hexradius))\n .attr(\"fill\", 'red')\n .attr(\"stroke\", 'red')\n .attr('opacity',0)\n .call(\n enter=>enter.transition().duration(stepsize)\n .attr('opacity',0.7)\n )\n ,\n update=>update\n .call(\n action=>action.transition().duration(stepsize)\n .attr('lasttime',timestep)\n .attr('opacity',d=> d.length>maxdensity?0.7:0.3)\n )\n ,\n exit=>exit.call(action=>action.transition().duration(stepsize).attr('opacity',0.3))\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"tiles = tile().map(([x, y, z], i, {translate: [tx, ty], scale: k}) => { return {x,y,z,tx,ty,k}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"// some other geodata\n/*\n{\n d3.select('svg').append(\"path\")\n .datum(adminunits)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#777\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n}\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"projection = d3.geoMercator()\n .scale(10<d.path.forEach((f,i)=>{\n let line = projection(f);\n line.date = i;\n line.agent = d.agent;\n data.push(line);\n } \n ));\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"hexbindata = hexbin(projdata.filter(d=>d.date == timestep)).filter(d=>d.length > maxdensity)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"accessToken = \"pk.eyJ1IjoidGlsdCIsImEiOiJjaXl5dnAydjYwMDAxMnFwYWR1Z2ZjMngwIn0.JYt8pUcgFf9QETgo5FzA0A\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"height = Math.min(width, 720)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"opacity = d3.scalePow().domain([0,maxdensity]).range([0,0.7])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"hexbin = d3.hexbin()\n .radius(hexradius)\n .x(d => d[0])\n .y(d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"url = (x, y, z) => `https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}?access_token=${accessToken}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require(\"d3@6\", \"d3-hexbin@0.2\",\"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"