2c:null 2d:["$","title",null,{"children":"When is a park too crowded? | William Davis | Observable"}] 32:T480,crowdedMap = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width};height:${width/1.7}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. const map = L.map(container, {scrollWheelZoom: false, maxZoom:20}); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); drawPoints(map); trinityLayer.addTo(map); map.fitBounds(bounds); }33:[{"id":"f1619087331248a0e656af51e78eb1b6a1e8f0904fd006617e91645353414f3a8d10503736efa36e9e464d710bfe57dcf28d19a759289de54386cf6bc7159807","href":"https://static.observableusercontent.com/files/f1619087331248a0e656af51e78eb1b6a1e8f0904fd006617e91645353414f3a8d10503736efa36e9e464d710bfe57dcf28d19a759289de54386cf6bc7159807","name":"grange@1.json","type":"application/json","lastModified":1585541340202.608,"size":902}] 30:{"id":"ad45ca9ce36660bf","slug":"when-is-a-park-too-crowded","title":"When is a park too crowded?","thumbnail":"e560a8aa65c4a773f11c7fd29bdcdd30722b5c0efa96b5bde69cd71e887a0938","access_level":"public","create_time":"$D2020-03-29T18:14:59.889Z","update_time":"$D2020-05-26T04:03:16.009Z","view_time":null,"first_public_time":"$D2020-03-31T21:57:32.141Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"27f6d2fde7959ca2","login":"williamdavis","name":"William Davis","avatar_url":"https://avatars-next.observableusercontent.com/8e1690a86caa18ed62536ff50e64f56363f49ab0d3f04f93c30820f94c0665e1","tier":"starter_2024","bio":""},"version":1114,"publish_version":1114,"role":null,"authored":false,"authors":[{"type":"individual","id":"8aa627c819fd2666","login":"williamdavis","name":"William Davis","avatar_url":"https://avatars-next.observableusercontent.com/8e1690a86caa18ed62536ff50e64f56363f49ab0d3f04f93c30820f94c0665e1","tier":null,"bio":""}],"members":[{"type":"individual","id":"8aa627c819fd2666","login":"williamdavis","name":"William Davis","avatar_url":"https://avatars-next.observableusercontent.com/8e1690a86caa18ed62536ff50e64f56363f49ab0d3f04f93c30820f94c0665e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"When is a park too crowded?","cells":[{"id":0,"value":"md`# When is a park too crowded?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"md`In an attempt to learn Observable, I've created a map of random points within a polygon to see how many of those points will overlap given a ${bufferSize}m buffer. I detect an overlap using Turf's [Boolean Overlap](https://turfjs.org/docs/#booleanOverlap) function to say what points are now within ${bufferSize*2}m of each other.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"md`Given a total of ${numOfPoints} people in Grange Park, ${(countMatch/numOfPoints*100).toFixed(0)}% are within a ${mutable bufferSize*2}m distance of one another.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"viewof numOfPoints = slider({\n min: 0, \n max: 400, \n step: 50, \n value: 200, \n title: \"Number of people\", \n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"bounds = trinityLayer.getBounds();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"function drawPoints(map) {\n let circleArray = [];\n mutable countMatch = 0;\n mutable countNotMatched = 0;\n for (let i = 0; i < numOfPoints; i++) {\n circleArray.push(generateRandom());\n if (i === numOfPoints-1) {\n stylePoints(circleArray, map);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"function stylePoints(arr, map) {\n console.log('style elements');\n let allPointsLayer = L.geoJson(arr, {\n style: function (feature) {\n return {\n fillColor: getIntersection(feature, arr, map),\n weight: 0.5,\n color: '#fff',\n fillOpacity: 1,\n smoothFactor:0\n }\n }\n });\n \n allPointsLayer.addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"mutable bufferSize = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"function generateRandomLat() {\n let randomLat = y_min + (Math.random() * (y_max - y_min));\n return randomLat;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"function generateRandomLng() {\n let randomLng = x_min + (Math.random() * (x_max - x_min));\n return randomLng;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"function generateRandom() {\n let insidePoly = false;\n while (insidePoly === false) {\n let randomLat = generateRandomLat();\n let randomLng = generateRandomLng();\n let point = turf.point([randomLng, randomLat]);\n\n let radius = mutable bufferSize;\n let options = {steps: 10, units: 'meters'};\n let circle = turf.circle(point, radius, options);\n \n // let poly = turf.multiPolygon(trinity.features[0].geometry.coordinates);\n let poly = turf.polygon(trinity.features[0].geometry.coordinates);\n\n insidePoly = turf.inside(point, poly);\n if (insidePoly === true) {\n return circle\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"function getIntersection(feature, match) {\n for (let i = 0; i <= match.length; i++) {\n let overlap = turf.booleanOverlap(feature, match[i]);\n if (overlap) {\n mutable countMatch++;\n return 'red'\n } else if (i === match.length-1) {\n mutable countNotMatched++;\n return 'black'\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"x_max = bounds.getEast();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"x_min = bounds.getWest();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"y_max = bounds.getSouth();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"y_min = bounds.getNorth();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"mutable countMatch = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"mutable countNotMatched = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"trinityLayer = L.geoJson(trinity, {\n weight: 1,\n fillOpacity:0.05,\n opacity: 1,\n color: 'green'\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"trinity = FileAttachment(\"grange@1.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"