2d:null 2e:["$","title",null,{"children":"Advanced Interaction with Multiple Views | IAT355 | Observable"}] 33:T55f,viewof crimeCharts = V({ width: 400, height:300, data: {values: vanCrime2}, 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"]}} } }] })34:T691,viewof CrimeMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container let map = L.map(container); 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. //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.3])); //We add this layer to the map. let crimeLayer = heatLayer(crimePoints, { radius: 18, maxZoom: 16 }).addTo(map); map.fitBounds(VanAreasLayer.getBounds()); }35:[{"id":"bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","href":"https://static.observableusercontent.com/files/bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","name":"VanAreas.json","type":"application/json","lastModified":1574815719543.808,"size":52832},{"id":"db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","href":"https://static.observableusercontent.com/files/db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","name":"vanCrime.json","type":"application/json","lastModified":1574815719543.808,"size":4714349}] 31:{"id":"b40af1ac94703575","slug":"advanced-interaction-with-multiple-views","title":"Advanced Interaction with Multiple Views","thumbnail":"9632cf3bd2cbf76a668a0eaae2654e8f78cfa57db5b404854ed630e71d30e860","access_level":"public","create_time":"$D2019-11-27T00:48:39.543Z","update_time":"$D2019-11-27T19:29:46.455Z","view_time":null,"first_public_time":"$D2019-11-27T04:57:42.301Z","fork":{"id":"d1df6afd4c813de2","slug":"passing-signals-between-cells/3","title":"Passing Signals Between Cells","owner":{"id":"bb76b04514ce3a89","login":"sfu-iat355","name":"IAT355"}},"stars":5,"starred":false,"owner":{"type":"team","id":"bb76b04514ce3a89","login":"sfu-iat355","name":"IAT355","avatar_url":"https://avatars-next.observableusercontent.com/ce1390a75a96b03254cb531c942dd8755b9cf7dc4451268e73f5ab0948bf0468","tier":"starter_2024"},"version":504,"publish_version":504,"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":35,"collection":{"id":"d3c2396700c21b0f","slug":"tutorials","title":"Tutorials","owner":{"id":"bb76b04514ce3a89","login":"sfu-iat355","name":"IAT355"}},"type":"notebook","body":{"title":"Advanced Interaction with Multiple Views","cells":[{"id":348,"value":"md`# Advanced Interaction with Multiple Views\n\nTo review from last week. We created multiple vega visualizations to filter a single heatmap. We will be revisiting this example today to filter visualizations based on map selections. We will also use a CSS grid template to construct a dashboard. Finally we will go over how to embed your notebook on a website.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"md` Here we have two vega visualizations horizontally concatenated and filtering each other using the selections.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md` ## Helper 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":true,"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":404,"value":"md` ## Vega Signal Listeners and Event Variables`","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)\n mutable type = null\n else\n mutable type = value.Offense\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"mutable type = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"bSelection = {\n if(isEmpty(type)){\n return Array.from(new Set(vanCrime2.map(d => d.Offense)))\n } else {\n return type\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","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":409,"value":"md` # Filtering using the map.\nNow that we have two charts that are filtering each other, we can focus on getting the map to filter the other views. We can use leaflet's built in helper functions to handle interactions. We will be using the \"onEachFeature\" functionality built into the GeoJson component of leaflet. Basically, this executes a function on each feature in the GeoJson before it gets added to the map. We can add our callback function and event listener here. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"md` Here we write a function that adds an even listener on each layer and calls a callback function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"md` Our callback function, just like last week, sets the value of a mutable variable to a value we are interested in within our geojson. In this case, the name of the neighbourhood.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"md` Again, we create a cell with an array that stores our selection values. We have to populate it with all the unique values within our dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"md` Now we have to add our new selection to all the places where we are going to be filtering. This will include out vega-lite specs as well as the map itself.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md` ## Filtered Map Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"md ` **Challenge:** filter the map data based on the mapselection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"vanCrimeFiltered = vanCrime.features.filter(d => bSelection.includes(d.properties.Offense))\n .filter(d => timeParse(d.properties.Date) >= timeParse(TSelection[0]) &&\n timeParse(d.properties.Date) <= timeParse(TSelection[1]))\n ","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"md `**Challenge:** Add a filter transform using this data to your vega-lite spec.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md` Great! let's try out our filter. Oh no you may notice that we cannot de-select the filter. In order to do this, we have to add another event-listener for when we ever click anywhere else on the map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`## putting them together\nTo put our visulizations side by side, we can use a css grid to get them to show up next to each other. you can play with the size here. I am still figuring out how to get Vega-lite to fit properly. For now you can just play with width/height attributes to make it fit in view. In the html we are simply creating a [css grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). we scale the grid to the viewport. We also add a fullscreen capability with Observables built in *.requestFullScreen()* Method. In this grid we are only creating two divs \"a\" & \"b\" for each of our visualizations. You can create as many as you like. The power of this approach is that you can scale and style them any way you like. Follow the above link for more details on how to create a grid template. We then add our visualiztions using [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"{\n const button = html`