29:null 2a:["$","title",null,{"children":"Vega-Lite Interaction: Selections | Ayaan Kazerouni | Observable"}] 2f:T429,${flag('todo')} **Step 1.** Start by creating a simple scatterplot showing `wind_avg` on the x-axis and `temp_max` on the y-axis. **Step 2.** Create a `selectPoint` for the `city` field, and bind it to a `vl.menu` whose options are `"San Luis Obispo"`, `"Boston"`, and `"Seattle"`. Consult the UW Interaction Notebook for an example ([link to relevant cell](https://observablehq.com/@uwdata/interaction?collection=@uwdata/visualization-curriculum#cell-347), though you may want to read the surrounding content for context). **Step 3.** Add the point selection as a `param` to the scatterplot, and add an `opacity` encoding. If a point is included in the selection, set its opacity to `vl.value(0.8)`, otherwise set it to `0.1`. You can do it as follows: ```js ...rest of the chart spec .encode( ...other encodings, vl.opacity().if(_________, vl.value(0.8)).value(0.1) ) ``` The blank above will be the variable holding the selection param you created in step 2. The `if` method says "if this condition is true, the encoding should be the second argument".30:T40c,// Your code here. I've given you some code to start you off. { // Create a param that is bound to the drop-down menu from the cell above. Whatever is selected will be available // in your chart spec through the citySelection variable const pointSelection = vl.param('citySelection') .bind(viewof cityInput); // We want to bind to the input element itself, so we need to say viewof here const scatterplot = vl.markCircle() .data(weather) // Add the pointSelection to the chart params .params(pointSelection) // Add encodings: x, y, and opacity .encode( vl.x().fieldQ('wind_avg'), vl.y().fieldQ('temp_max'), // Opacity left up to you! Do it like you did above: vl.opacity().if(___________, vl.value(0.8)).value(0.1) // What goes in the blank is a vega expression, just like you do in filter transforms (using "datum.city") // Why do you think we can't simply say "pointSelection" in the blank like we did in the previous scatterplot? ) return scatterplot.render() }31:T772,${flag('todo')} There's a bit going on in this one, so approach it step by step. **Step 1.** Make the line chart for precipitation. The `x` encoding depicts the `date` field as temporal data (`fieldT`). The `y` encoding uses the `precipitation` field as is. Give `markLine` the following parameter: `{ interpolate: 'monotone' }`. See [the Line mark documentation](https://vega.github.io/vega-lite/docs/line.html#properties) for other interpolation options if you're curious. The [D3 curve docs](https://d3js.org/d3-shape/curve) have good interactive examples. **Step 2.** Create a `selectInterval` param, and call `.encodings('x')` to limit the brush selection to only the x encoding. Attach it as a parameter to the line chart. This should let you click and drag to select a segment of the line, though nothing else will happen just yet. **Step 3.** Make the scatterplot for `wind_avg` and `temp_max`. Add the legend parameter to it like you did before. **Step 4.** Use what you know about multi-view composition to concatenate the two charts. You'll notice your legend appears near the top of the chart. How do you think you've move it down closer to the scatterplot? _**Hint:** See the final "dashboard" from our notebook on multi-view composition._ **Step 5.** Now we will link the scatterplot to the line chart's interval selection. To do this, first create a _new_ selection that encompasses the **intersection** of the interval selection and the legend selection. You can use `vl.and` to do this. See below (your variable names might be different): ```js const brushAndLegend = vl.and(lineChartBrush, scatterplotLegend) ``` Finally, set the `opacity` encoding on your scatterplot. If the point is included in the `brushAndLegend` selection, its opacity should be `vl.value(0.8)`, otherwise `0.1`. **Bonus.** _Can you predict what will happen if you use **`vl.not`** or **`vl.or`** instead?_32:Td66,### ${flag('todo')} Improving usability **Note**: This TODO item is no longer relevant with the release of Vega-Lite version 6. But the discussion is still useful to read, so I've left it in here. Ok, dynamic queries through brushing and linking are all well and good, but a user needs to _notice_ that they can brush and link and so on. How should your graphic suggest to the user that they can brush in the line chart? And that they can move the selection window after it's been created? These "suggestions" are called [_affordances_](https://en.wikipedia.org/wiki/Affordance). If you step into a room that contains a ball and an armchair, you are likely to sit in the chair and throw the ball (as opposed to throwing the chair and sitting on the ball), because the designs of those objects _suggest_ those possible actions to you. Similarly, your graphic should suggest the possible actions to the user. **Indicate that a selection can be _made_.** At the top level of the line chart specification, add the following: ```js vl.markLine({ interpolate: 'monotone' }) .... .view({ cursor: 'crosshair' }) // <--- Add this ``` The `.view` method lets us configure the "View" for each figure. Possible options are outlined in the [Vega-Lite docs on Views](https://vega.github.io/vega-lite/docs/spec.html). You can use this to set specifications for things like background colors, foreground colors (e.g., font colors), fonts themselves, etc. For example, if you want the figure aesthetics to match your website theme. In this case, we use it to set a cursor symbol that should appear any time the cursor is over the line chart. I opted for the `crosshair` symbol, but any of the standard [CSS cursor options](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword) would work. **Indicate that a selection can be _moved_.** Ok, the crosshair does a good job suggesting that an interval can be selected (a better job than the default pointer, at any rate). We now want to change the cursor to the `move` symbol to show that a selection can be moved. To do this, add the following to your interval selection: ```js .selectInterval() ... .mark({ cursor: 'move' }) // <--- Add this ``` This changes the configuration for the selection mark (i.e., the greyish rectangle). Any time the cursor is over that rectangle, it will change to the `move` symbol. All that said, note that **using icons to provide affordance is useful, but not sufficient**. Our understanding of icons is based on context, our previous experiences, or cultures. For example, 🔎 for "search" is fairly universally understood, but [universal icons like that are rare](https://www.nngroup.com/articles/icon-usability/). What suggests "brush here!" to you might suggest something else to a person with different experiences or worldview. So it's usually best to accompany your graphic with textual instructions or suggestions. For example, in the prose preceding your graphic, it's a good idea to incorporate some suggestions or instructions to the user. **Notes** - Unfortunately it's not possible to change the cursor for the legend symbols, as far as I can tell. So we include a "click to select" text in the legend. To break up legend text (or axis titles, etc.) over multiple lines, provide an array of strings instead of a single string. Each string in the array will be rendered on a new line. 33:[{"id":"6ea59f36270a50d2c6ed1fdd81ad3b155e4665f9b51e5e147a25cd8e9bd7cd071ab6197554dead4d245107dd374c2b590d067c5f6a4020a8628f8846a09d8e5a","href":"https://static.observableusercontent.com/files/6ea59f36270a50d2c6ed1fdd81ad3b155e4665f9b51e5e147a25cd8e9bd7cd071ab6197554dead4d245107dd374c2b590d067c5f6a4020a8628f8846a09d8e5a","name":"brush-link-1@2.png","type":"image/png","lastModified":1745538904484.32,"size":354027},{"id":"779cb1f1f51a2a25c1614108517d5b7d85c9eb9a48e5b4cd957f0d418aeb28c0009d5d1bd082be33600bfea9f12e789654aaf37dd878a1a823bf2a5bfc3b705b","href":"https://static.observableusercontent.com/files/779cb1f1f51a2a25c1614108517d5b7d85c9eb9a48e5b4cd957f0d418aeb28c0009d5d1bd082be33600bfea9f12e789654aaf37dd878a1a823bf2a5bfc3b705b","name":"brush-link-3@2.png","type":"image/png","lastModified":1745538914533.558,"size":322911},{"id":"6fc90435f56ac1d2cae79efbc3b2907f08d3473fe9fa16ff5e0972cc3f9500040bb23d2201bc02090205fd90a02cdd686c111c580197fd6e487a7798cd201c3d","href":"https://static.observableusercontent.com/files/6fc90435f56ac1d2cae79efbc3b2907f08d3473fe9fa16ff5e0972cc3f9500040bb23d2201bc02090205fd90a02cdd686c111c580197fd6e487a7798cd201c3d","name":"brush-link-2@2.png","type":"image/png","lastModified":1745538910179.524,"size":332603},{"id":"cb40a98146cde92e8e83b82ea285bc5ae0325aadeefc9db5824290d989387ed0544780708738e3b30688c70ca19a72a566aea7ea2b4f87dfd80d2d29cdcb4b47","href":"https://static.observableusercontent.com/files/cb40a98146cde92e8e83b82ea285bc5ae0325aadeefc9db5824290d989387ed0544780708738e3b30688c70ca19a72a566aea7ea2b4f87dfd80d2d29cdcb4b47","name":"menu-boston@1.png","type":"image/png","lastModified":1745272248919.848,"size":195760},{"id":"54ff5616146249bd17fa0c6d4decf85292ec5606bd24fdf5c73496bfe36031590c97b9888ffa1d067df21de7699cf23c221c6690d357583afa896f063165e19e","href":"https://static.observableusercontent.com/files/54ff5616146249bd17fa0c6d4decf85292ec5606bd24fdf5c73496bfe36031590c97b9888ffa1d067df21de7699cf23c221c6690d357583afa896f063165e19e","name":"menu-slo@1.png","type":"image/png","lastModified":1745272249072.068,"size":191671},{"id":"43309c61ee389592119918af118634c56f293bb07208c7d2937a2aa385ac718cd65fdd0bc4460563406cf35ede1fa00d4f3853d9d66cb0d2be4c8bf704365f3e","href":"https://static.observableusercontent.com/files/43309c61ee389592119918af118634c56f293bb07208c7d2937a2aa385ac718cd65fdd0bc4460563406cf35ede1fa00d4f3853d9d66cb0d2be4c8bf704365f3e","name":"e2-boston@1.png","type":"image/png","lastModified":1745341429942.146,"size":195865},{"id":"474bc2bee65fa022a936386ab281859c82639128e69bdcd0f33d8e2723fc8c5e8da88693c31a1184af63cc13747e392978ced0d47a58c34b0961cb752a5224c1","href":"https://static.observableusercontent.com/files/474bc2bee65fa022a936386ab281859c82639128e69bdcd0f33d8e2723fc8c5e8da88693c31a1184af63cc13747e392978ced0d47a58c34b0961cb752a5224c1","name":"e2-slo@1.png","type":"image/png","lastModified":1745341429966.915,"size":192155},{"id":"0f3d39a7c63a77255baf0a99cb2f3d6d3e9687ffea20c3201f1a3830b890562cd199eb8e285799697895bcc9dcac856ff19c187ea6ee2d61e154e739823c79d9","href":"https://static.observableusercontent.com/files/0f3d39a7c63a77255baf0a99cb2f3d6d3e9687ffea20c3201f1a3830b890562cd199eb8e285799697895bcc9dcac856ff19c187ea6ee2d61e154e739823c79d9","name":"e3-legend-seattle.png","type":"image/png","lastModified":1745341928096.686,"size":210069},{"id":"75f05d1a0e5b3b81d397b8137f95ccd283add921022e8dee2bd3985e36ac94142514e196b45712e806ec4d64d96d98d954cf09b318e9afbee2534927d20cb931","href":"https://static.observableusercontent.com/files/75f05d1a0e5b3b81d397b8137f95ccd283add921022e8dee2bd3985e36ac94142514e196b45712e806ec4d64d96d98d954cf09b318e9afbee2534927d20cb931","name":"e3-legend-all.png","type":"image/png","lastModified":1745341928104.664,"size":221678}] 2d:{"id":"89933b8db14af975","slug":"csc477-selections-brushing-linking","title":"Vega-Lite Interaction: Selections","thumbnail":"ec6395fe8be3138490b726cdbdbc18d029f865595b07f4772ea37d8e11c34bfe","access_level":"unlisted","create_time":"$D2025-04-21T18:41:36.512Z","update_time":"$D2026-05-05T00:01:23.642Z","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":639,"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":36,"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: Selections","cells":[{"id":0,"value":"# Vega-Lite Interaction: Selections\n\nFork this notebook and complete these exercises.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"These exercises will use the weather data set from our discussion of multi-view composition.","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":167,"value":"Each exercise shows a screenshot or two describing the expected interaction.\n\nI **strongly encourage** you to work through the **Selections** and **Dynamic queries** sections in the UW Data Vis Curriculum [Interaction](https://observablehq.com/@uwdata/interaction?collection=@uwdata/visualization-curriculum) notebook *before* attempting these exercises.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"## Exercise 1: Binding to an input element\n\n

\n ${await FileAttachment('menu-slo@1.png').image({width: 500})}\n

1. Figure starts off with \"San Luis Obispo\" selected. SLO's points are in focus.

\n\n

\n ${await FileAttachment('menu-boston@1.png').image({width: 500})}\n

2. Changing the menu selection causes Boston points to be in focus.

\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"// Your code here.\n{\n // Step 2: Create the point selection\n // You'll need to do it above the scatterplot since you'll reference this variable in the scatterplot\n\n // Step 1: Create a scatterplot\n // After completing Step 2, add your point selection to it as a param\n\n // Step 3: Add a conditional opacity encoding to the scatterplot\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"## Exercise 2: Binding to an input element that you control\n\n

\n ${await FileAttachment('e2-slo@1.png').image({width: 500})}\n

1. Figure starts off with \"San Luis Obispo\" selected. SLO's points are in focus.

\n\n

\n ${await FileAttachment('e2-boston@1.png').image({width: 500})}\n

2. Changing the menu selection causes Boston points to be in focus.

\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"We may want more control over the Input elements we use in Vega-Lite. Instead of letting Vega-Lite create the dropdown menu, we can create our own and bind _that_ to our figure. This lets us control things like the label or other aesthetics of the menu.\n\nSee [this notebook](https://observablehq.com/@vega/vega-lite-input-binding?collection=@vega/vega-lite-api) for an example.\n\n${flag('todo')} Reproduce the figure from the previous exercise, but this time use the `cityInput` menu instead of a Vega-created one.\n\nI've already setup some code for you.\n\n- The `cityInput` cell below uses Observable's in-built [Inputs](https://observablehq.com/documentation/inputs/overview) library.\n- There's a scatterplot and an (as-yet-unused) parameter binding set up for you in the next cell. Expand it and see the comments and blanks for you to fill in.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"// In other cells, use \"cityInput\" if you want the chosen value, or \"viewof cityInput\" if you want the input element itself\nviewof cityInput = Inputs.select(['San Luis Obispo', 'Boston', 'Seattle'], {label: \"Select a city\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"Once you can bind to _any_ input element, this also means you can bind to custom input elements. See Observable's [introduction to views](https://observablehq.com/@observablehq/views) for more info.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"## Exercise 3: Selections using the legend\n\n

\n ${await FileAttachment('e3-legend-all.png').image({width: 500})}\n

1. Scatterplot with no interaction yet.

\n\n

\n ${await FileAttachment('e3-legend-seattle.png').image({width: 500})}\n

2. Legend selection of Seattle highlights only the Seattle data points.

\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"$${flag('todo')} Instead of using a drop-down menu, it may be more elegant to let the user choose a city by clicking on a _legend itself_. This way, we can give them an overview (info about which cities are included) and also let them focus on the city of choice.\n\n**Step 1.** Start by creating the scatterplot. Notice that it now uses a `color` encoding.\n\n**Step 2.** Create a point selection, this time bound to the \"legend\" instead of an input widget.\n\n**Step 3.** Add the point selection as a `param` to the scatterplot, and an `opacity` encoding that sets opacity to `vl.value(0.8)` if a point is included in the selection, and 0.1 otherwise.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":590,"value":"{\n // Your code here\n const legendSelection = vl.selectPoint('citySelection')\n .fields('city') // Which field is being selected?\n .bind('legend') // Bind to the legend\n\n // Make the scatterplot, adding and using the legendSelection as a param\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"## Exercise 4: Brushing & Linking (and a legend selection)\n\n

\n ${await FileAttachment(\"brush-link-1@2.png\").image({width: 500})}\n

1. No interaction just yet.

\n \n

\n ${await FileAttachment(\"brush-link-2@2.png\").image({width: 500})}\n

2. An interval selection on the line chart highlights linked points in the scatterplot.

\n ${await FileAttachment(\"brush-link-3@2.png\").image({width: 500})}\n

3. A selection on the legend further selects only the Seattle data points within the interval selection.

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"// Your code here.\n{\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"---\n\n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"import {vl} from '@vega/vega-lite-api-v6'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"import {stylesheet, flag} from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"