30:T7dd,md`# Vancouver Crime Map ### Note: Updated version available! This is an older verion of this tutprial about maps and signals - a newwer one using the vega-lite v5 API and a newer version of Leaflet can be found here: https://observablehq.com/d/a5d4e8476c8e5d24

This is an example of what your project might look like when exported to a website. Remember, you are not exposing your development notebook here, but your description of what the tool is, what it does, how to use it, and what insights and questions it is meant to support. SO ....
NOTE: IMPORTANT: The last visualizations are linked to the heatmap but only one way: in other words, the map selection drives the scatterplots and not vice versa. Currently the map only supports one selection at a time. Working on a more flexible version. ## Introduction The Vancouver Crime Map allows you to explore data related to non-violent crime in the City of Vancouver, BC. It is designed to help citizens and planners understand patterns of crime types by day, neighbourhood, population density and offense type. ### Data The data are from three open data sets hosted on the CIty of Vancouver open data catalogue:

non-violent crime, supplied by the Vancouver Police Department, (https://opendata.vancouver.ca/explore/dataset/crime/information/). In this website we use only a subset of these data from June 2016.
Vancouver neighbourhood boundaries, from City of Vancouver (https://opendata.vancouver.ca/explore/dataset/local-area-boundary/information/
Populations by neighbourhood, from Statistics Canada (https://webtransfer.vancouver.ca/opendata/csv/CensusLocalAreaProfiles2016.csv)

In this demo, we use the following data attributes:

neighbourhood/planning area
offense
date
location
we add a derived attribute of offense type
population
we use also a derived attribute of neighbourhood density

All data and functions are at the end of the webpage. `31:T5db,viewof crimeCharts = V({ width: 400, height:300, data: {values: vanCrime2}, transform: [ {filter: {field: "NEIGHBOURHOOD", oneOf: mapSelection}} ], config: { background: "white" }, hconcat: [{ transform: [ {filter: {selection: "timeBrush"}} ], mark: "rect", selection: { offenseSelect: {fields: ["Offense"], on: "click", type: "multi"} }, encoding: { y: {field: "Offense", type: "nominal"}, x: {field: "*", type: "quantitative", aggregate: "count"}, color: { condition: { field: "Offense Category", type: "nominal", selection: "offenseSelect", scale: { domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), range: ["#4e79a7","#f28e2c","#e15759","#76b7b2"]}}, value: "lightgrey" } } }, { transform: [ {filter: {selection: "offenseSelect"}} ], width: 400, mark: "line", selection: { timeBrush: {type: "interval", encodings: ["x"]} }, encoding: { x: {field: "Date", type: "temporal"}, y: {field: "*", type: "quantitative", aggregate: "count"}, color: {field: "Offense Category", type: "nominal", scale: {domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), range: ["#4e79a7","#f28e2c","#e15759","#76b7b2"]}} } }] })32:T86d,viewof CrimeMap = { let width = 900 let height = 400 let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container let map = L.map(container, { maxZoom: 18, minZoom: 11 }); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let VanAreasLayer = L.geoJson(vanAreas, { //instantiates a new geoJson layer using built in geoJson handling weight: 2, //Attributes of polygons including the weight of boundaries and colors of map. color: "#432", onEachFeature: areaClick }).bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data return Layer.feature.properties.NAME; }).addTo(map); //Adds the layer to the map. //This function formats our geojson file to be commensurate with leaflet. Geojson files are formatted using //[lon, lat], we need to reverse this. we are creating an arrray of "feature(s)", that hold two lat lon coordinates // and we reverse them. We then concatenate (or add on) final value which is the intensity. This is the strength of // of each of these points. This heat map works by overlapping points and the added intensity of each dot changes the // color based on hot spots. let crimePoints = FilteredGeoCrimes.features.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.1])); //We add this layer to the map. let crimeLayer = heatLayer(crimePoints, { gradient: { 0.0: 'darkgreen', 0.5: 'green', 1.0: 'purple' }, radius: 10, blur:15, maxZoom: 16, minZoom: 16, scaleRadius: true, max: 0.1 }).addTo(map); map.on('click', () => mutable nHood = null ); map.fitBounds(VanAreasLayer.getBounds()); }33:[{"id":"bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","href":"https://static.observableusercontent.com/files/bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","name":"VanAreas.json","type":"application/json","lastModified":1574998561943.064,"size":52832},{"id":"db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","href":"https://static.observableusercontent.com/files/db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","name":"vanCrime.json","type":"application/json","lastModified":1574998561943.064,"size":4714349}] 2e:{"title":"Vancouver Crime Map","cells":[{"id":348,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"md `## Patterns related to crime occurrence\nWhat are the key patterns of vancouver non-violent crimes? This visualization dashboard helps to relate where and when crimes occur. In the top views, Crimes are organized by \\`Offense\\` (totals in the bar chart) amd \\`Offense Type\\` (colour). Colour in the map below shows the density of crime occurrence at different levels of detail. Selecting one or more bars, range on the timeline, or area(s) in the map will update the other views accordingly. Click outside the selectable area on any view to reset the values to \\`all\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"html`

${viewof crimeCharts}

${viewof CrimeMap}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"md ` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"md `## Factors related to crime occurrence\nWhat other data might be useful to understand patterns of crime? One might be population or density. \nSo now the questions we might ask are:\n

Is crime volume and/or type related to density?\n
population?\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"md `## Vancouver Neighbourhoods\nThe first simple choropleth map below on the left uses census data from 2016 (StatsCanada) and area boundaries of 22 local neighbourhoods (City of Vancouver OpenData) to show population distribution by neighbourhood. Interesting - but limited if you are considering many issues in urban life. he problem with the data I use to make the map below is that it is POPULATION and not DENSITY. The choropleth map shows the population amounts of each local area, but we should be considering density.\n### Some areas have more space for their residents than others.\nThe second map on the right shows density mapped to colour intensity of the neighbourhood. Because density right now is calculated as the number of meters squared per person - a LOWER value is higher density overall, so I inverted the quantized color scale. Look at the space per resident in Shaughnessy compared with the West End.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"html`

${viewof popMap}

${viewof densityMap}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"md `\nHere we see crimes related to density, with a new measure of Space/person (sq meters). We've used a log scale to tease out crime patterns. Because we are interested in vehicular vs non vehicular crimes, we split the two into separate scatterplots. From this we can see that vehicle collisions are less common and clump in medium desnity neighbourhoods. One might ask why?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"cBar=embed({\n \"title\": selectedNeighbourhoods,\n \"width\": 300,\n \"height\": 300, \n data: \n {\n values: crimeDensityTotal\n },\n transform: [\n {filter: {field: \"NEIGHBOURHOOD\", oneOf: mapSelection}} \n ],\n mark: \"point\",\n encoding: {\n \"facet\": {\n \"field\": \"Offense Type\",\n \"type\": \"ordinal\"\n },\n y:{\n aggregate: \"mean\", \n field: \"sqm\",\n \"scale\": {\"domain\": [0, 500]},\n type: \"quantitative\",\n \"axis\": {\"title\": \"Space/person\"}\n },\n x:{\n aggregate: \"count\", \n field: \"Offense\", \n type: \"quantitative\",\n \"scale\": {\"type\": \"log\"},\n \"axis\": {\"title\": \"Number of crimes\"}\n },\n color:{ field: \"Offense\", type:\"nominal\",\"scale\": {\"scheme\": \"category10\"}},\n \"detail\": {\"field\": \"NEIGHBOURHOOD\",\"type\": \"nominal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md` ## Component Views\nThese cells contain the code for the three maps, the time line and the bar chart views.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"viewof popMap = { \n let width = 400\n let height = 350\n let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });\n \n yield container\n \n let map = L.map(container,\n { maxZoom: 11,\n minZoom: 11\n });\n let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n \n let VanAreasLayer = L.geoJson(vanAreas, {style: style0})\n .bindTooltip(function (Layer) { //binds a tooltip when clicking on each polygon \n return Layer.feature.properties.NAME;}).addTo(map); //Adds the layer to the map.\n \n map.fitBounds(VanAreasLayer.getBounds());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"viewof densityMap = { \n let width = 400\n let height = 350\n let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });\n \n yield container\n \n let map = L.map(container,\n { maxZoom: 11,\n minZoom: 11\n });\n let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n \n let VanAreasLayer = L.geoJson(vanAreas, {style: style})\n .bindTooltip(function (Layer) { //binds a tooltip when clicking on each polygon \n return Layer.feature.properties.NAME;})\n .addTo(map); //Adds the layer to the map.\n //add the crime points\n let crimePoints = FilteredGeoCrimes.features.map(feature =>\n feature.geometry.coordinates.slice().reverse().concat([0.1])); \n map.fitBounds(VanAreasLayer.getBounds());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"viewof baseMap = { \n let width = 900\n let height = 400\n let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });\n \n yield container\n \n let map = L.map(container,\n { maxZoom: 18,\n minZoom: 11\n });\n let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n let VanAreasLayer = L.geoJson(vanAreas, { //instantiates a new geoJson layer using built in geoJson handling\n weight: 1, //Attributes of polygons including the weight of boundaries and colors of map.\n color: \"#ddd\"\n }); //Adds the layer to the map.\n map.fitBounds(VanAreasLayer.getBounds());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"md `### Functions`","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"function isEmpty(obj) {\n for (var prop in obj) {\n return false;\n }\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"epochParse = d3.timeParse(\"%Q\");//ms in unix epochs","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"timeParse = d3.timeParse(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"dateFormat = d3.timeFormat(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"md` ## Vega Signal Listeners and Event Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"crimeCharts.addSignalListener(\"offenseSelect\", function(name, value) {\n if (value == null)\n mutable type = null\n else\n mutable type = value.Offense\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"mutable type = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"bSelection = {\n if(isEmpty(type)){\n return Array.from(new Set(vanCrime2.map(d => d.Offense)))\n } else {\n return type\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"crimeCharts.addSignalListener(\"timeBrush\", function(name, value) {\n if (value == null)\n mutable time = null\n else\n mutable time = value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"mutable time = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"TSelection = {\n if(isEmpty(mutable time)) {\n return d3.extent(vanCrime2, d => dateFormat(timeParse(d.Date)))\n } else {\n return time.Date.map( d => dateFormat(epochParse(d)))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"//We are writing the event listener function for each feature in our geojson layer\nfunction areaClick(feature, layer) {\n layer.on({\n click:whenClicked //callback function\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"//We update our data in the function using mutable. This overrides observables defaults so we can push data from within //function scope globally\nwhenClicked = (event) => {\n mutable nHood = event.target.feature.properties.NAME\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"mutable nHood = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"mapSelection = {\n if(nHood == null ){\n return Array.from(new Set(vanCrime2.map(d => d.NEIGHBOURHOOD))) //Set is a new datastructure in ES6 -> only unique values\n } else {\n return [nHood]\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"selectedNeighbourhoods = selectedNames(mapSelection);","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"selectedNames = function(arr){\n let newstr = \"\";\n let newstr2=\"\";\n let i=0;\n if (arr.length == 25)\n {\n return (\"All Neighbourhoods\")\n }\n else\n {\n // newstr2 = arr[0];\n// newstr = arr[0];\n // for(i=1;i++;i bSelection.includes(d.properties.Offense))\n .filter(d => timeParse(d.properties.Date) >= timeParse(TSelection[0]) &&\n timeParse(d.properties.Date) <= timeParse(TSelection[1]))\n .filter(d => mapSelection.includes(d.properties.NEIGHBOURHOOD))","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"FilteredGeoCrimes = {\n return new Object({type: \"FeatureCollection\", features: vanCrimeFiltered})\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"md` Great! let's try out our filter. Oh no you may notice that we cannot de-select the filter. In order to do this, we have to add another event-listener for whenever we click anywhere else on the map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"{\n const button = html`