2e:null 2f:["$","title",null,{"children":"Passing Signals, adding event listeners, and composing Dashboards. | IAT355 | Observable"}] 34:T418,CrimeMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container let map = L.map(container).setView([49.2527, -123.1207], 11.5); 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", }).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 = vanCrime.features.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.1])); let crimeLayer = heatLayer(crimePoints).addTo(map); }35:T491,viewof CrimeMap2 = { let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container let map = L.map(container).setView([49.2527, -123.1207], 11.5); 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: onEachFeature }).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])); map.on('click', () => mutable nHood = null ); let crimeLayer = heatLayer(crimePoints).addTo(map); }36:[{"id":"db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","href":"https://static.observableusercontent.com/files/db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","name":"vanCrime.json","type":"application/json","lastModified":1574288626944.499,"size":4714349},{"id":"bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","href":"https://static.observableusercontent.com/files/bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","name":"VanAreas.json","type":"application/json","lastModified":1574288291153.802,"size":52832}] 32:{"id":"4110a8921475380c","slug":"passing-signals-adding-event-listeners-and-composing-dash","title":"Passing Signals, adding event listeners, and composing Dashboards.","thumbnail":"a4cfdef26deac5ad9d321d73e52e12bfa5ddd2b1b728ec466ea23447e31849e8","access_level":"public","create_time":"$D2019-11-20T22:11:05.682Z","update_time":"$D2019-11-21T22:21:49.238Z","view_time":null,"first_public_time":"$D2019-11-21T07:38:26.510Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"bb76b04514ce3a89","login":"sfu-iat355","name":"IAT355","avatar_url":"https://avatars-next.observableusercontent.com/ce1390a75a96b03254cb531c942dd8755b9cf7dc4451268e73f5ab0948bf0468","tier":"starter_2024"},"version":676,"publish_version":676,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bd525d9dcb42c64","login":"sfu-iat355","name":"IAT355","avatar_url":"https://avatars-next.observableusercontent.com/ce1390a75a96b03254cb531c942dd8755b9cf7dc4451268e73f5ab0948bf0468","tier":null}],"members":[{"type":"individual","id":"2bd525d9dcb42c64","login":"sfu-iat355","name":"IAT355","avatar_url":"https://avatars-next.observableusercontent.com/ce1390a75a96b03254cb531c942dd8755b9cf7dc4451268e73f5ab0948bf0468","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Passing Signals, adding event listeners, and composing Dashboards.","cells":[{"id":0,"value":"md`# Passing Signals, adding event listeners, and composing Dashboards.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md` This week we will be focusing on how to put all of your visualizations together to make them interactive, and how to view them. As a first step, we will look at how to pass signals between cells. Vega-lite abstracts away a lot of the work needed to handle filtering interactions when creating multi-view compositions. Composing dashboards using vega-lite may work fine for a lot of work you may want to do, but the reason we might want to pass signals between cells is if we want to use another library or visualization like leaflet, d3, or any other tool you find useful.\n\nLet's expand on what we covered last week. We were using leaflet. To reiterate, you may want to use leaflet if you want to have map that can zoom, pan, and supports other features like heatmaps. We will be using crime data from vancouver to create a heatmap. We will use Vega-lite visualizations to filter these visualizations. Here is our leaflet heatmap with area boundaries.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md` To start, let's create a simple bar chart. We use Vega's built in *view api* to add a signal (handles complex interactions at the vega view level) or event (simple interactions such as mouse clicks or keyboard presses) listeners in combination with *observables generators* to reactively connect two separate cells blocks. That is, an action taken in one cell block is reflected by an update in another cell instantaneously. Use [*view*.addSignalListener](https://vega.github.io/vega/docs/api/view/#view_addSignalListener) and [Generators.observe](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#Generators_observe) to adapt a Vega View to a reactive Observable cell. This is adapted from Mike Bostocks [Observing Vega Signals](https://observablehq.com/@mbostock/observing-vega-signals)\n\nWe name our selection so that we can access it later on. It will be a multi-selection click interaction that will return the fields we are interested in. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"viewof crimeBars = V({\n width: 300,\n height: 400,\n autosize: {\n type: \"pad\",\n //contains: \"padding\"\n },\n data: {values: vanCrime2},\n config: {\n background: \"white\"\n },\n transform: [\n //filter by our click selection\n //We need to tell vega-lite how to parse the dates we pass it for filtering using\n //our brush selection below\n {filter: {field: \"NEIGHBOURHOOD\", oneOf:mapSelection}}\n ],\n mark: \"rect\",\n selection: {\n offenseSelect: {fields: [\"Offense\"], on: \"click\", type: \"multi\"}\n },\n encoding: {\n x: {field: \"Offense\", type: \"nominal\"},\n y: {field: \"*\", type: \"quantitative\", aggregate: \"count\"},\n color: {field: \"Offense Category\", type: \"nominal\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md` Next, we add a signal listener to our visualization called \"crimeBars\". The code below adds a listener to our vega view to tell us when the signal is active. This allows us to connect between cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"ObsBSelection = 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 crimeBars.addSignalListener(\"offenseSelect\", signaled); //Adds signal listener to our selection\n notify(crimeBars.signal(\"offenseSelect\")); //notifies when signal exists\n return () => crimeBars.removeSignalListener(\"offenseSelect\", signaled); // removes signal listener to clear\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md` If there is nothing selected in the bar chart we have an empty JS object. If we use this as a variable for filtering in other vega-lite visualizations or data it will return as empty as well. We need to fill in the missing data. We can deal with this with a little bit of code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"bSelection = {\n if(isEmpty(ObsBSelection)){\n return Array.from(new Set(vanCrime2.map(d => d.Offense))) //Set is a new datastructure in ES6 -> only unique values\n } else {\n return ObsBSelection.Offense\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"function isEmpty( obj ) { \n for ( var prop in obj ) { \n return false; \n } \n return true; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md` To show you how this works. here is another chart that is filtered based on the data passed through our signal listener and observable generators.observe.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"Z = V({\n width: 700,\n height: 300,\n data: {values: vanCrime2},\n mark: \"area\",\n transform: [\n {filter: {field: \"Offense\", oneOf: bSelection}}, //filter by our click selection\n //We need to tell vega-lite how to parse the dates we pass it for filtering using\n //our brush selection below\n {filter: {timeUnit: \"yearmonthdate\",field: \"Date\", range: BrSelection}}\n ],\n encoding: {\n x: { field: \"Date\", type: \"temporal\"},\n y: {field: \"*\", type: \"quantitative\", aggregate: \"count\"},\n color: {field: \"Offense Category\", type: \"nominal\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md` We can do the same for brushes. Although it gets a little bit tricky. When we create a brush selection on a date field. What we are returned is an \"epoch\" or \"unix Timestamp\". We will need to convert this, or use the array accessible within the compiled vega spec which is created whenever we create a selection. This array is named by simply appending _store to our selection name. Here we can access the underlying data in the normal format.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"viewof crimeTime = V({\n width: 500,\n height: 300,\n data: {values: vanCrime2},\n mark: \"area\",\n transform: [\n {filter: {field: \"Offense\", oneOf: bSelection}} //filter by our click selection\n //We need to tell vega-lite how to parse the dates we pass it for filtering using\n //our brush selection below\n \n ],\n selection: {\n timeBrush: {type: \"interval\", encodings: [\"x\"]}\n },\n encoding: {\n x: {field: \"Date\", type: \"temporal\"},\n y: {field: \"*\", type: \"quantitative\", aggregate: \"count\"},\n color: {field: \"Offense Category\", type: \"nominal\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md` We add our signal listener and observe it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"mutable ObsBrSelection = 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 crimeTime.addSignalListener(\"timeBrush\", signaled); //Adds signal listener to our selection\n notify(crimeTime.signal(\"timeBrush\")); //notifies when signal exists\n return () => crimeTime.removeSignalListener(\"timeBrush\", signaled); // removes signal listener to clear\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"BrSelection = {\n if(isEmpty(mutable ObsBrSelection)){\n // use d3 to get min and max and format them correctly\n // we need to convert the string date to UTC so d3 can parse it\n // for its extent function. Then we convert it back to the same format\n return d3.extent(vanCrime2, d => dateFormat(timeParse(d.Date))) \n } else {\n // The returned data is UNIX Epoch format, meaning it is in milliseconds.\n // We need to convert it to UTC and then to the date format used in our data.\n return ObsBrSelection.Date.map(d => dateFormat(epochParse(d)))\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"//mutable bakeselect = BrSelection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"timeParse = d3.timeParse(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"dateFormat = d3.timeFormat(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"epochParse = d3.timeParse(\"%Q\"); //milliseconds UNIX epoch","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md` ## Adding event listener to leaflet\nWe will be adding a simple event listener to our leaflet map. To do this we will move away from using a self-contained codeblock so that we don't run into scoping issues.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"//We are writing the event listener function for each feature in our geojson layer\nfunction onEachFeature(feature, layer) {\n layer.on({\n click:whenClicked //callback function\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"//We update our data in the function using mutable. This overrides observables defaults so we can push data from within //function scope globally\nwhenClicked = (event) => {\n mutable nHood = event.target.feature.properties.NAME\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"//We define an null variable to be replaced by our callback function\nmutable nHood = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"mapSelection = {\n if(nHood == null ){\n return Array.from(new Set(vanCrime2.map(d => d.NEIGHBOURHOOD))) //Set is a new datastructure in ES6 -> only unique values\n } else {\n return [nHood]\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"md` ## Filtering Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"FilteredFlatCrimes = {\n mutable circBreak = vanCrime2.filter(d => bSelection.includes(d.Offense))\n .filter(d => mapSelection.includes(d.NEIGHBOURHOOD))\n .filter(d => timeParse(d.Date) >= timeParse(BrSelection[0]) && timeParse(d.Date) <= timeParse(BrSelection[1]))\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"mutable circBreak = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"FilteredGeoCrimes = {\n return new Object({type: \"FeatureCollection\", features: vanCrimeFiltered })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"vanCrimeFiltered = vanCrime.features.filter(d => bSelection.includes(d.properties.Offense))\n .filter(d => timeParse(d.properties.Date) >= timeParse(BrSelection[0]) && timeParse(d.properties.Date) <= timeParse(BrSelection[1]))\n .filter(d => mapSelection.includes(d.properties.NEIGHBOURHOOD))\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"md` ## Putting our visualizations together`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"{\n const button = html`