28:null 29:["$","title",null,{"children":"Interaction | Stanford Visualization | Observable"}] 2e:T78e,md` _“A graphic is not ‘drawn’ once and for all; it is ‘constructed’ and reconstructed until it reveals all the relationships constituted by the interplay of the data. The best graphic operations are those carried out by the decision-maker themself.”_ — [Jacques Bertin](https://books.google.com/books?id=csqX_xnm4tcC) Visualization provides a powerful means of making sense of data. A single image, however, typically provides answers to, at best, a handful of questions. Through _interaction_ we can transform static images into tools for exploration: highlighting points of interest, zooming in to reveal finer-grained patterns, and linking across multiple views to reason about multi-dimensional relationships. At the core of interaction is the notion of a _selection_: a means of indicating to the computer which elements or regions we are interested in. For example, we might hover the mouse over a point, click multiple marks, or draw a bounding box around a region to highlight subsets of the data for further scrutiny. Alongside visual encodings and data transformations, Vega-Lite provides a _selection_ abstraction for authoring interactions. These selections encompass three aspects: 1. Input event handling to select points or regions of interest, such as mouse hover, click, drag, scroll, and touch events. 2. Generalizing from the input to form a selection rule (or [_predicate_](https://en.wikipedia.org/wiki/Predicate_%28mathematical_logic%29)) that determines whether or not a given data record lies within the selection. 3. Using the selection predicate to dynamically configure a visualization by driving _conditional encodings_, _filter transforms_, or _scale domains_. This notebook introduces interactive selections and explores how to use them to author a variety of interaction techniques, such as dynamic queries, panning & zooming, details-on-demand, and brushing & linking. `2f:T535,md` Let's start with a basic selection: simply clicking a point to highlight it. Using the \`cars\` dataset, we'll start with a scatter plot of horsepower versus miles per gallon, with a color encoding for the number cylinders in the car engine. In addition, we'll create a selection instance by calling \`vl.selectSingle()\`, indicating we want a selection defined over a _single value_. By default, the selection uses a mouse click to determine the selected value. To register a selection with a visualized mark, we must add it using the \`.select()\` method. Once our selection has been defined, we can use it as a parameter for _conditional encodings_, which apply a different encoding depending on whether a data record lies in or out of the selection. For example, consider the following code: ~~~ js vl.color().if(selection, vl.fieldO('Cylinders')).value('grey') ~~~ This encoding definition states that data points contained within the \`selection\` should be colored according to the \`Cylinder\` field. Non-selected data points, meanwhile, should use the color \`grey\`. An empty selection includes _all_ data points, and so initially all points will be colored. _Try clicking different points in the chart below. What happens? (Click the background to clear the selection state and return to an "empty" selection.)_ `30:T41a,md` _Dynamic queries_ enables rapid, reversible exploration of data to isolate patterns of interest. As defined by [Ahlberg, Williamson, & Shneiderman](https://www.cs.umd.edu/~ben/papers/Ahlberg1992Dynamic.pdf), a dynamic query: - represents a query graphically, - provides visible limits on the query range, - provides a graphical representation of the data and query result, - gives immediate feedback of the result after every query adjustment, - and allows novice users to begin working with little training. A common approach is to manipulate query parameters using standard user interface widgets such as sliders, radio buttons, and drop-down menus. To generate dynamic query widgets, we can apply a selection's \`bind\` operation to one or more data fields we wish to query. Let's build an interactive scatter plot that uses a dynamic query to filter the display. Given a scatter plot of movie ratings (from Rotten Tomates and IMDB), we can add a selection over the \`Major_Genre\` field to enable interactive filtering by film genre. `31:T456,md` ### Using Visualizations as Dynamic Queries Though standard interface widgets show the _possible_ query parameter values, they do not visualize the _distribution_ of those values. We might also wish to use richer interactions, such as multi-value or interval selections, rather than input widgets that select only a single value at a time. To address these issues, we can author additional charts to both visualize data and support dynamic queries. Let's add a histogram of the count of films per year and use an interval selection to dynamically highlight films over selected time periods. *Interact with the year histogram to explore films from different time periods. Do you seen any evidence of [sampling bias](https://en.wikipedia.org/wiki/Sampling_bias) across the years? (How do year and critics' ratings relate?)* _The years range from 1930 to 2040! Are future films in pre-production, or are there "off-by-one century" errors? Also, depending on which time zone you're in, you may see a small bump in either 1969 or 1970. Why might that be? (See the end of the notebook for an explanation!)_ `32:T410,md` _Zooming in, we can see that the rating values have limited precision! The Rotten Tomatoes ratings are integers, while the IMDB ratings are truncated to tenths. As a result, there is overplotting even when we zoom in, with multiple movies sharing the same rating values._ Reading the code above, you may notice the code \`.axis({minExtent: 30})\` in the \`y\` encoding channel. The \`minExtent\` parameter ensures a minimum amount of space is reserved for axis ticks and labels. Why do this? When we pan and zoom, the axis labels may change and cause the axis title position to shift. By setting a minimum extent we can reduce distracting movements in the plot. _Try removing the \`minExtent\` value, and then zoom out to see what happens when longer axis labels enter the view._ By default, scale bindings for selections include both the \`x\` and \`y\` encoding channels. What if we want to limit panning and zooming along a single dimension? We can invoke \`.encodings('x')\` to constrain the selection to the \`x\` channel only: `33:T492,{ const hover = vl.selectSingle() .on('mouseover') // select on mouseover .nearest(true) // select nearest point to mouse cursor .empty('none'); // empty selection should match nothing const click = vl.selectMulti() .empty('none'); // empty selection matches no points // scatter plot encodings shared by all marks const plot = vl.markCircle().encode( vl.x().fieldQ('Rotten_Tomatoes_Rating'), vl.y().fieldQ('IMDB_Rating') ); // shared base for new layers const base = plot.transform( vl.filter(vl.or(hover, click)) // filter to points in either selection ); // mark properties for new layers const halo = {size: 100, stroke: 'firebrick', strokeWidth: 1}; const label = {dx: 4, dy: -8, align: 'right'}; const white = {stroke: 'white', strokeWidth: 2}; // layer scatter plot points, halo annotations, and title labels return vl.data(movies) .layer( plot.select(hover, click), base.markPoint(halo), base.markText(label, white).encode(vl.text().fieldN('Title')), base.markText(label).encode(vl.text().fieldN('Title')) ) .width(600) .height(450) .render(); }34:T423,md` ### Cross-Filtering The brushing & linking examples we've looked at all use conditional encodings, for example to change opacity values in response to a selection. Another option is to use a selection defined in one view to _filter_ the content of another view. Let's build a collection of histograms for the \`flights\` dataset: arrival \`delay\` (how early or late a flight arrives, in minutes), \`distance\` flown (in miles), and \`time\` of departure (hour of the day). We'll use the \`repeat\` operator to create the histograms, and add an \`interval\` selection for the \`x\` axis with brushes resolved via intersection. In particular, each histogram will consist of two layers: a gray background layer and a blue foreground layer, with the foreground layer filtered by our intersection of brush selections. The result is a _cross-filtering_ interaction across the three charts! _Drag out brush intervals in the charts below. As you select flights with longer or shorter arrival delays, how do the distance and time distributions respond?_ `35:T639,md`

## Summary For more information about the supported interaction options in Vega-Lite, please consult the [Vega-Lite interactive selection documentation](https://vega.github.io/vega-lite/docs/selection.html). For example, you might want to use [customized event handlers](https://observablehq.com/@vega/vega-lite-composing-selections) to compose multiple interaction techniques or support touch-based input on mobile devices. Interested in learning more? - The _selection_ abstraction was introduced in the paper [Vega-Lite: A Grammar of Interactive Graphics](http://idl.cs.washington.edu/papers/vega-lite/), by Satyanarayan, Moritz, Wongsuphasawat, & Heer. - The PRIM-9 system (for projection, rotation, isolation, and masking in up to 9 dimensions) is one of the earliest interactive visualization tools, built in the early 1970s by Fisherkeller, Tukey, & Friedman. [A retro demo video survives!](https://www.youtube.com/watch?v=B7XoW2qiFUA) - The concept of brushing & linking was crystallized by Becker, Cleveland, & Wilks in their 1987 article [Dynamic Graphics for Data Analysis](https://scholar.google.com/scholar?cluster=14817303117298653693). - For a comprehensive summary of interaction techniques for visualization, see [Interactive Dynamics for Visual Analysis](https://queue.acm.org/detail.cfm?id=2146416) by Heer & Shneiderman. - Finally, for a treatise on what makes interaction effective, read the classic [Direct Manipulation Interfaces](https://scholar.google.com/scholar?cluster=15702972136892195211) paper by Hutchins, Hollan, & Norman. `36:T549,md`

#### Appendix: On The Representation of Time Earlier we observed a small bump in the number of movies in either 1969 and 1970. Where does that bump come from? And why 1969 _or_ 1970? The answer stems from a combination of missing data and how your computer represents time. Internally, dates and times are represented relative to the [UNIX epoch](https://en.wikipedia.org/wiki/Unix_time), in which time "zero" corresponds to the stroke of midnight on January 1, 1970 in [UTC time](https://en.wikipedia.org/wiki/Coordinated_Universal_Time), which runs along the [prime meridian](https://en.wikipedia.org/wiki/Prime_meridian). It turns out there are a few movies with missing (\`null\`) release dates. Those \`null\` values get interpreted as time \`0\`, and thus map to January 1, 1970 in UTC time. If you live in the Americas – and thus in "earlier" time zones – this precise point in time corresponds to an earlier hour on December 31, 1969 in your local time zone. On the other hand, if you live near or east of the prime meridian, the date in your local time zone will be January 1, 1970. The takeaway? Always be skeptical of your data, and be mindful that how data is represented (whether as date times, or floating point numbers, or latitudes and longitudes, _etc._) can sometimes lead to artifacts that impact analysis! `37:[] 2c:{"id":"12b27ee96b9ab151","slug":"interaction","title":"Interaction","thumbnail":"3933dd47e9e798a110baf4b25d7e8652e0132f9ddbaefc63119b3b09bded29d7","access_level":"public","create_time":"$D2020-09-21T20:38:55.156Z","update_time":"$D2024-10-12T18:03:00.584Z","view_time":null,"first_public_time":"$D2020-09-21T21:05:45.600Z","has_unpublished_edits":null,"fork":{"id":"1b4d64cff7e31bff","slug":"interaction","title":"Interaction","owner":{"id":"33e135341fd39b6b","login":"uwdata","name":"UW Interactive Data Lab"}},"stars":5,"starred":false,"owner":{"type":"team","id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization","avatar_url":"https://avatars-next.observableusercontent.com/2a4662d76ddc4e8af163f38a894b7dee483e6eee05971cfed3099a7294121cae","tier":"education_2026"},"version":1399,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0cdb76d88ad28e97","login":"magrawala","name":"Maneesh Agrawala","avatar_url":"https://avatars-next.observableusercontent.com/e55499563a4b685b3f94d1d0d5105050a0156951870321631fc6d083fc61138b","tier":null}],"members":[{"type":"individual","id":"0cdb76d88ad28e97","login":"magrawala","name":"Maneesh Agrawala","avatar_url":"https://avatars-next.observableusercontent.com/e55499563a4b685b3f94d1d0d5105050a0156951870321631fc6d083fc61138b","tier":null,"role":"editor"},{"type":"team","id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization","avatar_url":"https://avatars-next.observableusercontent.com/2a4662d76ddc4e8af163f38a894b7dee483e6eee05971cfed3099a7294121cae","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":44,"collection":{"id":"b4e50de3795ed80f","slug":"cs-448b-public-notebooks","title":"CS 448B Vega-Lite Public Notebooks","owner":{"id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization"}},"type":"notebook","body":{"title":"Interaction","cells":[{"id":0,"value":"md`# Interaction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1371,"value":"md`\n*This document was adapted from [a reading](https://observablehq.com/@uwdata/interaction) by the UW Interactive Data Lab.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {uniqueValid} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`\n

\n## Datasets\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"md`\nWe will visualize a variety of datasets from the vega-datasets collection:\n\n- A dataset of \\`cars\\` from the 1970s and early 1980s,\n- A dataset of \\`movies\\`, previously used in the [Data Transformation](https://observablehq.com/@uwdata/data-transformation) notebook,\n- A dataset containing ten years of [S&P 500](https://en.wikipedia.org/wiki/S%26P_500_Index) (\\`sp500\\`) stock prices, and\n- A dataset of \\`flights\\`, including departure time, distance, and arrival delay.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"datasets = require('vega-datasets@1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"cars = datasets['cars.json'].url // use URL","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"movies = datasets['movies.json']() // load dataset","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"sp500 = datasets['sp500.csv'].url // use URL","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"flights = datasets['flights-5k.json'].url // use URL","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`\n

\n## Introducing Selections\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"{\n const selection = vl.selectSingle();\n \n return vl.markCircle()\n .data(cars)\n .select(selection)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().if(selection, vl.fieldO('Cylinders')).value('grey'),\n vl.opacity().if(selection, vl.value(0.8)).value(0.1)\n )\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"md`\nOf course, highlighting individual data points one-at-a-time is not particularly exciting! As we'll see, however, single value selections provide a useful building block for more powerful interactions. Moreover, single value selections are just one of the three selection types provided by Vega-Lite:\n\n- \\`selectSingle\\` - select a single discrete value, by default on click events. \n- \\`selectMulti\\` - select multiple discrete values. The first value is selected on mouse click and additional values toggled using shift-click. \n- \\`selectInterval\\` - select a continuous range of values, initiated by mouse drag.\n\nLet's compare each of these selection types side-by-side. To keep our code tidy we'll first define a function (\\`plot\\`) that generates a scatter plot specification just like the one above. We can pass a selection to the \\`plot\\` function to apply it to the chart:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"function plot(selection) {\n return vl.markCircle()\n .data(cars)\n .select(selection)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().if(selection, vl.fieldO('Cylinders')).value('grey'),\n vl.opacity().if(selection, vl.value(0.8)).value(0.1)\n )\n .width(240)\n .height(180);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"md`\nLet's use our \\`plot\\` function to create three chart variants, one per selection type.\n\nThe first (\\`single\\`) chart replicates our earlier example. The second (\\`multi\\`) chart supports shift-click interactions to toggle inclusion of multiple points within the selection. The third (\\`interval\\`) chart generates a selection region (or _brush_) upon mouse drag. Once created, you can drag the brush around to select different points, or scroll when the cursor is inside the brush to scale (zoom) the brush size.\n\n_Try interacting with each of the charts below!_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"vl.hconcat(\n plot(vl.selectSingle()).title('Single (Click)'), \n plot(vl.selectMulti()).title('Multi (Shift-Click)'), \n plot(vl.selectInterval()).title('Interval (Drag)')\n).render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"md`\nThe examples above use default interactions (click, shift-click, drag) for each selection type. We can further customize the interactions by providing input event specifications using [Vega event selector syntax](https://vega.github.io/vega/docs/event-streams/). For example, we can modify our \\`single\\` and \\`multi\\` charts to trigger upon \\`mouseover\\` events instead of \\`click\\` events.\n\n_Hold down the shift key in the second chart to \"paint\" with data!_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"vl.hconcat(\n plot(vl.selectSingle().on('mouseover')).title('Single (Mouseover)'), \n plot(vl.selectMulti().on('mouseover')).title('Multi (Shift-Mouseover)')\n).render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`\nNow that we've covered the basics of Vega-Lite selections, let's take a tour through the various interaction techniques they enable!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`\n

\n## Dynamic Queries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"md`\nTo start, let's extract the unique (non-null) genres from the \\`movies\\` data:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"genres = uniqueValid(movies, d => d.Major_Genre)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"md`For later use, let's also define a list of unique \\`MPAA_Rating\\` values:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"mpaa = ['G', 'PG', 'PG-13', 'R', 'NC-17', 'Not Rated']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"md`\nNow let's create a \\`single\\` selection bound to a drop-down menu.\n\n*Use the dynamic query menu below to explore the data. How do ratings vary by genre? How would you revise the code to filter \\`MPAA_Rating\\` (G, PG, PG-13, etc.) instead of \\`Major_Genre\\`?*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"{ \n const selectGenre = vl.selectSingle('Select') // name the selection 'Select'\n .fields('Major_Genre') // limit selection to the Major_Genre field\n .init({Major_Genre: genres[0]}) // use first genre entry as initial value\n .bind(vl.menu(genres)); // bind to a menu of unique genre values\n \n // scatter plot, modify opacity based on genre selection\n return vl.markCircle()\n .data(movies)\n .select(selectGenre)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating'),\n vl.y().fieldQ('IMDB_Rating'),\n vl.tooltip().fieldN('Title'),\n vl.opacity().if(selectGenre, vl.value(0.75)).value(0.05)\n )\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`\nOur construction above leverages multiple aspects of selections:\n\n- We give the selection a name (\\`'Select'\\`). This name is not required, but allows us to influence the label text of the generated dynamic query menu. (_What happens if you remove the name? Try it!_)\n- We constrain the selection to a specific data field (\\`Major_Genre\\`). Earlier when we used a \\`single\\` selection, the selection mapped to individual data points. By limiting the selection to a specific field, we can select _all_ data points whose \\`Major_Genre\\` field value matches the single selected value.\n- We initialize \\`init(...)\\` the selection to a starting value.\n- We \\`bind\\` the selection to an interface widget, in this case a drop-down \\`menu\\`.\n- As before, we then use a conditional encoding to control the opacity channel.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"md`\n### Binding Selections to Multiple Inputs\n\nOne selection instance can be bound to _multiple_ dynamic query widgets. Let's modify the example above to provide filters for _both_ \\`Major_Genre\\` and \\`MPAA_Rating\\`, using radio buttons instead of a menu. Our \\`single\\` selection is now defined over a single _pair_ of genre and MPAA rating values\n\n_Look for surprising conjunctions of genre and rating. Are there any G or PG-rated horror films?_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"{ \n // single-value selection over [Major_Genre, MPAA_Rating] pairs\n // use specific hard-wired values as the initial selected values\n const selection = vl.selectSingle('Select')\n .fields('Major_Genre', 'MPAA_Rating')\n .init({Major_Genre: 'Drama', MPAA_Rating: 'R'})\n .bind({Major_Genre: vl.menu(genres), MPAA_Rating: vl.radio(mpaa)});\n \n // scatter plot, modify opacity based on selection\n return vl.markCircle()\n .data(movies)\n .select(selection)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating'),\n vl.y().fieldQ('IMDB_Rating'),\n vl.tooltip().fieldN('Title'),\n vl.opacity().if(selection, vl.value(0.75)).value(0.05)\n )\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"md`_Fun facts: The PG-13 rating didn't exist when the movies [Jaws](https://www.imdb.com/title/tt0073195/) and [Jaws 2](https://www.imdb.com/title/tt0077766/) were released. The first film to receive a PG-13 rating was 1984's [Red Dawn](https://www.imdb.com/title/tt0087985/)._

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"{\n const brush = vl.selectInterval()\n .encodings('x'); // limit selection to x-axis (year) values\n \n // dynamic query histogram\n const years = vl.markBar({width: 4})\n .data(movies)\n .select(brush)\n .encode(\n vl.x().year('Release_Date').title('Films by Release Year'),\n vl.y().count().title(null)\n )\n .width(600)\n .height(50);\n \n // ratings scatter plot\n const ratings = vl.markCircle()\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating'),\n vl.y().fieldQ('IMDB_Rating'),\n vl.tooltip().fieldN('Title'),\n vl.opacity().if(brush, vl.value(0.75)).value(0.05)\n )\n .width(600)\n .height(400);\n\n return vl.vconcat(years, ratings).spacing(5).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"md`\nThe example above provides dynamic queries using a _linked selection_ between charts:\n\n- We create an \\`interval\\` selection (\\`brush\\`), and call \\`.encodings('x')\\` to limit the selection to the x-axis only, resulting in a one-dimensional selection interval.\n- We register \\`brush\\` with our histogram of films per year via \\`.select(brush)\\`.\n- We use \\`brush\\` in a conditional encoding to adjust the scatter plot \\`opacity\\`.\n\nThis interaction technique of selecting elements in one chart and seeing linked highlights in one or more other charts is known as [_brushing & linking_](https://en.wikipedia.org/wiki/Brushing_and_linking).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`\n

\n## Navigation: Panning & Zooming\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"md`\nThe movie rating scatter plot is a bit cluttered in places, making it hard to examine points in denser regions. Using the interaction techniques of _panning_ and _zooming_, we can inspect dense regions more closely.\n\nLet's start by thinking about how we might express panning and zooming using Vega-Lite selections. What defines the \"viewport\" of a chart? _Axis scale domains!_\n\nWe can change the scale domains to modify the visualized range of data values. To do so interactively, we can bind an \\`interval\\` selection to scale domains with the code \\`.bind('scales')\\`. The result is that instead of an interval brush that we can drag and zoom, we instead can drag and zoom the entire plotting area!\n\n_In the chart below, click and drag to pan (translate) the view, or scroll to zoom (scale) the view. What can you discover about the precision of the provided rating values?_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"vl.markCircle()\n .data(movies)\n .select(\n vl.selectInterval().bind('scales') // bind interval selection to scale domains\n )\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating'),\n vl.y().fieldQ('IMDB_Rating')\n .axis({minExtent: 30}), // add min extent to stabilize axis title placement\n vl.tooltip(['Title', 'Release_Date', 'IMDB_Rating', 'Rotten_Tomatoes_Rating'])\n )\n .width(600)\n .height(450)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"vl.markCircle()\n .data(movies)\n .select(\n vl.selectInterval().bind('scales').encodings('x') // bind to x-axis scale only\n )\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating'),\n vl.y().fieldQ('IMDB_Rating').axis({minExtent: 30}),\n vl.tooltip(['Title', 'Release_Date', 'IMDB_Rating', 'Rotten_Tomatoes_Rating'])\n )\n .width(600)\n .height(450)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md`\n_When zooming along a single axis only, the shape of the visualized data can change, potentially affecting our perception of relationships in the data. [Choosing an appropriate aspect ratio](http://vis.stanford.edu/papers/arclength-banking) is an important visualization design concern!_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`\n

\n## Navigation: Overview + Detail\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"md`\nWhen panning and zooming, we directly adjust the \"viewport\" of a chart. The related navigation strategy of _overview + detail_ instead uses an overview display to show _all_ of the data, while supporting selections that pan and zoom a separate focus display.\n\nBelow we have two area charts showing a decade of price fluctuations for the S&P 500 stock index. Initially both charts show the same data range. _Click and drag in the bottom overview chart to update the focus display and examine specific time spans._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"{\n const brush = vl.selectInterval().encodings('x');\n const x = vl.x().fieldT('date').title(null);\n \n const base = vl.markArea()\n .encode(x, vl.y().fieldQ('price'))\n .width(700);\n \n return vl.data(sp500)\n .vconcat(\n base.encode(x.scale({domain: brush})),\n base.select(brush).height(60)\n )\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"md`Unlike our earlier panning & zooming case, here we don't want to bind a selection directly to the scales of a single interactive chart. Instead, we want to bind the selection to a scale domain in _another_ chart. To do so, we update the \\`x\\` encoding channel for our focus chart, setting the scale \\`domain\\` property to be our \\`brush\\` selection. If no interval is defined (the selection is empty), Vega-Lite ignores the brush and uses the underlying data to determine the domain. When a brush interval is created, Vega-Lite instead uses that as the scale \\`domain\\` for the focus chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md`\n

\n## Details on Demand\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`\nOnce we spot points of interest within a visualization, we often want to know more about them. _Details-on-demand_ refers to interactively querying for more information about selected values. _Tooltips_ are one useful means of providing details on demand. However, tooltips typically only show information for one data point at a time. How might we show more?\n\nThe movie ratings scatterplot includes a number of potentially interesting outliers where the Rotten Tomatoes and IMDB ratings disagree. Let's create a plot that allows us to interactively select points and show their labels.\n\n_Mouse over points in the scatter plot below to see a highlight and title label. Shift-click points to make annotations persistent and view multiple labels at once. Which movies are loved by Rotten Tomatoes critics, but not the general audience on IMDB (or vice versa)? See if you can find possible errors, where two different movies with the same name were accidentally combined!_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"md`\nThe example above adds three new layers to the scatter plot: a circular annotation, white text to provide a legible background, and black text showing a film title. In addition, this example uses two selections in tandem:\n\n1. A single selection (\\`hover\\`) that includes \\`.nearest(true)\\` to automatically select the nearest data point as the mouse moves.\n2. A multi selection (\\`click\\`) to create persistent selections via shift-click.\n\nBoth selections include the call \\`.empty('none')\\` to indicate that no points should be included if a selection is empty. These selections are then combined into a single filter predicate — \\`vl.or(hover, click)\\` — to include points that reside in _either_ selection. We use this predicate to filter the new layers to show annotations and labels for selected points only.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md`\nUsing selections and layers, we can realize a number of different designs for details on demand! For example, here is a log-scaled time series of technology stock prices, annotated with a guideline and labels for the date nearest the mouse cursor:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"timeSeries","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"md`\nTo see the code for this line chart example, visit the imported notebook:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"import {plot as timeSeries} from '@vega/vega-lite-annotated-time-series'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"md`\n

\n##

Exercise: Putting it all together

\n\nEarlier we saw a scatter plot of the movies data that provides a dynamic query over years. We've copied that code below. Use what you have learned to add two \\`rule\\` marks to this code that show the average IMDB and Rotten Tomatoes ratings for the data contained within the year \\`interval\\` selection. (Some hints):\n* Use \\`firebrick\\` as the color of both rules\n* See the [**A View Composition Algebra** section of this notebook](https://observablehq.com/@stanfordvis/multi-view-composition) if you need to remember how to use create a \\`markRule()\\`\n* Make sure to use \\`vl.layer()\\` to compose the rules with the scatterplot\n* Be sure to check that your rules update correctly as you change the set of years included in the brush\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"{\n const brush = vl.selectInterval()\n .encodings('x'); // limit selection to x-axis (year) values\n \n // dynamic query histogram\n const years = vl.markBar({width: 4})\n .data(movies)\n .select(brush)\n .encode(\n vl.x().year('Release_Date').title('Films by Release Year'),\n vl.y().count().title(null)\n )\n .width(600)\n .height(50);\n \n //Add code for IMDB rule\n \n\n //Add code for Rotten Tomatoes rule\n \n \n // ratings scatter plot\n const ratings = vl.markCircle()\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten_Tomatoes_Rating'),\n vl.y().fieldQ('IMDB_Rating'),\n vl.tooltip().fieldN('Title'),\n vl.opacity().if(brush, vl.value(0.75)).value(0.05)\n )\n .width(600)\n .height(400);\n\n // Add code to layer together the ratings, and the rules\n \n return vl.vconcat(years, ratings).spacing(5).render(); //Update to add in layered chart\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\n

