2c:null 2d:["$","title",null,{"children":"CSE 412 Section 4: Interactive Vega-Lite | cse412 | Observable"}] 32:T4ed,md`

## Selections There are two types of selection: - \`selectPoint\` - select multiple discrete data values; the first value is selected on click and additional values toggled on shift-click. - \`selectInterval\` - select a continuous range of values, initiated by mouse drag. 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. Alternatively, if you are using vega-lite v5 or above, you should use \`.params()\` instead of \`.select()\` as selections are one example of a broader class of interactive [_parameters_](https://vega.github.io/vega-lite/docs/parameter.html) supported by Vega-Lite. A parameter becomes a selection when the select property is specified. This property identifies properties of a selection including its type (point or interval), which determines the default events that trigger a selection and the resultant data query. Since it is an advanced way for selection and signal (anywhere works with select() can be simply replaced with params()), we will use \`params()\` for the rest of our tutorial. Let's see a single example below, we'll create a selection instance by calling \`vl.selectPoint()\`: `33:T6c0,md`To use the Vega-Lite API in the browser outside of Observable, you need to include all the dependencies, set the default configuration, and then register the Vega libraries. Here is a skeleton, just copy and paste this into your favorite text editor and you can create your graph after \`//your visualization goes here\`: ~~~html

~~~`34:T6d6,md`~~~html

~~~`35:[] 30:{"id":"24de7dd0ac1fa5c1","slug":"cse-412-section-4-interactive-vega-lite","title":"CSE 412 Section 4: Interactive Vega-Lite","thumbnail":"d20e057fe0f1e3bd44aa6cd6562b57909b6e974d1d0b3211a958cfc361a4c0fb","access_level":"public","create_time":"$D2021-01-21T12:21:32.449Z","update_time":"$D2021-04-30T14:27:27.160Z","view_time":null,"first_public_time":"$D2021-01-24T07:14:08.486Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"16c5e985f8389c16","login":"cse412","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e212536a9dc2df98bc8c2baec0ece23b782e9d064e97e67ede01a5ca9a933fa9","tier":"starter_2024"},"version":1149,"publish_version":1149,"role":null,"authored":false,"authors":[{"type":"individual","id":"9461267a8818334e","login":"cse412","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e212536a9dc2df98bc8c2baec0ece23b782e9d064e97e67ede01a5ca9a933fa9","tier":null}],"members":[{"type":"individual","id":"9461267a8818334e","login":"cse412","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e212536a9dc2df98bc8c2baec0ece23b782e9d064e97e67ede01a5ca9a933fa9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":{"id":"dfcea94f61fa37af","slug":"uw-cse-412-quiz-sections","title":"UW CSE 412 Quiz Sections","owner":{"id":"16c5e985f8389c16","login":"cse412","name":""}},"type":"notebook","body":{"titling":"auto","title":"CSE 412 Section 4: Interactive Vega-Lite","cells":[{"id":0,"value":"md`# CSE 412 Section 4: Interactive Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html` $\"Vega-Lite$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`\nHi friends, welcome back! 😄\n\nThis week, We will explore:\n1. Interactions in Vega-Lite.\n2. Embed your Vega-Lite visualization in a Web Page.\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`

\n_“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)`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`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...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`\n## Preparation\n\nWe will build on from what we have last week:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"cars = (await require('vega-datasets@1'))['cars.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`Here is a quick recap of our dataset:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"printTable(cars.slice(0,7))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`

