28:null 29:["$","title",null,{"children":"Vega-Lite Interaction: Navigation | Ayaan Kazerouni | Observable"}] 2e:T6b3,**Step 1.** Create each chart separately, without any interaction. The scatterplots on top use faceting on the `city` field. The area chart below uses the `date` field on the `x` encoding, `temp_min` and `temp_max` on the `y` and `y2` encodings, respectively, and `color` on the city encoding. **Step 2.** Concatenate the charts vertically. Make adjustments to widths and heights so that they look somewhat aligned. _This is already pretty informative!_ **Step 3.** Add zooming and panning to the area chart only. A zoom/pan is a type of interval selection that binds to the _scales_ of a graphic. That is, you are selecting all points within an interval that you computed by zooming in, or by moving left or right. So, you'd begin by creating a `selectInterval`. Limit it to only the `x` encoding (so that zooming or panning only affects the `date` axis, and not on the temperatures as well). Finally, bind the selection to `"scales"`. Scales are what determine the "viewport" of our visualization. By zooming in, we reduce the extent of the input domain. Zooming out increases it. Panning moves our domain left and right, which changes which data points are included in the graphic. Try scrolling and dragging on the area chart to see zooming and panning in action. **Step 4.** Link the scatterplots with the area chart. If we zoom in, we also want to hide or somehow "unfocus" points in the scatterplot that are no longer visible in the area chart. Think about how you would do this. Would you _filter out_ the excluded points? Or change their color/opacity? What are some prose and cons in terms of expressiveness? **Step 5.** How would you suggest these possible zooming and panning actions to the user?2f:T556, **Step 1.** Make the "overview" area chart (that's what's on the bottom). Use the `month` aggregation on the `date` field for the x-encoding, and use the `average` aggregation on the `precipitation` field for the y-encoding. Set the color of the area to whatever you want — I chose `forestgreen` for the Boston Celtics. **Step 2.** Create an interval selection and attach it to the chart as a param, limiting it to the `x` encoding. This will accomplish nothing yet other than letting you brush a grey box over the data. **Step 3.** Make the "detail" chart. It's also an area chart, so you should be able to reuse some of your "overview" chart spec. Right now, you just have two of the same chart. **Step 4.** Link the two charts by setting the "detail" chart's x `domain` to your interval selection. Do you remember how to set the `domain` of an encoding? See the "Overview + Detail" example in [this notebook](https://observablehq.com/@uwdata/interaction) for an example. #### Bonus challenge Right now, we're aggregating on the `date` field (by collapsing 366 days into 12 months), and on the `precipitation` field (by averaging precipitation for each month). _How would you change the visualization so that the "overview" figure does the aggregations described above, but the "detail" figure shows the **daily** precipitation for the selected interval?_30:[{"id":"62eb6a665d348a32f431551a357cf743a28c45db67f0237042e2e96a30dd29651bdf20cd31b1f7274591f30ee0e994de969b84fa158a3fa115d7e75b5712e831","href":"https://static.observableusercontent.com/files/62eb6a665d348a32f431551a357cf743a28c45db67f0237042e2e96a30dd29651bdf20cd31b1f7274591f30ee0e994de969b84fa158a3fa115d7e75b5712e831","name":"post-zoom.png","type":"image/png","lastModified":1745363415420.986,"size":258664},{"id":"073ec9c03bcfe769a785d0330667ebc2b4b59b96eee2cc3ef4be346f9a5a28dcbaecf69ca99056703a3af1c31c78062ffa762c93dca7a5fb44774704d4a797ba","href":"https://static.observableusercontent.com/files/073ec9c03bcfe769a785d0330667ebc2b4b59b96eee2cc3ef4be346f9a5a28dcbaecf69ca99056703a3af1c31c78062ffa762c93dca7a5fb44774704d4a797ba","name":"pre-zoom.png","type":"image/png","lastModified":1745363415466.916,"size":498051},{"id":"67b9b40df68e5ccedf1960a578863df980b7aa1c50b7275fa86f5757d8e087964a21d310517202193bd94eb7176d02cf2a5bcdad69141f1662cad6d0d205f3d9","href":"https://static.observableusercontent.com/files/67b9b40df68e5ccedf1960a578863df980b7aa1c50b7275fa86f5757d8e087964a21d310517202193bd94eb7176d02cf2a5bcdad69141f1662cad6d0d205f3d9","name":"overview-detail-1.png","type":"image/png","lastModified":1745789363612.617,"size":131764},{"id":"85b43cb1bc88b1ab0abdc9286b5c4b3979688c6e2004175719483f72c9042d59c67176eec1dfea95d9917d59377d339ddbbd2e3ca723c55dc6483105e895e849","href":"https://static.observableusercontent.com/files/85b43cb1bc88b1ab0abdc9286b5c4b3979688c6e2004175719483f72c9042d59c67176eec1dfea95d9917d59377d339ddbbd2e3ca723c55dc6483105e895e849","name":"overview-detail-2.png","type":"image/png","lastModified":1745789363631.002,"size":107006}] 2c:{"id":"0395ec7fd96e12fc","slug":"navigation","title":"Vega-Lite Interaction: Navigation","thumbnail":"dfc179b29b918132fcc829b368fa7e417dd24ebead629b69f0f71c4bb87dd841","access_level":"unlisted","create_time":"$D2025-04-22T18:58:53.911Z","update_time":"$D2026-04-17T20:56:55.869Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":272,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":31,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"title":"Vega-Lite Interaction: Navigation","cells":[{"id":0,"value":"# Vega-Lite Interaction: Navigation\n\n_Zooming & panning; Overview + detail_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"import {weather} from '@ayaankazerouni/csc477-view-composition'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"You should have worked through the sections on **Navigation** in the UW Data Visualization Curriculum notebook on [Interaction](https://observablehq.com/@uwdata/interaction) before working through these exercises.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"## Exercise: Zooming and panning (and linking)\n\n${flag('todo')} Reproduce the charts and interactions from the screenshots below. Here are some steps to guide you and serve as hints.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"

\n${await FileAttachment(\"pre-zoom.png\").image({ width: width })}\n

1. Before Zooming, we show the entire extent of dates.

\n\nZoom in on the area chart using the scroll wheel or trackpad...\n

\n${await FileAttachment(\"post-zoom.png\").image({ width: width })}\n

2. We scroll on the area chart, zooming in _only on the x encoding's scale_. Points in the scatterplot above disappear when they are no longer included in the area chart's x scale.

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"{\n // Your code here.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"## Exercise 2: Overview + detail\n\n${flag('todo')} \"Overview + detail\" allows us to present the user with an overview of the dataset, while allowing them to select some subset of the data for closer inspection.\n\nReproduce the visualization depicted in the screenshots below. It shows the monthly precipitation **in Boston only**, allowing the user to look at specific month ranges if they choose.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"

\n${await FileAttachment(\"overview-detail-1.png\").image({ width: 400 })}\n

1. Both top and bottom charts have the same x-scales.

\n\n

\n${await FileAttachment(\"overview-detail-2.png\").image({ width: 400 })}\n

2. We make an interval selection on the bottom chart. The top chart's x domain updates as a result.

\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"{\n // Your code here.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"## After finishing\n\n${flag('important', undefined, 'firebrick')} Please work through the sections on **Details on demand** and **Cross-filter** in [this notebook](https://observablehq.com/@uwdata/interaction) on your own. They are useful techniques to know.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"import {flag} from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"