\n## Brushing & Linking, Revisited\n\nEarlier in this notebook we saw an example of _brushing & linking_: using a dynamic query histogram to highlight points in a movie rating scatter plot. Here, we'll visit some additional examples involving linked selections.\n\nReturning to the \\`cars\\` dataset, we can use the \\`repeat\\` operator to build a [scatter plot matrix (SPLOM)](https://en.wikipedia.org/wiki/Scatter_plot#Scatterplot_matrices) that shows associations between mileage, acceleration, and horsepower. We can define an \\`interval\\` selection and include it _within_ our repeated scatter plot specification to enable linked selections among all the plots.\n\n_Click and drag in any of the plots below to perform brushing & linking!_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"{\n const brush = vl.selectInterval()\n .resolve('global'); // resolve all selections to a single global instance\n \n return vl.markCircle()\n .data(cars)\n .select(brush)\n .encode(\n vl.x().fieldQ(vl.repeat('column')),\n vl.y().fieldQ(vl.repeat('row')),\n vl.color().if(brush, vl.fieldO('Cylinders')).value('grey'),\n vl.opacity().if(brush, vl.value(0.8)).value(0.1)\n )\n .width(140)\n .height(140)\n .repeat({\n column: ['Acceleration', 'Horsepower', 'Miles_per_Gallon'],\n row: ['Miles_per_Gallon', 'Horsepower', 'Acceleration']\n })\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`\nNote above the use of the \\`.resolve()\\` method on the \\`interval\\` selection. The default setting of \\`'global'\\` indicates that across all plots only one brush can be active at a time. However, in some cases we might want to define brushes in multiple plots and combine the results. If we use \\`resolve('union')\\`, the selection will be the _union_ of all brushes: if a point resides within any brush it will be selected. Alternatively, if we use \\`resolve('intersect')\\`, the selection will consist of the _intersection_ of all brushes: only points that reside within all brushes will be selected.\n\n_Try changing the \\`resolve\\` parameter to \\`'union'\\` and \\`'intersect'\\` and see how it changes the resulting selection logic._\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"{\n const brush = vl.selectInterval().encodings('x').resolve('intersect');\n \n const hist = vl.markBar().encode(\n vl.x().fieldQ(vl.repeat('row'))\n .bin({maxbins: 100, minstep: 1}) // up to 100 bins, but no smaller than 1 unit\n .axis({format: 'd', titleAnchor: 'start'}), // integer format, left-aligned title\n vl.y().count().title(null) // no y-axis title\n );\n \n return vl.layer(\n hist.select(brush).encode(vl.color().value('lightgrey')),\n hist.transform(vl.filter(brush))\n )\n .width(900).height(100)\n .repeat({row: ['delay', 'distance', 'time']})\n .data(flights)\n .transform(\n vl.calculate('datum.delay < 180 ? datum.delay : 180').as('delay'), // clamp delays > 3 hours\n vl.calculate('hours(datum.date) + minutes(datum.date) / 60').as('time') // fractional hours\n )\n .config({view: {stroke: null}}) // no outline\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"md`\n_By cross-filtering you can observe that delayed flights are more likely to depart at later hours. This phenomenon is familiar to frequent fliers: a delay can propagate through the day, affecting subsequent travel by that plane. For the best odds of an on-time arrival, book an early flight!_\n\nThe combination of multiple views and interactive selections can enable valuable forms of multi-dimensional reasoning, turning even basic histograms into powerful input devices for asking questions of a dataset!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2d:"$2c:body"