2b:null 2c:["$","title",null,{"children":"Exploring maps, signals and cells in the Vancouver Crime Map version 2 | IAT 355 Instructors | Observable"}] 31:T6d8,md`# Exploring maps, signals and cells in the Vancouver Crime Map version 2 This is an updated version of an earlier workbook now using the vl API instead of the vega JSON declarative form.
This workbook explores how the VL api and the Leaflet mapping api can be used together, and explores some newer map features in Leaflet, including layer controls. I examine how we can use *signals* and *event listeners* to connect separate view cells for brushing and linking. **Disclaimer**: this is still a work in progress. ## 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. `32:T6f6,viewof crimeBars = { /* 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 crimeChart = vl .markBar() .width(500) .data(vanCrime2) .title("Vancouver Non-Violent Crimes Totals by Offense Type Summer 2016") //.params(selectedBar) // 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().fieldN("Offense Category").scale({ range: OffenseCatColors }) // .if(selectedBar, vl.fieldN("Offense Category")) // .value("grey"), // if point selected, use default color, otherwise grey // vl.opacity().if(selectedBar, vl.value(0.7)).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).render(); }33:T5a8,viewof crimeTL = { /* const selectedPoint = vl .selectPoint("selected_pt") // create our selection param .fields("Offense Category") // 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 crimeTimes = vl .markLine({ opacity: 0.7, strokeWidth: 3 }) .data(vanCrime2) .width(600) // .params(selectedPoint) .title("Vancouver Non-Violent Crime Trends by Offense Category Summer 2016") .encode( vl.x().fieldT("Date"), vl.y().fieldN("*").aggregate("count"), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }) // vl.opacity().if(selectedPoint, vl.value(0.7)).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(selectedPoint.empty(false))) // show text for selection but only if a selection exists - is not working .encode( vl.x().fieldT("Date"), vl.y().fieldN("*").aggregate("count"), vl.text().fieldQ("*").aggregate("count") ); */ return vl.layer(crimeTimes).render(); }34:T7fc,## Selections and brushing Now 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`, meaining 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. 35:T7a6,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('grey'), // .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(); }36:T48c,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() // .encodings("x") .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.37:T5a8,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(); }38:T6d8,## 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:

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"); ~~~

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) ~~~

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. To do this, we need to specify the filter operation in the barchart: ~~~ .transform(vl.filter(selectTimeBrush)) ~~~ and now when we brush the timeline, we get recalculated values in the related bars. 39:T88c,{ // 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)) //.width(600) .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, 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() //.width(600) .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 }), // .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(); }3a:T8e4,viewof crimeViews = { // set the selection interactions to be able to select either an offense type, an offense category, or a time interval const selectTimeBrushCat = vl.selectInterval("tbrush").encodings("x"); const selectCat = vl .selectPoint("selectedCat") .on("click") // select on click .fields("Offense Category") // select all crimes of the same category .toggle(true); // allow for multi-select (on by default) with shift-click const selectType = vl .selectPoint("selected_pt") .on("click") // select on click //.bind("legend") .fields("Offense", "Offense Category") // select all crimes of the same type .toggle(true); // allow for multi-select (on by default) with shift-click // mutable SelectedCategory = this.data("selectCat_store"); const crimeTrendsCat = vl .markLine({ strokeWidth: 2 }) .data(vanCrime2) .transform(vl.filter(selectType)) .params(selectTimeBrushCat, selectCat) .height(250) .width(350) .title("Non-Violent Crime Trends by Category Summer 2016") .encode( vl.x().fieldT("Date"), vl .y() .fieldQ("*") .count() .scale({ domain: [0, 120] }), vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }), vl.opacity().if(selectCat, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.99, otherwise 0.1 ); const crimeBars = vl .markBar() .width(200) .data(vanCrime2) .params(selectType) .title("Vancouver Non-Violent Crime Offense Totals Summer 2016") .transform(vl.filter(selectTimeBrushCat)) .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: -60 }), // .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 ); return vl.hconcat(crimeBars, crimeTrendsCat).render(); }3b:Tde5,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().encodings("x"); const selectTimeBrushCat = vl.selectInterval().encodings("x"); 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 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 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, 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 crimeTrendsCat = vl .markLine({ strokeWidth: 2 }) .data(vanCrime2) //.transform(vl.filter(selectTimeBrush)) .transform( vl.filter(selectType), vl.filter(selectTimeBrush), vl.filter({ field: "NEIGHBOURHOOD", oneOf: mapSelection }) ) .params(selectTimeBrushCat) //.params(selectTimeBrush) .title("Non-Violent Crime Trends by Category Summer 2016") .encode( vl.x().fieldT("Date"), vl.y().fieldQ("*").count(), // .scale({ domain: [0, 120] }) vl.color().fieldN("Offense Category").scale({ range: OffenseCatColors }) //vl.opacity().if(selectCat, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, 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: "right", offset: -250 }), // .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 .vconcat(crimeBars, vl.hconcat(crimeTrends, crimeTrendsCat)) .render(); }3c:T7b0,viewof CrimeMap = { let width = 900; let height = 400; let container = DOM.element("div", { style: `width:${width}px;height:${width / 2}px` }); yield container; let map = L.map(container, { maxZoom: 18, minZoom: 12 }); let osmLayer = L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", { attribution: '© OpenStreetMap contributors' } ).addTo(map); let VanAreasLayer = L.geoJson(vanAreas, { //instantiates a new geoJson layer using built in geoJson handling weight: 2, //Attributes of polygons including the weight of boundaries and colors of map. color: "#432", onEachFeature: areaClick }) .addTo(map) .bindPopup(function (Layer) { //binds a popup when clicking on each polygon to access underlying data return Layer.feature.properties.NAME; }); // .addTo(map); //Adds the layer to the map. //This function formats our geojson file to be commensurate with leaflet. Geojson files are formatted using //[lon, lat], we need to reverse this. we are creating an arrray of "feature(s)", that hold two lat lon coordinates // and we reverse them. We then concatenate (or add on) final value which is the intensity. This is the strength of // of each of these points. This heat map works by overlapping points and the added intensity of each dot changes the // color based on hot spots. let crimePoints = FilteredGeoCrimes.features.map((feature) => feature.geometry.coordinates.slice().reverse().concat([0.1]) ); //We add this layer to the map. let crimeLayer = heatLayer(crimePoints, { gradient: { 0.0: "darkgreen", 0.5: "green", 1.0: "purple" }, radius: 8, blur: 5, maxZoom: 16, minZoom: 16, scaleRadius: true, max: 0.1 }).addTo(map); map.on("click", () => (mutable nHood = null)); map.fitBounds(VanAreasLayer.getBounds()); }3d:Td94,## Signals and event listeners 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`*. 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 to the map and vice versa. You can see that I have two types of these signals that affect the above selection sets:
1. `otype` : the selection from the `Offense Type` barchart; 2. `mapSelection`: the selection of the neighbourhood from the map 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 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.

##### Offense Type Selecting an `Offense` type from the barchart and filtering the map view uses the following chain : - we define a global variable `otype` using the `mutable` keyword (just means accessible across cells); - we define a signal listener as an external function on the entire `threeCViews` cell thus using the `selected_pt` from `selectPoint` ~~~ threeCViews.addSignalListener("selected_pt", function (name, value) { if (value == null) mutable otype = null; else mutable otype = value.Offense; }) ~~~ - 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; - 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; } } ~~~ - We use the `bSelection` to filter the data array of crimePoints ~~~ vanCrimeFiltered = vanCrime.features .filter((d) => bSelection.includes(d.properties.Offense)) ... ~~~ - and 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}) } ~~~ 3e:T484,viewof cBars = { const selectCat = vl .selectPoint("selected_cat") .on("click") // select on click .bind("legend") .fields("Offense Category") // select all crimes of the same category .toggle(true); // allow for multi-select (on by default) with shift-click const selectType = vl .selectPoint("selected_pt") .on("click") // select on click .fields("Offense", "Offense Category") // select all crimes of the same type .toggle(true); // allow for multi-select (on by default) with shift-click const offenseBars = vl .markBar({ cursor: "pointer", tooltip: true }) .data(vanCrime2) .title("Vancouver Non-Violent Crime Total Offenses Summer 2016") .params(selectType, selectCat) .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 }), vl.opacity().if(selectType, vl.value(0.99)).value(0.1) // if point selected, use opacity 0.7, otherwise 0.1 ); return offenseBars.render(); }3f:T5db,viewof crimeCharts = V({ width: 400, height:300, data: {values: vanCrime2}, transform: [ {filter: {field: "NEIGHBOURHOOD", oneOf: mapSelection}} ], config: { background: "white" }, hconcat: [{ transform: [ {filter: {selection: "timeBrush"}} ], mark: "rect", selection: { offenseSelect: {fields: ["Offense"], on: "click", type: "multi"} }, encoding: { y: {field: "Offense", type: "nominal"}, x: {field: "*", type: "quantitative", aggregate: "count"}, color: { condition: { field: "Offense Category", type: "nominal", selection: "offenseSelect", scale: { domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), range: ["#4e79a7","#f28e2c","#e15759","#76b7b2"]}}, value: "lightgrey" } } }, { transform: [ {filter: {selection: "offenseSelect"}} ], width: 400, mark: "line", selection: { timeBrush: {type: "interval", encodings: ["x"]} }, encoding: { x: {field: "Date", type: "temporal"}, y: {field: "*", type: "quantitative", aggregate: "count"}, color: {field: "Offense Category", type: "nominal", scale: {domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), range: ["#4e79a7","#f28e2c","#e15759","#76b7b2"]}} } }] })40:T668,viewof vanCMap = { let width = 900 let height = 400 let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container let map = L.map(container, { maxZoom: 18, minZoom: 11 }); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let VanAreasLayer = L.geoJson(vanAreas, { //instantiates a new geoJson layer using built in geoJson handling weight: 3, //Attributes of polygons including the weight of boundaries and colors of map. color: "#ddd", 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. let crimePoints = FilteredGeoCrimes.features.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.1])); //We add this layer to the map. let crimeLayer = heatLayer(crimePoints, { gradient: { 0.0: 'darkgreen', 0.5: 'green', 1.0: 'purple' }, radius: 10, blur:15, maxZoom: 16, minZoom: 16, scaleRadius: true, max: 0.1 }).addTo(map); map.on('click', () => mutable nHood = null ); map.fitBounds(VanAreasLayer.getBounds()); }41:[{"id":"bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","href":"https://static.observableusercontent.com/files/bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","name":"VanAreas.json","type":"application/json","lastModified":1664472313681.209,"size":52832},{"id":"db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","href":"https://static.observableusercontent.com/files/db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","name":"vanCrime.json","type":"application/json","lastModified":1664472313681.209,"size":4714349}] 2f:{"id":"2f6b14fd93d3f429","slug":null,"title":"Exploring maps, signals and cells in the Vancouver Crime Map version 2","thumbnail":"6b91335e964200ae6bd42395d48378d71c6db3f479265504da56f76ce993efbc","access_level":"public","create_time":"$D2022-09-29T17:25:13.681Z","update_time":"$D2023-03-20T19:12:03.131Z","view_time":null,"first_public_time":"$D2022-11-02T23:15:24.438Z","fork":{"id":"c6e3447d9d792b2b","slug":"vancouver-crime-map","title":"Vancouver Crime Map","owner":{"id":"4a0762a387ec748f","login":"drlynb","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"7e6e24f56083b659","login":"iat355","name":"IAT 355 Instructors","avatar_url":"https://avatars-next.observableusercontent.com/456faf8cd1b3834762f41707a963f2b80c59955f609529918a53471725486440","tier":"starter_2024"},"version":2242,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"90a5d909f6de8793","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":null}],"members":[{"type":"individual","id":"90a5d909f6de8793","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":null,"role":"editor"},{"type":"team","id":"7e6e24f56083b659","login":"iat355","name":"IAT 355 Instructors","avatar_url":"https://avatars-next.observableusercontent.com/456faf8cd1b3834762f41707a963f2b80c59955f609529918a53471725486440","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Exploring maps, signals and cells in the Vancouver Crime Map version 2","cells":[{"id":348,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"OffenseCats = Array.from(new Set(vanCrime2.map((d) => d[\"Offense Category\"])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"OffenseTypes = Array.from(new Set(vanCrime2.map((d) => d[\"Offense\"])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"OffenseCatColors = [\"#f28e2c\", \"#e15759\", \"#4e79a7\", \"#76b7b2\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"md`## Patterns related to crime occurrence\nWhat are the key patterns of vancouver non-violent crimes? The goal of our visualization dashboard is to help the user to relate where and what crimes occur. In the bar charts, crime totals are organized by \\`Offense Type\\` (totals in the bar chart) and encoded by \\`Offense Category\\` (colour). In the line chart, crime totals by \\`Offense Category\\` are shown by date. Selecting one or more bars, range on the timeline, or area(s) in the map will update the other views accordingly. Double click outside the selectable area on any view to reset the values to \\`all\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md` ## Component Views`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"These are the vl API versions of the bar chart and the line chart.
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1459,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1457,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1348,"value":"## Layering data views\nYou will probably notice that to get the text fields to show in the above views, 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. Working 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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1372,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1505,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"### Multiway filtering\nWhat if we want to have a cumulative total by time and by trends using the hierarchical field of `Offense Category`? We simply define a timeline view using that field rather than `Offense` as the level of detail. Now we can bind the selections to the legend as well, as all selectable points are at the same level of detail.

\nNOw i can select one or more `Offense` types in the bar chart and the totals are dynamically recalculated due to the `vl.transform().filter(SelectType)` operation. I still use the opacity alteration to brush the barcharts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1701,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1885,"value":"SelectedType = crimeViews.data(\"selected_pt_store\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"SelectedTime = crimeViews.data(\"tbrush_store\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1857,"value":"Let me try to get the data about the mulitple selection from the Vega `view` API.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1840,"value":"### Exploring event listeners\nWhat about if we explicitly use d3 event listeners? Here I am setting an event listener to catch the select events on the bars (`cBars`) and give me the selected object so that i can find what is in the actual data. I do this becaue the vega-lite API makes it very difficult to get the actual data from a selection. I want to be able to collect the multiple `Offense` bars that are selected, so i can apply some logic to defeat the `Offense Category` toggle identified above. But the `clicked()` event only returns one single selection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1745,"value":"### Filtering and brushing extended\nBut what i really want to do is combine all 3 views, so that I have a cumulative bar chart of `Offense` types, coloured by what `Offense Category` they belong to, and two timelines, one that shows the trends of each individual `Offense` as well as the aggregate of all these into their `Offense Category`. I have two approaches i can take to integrate these views:\nMoreover, I want to be able to cross-filter on all of these, so a selection in one causes either a brush or a filter in the others.

\n1. Filter dynamically across all 3 views, using concatenated filters in the `vl.transform()` operation. This is what I do below in the cell `threeCViews`.\n2. Brush between the views using a new layer and vega-lite crossfilters. This is what i do in the following cell `threeCBrushed`(in progress).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1671,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2112,"value":"## Leaflet\nLet's add an interactive nmap made with the js mapping library `Leaflet` 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*:\n1. A base map retrieved from the `OpenStreetMap` GIS database (`osmLayer`;\n2. 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;\n3. A layer of crime locations as points from the array `crimePoints` (`crimeLayer`) coloured by density using a `heatLayer` function from an extension to the Leaflet library `leaflet.heat.\n
\n\nI want to add this map view to the set of views that are connected by interactions such that a selection in the crimeViews dashboard changes the map, and vice versa. But the map is in a separate Observable `cell`, and thus we need to use explicit mechanisms to pass selection events back and forth between them.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2134,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2171,"value":"#### Data structures and signal functions to set the `Offense` selection filter in the map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"mutable otype = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2100,"value":"threeCViews.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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"bSelection = {\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"vanCrimeFiltered = 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":2209,"value":"#### Getting the `nHood` selection from the map to filter the charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2173,"value":"#### Data structures and functions to set the `NEIGHBOURHOOD` map selection filter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"mutable nHood = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"//We are writing the event listener function for each feature in our geojson layer\nfunction areaClick(feature, layer) {\n layer.on({\n click:whenClicked //callback function\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"crimeCharts.addSignalListener(\"offenseSelect\", function (name, value) {\n if (value == null) mutable otype = null;\n else mutable otype = value.Offense;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1793,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":760,"value":"html`

${viewof popMap}

${viewof densityMap}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"md `\nHere we see crimes related to density, with a new measure of Space/person (sq meters). We've used a log scale to tease out crime patterns. Because we are interested in vehicular vs non vehicular crimes, we split the two into separate scatterplots. From this we can see that vehicle collisions are less common and clump in medium desnity neighbourhoods. One might ask why?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"cBar=embed({\n \"title\": selectedNeighbourhoods,\n \"width\": 300,\n \"height\": 300, \n data: \n {\n values: crimeDensityTotal\n },\n transform: [\n {filter: {field: \"NEIGHBOURHOOD\", oneOf: mapSelection}} \n ],\n mark: \"point\",\n encoding: {\n \"facet\": {\n \"field\": \"Offense Type\",\n \"type\": \"ordinal\"\n },\n y:{\n aggregate: \"mean\", \n field: \"sqm\",\n \"scale\": {\"domain\": [0, 500]},\n type: \"quantitative\",\n \"axis\": {\"title\": \"Space/person\"}\n },\n x:{\n aggregate: \"count\", \n field: \"Offense\", \n type: \"quantitative\",\n \"scale\": {\"type\": \"log\"},\n \"axis\": {\"title\": \"Number of crimes\"}\n },\n color:{ field: \"Offense\", type:\"nominal\",\"scale\": {\"scheme\": \"category10\"}},\n \"detail\": {\"field\": \"NEIGHBOURHOOD\",\"type\": \"nominal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"md `### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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","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","output":"$undefined","database":"$undefined"},{"id":331,"value":"timeParse = d3.timeParse(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"dateFormat = d3.timeFormat(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1847,"value":"html``","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1940,"value":"html``","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2161,"value":"html``","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"md` ## Vega Signal Listeners and Event Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"crimeCharts.addSignalListener(\"timeBrush\", function(name, value) {\n if (value == null)\n mutable time = null\n else\n mutable time = value\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"mutable time = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":848,"value":"selectedNeighbourhoods = selectedNames(mapSelection);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":904,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md` ## Libraries and Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"V = require(\"@observablehq/vega-lite@0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":624,"value":"embed = require(\"vega-embed@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"mutable selectedMap = [\"warmgreys\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md` ## Loading and Preparing Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"vanCrime = FileAttachment(\"vanCrime.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"vanCrimeID = {\n let i = vanCrime.features.length;\n let j = 0;\n let k = 0;\n let temp = {};\n let newCrimeArray = vanCrime.slice();\n // for (k = 0; k < i; k++) {\n // newCrimeArray.features[k] = vanCrime.features[k];\n // }\n return newCrimeArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$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","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2029,"value":"nCrimes = function (NH) {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2016,"value":"function crimeCounts(crimes,areas) {\n {\n let i=0;\n let j=0;\n let ca = deepCopy(crimes);\n// for(i=0;i < ca.length;i++)\n for(i=0;i < ca.length;i++)\n {\n //console.log(\"Crime: \",i);\n j=0;\n while (j < vanAreas.features.length)\n {\n if (ca[i].NEIGHBOURHOOD == vanAreas.features[j].properties.NAME)\n {\n //newtestcrime[i] = ca[i];\n \n ca[i].density = +vanAreas.features[j].properties.density;\n ca[i].population = +vanAreas.features[j].properties.population;\n ca[i].sqm = vanAreas.features[j].properties.localArea/vanAreas.features[j].properties.population;\n };\n j++;\n }\n //newtestcrime[i] = carray[i];\n //newtestcrime[i].density = vanDensity.objects.VancouverAreaSize.geometries[j].properties.density;\n //console.log (\"Found \", i, \": \",newtestcrime[i].Offense, \" \", newtestcrime[i].NEIGHBOURHOOD, \" \", newtestcrime[i].density);\n } \n //console.log(i,\": \",ca[i-1]);\n //ca.slice(0,num);\n // if (newtestcrime[i-1] == null) \n return(ca);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"vanAreas = FileAttachment(\"VanAreas.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"vanAreaValues2 = d3.json(\"https://www.sfu.ca/~lyn/data/Urban/VancouverAreaSizeTopo.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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