45:["$","title",null,{"children":"Adaptation de Tutorial 7 | leclercprof | Observable"}] 4d:T429,# Adaptation de Tutorial 7 ^{Content adapted from the following notebooks:
- [Geodata Wrangling for Vega Lite](https://observablehq.com/@drlynb/lyn-tries-maps-again), [Vancouver Crime Map](https://observablehq.com/@drlynb/vancouver-crime-map), and [Leaflet and D3 Interactive Overlays](https://observablehq.com/@drlynb/leaflet-and-d3-interactive-overlays) by Lyn Bartram
- [GeoVis](https://observablehq.com/@aunnoy/iat-355-4-geovis) by Aunnoy K. Mutasim
- [Leaflet JS tutorial](https://leafletjs.com/)
- [Leaflet](https://observablehq.com/@tmcw/leaflet) basic notebook by Tom MacWright} **Tutorial version [available here](https://observablehq.com/@krispybird/iat355-tutorial-7-maps-geocoding-with-leaflet-tutorial)** ## About this Notebook Maps and Geocoding in Leaflet + Vega-Lite. There are no exercises (except for one optional challenge) for this notebook, but you are free to practice modifying the examples by adding colors or legends — [see Leaflet's interactive Choropleth example](https://leafletjs.com/SlavaUkraini/examples/choropleth/).4e:T50a,## Leaflet We'll be using the [Leaflet](https://leafletjs.com/SlavaUkraini/) javascript library for creating maps in this tutorial. Leaflet is a popular, lightweight, open-source Javascript library for creating interactive maps that is well supported, and contains a host of [features](https://leafletjs.com/SlavaUkraini/#features). It provides an interface that pulls map _data & tiles_ from providers like [OpenStreetMap](https://www.openstreetmap.org/#map=3/71.34/-96.82) and [Mapbox](https://www.mapbox.com/), and visualizing it as an interactive map. Including a Leaflet map as part of a notebook is fairly similar to using it anywhere else, but here are the not-so-gritty details. **Note: ** *While Vega-Lite does have some built in map capabilities, (see https://observablehq.com/@observablehq/vega-lite-chart-types?collection=@observablehq/observable-for-vega-lite#maps for some examples about Vega-Lite maps), Leaflet offers a multitude of plugins and mapping features for developers (such as markers, map control, interaction and layers, as well as custom map projections).* ### Including Leaflet 1. First, include the Leaflet JavaScript with ```require()``` to pull it from https://unpkg.com 2. Also include Leaflet's required CSS as a link tag, also pulling from unpkg. 4f:T5ba,//Our function is in map map = { // 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 called 'container', so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); // This component utilizes "yield", which pauses the execution of this code block // Yield returns the value of container back to the notebook, which allows the div to be placed on the page. //This is important, because Leaflet uses the div's .offsetWidth and .offsetHeight (to get current size of the div) and 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. let map = L.map(container).setView([49.2527, -123.1207], 10.5); // initializes the map, sets zoom & coordinates //This adds the tile layer to the map. The map dynamically loads tiles based on current view the experience smooth and seamless. Make sure to add attribution to your map. let baseLayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }) .addTo(map); }50:Tbd3,### Breaking down the basics of a Leaflet map Let's break down the inside of our ```map``` object which created the leaflet map: #### **let container = DOM.element('div', { style: \`width:${width}px; height: \${width/1.6}px\` });** > 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 called ```'container'```, so it's completely self-contained. #### **yield container;** > ```yield``` returns the value of ```container``` back to the notebook, which allows the div to be placed on the page. It pauses the code block until ```container``` is returned. > > This is important, because Leaflet uses the div's ```.offsetWidth``` and `.offsetHeight` (to get current size of the div) and 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. #### **let map = L.map(container).setView([49.2527, -123.1207], 10.5);** > Creates the map object, sets zoom & coordinates #### **let baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(map); ** > This adds the tile layer (the base layer) to the map. The map dynamically loads tiles based on current view. Make sure to add attribution to your map. We use **`.addTo(map)`** which will add each layer successively to the map. **The order in which you add your layers will be very important in showing what layer is at the top, and can be interacted with. Beware!** ------ ### Changing the basemap It's possible to change the type of basemaps (aka. tile layer) you want as your map. This is particularly useful if you're using a basemap with a lot of overlying data; you don't want to add to the visual confusion. Hosting sites for maps are often called tile servers. Copy the tile url and replace the .png above, and make sure to check the **EPSG code**. Remember to attribute. Different types of basemaps can be found here: - http://bl.ocks.org/Xatpy/raw/854297419bd7eb3421d0/ - https://github.com/CartoDB/basemap-styles - https://wiki.openstreetmap.org/wiki/Tile_servers - https://maptalks.org/raster-collection/ For now, I'm going to make my life easier by storing these urls and attributions of the basemaps I'll be using into variables (the variables are defined at the bottom of the notebook under **Helper Functions for Styling Maps**). Lots of long url strings can make your Leaflet code busier | Basemap variable | Basemap URL | Attribution variable (for attribution string) |---|---|---| | `cartoLight` |'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'| `cartoAttr` | | `cartoDark` | 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png | `cartoAttr` | | `osMap` (the green one) | 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' | `osmAttr` | 51:T67c,grandCentralMap = { // 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. //Here, I changed the width and height of the map since I got tired of accidentally scrolling in and out while navigating through the page let container = DOM.element('div', { style: `width:${600}px;height:${width/2}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. //Notice the basemap tile layer below let map = L.map(container); let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr }).addTo(map); //instantiates a new geoJson layer using built in geoJson handling let grandCentralLayer = L.geoJson(grandCentral, { weight: 5, //We can set the attributes of the polygons (like CSS), including line weight and colors color: '#432' }) .addTo(map); //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation grandCentralLayer.bindPopup('Grand Central Terminal'); //tooltip map.fitBounds(grandCentralLayer.getBounds()); }52:T4c6,VanAreasMap = { //here, we constrain the map to a certain size let width = 600 let height = 350 let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this //Also, I fixed the zoom level for this map since we don't get more info by zooming in for this vis let map = L.map(container, {maxZoom: 11, minZoom: 11}); let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr }).addTo(map); //1. instantiates a new geoJson layer using built in geoJson handling //2. Instead of setting styles of the map by hand, I just returned an object with pre-defined styles //3. bindPopup with name of neighborhood & population let VanAreasLayer = L.geoJson(VanAreas, {style: style}) .bindPopup(d => d.feature.properties.NAME + '
Pop: ' + d.feature.properties.population) .addTo(map); //4. Adds the layer to the map. //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation map.fitBounds(VanAreasLayer.getBounds()); }53:T745,Lille_iris_carte1 = { // Limitation de la fenêtre de la carte à une certaine taille let width = 700 let height = 500 let container = DOM.element('div', { style: `width:${width}px;height:${height}px` }); yield container; //Ici définition du zoom pour visualisation lIlle 12 après essai + légende let map = L.map(container, {maxZoom: 12, minZoom: 12}); // utilisation d'un fond de carte de CartO let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr }).addTo(map); //1. creation d'une nouvelle couche geoJson à partir du fichier téléchargé //2. Au lieu de rentrer les styles directement appel à un objet qui contient des styles prédéfinis //3. Popup avec le nom de l'iris et le taux d'actif let LilleIrisLayer = L.geoJson(lille_iris_txactif, {style: styleLille}) .bindPopup(d => d.feature.properties.nom_iris + '
Taux actif: ' + d.feature.properties.tx_actif_15_64) .addTo(map); //4. ajout de la couche à la carte // Trouve les limites des objets spatiaux automatiquement et fait correspondre la fenêtre de visualisation de la carte (pas besoin de zommer (désactivation) ni de centrer la carte map.fitBounds(LilleIrisLayer.getBounds()); // legende (repris et adapté de leaflet var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 25, 30, 40, 50, 60, 70, 80], labels = []; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; legend.addTo(map); }54:T62f,VanStreetMap = { let width = 600; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this let map = L.map(container); //add base layer //notice here how we can set the minZoom and maxZoom levels of the base layer let baseLayer = L.tileLayer(cartoLight, { attribution:cartoAttr, subdomains: 'abcd', maxZoom: 20, minZoom: 10 }).addTo(map); //Street stylizing: similar to the density map, I made a function that returns red for artery streets, blue for residential streets, and black for other categories let streetStyle = (d) => { return { weight: 2, color: getStreetUsageColor(d.properties.streetuse), opacity: .9 }} //instantiates a new geoJson layer using built in geoJson handling //for style, I do something similar here where I pass in an inline function for style //For some reason, the {style: someStyleFunction} has to be passed in with the key style here let VanAreasLayer = L.geoJson(vanOneWays, {style: streetStyle}) //binds a popup when clicking on each line to access underlying data .bindPopup(function (Layer) { return Layer.feature.properties.hblock; }) .addTo(map); //Adds the layer to the map. //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation map.fitBounds(VanAreasLayer.getBounds()); }55:T815,VanMarkerMap = { let width = 600; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this let map = L.map(container); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, subdomains: 'abcd', maxZoom: 20, minZoom: 10 }).addTo(map); //tooltip to define our content that we want to return let tooltip = function (Layer) { return Layer.feature.properties.name + '
Address: ' + Layer.feature.properties.merged_address + '
Neighborhood: ' + Layer.feature.properties.geo_local_area; } //As a reminder: here's an alternative way to write the same function above with arrow notation // let tooltip = (Layer) => { Layer.feature.properties.name + '
Address: ' + Layer.feature.properties.merged_address + '
Neighborhood: ' + Layer.feature.properties.geo_local_area; } //****** TRY UNCOMMENTING THE CODE IN THIS SECTION to define a custom green icon ******************* var myIcon = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], //popupAnchor: [1, -34], //shadowSize: [41, 41] }); let customMarker = L.marker([49.28, -123.12], {icon: myIcon}).addTo(map) .bindPopup('A pretty CSS3 popup.
Easily customizable.') .openPopup(); //***************************************************************************************** //Adds the layer to the map & bind tooltip let VanAreasLayer = L.geoJson(vanFoodGardens) .bindPopup(tooltip) .addTo(map); // //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation map.fitBounds(VanAreasLayer.getBounds()); }56:T5d9,VanCircleFoodMap = { let width = 600; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this let map = L.map(container); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, subdomains: 'abcd', maxZoom: 20, minZoom: 0 }).addTo(map); //geoMarker obj let geojsonMarkerOptions = { radius: 5, fillColor: "#ff7800", color: "#ff7800", weight: 1, opacity: 1, fillOpacity: 0.6 }; //passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer. //This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker. //we use arrow notation here, but this essentially is the same as using an anonymous function like so: function (feature, latlng){...return stuff} let VanAreasLayer = L.geoJSON(vanFoodGardens, { pointToLayer: (feature, latlng) => { return L.circleMarker(latlng, geojsonMarkerOptions); }}) .bindPopup(function (Layer) { return Layer.feature.properties.name + '
Address: ' + Layer.feature.properties.merged_address + '
Neighborhood: ' + Layer.feature.properties.geo_local_area; }) .addTo(map); //finds bounds of polygon and automatically gets map view to fit map.fitBounds(VanAreasLayer.getBounds()); } 57:T98d,LilleIrisCarte2 = { // Limitation de la fenêtre de la carte à une certaine taille let width = 700 let height = 500 let container = DOM.element('div', { style: `width:${width}px;height:${height}px` }); yield container; //Ici définition du zoom pour visualisation lIlle 12 après essai + légende let map = L.map(container, {maxZoom: 12, minZoom: 12}); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, subdomains: 'abcd', maxZoom: 20, minZoom: 0 }).addTo(map); // make a lookup table indexed by GEOID10, so we can go from that ID to the total housing count // let IrisByCode = new Map(lille_iris_datapopm.map(row => [row['cartodb_id'], row])) // this is a *dynamic* style generator, where the fill color is based on the total housing count /* let styleGenerator = feature => { let style = { "color": "rgb(100, 100, 100)", "fillColor": colorScale(housingByGeoId.get(feature.properties.GEOID10).HD01_VD01), "opacity": 1, "weight": 2, "fillOpacity": 0.7, } return style; }; */ // var poptot = /* var taille = resultat => { IrisByCode.get(resultat.properties.cartodb_id).size_pop_tot} */ //geoMarker obj /*let geojsonMarkerOptions = { radius: taille, fillColor: "#ff7800", color: "#ff7800", weight: 1, opacity: 1, fillOpacity: 0.6 };*/ let styleGenerator = feature => { let style = { radius: 5, fillColor: "#ff7800", color: "#ff7800", weight: 1, opacity: 1, fillOpacity: 0.6 } return style; } //passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer. //This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker. //we use arrow notation here, but this essentially is the same as using an anonymous function like so: function (feature, latlng){...return stuff} let LillePointLayer = L.geoJSON(lille_irisc_pop, { pointToLayer: (feature, latlng) => { return L.circleMarker(latlng, {style: styleGenerator}); }}) .bindTooltip(function (Layer) { return 'Iris: '+ Layer.feature.properties.nom_iris + '
Population tot. = ' + Layer.feature.properties.pop_tot_15_64; }) .addTo(map); //finds bounds of polygon and automatically gets map view to fit map.fitBounds(LillePointLayer.getBounds()); } 58:T59a,VanTwoLayers = { let width = 600; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Did not use setView because we are using "fit bounds" to get the polygons to determine this let map = L.map(container); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, subdomains: 'abcd', maxZoom: 20, minZoom: 0 }).addTo(map); //geoMarker obj let geojsonMarkerOptions = { radius: 5, fillColor: "#ff7800", color: "#ff7800", weight: 1, opacity: 1, fillOpacity: 0.6 }; //THIS IS THE POINTS LAYER, let VanPointsLayer = L.geoJSON(vanFoodGardens, { pointToLayer: (feature, latlng) => { return L.circleMarker(latlng, geojsonMarkerOptions); }}) .bindPopup(function (Layer) { return Layer.feature.properties.name + '
Address: ' + Layer.feature.properties.merged_address + '
Neighborhood: ' + Layer.feature.properties.geo_local_area; }) .addTo(map); //THIS IS THE NEIGHBOURHOODS LAYER. TRY MOVING IT SO THAT IT IS BOUND BEFORE VanPointsLayer let VanAreasLayer = L.geoJson(VanAreas, {style: neighbourhoodStyle}) .bindPopup(d => d.feature.properties.NAME + '
Pop: ' + d.feature.properties.population) .addTo(map); //finds bounds of polygon and automatically gets map view to fit map.fitBounds(VanAreasLayer.getBounds()); } 59:T55f,## 🍂🍃🍀 PUTTING IT ALL TOGETHER: DASHBOARDS AND CONNECTED VISUALIZATIONS 🍂🍃🍀 Let's talk more about our data for the Crime Map, and how we can put this together into (multiple) dashboards and visualizations that invoke curiosity. 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, neighborhood, 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.5a:T52d,//OUR HEATMAP SHOWING CRIMES IN VANCOUVER viewof crimeMap = { let width = 900; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; //Use setview when making heatmaps, because heatLayer doesn't have a getBounds() method let map = L.map(container).setView([49.2527, -123.1207], 10.5); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, subdomains: 'abcd', maxZoom: 12, minZoom: 12 }).addTo(map); //heatmap Style let heatStyle = { radius: 10, blur: 15, // maxZoom: 12, // minZoom: 12, max: 4.0, scaleRadius: true } //layer for our neighborhoods //*********THIS IS VERY IMPORTANT: onEachFeature ADDS A LISTENER TO THE LAYER with a callback function called featureEvents********************** let VanAreasLayer = L.geoJson(vanAreas, {style: neighbourhoodStyle, onEachFeature: featureEvents}) .bindPopup(d => d.feature.properties.NAME) .addTo(map); //our heatmap layer let crimeLayer = heatLayer(crimePoints, heatStyle).addTo(map); //another mouse listener that resets the state of nHood when we click on a blank part of the map map.on('click', () => mutable nHood = null ); map.fitBounds(VanAreasLayer.getBounds()); }5b:T766,//OUR CONCATENATED BAR CHART / LINE CHART THAT DOES BRUSHING AND LINKING //Interactions are defined very similarly to the brushing & linking we did in Tutorial 6, except now we use the filter function to combine the selection returned internally by our bar/line brush, and the global selection of neighbourhoods from our map (mapSelection) viewof crimeChart = { //our filter function is telling us: we will use the 'and' operator while filtering, to only show the selection returned by 1) `brush`, and 2) our predicate of mapSelection (which returns neighbourhood names selected from the map) that are in the field NEIGHBOURHOOD const crimeBar = vl.markBar() .data(vanCrime2) .transform(vl.filter({'and': [brush, {'field': 'NEIGHBOURHOOD', 'oneOf': mapSelection}]})) .select(click) .encode( vl.x().count(), vl.y().fieldN('Offense'), vl.color().value('lightgray').if(click, vl.color().fieldN('Offense Category')) ) .width(200) .height(200) //Interactions are defined very similarly to the brushing & linking we did in Tutorial 6, except now we use the filter function //our filter function is telling us: we will use the 'and' operator while filtering, to only show the selection returned by 1) `brclickush`, and 2) our predicate of mapSelection (which returns neighbourhood names selected from the map) that are in the field NEIGHBOURHOOD const crimeLine = vl.markLine() .data(vanCrime2) .transform(vl.filter({'and': [click, {'field': 'NEIGHBOURHOOD', 'oneOf': mapSelection}]})) .encode( vl.x().fieldT('Date').timeUnit('utcdatemonth'), vl.y().count(), vl.color().fieldN('Offense Category') ) .params(brush) .width(400) .height(200) //concat the bars together // const concatMaps = vl.hconcat(crimeBar, crimeLine) // .transform(vl.filter(mapSelection)) return vl.hconcat(crimeBar, crimeLine).render() }5c:T7da,### How it's done: passing events between Leaflet and Vega-Lite Because these two are different libraries of their own, we have to use some helper functions that will globally store the selection of our map (`neighbourhood`), and pass it to Vega-Lite charts that will update on demand. **1)** **L.geoJson(vanAreas, {style: neighbourhoodStyle, onEachFeature: featureEvents})** ` onEachFeature: featureEvents` adds an event listener to our neighbourhood layers. Event listeners are procedures that wait for an event to occur (such as when a user clicks the mouse, or presses a key), and then will call a function (and trigger an action) as a result. Since we're doing interactions, this is going to be a crucial concept that we need. **2)** Inside the `featureEvents` callback function, we have some listeners that trigger an action when an event is fired (such as a mouse click, or mouse hover). This updates the state of `mutable nHood`, our global variable we use to get the neighbourhood name of the map clicked. Mutable overrides Observable's defaults so we can push data from within & function scope globally. `function featureEvents(feature, layer) {` ` layer.on({` ` click: whenClicked, });` `}` Our callback function `whenClicked` is triggered for a click: `whenClicked = (event) => {` ` mutable nHood = event.target.feature.properties.NAME ` }` **3)** The `map.on('click', () => mutable nHood = null)` function in our `crimeMap` is to reset the state of `nHood` to null when we click outside of a selectable region. We compare `nHood` against the `mapSelection()` function, which can return us an array of neighbourhoods that are selected. **4)** To simplify, our `onEachFeature` listener ➡ updates ➡ `nHood` (our global neighbourhood name variable), which ➡ gets us ➡ `mapSelection()` (our array of selected neighbourhood names). Our map selection (as an array of strings) is passed into vega-lite, so vega lite can filter data to only show the selected neighbourhood 5d:T5ae,popMap2 = { let width = 600 let height = 600 let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container let map = L.map(container, { maxZoom: 11, 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, {style: style}) .bindTooltip(function (Layer) { //binds a tooltip when clicking on each polygon return Layer.feature.properties.NAME;}).addTo(map); //Adds the layer to the map. //DEFINING OUR LEGEND var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7], labels = []; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; legend.addTo(map); map.fitBounds(VanAreasLayer.getBounds()); }5e:Ta14,----- ## Resources **Tutorial Specific** - ~~[Interactive Choropleth map](https://leafletjs.com/SlavaUkraini/examples/choropleth/) in Leaflet~~ - See [Rusty Conover's Leaflet map with legend for a better Observable specific example](https://observablehq.com/@rustyconover/2020-04-22-apparent-temperature-visualized-with-h3-leaflet) - [Leaflet Tutorials, Examples, and Documentation](https://leafletjs.com/SlavaUkraini/) **Observable-specific Leaflet maps (with vega-lite)** - [Geodata Wrangling for Vega Lite](https://observablehq.com/@drlynb/lyn-tries-maps-again), [Vancouver Crime Map](https://observablehq.com/@drlynb/vancouver-crime-map), and [Leaflet and D3 Interactive Overlays](https://observablehq.com/@drlynb/leaflet-and-d3-interactive-overlays) by Lyn Bartram - [GeoVis](https://observablehq.com/@aunnoy/iat-355-4-geovis) by Aunnoy K. Mutasim - [Leaflet](https://observablehq.com/@tmcw/leaflet) basic notebook by Tom MacWright - [An Old Vega Map Exercise](https://observablehq.com/@drlynb/iat-355-exercise-spatial-visualization) - created in vega-lite JSON spec, NOT API **Vega-Lite Tutorials and Examples**: In case you want other perspectives of Vega-Lite tutorials - Another tutorial on [Vega-Lite's encodings](https://observablehq.com/@aunnoy/iat-355-3-interactions-in-vega-lite) from a previous IAT 355 TA - Lyn's [Exploring Visual Forms](https://observablehq.com/@drlynb/week-4-vega-lite-exploring-visual-forms) notebook - A collection of tutorials on [Observable for Vega-Lite](https://observablehq.com/collection/@observablehq/observable-for-vega-lite) has a big collection of examples - Jeff Heer from the University of Washington has many notebook examples with the [Vega-Lite API](https://observablehq.com/collection/@vega/vega-lite-api), including his own [introduction tutorial](https://observablehq.com/@uwdata/introduction-to-vega-lite) **Vega-Lite Documentation** - The [Vega-Lite Documentation](https://vega.github.io/vega-lite/docs/) uses JSON declaration. - A less complete version of the [Vega-Lite API documentation](https://vega.github.io/vega-lite-api/) is also available; scroll to the bottom to see the API Reference **JAVASCRIPT** - For those needing a Javascript refresher, Min Hyung Chung has a great brief on Javascript in [Section 1](https://observablehq.com/@chunggrace/lab-2-javascript-introduction-to-vega-lite#cell-26) of her notebook **COLOR RESOURCES** - [CSS Color list](https://www.w3schools.com/cssref/css_colors.asp) - [https://coolors.co/](https://coolors.co/) - [ColorBrewer](https://colorbrewer2.org/) ---------------5f:[{"id":"8fd73582e9f5ebf0d816ea5dc566e16abec6b55f94d92c2ad90956d9835e6b3abf0c659fcebd9770209c0165fa0641092d302dd2c904d0dea8399262d65bb9ce","href":"https://static.observableusercontent.com/files/8fd73582e9f5ebf0d816ea5dc566e16abec6b55f94d92c2ad90956d9835e6b3abf0c659fcebd9770209c0165fa0641092d302dd2c904d0dea8399262d65bb9ce","name":"one-way-streets.geojson","type":"application/geo+json","lastModified":1657370796042.175,"size":149498},{"id":"db4cb94eb621418bbef8840cddba3021c68fded0efd28ef00627c4d83b6c8587cec196c12cf7009e6358b0d320840b77b6369c6d6db6ea139be54f90e5008947","href":"https://static.observableusercontent.com/files/db4cb94eb621418bbef8840cddba3021c68fded0efd28ef00627c4d83b6c8587cec196c12cf7009e6358b0d320840b77b6369c6d6db6ea139be54f90e5008947","name":"public-streets.geojson","type":"application/geo+json","lastModified":1657370796042.175,"size":5585502},{"id":"bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","href":"https://static.observableusercontent.com/files/bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","name":"VanAreas.json","type":"application/json","lastModified":1657370796042.175,"size":52832},{"id":"77b7645e6f50f4af6336f4405d50bd1c6997027a86bd38e8f6701dd9307c6a1d7049e6d419a79f55a5101464fff3d9af00038f2370caf4d91657d16ac66738f0","href":"https://static.observableusercontent.com/files/77b7645e6f50f4af6336f4405d50bd1c6997027a86bd38e8f6701dd9307c6a1d7049e6d419a79f55a5101464fff3d9af00038f2370caf4d91657d16ac66738f0","name":"image.png","type":"image/png","lastModified":1657370796042.175,"size":439082},{"id":"db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","href":"https://static.observableusercontent.com/files/db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","name":"vanCrime.json","type":"application/json","lastModified":1657370796042.175,"size":4714349},{"id":"2ddcee3cef64f9000074659a4c927b71f9c1c2bf749c1f514bdd0562db69cde126b45b32ff26b994821446b3019ce58ae0f20ca67dd802cbb386423954a62dd6","href":"https://static.observableusercontent.com/files/2ddcee3cef64f9000074659a4c927b71f9c1c2bf749c1f514bdd0562db69cde126b45b32ff26b994821446b3019ce58ae0f20ca67dd802cbb386423954a62dd6","name":"community-gardens-and-food-trees.geojson","type":"application/geo+json","lastModified":1657370796042.175,"size":88190},{"id":"e8a1c62e61765cd84ab67631082775bd53395bcd4f1a6d6fd19f74e236194b9e9606ab4b04114ed5024d04dfffa5a7e1685f0cdf4707636dc571a8e6eef584a8","href":"https://static.observableusercontent.com/files/e8a1c62e61765cd84ab67631082775bd53395bcd4f1a6d6fd19f74e236194b9e9606ab4b04114ed5024d04dfffa5a7e1685f0cdf4707636dc571a8e6eef584a8","name":"VancouverAreaSize.json","type":"application/json","lastModified":1657370796042.175,"size":52857},{"id":"8839234162abeaa37988fcfac9a2943a1ae3090f55f760352abc9b204a02b984a6c3a3327fe3487dc56558bfbfd49bf7a66547f7ff95ae243e8a1a1b101aff62","href":"https://static.observableusercontent.com/files/8839234162abeaa37988fcfac9a2943a1ae3090f55f760352abc9b204a02b984a6c3a3327fe3487dc56558bfbfd49bf7a66547f7ff95ae243e8a1a1b101aff62","name":"geojson.png","type":"image/png","lastModified":1657370796042.175,"size":445640},{"id":"5fa2f75d5a10c280e1ebd8cf8c34af01038331da33eef571135c5f0c58ece47204dbed449ebbf78316454700c9b7488fad7b60eb745325606290d65d0c2015f5","href":"https://static.observableusercontent.com/files/5fa2f75d5a10c280e1ebd8cf8c34af01038331da33eef571135c5f0c58ece47204dbed449ebbf78316454700c9b7488fad7b60eb745325606290d65d0c2015f5","name":"Lille_IRIS_txactif.geojson","type":"application/geo+json","lastModified":1657374263825.701,"size":106037},{"id":"031eddbc0b419e76ce0f1019ba99f3a6736432f6bb8e89ed6a45ed076df6543f692e5fe3371b207c7cbce7dadee607a31f4ac4e8ecad2479d9814921e1c84b9b","href":"https://static.observableusercontent.com/files/031eddbc0b419e76ce0f1019ba99f3a6736432f6bb8e89ed6a45ed076df6543f692e5fe3371b207c7cbce7dadee607a31f4ac4e8ecad2479d9814921e1c84b9b","name":"Lille_Iris_dataPop.csv","type":"text/csv","lastModified":1657449516767.172,"size":12895},{"id":"33d704657d8ced3a99a716ca371dddae18ea2a777b7c074f70cd59a2de83004dbd73acbc84a4899e351a7f242cb1b9b41332aa2b8e45a0278a0951f19686dc32","href":"https://static.observableusercontent.com/files/33d704657d8ced3a99a716ca371dddae18ea2a777b7c074f70cd59a2de83004dbd73acbc84a4899e351a7f242cb1b9b41332aa2b8e45a0278a0951f19686dc32","name":"Lille_Iris_dataPopM@1.csv","type":"text/csv","lastModified":1657458880767.178,"size":12787},{"id":"74ea646883bc0c8cefb18613c3b4484b6477c45d8268a015e0f9d55a89efc3726d5a5bdb927658cf7516e03ccfabf23b4c2299f4df39b3775057a1887898a3d2","href":"https://static.observableusercontent.com/files/74ea646883bc0c8cefb18613c3b4484b6477c45d8268a015e0f9d55a89efc3726d5a5bdb927658cf7516e03ccfabf23b4c2299f4df39b3775057a1887898a3d2","name":"Lille_IrisC_Pop.geojson","type":"application/geo+json","lastModified":1657392417583.551,"size":29441}] 49:{"id":"b75ba828d129bbef","slug":"adaptation-de-tutorial-7","title":"Adaptation de Tutorial 7","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-07-09T12:46:36.042Z","update_time":"$D2022-07-10T14:39:25.354Z","view_time":null,"first_public_time":"$D2022-07-10T14:16:30.578Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"247949fb443735bb","login":"leclercprof","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18297924e85315e91ba6f33c970816b5b35161a16b5426ebba00e054c2b646c3","tier":"starter_2024","bio":"","following":false},"version":3304,"publish_version":3304,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca0fb5b62342ce8f","login":"leclercprof","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18297924e85315e91ba6f33c970816b5b35161a16b5426ebba00e054c2b646c3","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ca0fb5b62342ce8f","login":"leclercprof","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18297924e85315e91ba6f33c970816b5b35161a16b5426ebba00e054c2b646c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Adaptation de Tutorial 7","cells":[{"id":932,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":944,"value":"toc('h2, h3, h4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1022,"value":"L = require('leaflet@1.8.0') // mise à jour de leaflet en 1.8.0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":" // mise à jour de leaflet en 1.8.0","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1145,"value":"## Preparing Data for Leaflet\n\nLeaflet uses [GeoJSON](https://geojson.org/), a format for encoding a variety of geographic data structures as JSON objects with a standard specification. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. This means that it would be possible to map points on a map, streets, and regions (like neighbourhoods).\n\nUnfortunately, Leaflet does not allow you to use [TopoJson](https://github.com/topojson/topojson) files. TopoJSON is an extension of GeoJSON that encodes topology. You will have to convert them to for use in Leaflet. There are many ways to do this, but a quick an easy way is to use [mapshaper.org](http://mapshaper.org/). For now, let's stick with GeoJSON.\n\nLyn has a notebook that [goes into more detail about working with geodata](https://observablehq.com/@drlynb/lyn-tries-maps-again). This is very helpful to read, especially if you are getting some strange results with your maps!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1193,"value":"FileAttachment(\"geojson.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"**Figure 1.** GeoJSON data structure in Observable. Taken from Lyn's [geodata notebook](https://observablehq.com/@drlynb/lyn-tries-maps-again)\n\n**A few summary points from her notebook:**\n- d3 (and by extension the Vega and Vega-Lite grammars) supports many projections (take a look at them in this workbook: https://observablehq.com/@vega/vega-lite-cartographic-projections). We can typically use the ```Mercator``` projection for most cases. But you will probably need to play with the right scaling factor and centering to position your map as you want it.\n- A **d3 geoProjection** takes coordinates in an [x,y] or **[long,lat]** format. In other words, longitude and latitude are switched from the normal way they will be expressed in many datasets - even after you have done the datum conversion. Typically the most useful workaround is simply to rename your data fields.\n- Geodata files can be very big and gist will typically fail on many. Consider hosting on a more robust webserver.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1017,"value":"## Making your first map in Leaflet 🌿\nNow, let's get to making some maps. Here is an example of a map of Vancouver in Leaflet. Play around with the map in Leaflet and navigate through it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":983,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1290,"value":"FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"**Fig 2:** Some of the CartoDB basemaps listed on http://bl.ocks.org/Xatpy/raw/854297419bd7eb3421d0/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1173,"value":"-----------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1429,"value":"## Data on a map 🍃","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1745,"value":"Let's get into some of the different types of layers we can make on a map, specifically with the types of marks that can be created (points, lines, areas, and heatmaps)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1137,"value":"-----\n### Mapping Layers on Leaflet's Maps: Polygons/Areas/Boundaries\nLeaflet can also display areas on the map. Let's show the location of [Grand Central Terminal](https://en.wikipedia.org/wiki/Grand_Central_Terminal) in New York City, by searching OpenStreetMap's geocoder for it and then displaying the returned [GeoJSON](http://geojson.org/) on the map.\n\nThe `grandCentral` cell takes care of loading the data asynchronously and the cell that displays the map doesn't have to concern itself with any async behavior - it just displays once the search result is complete.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1161,"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":1163,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"**What happened above:**\n1. Notice here how we're creating a new layer called `grandCentralLayer`, which takes in geoJSON info about the polygons, points, etc. that we want to mark off.\n\n2. We can set the attributes of our marked polygons similar to CSS; specifying `weight` and `color` of the line. We call the `.addTo(map)` function to add this layer on our map\n\n3. `grandCentralLayer.bindPopup('Grand Central Terminal')` binds a tooltip popup with the text 'Grand Central Terminal' to `grandCentralLayer`, directly connecting the geoJSON layer such that you can click on the polygon and see the tooltip.\n\n4. Lastly, `map.fitBounds(grandCentralLayer.getBounds())` fits the bounds of the polygon and map view.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1409,"value":"\n--------------------\n### Mapping Layers on Leaflet's Maps: More Areas\n\nHow about a chloropleth of Vancouver's neighbouhoods showing population and density? Here, I've attached a GeoJSON file provided by the City of Vancouver's [Open Data Portal](https://opendata.vancouver.ca/explore/dataset/local-area-boundary/information/?disjunctive.name).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1170,"value":"VanAreas = FileAttachment(\"VancouverAreaSize.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3061,"value":"lille_iris_txactif = FileAttachment(\"Lille_IRIS_txactif.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"I''ve also got a helper function called `style` declared at the bottom of the notebook, that lets me reuse some of the styling for my maps\nAlso, I have a helper function called getDensColor to color the neighbourhoods based on the density.\n\n `function style(feature) {`\n \n return { \n fillColor: getDensColor(feature.properties.density),\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n `}`\n\nNow, try clicking on the neighbourhoods to see more information about its name and population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1177,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3165,"value":"## Reprise en adaptant à Lille + challenge 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3063,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3080,"value":"function styleLille(feature) {\n return {\n fillColor: getTxColor(feature.properties.tx_actif_15_64),\n weight: 1,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3085,"value":"function getTxColor(t) {\n\t return t > 80 ? '#005a32' :\n\t t > 70 ? '#238443' :\n\t t > 60 ? '#41ab5d' :\n\t t > 50 ? '#78c679' :\n\t t > 40 ? '#addd8e' :\n\t t > 30 ? '#d9f0a3' :\n\t t > 25 ? '#f7fcb9' :\n\t '#ffffe5';\n\t}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"-----\n### Mapping Layers on Leaflet's Maps: Streets (Lines)\n\nWe can also visualize **lines** on our maps for streets. This map shows one-way streets in Vancouver. I took this from the One-Way street dataset on the City of Vancouver's [Open Data Portal](https://opendata.vancouver.ca/explore/dataset/one-way-streets/information/) (go to the Export tab to pull the data as GeoJSON). Notice how I can click on the street for the name to appear.\n\nThis can be done in `bindPopup` by returning `Layer.feature.properties.hblock` from `vanOneWays'` JSON structure, which shows the street block name.\n\nI also have a couple of helper functions and variables: `streetUses` fetches me the different types of street uses from the JSON array; and `getStreetUsageColor` is like `getDensColor()` in that it categorically defines our street color based on category (red for arterial, blue for residential).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1888,"value":"vanOneWays","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"vanStreets","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"streetUses //I defined a helper function that fetches me the types of street uses listed in the JSON","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1709,"value":"//Simple function for getting street usage color: if it's Arterial, use red, or else blue\nfunction getStreetUsageColor(d) {\n if (d == 'Arterial') \n return 'red';\n else if (d == 'Residential') \n return 'blue';\n else \n return 'black'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"**Try this: ** Replace `vanOneWays` with the `vanStreets` dataset that shows all streets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1605,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"\n-----\n### Mapping Points on Leaflet's Maps: Locations (Points/Circles)\n\nThis map shows community gardens and fruit trees in Vancouver. I also took this from Vancouver's [Open Data Portal](https://opendata.vancouver.ca/explore/dataset/community-gardens-and-food-trees/information/). When I expand on the `features` array, we see the coordinates are represented as two points (lat & long).\n\nBy default, Leaflet gives you these blue pins to show points. Click on them to see more info about the tooltips.\n\nAs well, we can also drop in our own pins (and even make custom pins. The [Leaflet Tutorial](https://leafletjs.com/SlavaUkraini/examples/quick-start/) has more information about how you could do that. For now, try uncommenting the section specified in the code below, then scroll into the Downtown Vancouver area of the map and see what is different.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1749,"value":"vanFoodGardens","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1752,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1786,"value":"Points are handled differently than lines and polygons in Leaflet. By default simple markers are drawn for GeoJSON Points, as we just saw above. We can alter this by passing a `pointToLayer` function in a GeoJSON options object when creating the GeoJSON layer. This function is passed a `LatLng` and should return an instance of ILayer, in this case likely a `Marker` or `CircleMarker`.\n\nHere we're using the pointToLayer option to create a CircleMarker:\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1969,"value":"jurisdictions = [...new Set(vanFoodGardens.features.map(d=> d.properties.jurisdiction))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1797,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3174,"value":"$57","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3180,"value":"// fichier des centroïdes des iris de Lille\nlille_irisc_pop = FileAttachment(\"Lille_IrisC_Pop.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3263,"value":"// fichier des données m pour modifier tentaive de mettre size_pop_tot en nombre\nlille_iris_datapopm = FileAttachment(\"Lille_Iris_dataPopM@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3265,"value":"// visualise la table des données iris lille\nviewof table1 = Inputs.table(lille_iris_datapopm, {\n maxHeight: \"200px\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3272,"value":"// vérification contenu de la table\n{//return lille_iris_datapop.length\n return (lille_iris_datapopm[0].sqrt_pop_tot)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3211,"value":"// fichier de données inital\nlille_iris_datapop = FileAttachment(\"Lille_Iris_dataPop.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3243,"value":"// visualise la table des données iris lille\nviewof table = Inputs.table(lille_iris_datapop, {\n maxHeight: \"200px\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3247,"value":"// vérification contenu de la table\n{//return lille_iris_datapop.length\nreturn (lille_iris_datapop[0].size_pop_tot)\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1791,"value":"While there's more complex ways of making point layers in leaflet with D3, having to learn the core base of D3 is quite complicated and might not be the best use of your time for this assignment. \nSometimes, you'll see Leaflet examples using D3 (and Lyn's [notebook here](https://observablehq.com/@drlynb/leaflet-and-d3-interactive-overlays) has an example of how to add points using D3 to leaflet. However, the method above is meant to be a bit less dense than D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1811,"value":" ### Leaflet Heatmap\n\n Let's move to creating a heatmap in Leaflet. We'll be using a dataset of Vancouver crimes. The dataset `vanCrime` has had a lot of filtering and processing done on it with some helper functions at the bottom. The array `crimePoints` is a nested array of 3 values: lat, long, and density. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2051,"value":"vanCrime","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2026,"value":"crimePoints","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"FilteredGeoCrimes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2217,"value":"We also have another function for the neighborhoods that is going to have a softer overlay\n\n```function neighborhoodStyle(feature) {```\n \n `return {` \n \n fillColor: '#999999',//getDensColor(feature.properties.density),\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.3\n \n `}\n }\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"districtStyle","database":"$undefined"},{"id":2067,"value":"We use a plugin called `heatLayer` that allows us to make heatmaps. `heatLayer` takes an a nested array of lat/long/density values, which is why we did some processing to create `crimePoints`\n\nThe code is as follows:\n`let crimeLayer = heatLayer(crimePoints).addTo(map);`\n\n**Important: ** You will notice that we don't use `fitBounds()` and `getBounds()` in the function below. For some reason, Leaflet decided that this is a ['feature' on Leaflet's part for whatever reason](https://github.com/Leaflet/Leaflet.heat/issues/112). We will have to manually define our initial map view with `setView()` again.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2273,"value":"**Try this: ** Uncomment the neighborhood lines layer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1977,"value":"vanCrimeMap = {\n\n let width = 600;\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n \n yield container;\n\n //Use setview when making heatmaps, because heatLayer doesn't have a getBounds() method\n let map = L.map(container).setView([49.2527, -123.1207], 10.5);\n\n //add base layer\n let baseLayer = L.tileLayer(cartoLight, {\n attribution: cartoAttr,\n subdomains: 'abcd',\n maxZoom: 20,\n minZoom: 10\n }).addTo(map); \n\n let heatStyle = {\n radius: 10,\n blur: 15,\n maxZoom: 10,\n max: 4.0\n }\n\n //our heatmap layer\n let crimeLayer = heatLayer(crimePoints, heatStyle).addTo(map);\n\n //Of course, we can always add more layers on top, such the neighborhood boundaries\n let VanAreasLayer = L.geoJson(VanAreas, {style: neighbourhoodStyle})\n .bindPopup(d => d.feature.properties.NAME + '
Pop: ' + d.feature.properties.population)\n .addTo(map);\n\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2165,"value":"### Adding layers to maps\nOf course, we can always add additional layers on top of our maps. Try uncommenting the lines above in the chart\n\n**NOTE:** Ordering matters! Leaflet layers stack on top of each other, so the top layer will always take precedent when interacting with the map. Look at this example of a map with the `points` layer representing garden locations, and the `area` layer representing neighbourhoods. Click on the map and try to interact with the points to get details of food garden locations.\n\nNow, try moving `VanAreasLayer` so that it is bound to the map before `VanPointsLayer`. Can you click on the points now to get more info about the food gardens?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2905,"value":"$58","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"--------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1123,"value":"$59","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":698,"value":"### 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) and `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`.\n\n**Note: ** `viewof` displays both the input and its current value. `viewof` creates a second hidden cell foo that exposes the current value of this input element to the rest of the notebook. This is helpful for leaflet + vega-lite charts we will concat together using HTML divs. See [A brief introduction to viewof](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof) for more details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2634,"value":"{return \"Neighbourhood selected: \" + (nHood == null ? 'none' : nHood)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"

${viewof crimeChart}

${viewof crimeMap}

`","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2328,"value":"brush = vl.selectInterval().encodings('x').resolve('global');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2329,"value":"click = vl.selectPoint().encodings('color');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2474,"value":"$5a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2289,"value":"$5b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2503,"value":"$5c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"md ` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"

${viewof popMap}

${viewof densityMap}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"Here 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":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2743,"value":"vl.markCircle({size: 30})\n .data(crimeDensityTotal)\n .transform(\n vl.filter({'and':\n [{'field': 'NEIGHBOURHOOD', 'oneOf': mapSelection}]})\n )\n .encode(\n vl.x().fieldN('Offense').count().axis('Number of crimes').scale({type: 'log'}), \n vl.y().fieldQ('sqm').axis({title: 'Square meters/person'}).scale({'domain': [0, 500]}),\n vl.column().fieldN('Offense Type'),\n vl.color().fieldN('Offense Category')\n )\n .width(250)\n .title(selectedNeighbourhoods)\n .render()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"### Other map views: the code\nThese cells contain the code for the population and density maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2809,"value":"## CHALLENGES:\n\n1) Create a map of your own. Go onto the [Open Data Portal](https://opendata.vancouver.ca/pages/home/), or use your project dataset to start creating your map.\n\n2) Given `crimeMap`, add an interaction that also shows the neighbourhood when a region is hovered over\n\n3) (optional): Add a legend to `popMap` and `densityMap` that shows the meaning of the color ramp. See the [Leaflet Interactive Choropleth Map](https://leafletjs.com/SlavaUkraini/examples/choropleth/) tutorial for more examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3049,"value":"### CHALLENGE 3:\nAdd a legend to `popMap`\n\nAdapted from [Rusty Conover's Leaflet map](https://observablehq.com/@rustyconover/2020-04-22-apparent-temperature-visualized-with-h3-leaflet)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2923,"value":"vanAreas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2918,"value":"$5d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3038,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"$5e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2485,"value":"## Appendix: Nest of Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":893,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"epochParse = d3.timeParse(\"%Q\");//ms in unix epochs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"timeParse = d3.timeParse(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"dateFormat = d3.timeFormat(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"### Vega Signal Listeners and Event Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"mutable type = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"mutable time = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"//We are writing the event listener function for each feature in our geojson layer\n//when each of these events are fired, a callback function is triggered\n//more interaction (such as hover) is covered here: https://leafletjs.com/SlavaUkraini/examples/choropleth/\n\nfunction featureEvents(feature, layer) {\n layer.on({\n click: whenClicked, //callback functions\n \n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"//Mutable overrides Observable's defaults state, so we can push data from within function scope globally\nmutable nHood = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"selectedNeighbourhoods = selectedNames(mapSelection);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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++;iFullscreen`;\n button.onclick = () => button.parentElement.nextElementSibling.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2829,"value":"------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"md` ### Libraries and Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"import {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"import { toc } from \"@nebrius/indented-toc\" // This component generates the Table of Contents","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2419,"value":"VegaLite = require('vega-lite@2.0.0-beta.2/build/vega-lite.min.js') \n//Vegalite = require(\"@observablehq/vega-lite@0.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2336,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"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":624,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"mutable selectedMap = [\"warmgreys\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2825,"value":"------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"### Helper Functions for Styling Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1450,"value":"osmAttr = '© OpenStreetMap contributors'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"cartoAttr = '© OpenStreetMap, © CARTO'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"osMap = \t'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"cartoLight = \t'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"cartoDark = \t'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"function getDensColor(d) {\n\t return d > .7 ? '#800026' :\n\t d > .6 ? '#BD0026' :\n\t d > .5 ? '#E31A1C' :\n\t d > .4 ? '#FC4E2A' :\n\t d > .3 ? '#FD8D3C' :\n\t d > .2 ? '#FEB24C' :\n\t d > .1 ? '#FED976' :\n\t '#FFEDA0';\n\t}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"function getPopColor(d) {\n\t return d > 50000 ? '#800026' :\n\t d > 45000 ? '#BD0026' :\n\t d > 40000 ? '#E31A1C' :\n\t d > 30000 ? '#FC4E2A' :\n\t d > 25000 ? '#FD8D3C' :\n\t d > 20000 ? '#FEB24C' :\n\t d > 10000 ? '#FED976' :\n\t '#FFEDA0';\n\t}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"function style(feature) {\n return {\n fillColor: getDensColor(feature.properties.density),\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"function style0(feature) {\n return {\n fillColor: getPopColor(feature.properties.population),\n weight: 2,\n opacity: 1,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2697,"value":"function neighbourhoodStyle(){\n return {\n fillColor: '#999999',\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.2,\n }};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2833,"value":"------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1468,"value":"### Datasets and Related Arrays Used","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1585,"value":"vanFoodGardens = FileAttachment(\"community-gardens-and-food-trees.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"vanAreas = FileAttachment(\"VanAreas.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"vanAreaValues2 = d3.json(\"https://www.sfu.ca/~lyn/data/Urban/VancouverAreaSizeTopo.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"vanStreets = FileAttachment(\"public-streets.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1886,"value":"vanOneWays = FileAttachment(\"one-way-streets.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"vanCrime = FileAttachment(\"vanCrime.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"vanCrime2 = {\n let i=vanCrime.features.length;\n let j=0;\n let k=0;\n let temp ={};\n let newCrime=[];\n for(k=0;k\n feature.geometry.coordinates.slice().reverse().concat([0.1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1654,"value":"//we are using some js shorthand magic here, by first mapping only the streetuses to an array\n//then we use [...new Set(ourArray)] to get uniques \nstreetUses = [...new Set(vanOneWays.features.map(d=> d.properties.streetuse))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"function deepCopy(arr)\n{\n let newArr = JSON.parse(JSON.stringify(arr));\n return(newArr)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2836,"value":"------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"md` ### Filtered Map Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"vanCrimeFiltered = vanCrime.features.filter(d => 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"FilteredGeoCrimes = {\n return new Object({type: \"FeatureCollection\", features: vanCrimeFiltered})\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W5f","stdlib":"1"}} 44:null