2e:null 2f:["$","title",null,{"children":"CS 465 Tutorial 3 - Interactive Dashboard | Christopher Andrews | Observable"}] 34:T601,## Overview For this tutorial we are going to build a simple dashboard style visualization which is composed of a collection of different charts. We will use _selections_ to interactive link together the different charts. More specifically, we are going to be looking at data describing twenty thousand flights that looks like this: ``` ${JSON.stringify(flights[0], null, 2)} ``` We will providing a tool to allow a user to explore the relationship between all of these variables. We will build this up in pieces, but since we are going for a dashboard style visualization, we will do the entire thing in one cell. Exploring this data set with linked visualizations is a fairly common example, sop we are borrowing some ideas and code from the [Vega-Lite Cross-Filter Example](https://observablehq.com/@vega/vega-lite-cross-filter-example?collection=@vega/vega-lite-api) and the [Vega-Lite Airport Connections](https://observablehq.com/@vega/vega-lite-airport-connections?collection=@vega/vega-lite-api). As a reminder, we are only allowed a single value in a cell, but we can create a code block using curly braces, and return the value at the end. This allows us to do some arbitrary iterative programming to help build up our visualizations. _The text for this tutorial is pretty long. As we are building a dashboard, the distance between where you are typing and where you are reading will grow. I suggest opening this page twice in your browser and keep one arranged for working on the dashboard and the other for reading._ 35:T151b,## Airport map The first thing we are going to build is a map that shows the location of all of the airports. AS I told you in class, the Vega datasets come with an included TopoJSON file covering the United States. This include features at the county and the state level. We can make a basic map using the `markGeoshape()` mark, which knows how to display our geographic data. We do have to translate it from the TopoJSON format, however, so we need to use the `vl.topojson()` function to transform the data first. We also need to extract the correct feature of the data. In this case, that will be the "states". Putting that all together, our `data()` call for our map will look like: `.data(vl.topojson(mapData).feature('states'))` The next thing we need is to specify a projection, and we will use the "albersUsa" projection. We don't have any encodings,as we just want to display the map itself and nothing else at the moment, so you should get something that looks like this: ``` vl.markGeoshape() .data(vl.topojson(mapData).feature('states')) .project(vl.projection('albersUsa')) .width(500) .height(500) .render() ``` We are going to use this as a background, so let's change the styling a little bit. Add this object as an argument to `markGeoshape()`: `{fill: '#eee', stroke: '#fff', strokeWidth: 1}`. ### Prepare to layer... We are going to make a dot map, and add some airports on top of this map, which should suggest layering. This is also a good opportunity to start practicing using a code block. Surround the cell in curly braces and **return** the graph. Next, we are going to break our graph description in half. The projection and the size will apply to both layers, while the mark and the data will only be for the map portion. Create a new variable called `map`, and set it equal to the first half of the graph. Then create a second variable called `airportMap` and set it equal to the second part, adding a `vl.layer([map])` in front of it all. We will also strip off the `render()` and apply it later. Taken altogether, your graph should now look like: ``` { const map = vl.markGeoshape({fill: '#eee', stroke: '#fff', strokeWidth: 1}) .data(vl.topojson(mapData).feature('states')); const airportMap = vl.layer([map]) .project(vl.projection('albersUsa')) .width(500) .height(500); return airportMap.render(); } ``` Nothing will have changed, but we now have a much more flexible structure for adding to this visualization. ### Add the airports You will see that I have added a data file called `airports.csv` and imported it as `airportData`. It looks like this: ``` ${JSON.stringify(airportData[0], null,2)} ``` The important thing for us is that it includes the airport code ("iata" stands for the International Air Transport Association), and the latitude and longitude. Create a new variable called `airports` before `airportMap`, and create a new graph using `airportData` as the data. You can think of this like creating a scatterplot, and use `markCircle` for the dots. The only difference is that you will use some new encodings: `vl.latitude()` and `vl.longitude` instead of `vl.x()', `vl.y()`. Use these to encode the "latitude" and "longitude" fields respectively. The nice thing about these encodings is that they are responsive to the current projection, allowing us to lay them out on a map. Go ahead and add a tooltip that displays "iata", "name" and "city". To display the airports, just add `airports` to the array in the `layer()` of `airportMap`. ### Pruning the data If all of that worked, the airport dots just swallowed the map, looking almost like the Zip code map. As it turns out, the flight data that we are dealing with does not have data for most of those airports. So we want to trim the data down to just the airports we care about. We are going to do this pruning in JavaScript, and we will do it right where we import the data so we don't have to clutter the cell we are creating our graph in. Find where our `airportData` is read from the file down in the Appendix. Replace the one line with this block: ``` airportData = { // create unique set of airport codes we care about const flightAirports = new Set(); flights.forEach((flight)=>{ flightAirports.add(flight.origin); flightAirports.add(flight.destination); }); const rawData = await FileAttachment("airports.csv").csv(); return rawData.filter((airport)=>flightAirports.has(airport.iata)); } ``` I decided not to make you implement this, but I'll walk you through what it does. The first part of the block creates a unique list of the airport codes we actually care about by iterating through each flight record and grabbing the origin and the destination. Notice that I am throwing these in a `Set` to guarantee uniqueness. Then, the airport data is read in and I use a filter that only keeps the airports that can be found in the `Set` (as hopefully you know, this is the other advantage of using a `Set` -- the lookup is much cheaper than looking for membership in a flat array). The other thing to notice is the syntax for giving the value that is returned from a code block a name, which I've used to save this work as `airportData`. If you go check your map again, you will see it now has a much more manageable number of airports, and with that, we have our map, which should look like this: 36:Tac3,### Make a histogram generator As you will observed, there is a certain repetitive pattern to many of the visualizations that we have made. We need three histograms, so as computer scientists, our first though should be "can we reduce the amount of duplicated code by abstracting out the samey bits?" And of course, the answer is "yes, yes we can". We are going to end up with the function found in the linked example, but we will build up to it to give you more insight into how it works. Start by creating a new function inside of our code block called `histogram`. It should take in two arguments: the `field` and the a `title` for the graph. Now, you can just create a basic histogram using `markRect`. This is what that will look like: ``` vl.markRect({binSpacing:1}) .encode( vl.x().fieldQ(field) .bin({maxbins: 100, minstep: 1}) .stack(false) .axis({title: title, titleAnchor: 'start', format: 'd'}), vl.y().count().axis(null) ) .width(350) .height(125) ``` Notice that we are plugging `field` into the `x` encoding so this histogram can look at different fields in the same data. The other thing to notice is that we haven't actually plugged this into any data -- this is a properly abstract histogram with some reasonable defaults on the binning. ### Generate a histogram Let's use this to render one of our histograms. Create a new variable called `histograms` and set it equal to ``` const histogram = vl.data(flights) .vconcat( histogram("distance", "Distance") ) ``` This takes our data, and applies it to a `vconcat` (vertical concatenation), which our new histogram of the distance inside. _We are using `vconcat` here because we will eventually want to put in the rest of the histograms, and it makes it easier to deal with our graph generating function. The cool thing is that the data will be applied to any graphs we put inside of the `vconcat`._ Swap out `airportMap` in the block's return statement for `histograms`. You should now see your histogram appear. ### Add more histograms Once this is working, you can add in the other two histograms. Because we have a nice generator function, this is as easy as calling the function two more times inside of the `vconcat`. We want to look at "Time of Day" and "Delay". The "Delay" is easy -- we have a `delay` variable in the data. We don't, however, have a variable for "Time of Day". What we have is the `date`. So, we need to turn this into "Time of Day". Add a transform to `histograms` that performs this calculation: ``` vl.calculate('hours(datum.date) + minutes(datum.date) / 60').as('time') ``` Now, you can make the "Time of Day" histogram with the new `time` variable, and when you run it, you should see the three histograms. 37:T11b0,## Cross-filtering the histograms The next thing we want to do is to add in some selectors to the histograms. The selectors will allow the user to select a range of values in the histogram which can then be used to filter out the values in the other graphs. We have two different selectors in Vega-Lite: `vl.selectPoint()` for selecting a single value and `vl.selectInterval()` which provides a brush that can select a range of values. To select values in the histogram, we want to use an interval selector, but we want to limit it to selecting along the `x` axis. For our visualziation, we want three of these - one for each variable we are graphing. This will allow us to perform this "cross filter", where we can filter on multiple variables at a time. ### Create the brushes At the top of the code block, create three selectors: ``` const brushDelay = vl.selectInterval('delay').encodings('x'); const brushDist = vl.selectInterval('dist').encodings('x'); const brushTime = vl.selectInterval('time').encodings('x'); ``` Since we have three different brushes, we need to incorporate them into our histogram generator. Add a new argument to your `histogram` function called `brush` and then plug these three values in where you are calling your function. ### Create a selection layer We now need to do a little surgery on our `histogram` function. What we are going to do is add an invisible layer behind our histogram. This should not be strictly necessary, but it appears to avoid some strange re-rendering artifacts when we start filtering the data on the fly. Both alyers are going to share the same `x` encoding, so we will start by pulling that out into a variable before the `return` statement. ``` const x = vl.x().fieldQ(field) .bin({maxbins: 100, minstep: 1}) .stack(false) .axis({title: title, titleAnchor: 'start', format: 'd'}); ``` You can then just put the `x` variable inside of the `encode`. Now, change the returned graph to be a `vl.layer()`, with the `markRect` inside (you can keep the dimensions on the outside. This should give you: ``` return vl.layer( vl.markRect({binSpacing:1}) .encode( x, vl.y().count().axis(null) ) ) .width(350) .height(125); ``` Copy the `markRect` and its encoding a second time. In the top one, replace `vl.y().count().axis(null)` with `vl.detail().count()`. This makes sure that the data is still aggregated, but doesn't interfere with the `y` axis. To hide it, we can add another encoding `vl.color.value('transparent')`. You can also remove the `binSpacing` parameter as it is irrelevant for this layer. Your layers should now look like this: ``` return vl.layer( vl.markRect() .encode( x, vl.detail().count(), vl.color().value('transparent') ), vl.markRect({binSpacing:1}) .encode( x, vl.y().count().axis(null) ) ) ``` Now we are ready to select things. In the first layer (the invisible one), add `.select(brush)` to the graph before `.encode(). You should now be able to draw a selection box on top of each histogram. It would actually do anything, but you should be able to see the brush. ### Filtering When you make a selection, the selector grabs up all of the values in the brush. We can use this as a filter over other graphs. Where things get a little complicated is that for any particular graph, we want to apply the brushes associated with the other two graphs. To make this a little easier to deal with, we will add another parameter to the `histogram` function called `filter`. We won't worry where it comes from for the moment -- we will just assume that it has something reasonable in it. To use this new parameter, add a `transform` to the histogram. Conveniently, we can just plug our filter into a `vl.filter()` transform, so we get this: `.transform(vl.filter(filter))`. Add this to the _second_ layer (the one we can see). Of course, now we need to think about what value we are actually passing in as the `filter`. As it turns out, Vega Lite provides logical operators that we can use to combine our selections. So, `vl.and(brushDist, brushTime)` will make a filter that requires a value to be in both sets. Use `vl.and` to create combined filters for your three histograms. Remember that for each one you want a combination of the other two brushes (so the combo I made above should be applied to the Delay graph). You should now be able to cross filter the histograms. 38:T886,## Connect the map to the histograms Now it is time to marry the map we made earlier with the histograms. The first part is easy. Replace `return histograms.render();` at the end of the block with `return vl.hconcat(airportMap, histograms).render();`. This will put both graphs into the dashboard. ### Select airports We are going to add some more interaction to the mix now. What we want is when the user clicks on an airport, the histograms should only show the data for flights originating from that airport. Our first step will be to add another selector. This time it will be a point selector. We are also going to specify which field from the data that we want (`iata`). Add this selector to the list at the top of the code block: ``` const airport = vl.selectPoint().fields('iata'); ``` Add a `select` to the `airports` map and pass it the new `airport` selector. So we can see the selection, add a new color encoding: ``` vl.color().if(vl.and(airport, airport.empty(false)), vl.value("red")) ``` Note how this uses our new `vl.and` operator to specify that the condition for making the circle red is that the data is in the selection AND the selector isn't empty. You should now be able to turn airports red by clicking on them. ### Filtering the histograms Now we need to hook this up to our histograms so the histograms only show data for this particular airport. We can actually just add `airport` to the end of the filter arguments in the `histogram` calls. Unfortunately, you won't see any difference when you do that. Why not? The problem is that we are working with two different data sets. The `airport` selector is selecting the airport code of the selected airport ("iata"), but our `flights` data doesn't have a "iata" property. What we really want is for the filtering to be done over the "origin" (which is stored as an IATA airport code). The simplest solution is to add a new field to our flights data with calculate. In `histograms`, add a second `calculate` to the transform that creates an "iata" field with the same value as the "origin". Now, you should be able to look at the behavior of specific airports by clicking on them. 39:[{"id":"33c64d21959adb4c7b557c3ecea754f9e676a061ee5fca2247ba31d38e1344c53ec1d72e9c797f4767f3f27b630223d7b99b9e580d328f1c07ff32ef0f7c13dd","href":"https://static.observableusercontent.com/files/33c64d21959adb4c7b557c3ecea754f9e676a061ee5fca2247ba31d38e1344c53ec1d72e9c797f4767f3f27b630223d7b99b9e580d328f1c07ff32ef0f7c13dd","name":"challenge@1.png","type":"image/png","lastModified":1634229221276.899,"size":168878},{"id":"672561f5fd6973728368a457cee32e77574dc7244a4f0a3b2122ba24e67f214d007c143aa73c5b7783a874c56ccf6d36e1cee6e8a32ee3e82c92e4b6523b395c","href":"https://static.observableusercontent.com/files/672561f5fd6973728368a457cee32e77574dc7244a4f0a3b2122ba24e67f214d007c143aa73c5b7783a874c56ccf6d36e1cee6e8a32ee3e82c92e4b6523b395c","name":"airport_map.png","type":"image/png","lastModified":1634229221276.899,"size":33228},{"id":"23dec0da6db8a58b85078f0cba241b01e98de90f0a38112ef1d7382d79daff167084a2d838fc129186eea15adacd5a9e183cbac018688aa1c6a6c0afb1b15da4","href":"https://static.observableusercontent.com/files/23dec0da6db8a58b85078f0cba241b01e98de90f0a38112ef1d7382d79daff167084a2d838fc129186eea15adacd5a9e183cbac018688aa1c6a6c0afb1b15da4","name":"airports.csv","type":"text/csv","lastModified":1634229221276.899,"size":210365},{"id":"6d5a4a7901e83d62e8200150e932f7ba03a993847f7628c704707539d08adfc17c8b7fc7c7646ee3ce9c80b00a302369f56e7887a39bb6309f2167635b788ad8","href":"https://static.observableusercontent.com/files/6d5a4a7901e83d62e8200150e932f7ba03a993847f7628c704707539d08adfc17c8b7fc7c7646ee3ce9c80b00a302369f56e7887a39bb6309f2167635b788ad8","name":"histograms.png","type":"image/png","lastModified":1634229221276.899,"size":28820}] 32:{"id":"1bb864e2e5dfff62","slug":"cs-465-tutorial-3-interactive-dashboard","title":"CS 465 Tutorial 3 - Interactive Dashboard","thumbnail":"340facb54c931d52c747b10590092edcb29e5cd94e3fce1fcd7c79dc4b6c5b2b","access_level":"public","create_time":"$D2021-10-14T16:33:41.276Z","update_time":"$D2021-11-23T19:37:32.843Z","view_time":null,"first_public_time":"$D2021-10-14T16:34:54.231Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1f6018b69d66a2cf","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":"starter_2024"},"version":176,"publish_version":176,"role":null,"authored":false,"authors":[{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null}],"members":[{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":23,"collection":{"id":"ef285280251c7f66","slug":"cs-465-f21-tutorials","title":"CS 465 f21 Tutorials","owner":{"id":"1f6018b69d66a2cf","login":"christopherpandrews","name":"Christopher Andrews"}},"type":"notebook","body":{"title":"CS 465 Tutorial 3 - Interactive Dashboard","cells":[{"id":0,"value":"# CS 465 Tutorial 3 - Interactive Dashboard\n\n#### Objectives\n- Learn a little bit about working with geo-spatial visualization\n- Learn about selection\n- Learn about linking multiple data sources\n- Get some practice building more complex multi-graph visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## Getting Started\n\nWe will follow the same pattern as before. \n\n- Fork the page\n- Share it with me\n- Submit it on Canvas when you are done","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// Your dashboard here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"## Making histograms\n\nFor the next part of our dashboard, we are going to make three histograms to look at the distances, delays and time of day of all of our flights. They will look like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"## Challenge [Optional]\n\nWe can keep building out the dashboard with more visualizations (though be warned that the more selections you munge together, the greater the risk of strange behavior).\n\nAs a challenge, try to add a time selector that extends across the bottom of the whole graph. It might look like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"await FileAttachment(\"challenge@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"### Hints\n\n- The dates aren't binned, instead we can specify that \"date\" is a temporal type and set an appropriate time unit. For example: `fieldT('date').timeUnit('utcyearmonthdate')`\n- Since we want this histogram to be different, we shouldn't use our `histogram` function. There are ways to make the function sufficiently generic, but at the cost of having to do more of the work outside of it or adding a lot of special cases.\n- As you already saw with the histograms, the layout can be built up using a collection of `vconcat` and `hconcat`. This allows us to create pretty much any kind of grid layout we like.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {vl} from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"vegaData = (await require('vega-datasets@2'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"flights = vegaData['flights-20k.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"mapData = vegaData['us-10m.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"airportData = await FileAttachment(\"airports.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"# References\n\n- [Vega-Lite Airport Connections](https://observablehq.com/@vega/vega-lite-airport-connections?collection=@vega/vega-lite-api)\n- [Vega-Lite Cross-Filter Example](https://observablehq.com/@vega/vega-lite-cross-filter-example?collection=@vega/vega-lite-api)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"