31:T53d,md` For the remainder of our tutorials we will be focusing on how to put our visualizations together and package them up for showcasing or including in a portfolio. 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. For our notebook we will once again be using the Vancouver Crime Data. We will also be using leaflet. In this tutorial we will be filtering leaflet using vegalite. Next week, we will cover how to go both ways. Make sure you are using leaflet only if you have to. It is useful for when you want to use zooming, panning, and other plugins (although, we have been having trouble getting these to work in observable. The heatmap is working well). For reference, if you want to get a D3 layer to be interactive in leaflet, there are some extra configurations we didn't cover last week. There is an updated notebook covering this topic: [interactive d3+leaflet](https://observablehq.com/@sfu-iat355/intro-to-leaflet-d3-interactivity). `32:T64b,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 = vanCrime.features.map(feature => feature.geometry.coordinates.slice().reverse().concat([0.5])); //We add this layer to the map. let crimeLayer = heatLayer(crimePoints).addTo(map); map.fitBounds(VanAreasLayer.getBounds()); }33:[{"id":"bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","href":"https://static.observableusercontent.com/files/bfe0cb5889fc8ced7544cb5a75916fb0b3a8bbd750cfe70c370a1b953c46b0a011685e60c9144809e9d659acd26a099505a87448f408d853337692f2ec346e57","name":"VanAreas.json","type":"application/json","lastModified":1574447639684.352,"size":52832},{"id":"db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","href":"https://static.observableusercontent.com/files/db091350144a3869855be695026b997c8d9e357f3eb9858a1ea0249b4f671fa97596bb17c3fc95fbea7e24c58d84b20fedde00b066fd6821a34c6e78725251c4","name":"vanCrime.json","type":"application/json","lastModified":1574447639684.352,"size":4714349}] 2f:{"title":"Passing Signals Between Cells","cells":[{"id":0,"value":"md`# Passing Signals Between Cells`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md` To start we will just be making a simple bar chart for the different types of offenses in our data. Again, this is data we have flattened from our geojson file. We will be adding a selection called \"offenseSelect\" and have it operate on the \"offense\" field. this will be the dat we will be using to filter the leaflet map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof crimeBars = V({\n width: 400,\n height:300,\n data: {values: vanCrime2},\n config: {\n background: \"white\"\n },\n mark: \"rect\",\n selection: {\n offenseSelect: {fields: [\"Offense\"], on: \"click\", type: \"multi\"}\n },\n \n encoding: {\n x: {field: \"Offense\", type: \"nominal\"},\n y: {field: \"*\", type: \"quantitative\", aggregate: \"count\"},\n color: {\n condition:{\n field: \"Offense Category\", \n type: \"nominal\", \n selection: \"offenseSelect\",\n scale: {\n domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), \n range: [\"#4e79a7\",\"#f28e2c\",\"#e15759\",\"#76b7b2\"]}},\n value: \"lightgrey\",\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md` Notice, we specified our vega visualization using [viewof](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof), which in effect allows us to return values from within the cell. We will use this to extract our signal. To this we will be using the vega view api [*view*.addSignalListener](https://vega.github.io/vega/docs/api/view/#view_addSignalListener) method. This allows us to access the internals of a vega or vegalite visualization. We write a function that updates an external variable that we will use to filter subsequent visualizations. Recall that cells in Observable are immutable, meaning we cannot redefine the in other places. Sometimes we will want to do this and for this reason, Observable provides the mutable primitive data type. This allows us to pass data from our call back function to an external variable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"crimeBars.addSignalListener(\"offenseSelect\", function(name, value){\n if (value == null)\n mutable type = null\n else\n mutable type = value.Offense\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"md` Here we define out mutable variable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"mutable type = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md` What happens if we have nothing selected? If we are using the contents of our mutable variable *type* as a filter for an array or within another spec, we will likely return an empty data structure (this is the case when we are filtering *for* not filtering *out* based on this selection). To get around this we need to change the value based on the complete set of potential values (e.g. we need an \"all\" set). To do this we will use a new javascript data structure called set. set is convenient because it can only handle unique values and gets rid of duplicates. Since this is an object, we will turn it to an array using \"Array.from\". We write a conditional to determine if we have any elements in our mutable variable. We need to write another simple function \"isEmpty\" which simply iterates over elements in our variable, if there are not elements it will not execute the iteratable (return false), and if there are it will go to the next element and return true.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"bSelection = {\n if(isEmpty(type)){\n return Array.from(new Set(vanCrime2.map(d=> d.offense)))\n } else {\n return type}}","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`We may also want to work with a temporal visualization. for this we can create an line chart. We will be adding a signal listener for this visualization as well. Working with dates has its own challenges. We add a selection called timebrush in this visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"viewof crimeTime = V({\n width: 600,\n height: 200,\n config: {\n background: \"white\"\n },\n data: {values: vanCrime2},\n\n mark: \"line\",\n selection: {timeBrush: { type: \"interval\", encodings: [\"x\"]}\n },\n\n encoding: {\n x: {field: \"Date\", type: \"temporal\"},\n y: {field: \"*\", type: \"quantitative\", aggregate: \"count\"},\n color: {field: \"Offense Category\", type: \"nominal\", scale: {domain: Array.from(new Set(vanCrime2.map(d => d['Offense Category']))), range: [\"#4e79a7\",\"#f28e2c\",\"#e15759\",\"#76b7b2\"]}}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"md` **Challenge**: add a signal listener to the selection brush we have created above and make the callback function update a mutable variable called \"time\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"crimeTime.addSignalListener(\"timeBrush\", function(name, value){\n if (value == null)\n mutable time = null\n else\n mutable time = value\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"mutable time = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`Now that we have our time variable, you may notice that the data we are getting back looks incoherent. This is actually using UNIX Epoch which is a format using milliseconds. We can use d3 to format this and get it to do what we want to. We want all of our dates to be consistent across all systems. We will use d3.timeParse to extract the temporal data from text, and d3.timeFormat to format it the way we want it. It needs to be consistent with the rest of the data. We will write some functions bellow using these methods and use time formatting directives to accomplish this. First, we need to parse this epoch format.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"epochParse = d3.timeParse(\"%Q\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`This will give us a date back in UTC time format which is a standard time format that d3 and other systems recognize. From this we will need to format it to be consistent with our data. For this we will use d3.timeFormat with the appropriate directives to produce a date like \"05/02/18\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"dateFormat = d3.timeFormat(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`Finally, we need to address what happens when our selection is empty. Since we are working with a range here we will need to get the minimum and maximum values from the dataset. d3.extent conveniently lets us get minimum and maximum values out from a variety of datatypes including dates. If we don't convert the dates from our underlying data to UTC format we, d3 will just be getting minimum and maximum values of the strings which will not evaluate to the correct extent. We need to convert the date to UTC format using d3.timeParse.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"timeParse = d3.timeParse(\"%m/%d/%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"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 }}","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`Next we create a variable that populates an array with the date dates that reflect our selection for filtering.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`**Challenge:** add the selections transform filters to each of our vegalite specs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md` Now we will be creating our leaflet map for our vegalite visualizations to be filtering. We will use the leaflet plugin, which we have loaded in below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`To filter the map we will create a new geojson file that is filtered based on our vegalite selections.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md` In order to filter the geojson, we will need to access it as a flat array to perform our array methods. We define a new cell to hold this value. To filter the geojson, we chain two filter methods. Since, we will sometimes have an array with multiple values for our multiple offense types, we need to evaluate if our data matches any of the values in our selection array. To do this we are going to use the .includes() array method for each datum d. if it evaluates true, this value is included in our final array, if not then it is excluded. Next we have to handle the date range. We use our timeparse function to convert the contents in our selection array to UTC format so that we can compare the values. Then we write simple inequalities using a logical AND gate. SO, if the date in question is greater than the lower end of our brush AND less than the upper end of our brush, include the data, otherwise get rid of it. We chain these togeher.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`**Challenge:** write the filter component for filtering the dates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"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]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"md` Next we have to convert this flat array back to geojson. To do this, we create a new object of \"type: \"FeatureCollection\"\" to get it into the format of a geoson. The features is our filtered array of objects.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"FilteredGeoCrimes={\n return new Object({type: \"FeatureCollection\", features: vanCrimeFiltered})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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 the formatting to work correctly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"{\n const button = html`