30:T4b9, ## 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 type
date
location
we add a derived attribute of offense category
population
we use also a derived attribute of neighbourhood density

All data and functions are at the end of the webpage.31:T80d,--- ### Selections and brushing We want to be able to add interactions to brush and/or filter these visualizations.
to filter, we remove everything else from the view. To brush, we highlight the selected item. #### Brushing First we manipulate in the bar chart below to show crime types of `Offense Type`. There are a couple of things to note with the selection. First is that other bars visually diminish in salience. But we need to retain the original scale in both the `X` and `Y` axes to maintain a consistent spatial view of value. We do this by fixing the `domain` of the axes: ~~~ vl.y() .fieldN("Offense") .scale({domain: OffenseTypes}) vl.x() .fieldQ("*") .aggregate("count") .scale({ domain: [0, 4400] }), ~~~ To highlight the selection, I make the non-selected bars translucent by setting their `opacity`: ~~~ vl.opacity().if(selectedBar, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ~~~ I also add in a `text` mark that only shows when I select the bar. ~~~ const text = vl .markText({ dx: 20, color: "grey" }) .data(vanCrime2) .transform(vl.filter(selectedBar.empty(false))) // show text for selection but only if a selection exists ~~~ The next thing to do is to bind this to a legend and make that legend interactive. Unfortunately, it appears in vega-lite that **we cannot have the legend bound to a category that is not at the same level of detail in the chart**: in other words, the chart separates crimes into `Offense Type` with a bar for each, and groups them also by `Offense Category`, indicated by colour. I either have to set the selectable aspect as `Offense Category`, meaning that I can select the legend or the bar, but all crimes of that `Offense Category` will be selected, or I can set the selection as individual bars of `Offense Type`, meaning that the legend remains non-interactive. Sigh. This is clearly a limitation of vega-lite I need to explore further. 32:T7f8,viewof crimeBars1 = { const selectedBar = vl .selectPoint("selected_bar") // create our selection param .fields("Offense") // select all crimes of the same type //.nearest(true) // select nearest point to click .on("click") // mouse click for selection ('click' is default but specifying for clarity) //.nearest(true) // select nearest point to the click (helpful because the points are small) .clear("dblclick") .bind("legend"); // also bind to the legend; // double click to clear selection const legend = vl.selectPoint().fields("Offense Category").bind("legend"); const barandlegend = vl.and(selectedBar, legend); const crimeChart = vl .markBar() .width(500) .data(vanCrime2) .title("Vancouver Non-Violent Crimes Totals by Offense Type Summer 2016") .params(selectedBar, legend) // add in the selection param // .transform(vl.filter(selectedBar) // filter out all but the selected point .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl.x() .fieldQ("*") .aggregate("count") .scale({ domain: [0, 4400] }), vl.color() .if( barandlegend, vl .color() .fieldN("Offense Category") .scale({ range: OffenseCatColors }) ) .value("lightgrey"), // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey vl.opacity().if(selectedBar, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ); const text = vl .markText({ dx: 20, color: "grey" }) .data(vanCrime2) .transform(vl.filter(selectedBar.empty(false))) // show text for selection but only if a selection exists - is not working .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl.x().fieldQ("*").aggregate("count"), vl.text().fieldQ("*").aggregate("count") ); return vl.layer(crimeChart, text).render(); }33:T475,The line chart behaves differently. When I select the line, it shows all the text values in that line. We should not have the data level-of-detail mismatch that we have in the above bar chart; all the data are colour-categorized by `Offense Category`. But of course we DO have a level of detail below category: the selection is for **all offenses/day of that `Offense Category`**. So we get them all. Any time I select any point on the line, I get the whole line. The default is to use `shift-click` to restore the view.
I also bound the legend as selectable using: ~~~ const clickSelector = vl.selectPoint() .on("click") // select on click .fields("Offense Category") // select all crimes of the same type .bind("legend") // also bind to the legend; // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click ~~~ As noted, use `Shift-click` to deselect and reset the view. This is an ambiguous interaction as it also can be used to select multiple lines: so it can deselect what was previously selected as a toggle, or add to the selection set. Try it out.34:T5b1,viewof crimeTL1 = { const clickSelector = vl.selectPoint() .on("click") // select on click .fields("Offense Category") // select all crimes of the same type .bind("legend") // also bind to the legend; // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click const isClicked = clickSelector.empty(false); const crimeTimes = vl .markLine({ strokeWidth: 3 }) .width(600) .title("Vancouver Non-Violent Crime Trends by Offense Category Summer 2016") .encode( vl.x().fieldT("Date"), vl.y().fieldQ("*").aggregate("count"), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }), vl.opacity().if(clickSelector, vl.value(0.99)).value(0.2) // if point selected, use opacity 0.99, otherwise 0.1 ); // shared base for new layers but filtered const base = crimeTimes.transform(vl.filter(isClicked)); const label = { dx: 4, dy: -8, align: "left" }; const black = { stroke: "black", strokeWidth: 0.5 }; const white = { stroke: "white", strokeWidth: 2 }; return vl .data(vanCrime2) .layer( crimeTimes.params(clickSelector), base .markText(label, white) .encode(vl.text().fieldQ("*").aggregate("count")), // backing white text base .markText(label, "black") .encode(vl.text().fieldQ("*").aggregate("count")) // black text label ) .render(); }35:T87d,## Brushing and linking Now I want to combine these two charts so I can explore across these data facets as well as within them. To do this, we first put both graphs in the same Observable cell. Then we can define brushing interactions between them using the local variables.
We use the following linking interactions: 1. Set selection types as a point selection
~~~ const selectType = vl.selectPoint("selected_pt") .on("click") // select on click .fields("Offense") // select all crimes of the same type .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click ~~~ and a time scrubber interval selection. ~~~ const selectTimeBrush = vl.selectInterval().encodings("x"); ~~~