\n## Tooltips`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"import {plot as sample} from '@cse412/cse-412-section-3-vega-lite'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"sample","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`This is a static visualization we built last week, we can add _tooltips_ to every point by adding [vl.tooltip(…values)](https://vega.github.io/vega-lite-api/api/tooltip) in the encode.\nLet's add car name to each point, and hover to see the effect:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.tooltip('Name') // New!\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`If you want to add more information to a tooltip, using [val1, val2, ...] to do so:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.tooltip(['Name', 'Origin']) // New!\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md`😮 _Notice that nothing will happen as you click points on the graph below, because we haven't defined **how** our graph should respond for selections._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"{\n // The selection instance stores our selected points, and we can use this to do conditional encodings later.\n const selection = vl.selectPoint();\n \n return vl.markPoint({filled:true})\n .data(cars)\n .encode(\n vl.color().value('teal'), // same effect as putting color in the markPoint({...})\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon')\n )\n // Use params() method to say\n // \"the 'selection' should be invoked, please let me interact with the graph by the type in selection!\"\n .params(selection)\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`Now, lets add some conditional encodings so that our visualization will act differently for selections!\nFirst, Let's try changing the opacity of points to achieve a highlighting effect by:\n~~~ js\nvl.opacity().if(selection).value(0.1)\n~~~\n\nThis encoding says that data points contained within the \\`selection\\` will stay as the default, while non-selected data points' opacity will get set to 0.1.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"{\n const selection = vl.selectPoint();\n \n return vl.markPoint({filled:true})\n .data(cars)\n .encode(\n vl.color().value('teal'),\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.opacity().if(selection).value(0.1) // New!\n )\n .params(selection)\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`Let's refine the highlights by also modifying the color:\n~~~ js\nvl.color().if(selection, vl.value('teal')).value(\"gray\")\n~~~\n\nThis encoding says that data points contained within the \\`selection\\` will be teal, while non-selected data points' opacity will get set to gray.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"{\n const selection = vl.selectPoint();\n \n return vl.markPoint({filled:true})\n .data(cars)\n .encode(\n vl.color().if(selection, vl.value('teal')).value(\"gray\"), // New!\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.opacity().if(selection).value(0.1) \n )\n .params(selection)\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`👀 **Try It Yourself**: Deleting \\`vl.value('teal')\\` in \\`if()\\` above, see what's the default color in Vega-Lite.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`### 👉Practice 1\n\n- Change \\`selection\\` above to be:\n - \\`vl.selectInterval()\\` [drag]\n\n\n- Since _Click_ is the default way to select data points, \\`vl.selectPoint()\\` is equivalent to \\`vl.selectPoint().on('click')\\`. Try other events like mouseover for interactions:\n - \\`vl.selectPoint().on('mouseover')\\` [don't forget press _Shift_ when hovering to see select multi points effects]\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`\n

\n## Dynamic Queries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`a dynamic query:\n\n- represents a query graphically,\n- provides visible limits on the query range,\n- provides a graphical representation of the data and query result,\n- gives immediate feedback of the result after every query adjustment,\n- and allows novice users to begin working with little training.\n\nA 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.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`Using our cars example, let's explore data based on their Origin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"import {uniqueValid} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`\\`uniqueValid\\` is a method written by Jeff Heer to extract the unique (non-null) values (Origins) from the data. You can go to the \"data-utilities\" notebook by clicking on the link in the important statement and even see the code! If you are using Vega-Lite outside of Observable, you can write such method on your own by refering to \\`uniqueValid\\` source code in \\`@uwdata/data-utilities\\` [_It's always important to remember to appropriately cite any code you use/find online for your projects_].\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"origin = uniqueValid(cars, d => d.Origin)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"md`

