25:["$","title",null,{"children":"leaflet | hchen549 | Observable"}] 4c:Tab0,crimeMap = { // 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}px;height:${width/1.6}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; // Create a map object and add a layer to it. let map = L.map(container).setView([43.0927993, -89.4171004], 11); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { // attribution: '© OpenStreetMap contributors' // }).addTo(map); // Filter the data based on user input let selectedCrimes = madCrimes.features.filter((d) => { if (crimeCategory.length > 0){ return crimeCategory.includes(d.properties.incident) && new Date(d.properties.Occur_date) >= start_date_formatted && new Date(d.properties.Occur_date) <= end_date_formatted } else if (crimeCategory.length === 0) { return uniqueCrimes.includes(d.properties.incident) && new Date(d.properties.Occur_date) >= start_date_formatted && new Date(d.properties.Occur_date) <= end_date_formatted } }) //convert data points to [lat,lng, intensity] let crimePoints = selectedCrimes.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.1])); //Add heatmap layer let crimeLayer = heatLayer(crimePoints, { minOpacity: 0.5, maxZoom: 18, max: 1.0, radius: 8, blur: 4, gradient: null }).addTo(map); let markers = markerCluster({}); // Add popup on the markers let schoolsLayer = L.geoJson(selectedCrimes, { onEachFeature: function (feature, layer) { const d = feature.properties; // const html = `` // layer.bindPopup(html); layer.bindTooltip(`${d.incident}, ${d.Occur_date}`, {sticky: true}); } }); markers.addLayer(schoolsLayer); map.addLayer(markers); }4d:[{"id":"a57869a50db89a976555439662857996342ecd5d38bfcbeb23dc2003c511812521c2b0fcb8f88a14dca7552ec3570b3a185513c09598afc6747ebb7fd2ef508a","href":"https://static.observableusercontent.com/files/a57869a50db89a976555439662857996342ecd5d38bfcbeb23dc2003c511812521c2b0fcb8f88a14dca7552ec3570b3a185513c09598afc6747ebb7fd2ef508a","name":"new_data.geojson","type":"application/geo+json","lastModified":1617072685349.406,"size":767121}] 48:{"id":"865dbd44f1ed8c20","slug":"leaflet","title":"leaflet","thumbnail":"ffc6aa015cbe252d74eeb789b3fbda3054ba920d2766f510ff5d099b75a4e040","access_level":"public","create_time":"$D2021-03-30T02:26:08.958Z","update_time":"$D2021-05-06T04:13:16.912Z","view_time":null,"first_public_time":"$D2021-03-30T03:13:26.688Z","has_unpublished_edits":null,"fork":{"id":"43395ed6a6e0de74","slug":"leaflet","title":"🍃 Leaflet","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":0,"starred":false,"owner":{"type":"team","id":"eac7311f5cb7336e","login":"hchen549","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c4c06c21c2df7d1e49e95d65b94aee4cbb3921a1e8315b7f67340169a88841d5","tier":"starter_2024","bio":"","following":false},"version":393,"publish_version":393,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e540e14f782e7f9","login":"hchen549","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c4c06c21c2df7d1e49e95d65b94aee4cbb3921a1e8315b7f67340169a88841d5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"7e540e14f782e7f9","login":"hchen549","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c4c06c21c2df7d1e49e95d65b94aee4cbb3921a1e8315b7f67340169a88841d5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"leaflet","cells":[{"id":370,"value":"md`# leaflet`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"import {Select} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import {date} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"uniqueCrimes = [...new Set( madCrimes.features.map(obj => obj.properties.incident)) ];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"uniqueCrimes.sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"crimeCategory","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"madCrimes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"grandCentral = {\n let response = await fetch('https://nominatim.openstreetmap.org/search.php?q=grand+central+station%2C+new+york&polygon_geojson=1&format=json');\n let json = await response.json();\n return json[0].geojson\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"L","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"crimes = (await fetch('https://opendata.arcgis.com/datasets/6af5cb8dc38e4bcbac8168b27ee104aa_38.geojson')).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"madCrimes = FileAttachment(\"new_data.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"// Change the data type of date \n\nmadCrimesFormatted = madCrimes.features.map((d) => {\n d.properties.Occur_date = new Date(d.properties.Occur_date)\n return d\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"viewof crimeCategory = Select(uniqueCrimes, {multiple: true, label: \"Select crime category\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"new Date(Math.max(...madCrimes.features.map(e => new Date(e.Occur_date))));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"madCrimes.features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"maxDate = d3.max(madCrimes.features, d => d.properties.Occur_date)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"minDate = d3.min(madCrimes.features, d => d.properties.Occur_date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"viewof start_date = date({\n title: \"Start\", \n min: minDate,\n max: maxDate,\n value: minDate,\n description: \"The earliest day is 01/01/2019\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"start_date_formatted = new Date(start_date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"viewof end_date = date({\n title: \"End\", \n min: minDate,\n max: maxDate,\n value: maxDate,\n description: \"The last day in data is 03/10/2021\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"end_date_formatted = new Date(end_date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"a = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"markerCluster = L, require('leaflet.markercluster@1.1.0').catch(() => L.markerClusterGroup)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"markerClusterCSS = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"madCrimesFormatted","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"result = madCrimesFormatted.reduce(function(acc, curr) {\n // Check if there exist an object in empty array whose CategoryId matches\n var isElemExist = acc.findIndex(function(item) {\n return item.Occur_weekday === curr.properties.Occur_weekday;\n })\n if (isElemExist === -1) {\n var obj = {};\n obj.Occur_weekday = curr.properties.Occur_weekday;\n obj.count = 1;\n acc.push(obj)\n } else {\n acc[isElemExist].count += 1\n }\n return acc;\n\n}, [])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"vl.markBar()\n .width(600)\n .data(result)\n .encode(\n vl.x().fieldN('Occur_weekday'),\n vl.y().fieldQ('count')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null

${school.name}