2. Then we need to identify where these selection operations are used. We do this with the `params` operator: ~~~ const crimeTrends = vl.markLine({ strokeWidth: 2 }) .params(selectTimeBrush) ~~~ and ~~~ const crimeBars = vl.markBar() .params(selectType) ~~~

3. Finally, we brush the related lines in the two timelines by setting the opacity of the other view marks to very faint: ~~~ vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.99, otherwise 0.1 ~~~

But note while this supports brushing between these two charts, we also want to have a one-way filter applied, so that when we select a **subset** of the time, the **aggregate values in the bars are recalculated**. 4. To do this, we need to specify the filter operation in the bar chart: ~~~ .transform(vl.filter(selectTimeBrush)) ~~~ and now when we brush the timeline, we get recalculated values in the related bars. ### Constant vs dynamic scales When i filter the values in other view, the subset of data changes but the scale on the view axes remains **constant**. This is a design choice. It means that I have a fixed frame of reference but on the other hand I may miss some features in the data subset that have smaller values - try selecting one of the smaller bars to see how "flat" the timeline becomes. 36:T7b4,{ //Bar chart offenses x non-violent trends by TYPE // set the selection interactions to be able to select either an offense type, an offense category, or a time interval const selectTimeBrush = vl.selectInterval().encodings("x"); // Use an OR operator on which time scrubber to use const selectType = vl .selectPoint("selected_pt") .on("click") // select on click .fields("Offense") // select all crimes of the same type .bind("legend") // also bind to the legend .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click //draw the charts const crimeTrends = vl .markLine({ strokeWidth: 2 }) .data(vanCrime2) // .transform(vl.filter(selectType)) //.transform(vl.filter(selectTimeBrushCat)) .params(selectTimeBrush) .title("Non-Violent Crime Trends by Type Summer 2016") .encode( vl.x().fieldT("Date"), vl.detail().fieldN("Offense"), vl.y() .fieldQ("*") .count() .scale({ domain: [0, 60] }), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }), vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.99, otherwise 0.1 ); const crimeBars = vl.markBar() .data(vanCrime2) .params(selectType) .title("Vancouver Non-Violent Crime Total Offenses - Summer 2016") .transform(vl.filter(selectTimeBrush)) .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl.x() .fieldQ("*") .aggregate("count") .scale({ domain: [0, 4400] }), vl.color() .fieldN("Offense Category") .scale({ range: OffenseCatColors }) .legend({ orient: "bottom", offset: -70 }), vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ); return vl.hconcat(crimeBars, crimeTrends).render(); }37:T404,### Dynamic Scales and Additional Selection This is similar to the two charts above, but we are looking at crime trends by **category** In the charts below, I have done something slightly different: 1. I changed the scale on the bar chart to **adapt to the range of the selected (filtered) subset**, so the axis values now change **dynamically**. This helps us see small differences in values more accurately but can mislead the viewer who is not paying attention to the CHANGE in the scale. 2. The timeline now shows the aggregated `Offense` counts summed into the `Offense Category` counts. 3. Now the legend becomes interactive (it is bound to `Offense Category`), so it all works. 4. I added a new `selectDate` point selection to the timeline that means you can select a data point on the timeline and see the values for that `Date` in the bars. This is extremely sensitive to the point selection (it's easy to be a little off and then you select everything) so I will need to add a reference line to act as a cue. TBD38:Ta49,{ //Bar chart offenses x non-violent trends by CATEGORY // set the selection interactions to be able to select either an offense type, an offense category, or a time interval const selectTimeBrush = vl.selectInterval().encodings("x"); // Use an OR operator on which time scrubber to use const selectType = vl .selectPoint("selected_pt") .on("click") // select on click .fields("Offense Category") // select all crimes of the same type .bind("legend") // also bind to the legend .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click const selectDate = vl .selectPoint("selected_date") .on("click") // select on click .fields("Date") // select all crimes of the same type .nearest(true) //.bind("legend") // also bind to the legend .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click //draw the charts const crimeTrends = vl .markLine({ strokeWidth: 2 }) .data(vanCrime2) // .transform(vl.filter(selectType)) //.transform(vl.filter(selectTimeBrushCat)) //.width(600) .params(selectTimeBrush, selectDate) .title("Non-Violent Crime Trends by Category Summer 2016") .encode( vl.x().fieldT("Date"), vl.detail().fieldN("Offense Category"), vl .y() .fieldQ("*") .count() .scale({ domain: [0, 120] }), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }), vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.99, otherwise 0.1 ); const crimeBars = vl .markBar() //.width(600) .data(vanCrime2) .params(selectType) .title("Vancouver Non-Violent Crime Total Offenses Summer 2016") .transform(vl.filter(selectTimeBrush), vl.filter(selectDate)) .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl.x().fieldQ("*").aggregate("count"), // .scale({ domain: [0, 4400] }), vl .color() .fieldN("Offense Category") .scale({ range: OffenseCatColors }) .legend({ orient: "bottom", offset: -70 }), // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ); // const base = crimeBars.transform(vl.filter(timeSelector)); return vl.hconcat(crimeBars, crimeTrends).render(); }39:T5b8,## Leaflet Let's add an interactive map made with the js mapping library [`Leaflet`](https://leafletjs.com/) that offers many more interactions and takes care of the expected map behaviours such as panning and zooming. This map is made up of 3 *layers*: 1. A base map retrieved from the `OpenStreetMap` GIS database (`osmLayer`); 2. a layer of the Vancouver neighbourhoods from the geoJSON data in the array `VanAreas` (`VanAreasLayer`) set to be interactive. This uses the polygons set by the geoJson data; 3. A layer of crime locations as points from the array `crimePoints` (`crimeLayer2`) coloured by the category of crime `Offense Category`.
Now we can use `Leaflet` interactions to select either an area or a point. Since the points are the last layer added, clicking on a point will bring up a popup that tells you what the `Offense` is. Clicking on an empty area inside a neighbourhood that has no points will filter the map view to that area, and filter and brush the other crime charts in the `threeCViews` cell. **SOMETHING IMPROTANT TO NOTE HERE:** The timeline's `y-axis` scales dynamically based on the selection of the bars and the neighbourhood of the map. This is a deliberate design choice in our regard. Like with above, the scale of y adapts to the range of the selected (filtered) subset. This helps us see small differences in values more accurately but can mislead the viewer who is not paying attention to the CHANGE in the scale.3a:Tbc3,viewof threeCViews = { // set the selection interactions to be able to select either an offense type, an offense category, or a time interval const selectTimeBrush = vl.selectInterval("tbrush").encodings("x"); // .resolve("intersect") /* const selectTimeBrushCat = vl .selectInterval() .encodings("x") .resolve("intersect"); */ const selectType = vl .selectPoint("selected_pt") .on("click") // select on click .fields("Offense") // select all crimes of the same type //.resolve("intersect") .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click /* const selectCat = vl .selectPoint("selected_cat") .on("click") // select on click .fields("Offense Category") // select all crimes of the same category .bind("legend") // also bind to the legend .clear("dblclick") // double click to clear selection .toggle(true); // allow for multi-select (on by default) with shift-click */ //draw the charts //let scaleMax = vl.y().fieldQ("*").count(); const crimeTrends = vl .markLine({ strokeWidth: 2 }) .data(vanCrime2) //.transform(vl.filter(selectType), vl.filter(selectTimeBrushCat)) //.width(600) .transform( vl.filter(selectType), // vl.filter(selectTimeBrushCat), vl.filter({ field: "NEIGHBOURHOOD", oneOf: mapSelection }) ) .params(selectTimeBrush) .title("VNon-Violent Crime Trends by Type Summer 2016") .encode( vl.x().fieldT("Date"), vl.detail().fieldN("Offense"), vl.y().fieldQ("*").count(), //.scale({ domain: [0, "scaleMax"] }), //.scale({ domain: [0, 120] }), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }) // vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.99, otherwise 0.1 ); const crimeBars = vl .markBar() //.width(600) .data(vanCrime2) .params(selectType) .title("Vancouver Non-Violent Crime Total Offenses Summer 2016") // .transform(vl.filter(selectTimeBrush), vl.filter(selectTimeBrush)) .transform( vl.filter(selectTimeBrush), // vl.filter(selectTimeBrushCat), vl.filter({ field: "NEIGHBOURHOOD", oneOf: mapSelection }) ) .encode( vl.y().fieldN("Offense").scale({ domain: OffenseTypes }), vl.x().fieldQ("*").aggregate("count"), //.scale({ domain: [0, 4400] }) vl .color() .fieldN("Offense Category") .scale({ range: OffenseCatColors }) .legend({ orient: "bottom", offset: -70 }), // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ); // const base = crimeBars.transform(vl.filter(timeSelector)); return vl.hconcat(crimeBars, crimeTrends).render(); }3b:T89c,viewof CrimePoints = { let width = 900; let height = 400; let container = DOM.element("div", { style: `width:${width}px;height:${width / 2}px` }); yield container; let setCatClr = function(cn) { let i=0; for (i=0;i< OffenseCatClr.length; i++){ if (cn === OffenseCatClr[i].Oname){ return OffenseCatClr[i].CClr } } return(null) } let map = L.map(container, { maxZoom: 16, minZoom: 12 }); let osmLayer = L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", { attribution: '© OpenStreetMap contributors', opacity:1 } ).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", fillColor: "#EEE", fillOpacity: 0, opacity: 1, 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. //IMPORTANT: NOTE THAT HERE WE USE FilteredGeoCrimes, which contains a filtered array of crimes based on the selections in Vega-Lite and Leaflet let vCrimeLayer2 = L.geoJSON(FilteredGeoCrimes, { style: function(feature) { return { color: setCatClr(feature.properties.Offense) }; }, pointToLayer: function(feature, latlng) { return new L.CircleMarker(latlng, { radius: 3, fillOpacity: 0.1, //fillColor: setCatClr(feature.properties.Offense), fillColor: setCatClr("purple"), Opacity: 0.1 }); },onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.Offense); } }); map.addLayer(vCrimeLayer2); //we also register a mouse event, so that when the map is clicked in an empty area, we set nHood to null. More on that below map.on("click", () => (mutable nHood = null)); map.fitBounds(VanAreasLayer.getBounds()); }3c:Tac0,## Signals and event listeners I added this map view to the set of views that are connected by interactions such that a selection in the `threeCViews` cell (vega-lite) changes the map, and vice versa. There is a notable difference between how we are using interactions to control the contents of views between the map and the charts because they are in different `Observable` *`cells`*. Thus we need to use explicit mechanisms to pass selection events back and forth between them. We still use a selection to derive a subset of attributes that drive the *filter transform* in other views, but things work differently across cells and we need to do a little extra work to explicitly identify the mechanisms to pass the specification between the cells using ***signals*** and ***signal listeners***. To make this map work with my other vega-lite views I use *signals* that get passed from the vega-lite views in `threeCViews` cell to the map (`CrimePoints` cell) and vice versa. You can see that I have two types of these signals that affect the below selection sets:
1. `**otype**` : the selection from the `Offense Type` barchart that changes the timelines and the map; 2. `**mapSelection**`: the selection of the neighbourhood from the map that resets the data shown in the bar chart and the timelines. Each of these gets computed by using a signal to change the contents of an array that contains the subset of the attributes to transform the relevant views using a filter, quite similar to what we see when the views are contained in the same cell. But these work slightly different in vega-lite and Leaflet. In a vega-lite call with multiple views and selections, we tell a view to transform based on a selection (in other words, the data specification is built into the selection, and we don't actually need to maintain a separate data structure.) For the Leaflet map, we don't actually **tell** it to filter the crime points: we simply **update the data structure that contains those points**, and because Observable cells are *reactive*, any time the data they use changes, they will automatically update. So the map (or indeed, any external cell) updates the crime points it displays because it is just responding to an update rendering request with new data. No filter specification required, but we do now need to explicitly maintain extra data structures that hold the subset of the selected data. I will go over each of these in turn.

_To summarise: in Vega-Lite the view transforms based on the selection, and in Leaflet, we need to update the data structure that we pass into our map._ To understand why this works, we need to take a side turn into understanding how *`mutable`* variables work in Observable. 3d:Tcb4, ##### Mutable variables So the thing to notice here is HOW I am passing signals between cells. Instead of using the Generators.observe() approach of explicitly throwing a signal event between reactive cells that we showed in https://observablehq.com/@sfu-iat355/passing-signals-adding-event-listeners-and-composing-dash, I am setting two mutable variables called `otype` (`Offense` views) and `nHood` (map view). Mutable variables break the scope of a single cell. You can think of a mutable variable as a **global variable that you can set anywhere in your workbook**. If you only want to reference the value of the variable, you just use its name; if you want to change the variable, you preface it with the mutable keyword. Mutable variables are described in more detail in [Introduction to Mutable State](https://observablehq.com/@observablehq/introduction-to-mutable-state). Essentially, what this means is that `Mutable` overrides Observable's defaults so we can push data from within & function scope globally. By using mutable, we can control the timing of when a downstream cell should be re-evaluated, by only setting its value at the appropriate moment. This can help cells share values without creating circular dependencies, and also prevent cells from updating more often than is needed — while allowing any cells that depend on them to continue receiving reactive updates as normal. The big disadvantage of using mutable is that global variables can be DANGEROUS so use with care. You are in essence breaking one of the important behaviours of Observable. ##### Offense Type Selecting an `Offense` type from the barchart and filtering the map view uses the following chain : 1. We define a **global variable** `otype` using the `mutable` keyword (just means accessible across cells); 2. We define a **signal listener** as an external function, in a new cell, on the entire `threeCViews` cell using the `selected_pt` from `selectPoint` (our vega-lite selection) ~~~ threeCViews.addSignalListener("selected_pt", function (name, value) { if (value == null) mutable otype = null; else mutable otype = value.Offense; }) ~~~ 3. The selection of an `Offense` from the bar chart using the `selected_pt` operation **triggers the signal listener to change the contents of the `otype` array** using the `Offense` field of the selected bar; 4. We need to make sure we return a reset (that is how we return to the full view) so we add another routine that returns a full array of `Offense` types **if the selection is null** ~~~ bSelection = { if (isEmpty(otype)) { return Array.from(new Set(vanCrime2.map((d) => d.Offense))); } else { return otype; } } ~~~ 5. We use the `bSelection` to **filter the data array** that gets passed into the crimePoints Leaflet map ~~~ vanCrimeFiltered = vanCrime.features .filter((d) => bSelection.includes(d.properties.Offense)) ... ~~~ 6. Finally, we use the filtered features to **set a new array of geoData** in the format Leaflet expects: ~~~ FilteredGeoCrimes = { return new Object({type: "FeatureCollection", features: vanCrimeFiltered}) } ~~~ You can follow a similar path to see how I set the Date brush. I have only used the Date brush from the `Offense` timeline. 3e:[{"id":"c3f54f68a9a18a58d4d85ebfa48f304282acf0d56778354897cab048e46b12ddbedcdd0867c27ab79dbee136cb76ce6d5f7a293c183d77255024eac6c4d5a8f7","href":"https://static.observableusercontent.com/files/c3f54f68a9a18a58d4d85ebfa48f304282acf0d56778354897cab048e46b12ddbedcdd0867c27ab79dbee136cb76ce6d5f7a293c183d77255024eac6c4d5a8f7","name":"image.png","type":"image/png","lastModified":1679587992718.756,"size":1655803},{"id":"b9a447d3f03ed9e26c375cc91c30e422c24899cb8141dac1c5106aae55403cb203fb91b34b0fdb9cfdd949e34c6ea8f55cc3dd1ace0bdccf1801e5f573d108c4","href":"https://static.observableusercontent.com/files/b9a447d3f03ed9e26c375cc91c30e422c24899cb8141dac1c5106aae55403cb203fb91b34b0fdb9cfdd949e34c6ea8f55cc3dd1ace0bdccf1801e5f573d108c4","name":"Vancrime_data_OneWeekMay2017.geojson","type":"application/geo+json","lastModified":1679608030775.323,"size":283929},{"id":"bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","href":"https://static.observableusercontent.com/files/bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","name":"VanAreas.json","type":"application/json","lastModified":1679500247447.082,"size":52832},{"id":"db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","href":"https://static.observableusercontent.com/files/db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","name":"vanCrime.json","type":"application/json","lastModified":1679500247447.082,"size":4714349}] 2e:{"title":"[IAT 355] Tutorial 8: Integration: Interaction using Leaflet and Signals in Vega-Lite with the Vancouver Crime Map","cells":[{"id":2581,"value":"# [IAT 355] Tutorial 8: Integration: Interaction using Leaflet and Signals in Vega-Lite with the Vancouver Crime Map\n_Exploring signals and cells using vega-lite and Leaflet_\n\n© Lyn Bartram, 2023 \n\n## About this Notebook\nThis workbook explores how the VL api and the Leaflet mapping api can be used together. ","pinned":false,"hidden":false,"mode":"md"},{"id":2584,"value":"toc('h2, h3, h4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":2594,"value":"We have several helper arrays here that categorize and type the offense in an array, and also list the color we will use to encode each category and type of offense","pinned":false,"hidden":false,"mode":"md"},{"id":1184,"value":"OffenseCats = Array.from(new Set(vanCrime2.map((d) => d[\"Offense Category\"])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"OffenseTypes = Array.from(new Set(vanCrime2.map((d) => d[\"Offense\"])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"OffenseCatColors = [\"#f28e2c\", \"#e15759\", \"#4e79a7\", \"#76b7b2\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2334,"value":"OffenseCatClr = [\n {\"Oname\": \"Break and Enter Commercial\", \"CName\" : \"Break In\", \"CClr\" : \"#e15759\"},\n {\"Oname\": \"Break and Enter Residential/Other\", \"CName\" : \"Break In\", \"CClr\" : \"#e15759\"},\n {\"Oname\": \"Mischief\", \"CName\" : \"Mischief\", \"CClr\" : \"#4e79a7\"},\n {\"Oname\": \"Other Theft\", \"CName\" : \"Theft\", \"CClr\" : \"#76b7b2\"},\n {\"Oname\": \"Theft from Vehicle\", \"CName\" : \"Theft\", \"CClr\" : \"#76b7b2\"},\n {\"Oname\": \"Theft of Vehicle\", \"CName\" : \"Theft\", \"CClr\" : \"#76b7b2\"},\n {\"Oname\": \"Theft of Bicycle\", \"CName\" : \"Theft\", \"CClr\" : \"#76b7b2\"},\n {\"Oname\" : \"Vehicle Collision or Pedestrian Struck (with Fatality)\",\"CName\" : \"Accident\", \"CClr\" : \"#f28e2c\"},\n {\"Oname\" : \"Vehicle Collision or Pedestrian Struck (with Injury)\",\"CName\" : \"Accident\", \"CClr\" : \"#f28e2c\"}\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md` ## Component Views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"In total we will have 3 views in our crime analytics visualization set:\n- A bar chart of the total crimes by `Offense` (there are 8 distinct types) using **Vega-lite**;\n- A timeline of crimes by `Offense` using **Vega-lite**;\n- A map of Vancouver neighbourhoods with the total set of crimes by location **(in Leaflet)**\n\nOur charts will look like this:","pinned":false,"hidden":false,"mode":"md"},{"id":2640,"value":"image = FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1457,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1451,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":1372,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1348,"value":"## Layering data views\nYou will probably notice that to get the text fields to show in the trend chart, I actually created a new mark in the cell - a text mark - that I then composed with the vis into a layer to render. I used a condition that filtered out the data in that mark based on whether the field (either `Offense Type` in the barchart, or `Offense Category` in the line chart) was selected. This works fine for the bar chart, as it renders only one aggregate value, but it is not appropriate for the line chart where we see ALL the values for that category - in other words, for each date. What we want is to see ONLY the individual point text data and not the whole series. \n\nWorking on this now, but it appears I need to define more layers to contain the particular data i want to see.
\nIn this view the mark type for the legend changes to a circle from the line - investigating why.","pinned":false,"hidden":false,"mode":"md"},{"id":2613,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1344,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":1505,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2549,"value":"$37","pinned":false,"hidden":false,"mode":"md"},{"id":2542,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":1745,"value":"### Filtering and brushing extended\nBut what i really want to do is combine 3 views, so that I have a cumulative bar chart of `Offense` types, coloured by what `Offense Category` they belong to, the `Offense Type` timelines and a **map** that shows crimes by type and area, coloured by `Offense Category`. ","pinned":false,"hidden":false,"mode":"md"},{"id":2622,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2112,"value":"$39","pinned":false,"hidden":false,"mode":"md"},{"id":2833,"value":"vanCrime2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1671,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":2816,"value":"mapSelection","pinned":true,"hidden":false,"mode":"ojs"},{"id":2268,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":2837,"value":"otype","pinned":true,"hidden":false,"mode":"ojs"},{"id":2839,"value":"nHood","pinned":true,"hidden":false,"mode":"ojs"},{"id":2100,"value":"// Here we add our signal listener \n//selected_pt is the name of the VL selectPoint selection we defined in threeCViews\n\nthreeCViews.addSignalListener(\"selected_pt\", function (name, value) {\n if (value == null) mutable otype = null;\n else mutable otype = value.Offense;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2534,"value":"

${viewof threeCViews}

${viewof CrimePoints}

","pinned":true,"hidden":false,"mode":"html"},{"id":2687,"value":"$3c","pinned":false,"hidden":false,"mode":"md"},{"id":2134,"value":"$3d","pinned":false,"hidden":false,"mode":"md"},{"id":2703,"value":"Summary: \n\n- `threeCViews` 👂 to `selected_pt` from selectPoint in Vega-Lite\n- `threeCViews`➡updates ➡ mutable `otype` array\n- `bSelection` ➡ updates ➡ `otype` or returns as `array` of Offense types\n- `vanCrimeFiltered` filters `bSelection` ➡ to set ➡ `FilteredGeoCrimes` geoJSON\n- `FilteredGeoCrimes` ➡ is read by ➡ Leaflet map","pinned":false,"hidden":false,"mode":"md"},{"id":2819,"value":"otype","pinned":true,"hidden":false,"mode":"ojs"},{"id":2826,"value":"bSelection","pinned":true,"hidden":false,"mode":"ojs"},{"id":2822,"value":"vanCrimeFiltered","pinned":true,"hidden":false,"mode":"ojs"},{"id":2824,"value":"FilteredGeoCrimes","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"## 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. The 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\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":"md"},{"id":760,"value":"html`

${viewof popMap}

${viewof densityMap}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2491,"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?\n\nWe also have two scatterplots here that compare between non-vehicular and vehicular type offenses, compared to the density of the population. Notice how the neighbourhood also corresponds to the selected neighbourhood in the leaflet map","pinned":false,"hidden":false,"mode":"md"},{"id":2716,"value":"{return \"Neighbourhood selected: \" + (nHood == null ? 'none' : nHood)}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2718,"value":"mapSelection","pinned":true,"hidden":false,"mode":"ojs"},{"id":2712,"value":"vl.markCircle({size: 30})\n .data(crimeDensityTotal)\n .transform(\n vl.filter({'and': [{'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(300)\n .title(selectedNeighbourhoods)\n .render()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2721,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2811,"value":"## BACKEND STUFF","pinned":false,"hidden":false,"mode":"md"},{"id":2171,"value":"#### Data structures and signal functions to set the `Offense` and `Date` selection filters in the map","pinned":false,"hidden":false,"mode":"md"},{"id":1790,"value":"// clicked = Generators.observe((notify) => {\n// const clicked = (event, { datum }) => notify(datum);\n// threeCViews.addEventListener(\"click\", clicked);\n// return () => threeCViews.removeEventListener(\"click\", clicked);\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"//oType is our mutable value to get the type of offense selected from our bar chart\nmutable otype = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"//We need to make sure we return a reset (that is how we return to the full view) so we add another routine that returns a full array of Offense types if the selection is null\n\nbSelection = {\n if (isEmpty(otype)) {\n return Array.from(new Set(vanCrime2.map((d) => d.Offense)));\n } else {\n return otype;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2829,"value":"vanCrime","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"//This gets our array of filtered crime data after we selected a neighbourhood\n\nvanCrimeFiltered = vanCrime.features\n .filter((d) => bSelection.includes(d.properties.Offense))\n .filter(\n (d) =>\n timeParse(d.properties.Date) >= timeParse(TSelection[0]) &&\n timeParse(d.properties.Date) <= timeParse(TSelection[1])\n )\n .filter((d) => mapSelection.includes(d.properties.NEIGHBOURHOOD))","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"//This returns our new filtered data in a geoJSON format for Leaflet to read\n\nFilteredGeoCrimes = {\n return new Object({type: \"FeatureCollection\", features: vanCrimeFiltered})\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2432,"value":"//This is some more backend stuff where we use a generator to observe changes in the event listener\n\nmutable ObsDateSelection = Generators.observe(notify => { //creates generator that observes changes within the event listener.\n const signaled = (name, value) => notify(value); //two arguments for keyvalue pair. Notifies when updated\n threeCViews.addSignalListener(\"tbrush\", signaled); //Adds signal listener to our selection\n notify(threeCViews.signal(\"tbrush\")); //notifies when signal exists\n return () => threeCViews.removeSignalListener(\"timeBrush\", signaled); // removes signal listener to clear\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"TSelection = {\n if(isEmpty(mutable ObsDateSelection)) {\n return d3.extent(vanCrime2, d => dateFormat(timeParse(d.Date)))\n } else {\n return ObsDateSelection.Date.map( d => dateFormat(epochParse(d)))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2209,"value":"#### Getting the `nHood` selection from the map to filter the charts","pinned":false,"hidden":false,"mode":"md"},{"id":509,"value":"mutable nHood = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":2681,"value":"mutable nHoods = []","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":true,"hidden":false,"mode":"ojs"},{"id":2679,"value":"vHoods = Array.from(new Set(vanCrime2.map((d) => d.NEIGHBOURHOOD)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2670,"value":"mapSelection = {\n if (nHood == null) {\n return vHoods; //Set is a new datastructure in ES6 -> only unique values\n } else {\n return [nHood];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2668,"value":"mapSelections = {\n if (nHood == null) {\n mutable nHoods.length = 0; //remove all selections to date. reset selection array\n return vHoods;\n } else {\n if (nHoods.indexOf(nHood) == -1)\n //value is not in nHoods\n mutable nHoods.push(nHood);\n return nHoods;\n } // add the selected neighbourhood\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2173,"value":"#### Data structures and functions to set the `NEIGHBOURHOOD` map selection filter","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"viewof popMap = {\n let width = 400;\n let height = 350;\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 2}px`\n });\n\n yield container;\n\n let map = L.map(container, { maxZoom: 11, minZoom: 11 });\n let osmLayer = L.tileLayer(\n \"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png\",\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n let VanAreasLayer = L.geoJson(vanAreas, { style: style0 })\n .bindTooltip(function (Layer) {\n //binds a tooltip when clicking on each polygon\n return Layer.feature.properties.NAME;\n })\n .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\", {\n style: `width:${width}px;height:${width / 2}px`\n });\n\n yield container;\n\n let map = L.map(container, { maxZoom: 11, minZoom: 11 });\n let osmLayer = L.tileLayer(\n \"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png\",\n {\n attribution:\n '© OpenStreetMap contributors'\n }\n ).addTo(map);\n\n let VanAreasLayer = L.geoJson(vanAreas, { style: style })\n .bindTooltip(function (Layer) {\n //binds a tooltip when clicking on each polygon\n return Layer.feature.properties.NAME;\n })\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 );\n map.fitBounds(VanAreasLayer.getBounds());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"md `### Functions`","pinned":false,"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":323,"value":"mutable time = null","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++;iFullscreen`;\n button.onclick = () => button.parentElement.nextElementSibling.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md` ## Libraries and Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2587,"value":"import { toc } from \"@nebrius/indented-toc\" // This component generates the Table of Contents","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"V = require(\"@observablehq/vega-lite@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"embed = require(\"vega-embed@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"mutable selectedMap = [\"warmgreys\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md` ## Loading and Preparing Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"vanCrime = FileAttachment(\"vanCrime.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":2018,"value":"function getCCColor(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"},{"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"},{"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":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"nCrimes = function (NH,crimeTotals) {\n\n const nc = [];\n let i=0;\n let l = crimeTotals.length;\n\n for( i=0;i\n h1 { max-width: none; }\n h2 { max-width: none; }\n h3 { max-width: none; }\n p { max-width: none; }\n ol { max-width: none; }\n ul { max-width: none; }\n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W3e","stdlib":"1","titling":"auto"}