\n### Drop-Down Menu: [vl.menu(…options)](https://vega.github.io/vega-lite-api/api/menu)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"{\n const selection = vl.selectPoint('Cars') // name the selection 'Cars' (what will happen if we delete 'Cars'?)\n .fields('Origin') // limit selection to the Origin field\n .init(origin[0]) // use first genre entry as initial value\n .bind(vl.menu(origin)); // bind to a menu of unique genre values\n \n // Nothing changed below\n return vl.markPoint({filled:true})\n .data(cars)\n .params(selection)\n .encode(\n vl.color().if(selection, vl.value('teal')).value(\"gray\"),\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.opacity().if(selection).value(0.1) \n )\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`### Radio Buttons: [vl.radio(…options)](https://vega.github.io/vega-lite-api/api/radio)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"{\nconst selection = vl.selectPoint('Cars')\n .fields('Origin') \n .init(origin[0]) \n .bind(vl.radio(origin)); // New!\n\n \n // Nothing changed below\n return vl.markPoint({filled:true})\n .data(cars)\n .params(selection)\n .encode(\n vl.color().if(selection, vl.value('teal')).value(\"gray\"),\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.opacity().if(selection).value(0.1) \n )\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`Check **[here](https://vega.github.io/vega-lite-api/api/#selection-bindings)** for more selection bindings (vl.checkbox, vl.menu, vl.radio, vl.slider).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`\n### Binding Selections to Multiple Inputs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`Let's explore data by both cylinders and origins! First using \\`uniqueValid\\` to get a list of cylinders!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"cylinders = uniqueValid(cars, d => d.Cylinders)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"{ const selection = vl.selectPoint('Cars')\n .fields('Origin', 'Cylinders') // New!\n .init({Origin: origin[2], Cylinders: cylinders[3]}) // New! Notice what we have for initial values.\n .bind({Origin: vl.menu(origin).name(\"Origin\"), Cylinders: vl.slider(3, 8, 1).name(\"Cylinders\")}); // New!\n\n return vl.markCircle()\n .data(cars)\n .params(selection)\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().if(selection, vl.fieldN('Origin')).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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"md`Instead of binding to a menu of Origin, we could just bind directly to the legend:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"{\n const isOrigin = vl.selectPoint('isOrigin')\n .fields('Origin')\n .bind('legend'); // bind to legend interactions\n \n const numCylinders = vl.selectPoint('Cars')\n .fields('Cylinders')\n .init(cylinders[3])\n .bind(vl.slider(3, 8, 1).name(\"Cylinders\"));\n \n const show = vl.and(isOrigin, numCylinders); // combine selections\n\n return vl.markCircle()\n .data(cars)\n .params(isOrigin, numCylinders) // add selections to plot\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().if(show, vl.color().fieldN('Origin')).value('grey'),\n vl.opacity().if(show, vl.value(1.0)).value(0.2)\n )\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"md`You could also use parameter to specify a global variable:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"import {Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"year_slider = Range([1970, 1980], { step: 1, value: 1970 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"md`And this global slider could be binded to our visualization later!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`You may have notice the secret of interactions in Vega-Lite. We basically define \\`selection\\` in different ways and associate that to different conditional encodings.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"md`### 👉Practice 2\n\n\nDiscuss what is the difference between two graph below, how are they made differently? Which one do you like?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"md`(Drag the global slider defined above to see the change of Graph 1.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"{\n const isOrigin = vl.selectPoint('isOrigin')\n .fields('Origin')\n .bind('legend'); // bind to legend interactions\n \n const isYear = vl.param('isYear')\n .bind(year_slider); // bind to slider we defined above\n \n const show = vl.and(isOrigin, isYear); // combine selections\n\n return vl.markCircle()\n .data(cars)\n .transform(\n vl.calculate('year(datum.Year)').as('Year'),\n vl.filter(\"isYear === datum.Year\") // try to comment this line out to see what would happened.\n )\n .params(isOrigin, isYear) // add selections to plot\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().if(show, vl.color().fieldN('Origin')).value('grey'),\n vl.opacity().if(show, vl.value(1.0)).value(0.2)\n )\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"{\n const isOrigin = vl.selectPoint('isOrigin')\n .fields('Origin')\n .bind('legend'); // bind to legend interactions\n \n const isYear = vl.selectPoint('isYear')\n .fields('Year').value(1970)\n .bind(vl.slider(1970, 1980, 1).name('Year')); // bind to slider\n \n const show = vl.and(isOrigin, isYear); // combine selections\n\n return vl.markCircle()\n .data(cars)\n .transform(\n vl.calculate('year(datum.Year)').as('Year')\n )\n .params(isOrigin, isYear) // add selections to plot\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.color().if(show, vl.color().fieldN('Origin')).value('grey'),\n vl.opacity().if(show, vl.value(1.0)).value(0.2)\n )\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"md`==> *Check end of notebook for explanation*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"md`\n## Using Visualizations as Dynamic Queries:\n\nThough 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.\n\nTo address these issues, in this example, you can select years directly by brushing on the histogram to highlight the values in the scatterplot.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"{ \n const brush = vl.selectInterval() // Brush is a better (vivid?) name than selection in this case!\n .encodings('x'); // limit selection to x-axis (year) values\n \n // dynamic query histogram\n const years = vl.markBar()\n .data(cars)\n .params(brush) // params(brush) assure that we are able to drag on the bar chart!\n .encode(\n vl.x().year('Year'),\n vl.y().count().title(null)\n )\n .width(390)\n .height(60)\n\n const scatter = vl.markPoint({filled:true})\n .data(cars)\n .encode(\n vl.color().fieldN('Origin')\n .scale({scheme: 'tableau20'})\n .legend({orient: 'bottom', titleOrient: 'left'}),\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.opacity().if(brush, vl.value(0.75)).value(0.05), // Use brush for conditional encodings\n vl.tooltip('Name')\n )\n .width(390)\n .height(300);\n\n return vl.vconcat(years, scatter).spacing(5).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"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 cars per year via \\`.params(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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"md`👀 **Try It Yourself**: Changing bar chart's x-axis to \"Acceleration\"(_fieldQ_) or \"Displacement\"(_fieldQ_) and then drag to explore any relationship.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`\n### More Brushing & Linking:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"md`Here is a static visualization (review [repeat](https://observablehq.com/@uwdata/multi-view-composition?collection=@uwdata/visualization-curriculum) method if you forget what it is), and we can add brushing & linking easily by adding several lines.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"{\n return vl.markCircle()\n .data(cars)\n .encode(\n vl.x().fieldQ(vl.repeat('column')),\n vl.y().fieldQ(vl.repeat('row')),\n vl.color().fieldO('Cylinders'),\n vl.opacity().value(0.8)\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`First, let's add a brush (i.e. selection)!\n1. create a constant brush.\n2. add params(brush).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"{\n const brush = vl.selectInterval() // create a constant brush\n .resolve('global'); // resolve all selections to a single global instance\n \n return vl.markCircle()\n .data(cars)\n .params(brush) // add selection\n .encode(\n vl.x().fieldQ(vl.repeat('column')),\n vl.y().fieldQ(vl.repeat('row')),\n vl.color().fieldO('Cylinders'),\n vl.opacity().value(0.8)\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"md`Notice that the brush for the diagonal is only along one dimention since the dimention is the same. Then, add conditional encodings!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"{\n const brush = vl.selectInterval()\n .resolve('global');\n \n return vl.markCircle()\n .data(cars)\n .params(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'), // New!\n vl.opacity().if(brush, vl.value(0.8)).value(0.1) // New!\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"md`You may also refine this by binding selections to both legend and the brush:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"{\n const brush = vl.selectInterval()\n .resolve('global'); // resolve all selections to a single global instance\n \n const legend = vl.selectPoint()\n .fields('Cylinders')\n .bind('legend'); // bind to interactions with the color legend\n \n const brushAndLegend = vl.and(brush, legend);\n \n return vl.markCircle()\n .data(cars)\n .params(brush, legend)\n .encode(\n vl.x().fieldQ(vl.repeat('column')),\n vl.y().fieldQ(vl.repeat('row')),\n vl.color().if(brushAndLegend, vl.fieldO('Cylinders')).value('grey'),\n vl.opacity().if(brushAndLegend, 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"md`\nNote above the use of the [.resolve()](https://vega.github.io/vega-lite/docs/selection-resolve.html) method on the \\`interval\\` selection. It has three possible parameters:\n\n- \\`global\\` (default) – only one brush exists for the entire SPLOM. When the user begins to drag, any previous brushes are cleared, and a new one is constructed.\n\n- \\`union\\` – each cell contains its own brush, and points are highlighted if they lie within any of these individual brushes.\n\n- \\`intersect\\` – each cell contains its own brush, and points are highlighted only if they fall within all of these individual brushes.\n\n### 👉Practice 3\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"md`## Navigation: Panning & Zooming `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"md`\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._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .params(\n vl.selectInterval().bind('scales') // Just adding a line of code, how amazing!\n )\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"md`\n

\n## Your First Web Page with Vega-Lite Visualization\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"md`Now, we are going to embed the visualization we just made in a web page.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"vl.markPoint({filled:true, color:'teal'})\n .data(cars)\n .params(\n vl.selectInterval().bind('scales') // Just adding a line of code, how amazing!\n )\n .encode(\n vl.x().fieldQ('Horsepower'),\n vl.y().fieldQ('Miles_per_Gallon'),\n vl.tooltip(['Name','Origin'])\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"md`Copy the html below to a HTML file. Open that, you will see the visualization on web browser!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"md`👀 **Try It Yourself**: What's your favorite visualization so far? Add that to this web page, and enjoy your first web page with Vega-Lite!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"md`

\n## Conclusion\n😄 Hooray! We get here!\n\n[More interactive Vega-Lite examples](https://observablehq.com/@uwdata/interaction?collection=@uwdata/visualization-curriculum) are available here.\n\n[Parameters Documentation](https://vega.github.io/vega-lite/docs/parameter.html) are available here.\n\n[Learn more about the new feature - Parameters in Vega Lite API](https://observablehq.com/@vega/vega-lite-api-v5) here!\n\nAs you can see, Vega-Lite is a powerful tool that can do _lots of_ things in _several_ lines. With what we learned from section 3 and section 4, you are ready to create amazing visualizations by Vega-Lite.\n\nSee you next week!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"md`\n## Practice 2 Explanation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"md`Year slider in the second visualization are made by mapping the projected field to a binding definition, while in the first case we bind a parameter named isYear to an external input element such as a slider (the global slider we made), and we connected this value with our data in transform().`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"md`\n

\n## Acknowledgements\n\nDeveloped by [Yueqian Zhang](https://www.linkedin.com/in/yueqianz/) at the University of Washington based on the work from Jeffrey Heer [@jheer](https://observablehq.com/@jheer), Dominik Moritz, Jake VanderPlas, Brock Craft, Jane Hoffswell and others.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"