30:T546,html ` First, we define a brush selection operator for the scatterplot.

`selection:`	`{brush: {type: "interval",`
adds the selection operator	sets the type of selector (brush) and the type of selection (interval)	sets the selectable area as the x axis

Then we link the brush to color by introducing a "condition". Basically, if data is selected by the brush (that is, falls within the rectangle), the color encoding will resolve to be based on the weather type as usual, otherwise it will turn gray. You can think of this as an If then type of statement. If the points fall within the rectangle area, color those points according to weather in all of the scatterplots, if not, turn them gray.

`color: {condition:`	`{selection: "brush", field: "weather", type: "nominal"}`	`, value: "grey"}`
Creates a conditional statement	Links it to the brush selection and colors based on weather if points fall within brush bounds	Determines what happens if the condition is false. Namely, how to color all the points outside of the brush boundd.

`31:T44e,html ` In it's current state, we can only draw one brush in one scatterplot. If you desire however, you can use the "resolve" operator to allow for multiple selections within separate views. This allows you to layer the selections. One way is using "union". This selects all of the points that are captured in any of the selection boxes you might have created. The other is "intersect", which only selects the points which are contained inside all of the selection boxes. You can think of it like a venn diagram. Union covers points that fall in any part of the venn diagram, and intersect only covers those at the intersection of the venn diagram

`{brush: type: "interval, resolve: "union"}`	`{brush: type: "interval, resolve: "intersect"}`
Multiple selections using brushes select all points contained within selection areas.	Multiple selections using brushes select only the points that co-occur in all of the selection areas	sets the selectable area as the x axis

`32:T48b,VegaLite({ data: {values: data}, vconcat: [ { selection: {brush: {encodings: ["x"], type: "interval"}}, mark: "point", encoding: { color: { condition: { field: "weather", selection: "click", type: "nominal" }, value: "lightgray" }, x: {timeUnit: "monthdate", field: "date", type: "temporal"}, y: {field: "temp_max", type: "quantitative"}, size: {field: "precipitation", type: "quantitative", scale: {domain: [1, 50]}}, }, width: 800, height: 400, }, { transform: [{filter: {selection: "brush"}}], selection: {click: {encodings: ["color"], type: "multi"}}, encoding: { color: { condition: { field: "weather", title: "weather", selection: "click", type: "nominal" }, value: "lightgray" }, x: {aggregate: "count", type: "quantitative"}, y: {field: "weather", type: "nominal"} }, width: 800, mark: "bar", } ] }) 33:[] 2e:{"title":"Interaction","cells":[{"id":0,"value":"md`# Interaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md` In this tutorial we will be going over the basic interactions in Vega-Lite. We will be using faceting, multiple linked views, sorting, brushing, filtering, selections and tooltips.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md` ## Libraries and Data Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"VegaLite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = d3.csv(\"https://vega.github.io/vega-lite/data/seattle-weather.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md` # Multiple takes on Multiple Views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md` First we need to go over the various ways to combine views together`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"md`## Concatenation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md` We can use \"hconcat\" and \"vconcat\" to combine different views together`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"VegaLite(\n {\n data: {values: data},\n hconcat: [{\n mark: { type: \"point\",filled: \"true\"},\n encoding: {\n x: { field: \"precipitation\", type: \"quantitative\"},\n y: {field: \"wind\", type: \"quantitative\"},\n color: {field: \"weather\", type: \"nominal\"}\n },\n },\n {\n mark: {type: \"point\",filled: \"true\"},\n encoding: {\n x: { field: \"temp_max\", type: \"quantitative\"},\n y: {field: \"wind\", type: \"quantitative\"},\n color: {field: \"weather\", type: \"nominal\"}\n },\n }]\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`## HTML Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md` Equivalently, and prehaps with more custamizeability we can create cells with names for each visualization and then combine them into an HTML table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"PW = VegaLite(\n {\n data: {values: data},\n mark: {type: \"point\",filled: \"true\"},\n encoding: {\n x: { field: \"precipitation\", type: \"quantitative\"},\n y: {field: \"wind\", type: \"quantitative\"},\n color: {field: \"weather\", type: \"nominal\"}\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"TW = VegaLite(\n {\n data: {values: data},\n mark: {type: \"point\",filled: \"true\"},\n encoding: {\n x: { field: \"temp_max\", type: \"quantitative\"},\n y: {field: \"wind\", type: \"quantitative\"},\n color: {field: \"weather\", type: \"nominal\"}\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"html` \n \n \n \n \n

${TW}

${PW}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`## \"Repeat\" Operator for small multiples\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md` We can use the \"repeat\" operator for both columns and rows to make a matrix and encode values from these channels to axis or other encodings.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"VegaLite({\n data: {values: data},\n repeat: {\n column: [\"temp_max\", \"wind\", \"precipitation\"],\n row: [\"precipitation\", \"wind\", \"temp_max\"]\n },\n spec: {\n mark: \"point\",\n encoding: {\n x: {field: {repeat: \"column\"}, type: \"quantitative\"},\n y: {field: {repeat: \"row\"}, type: \"quantitative\"},\n color: {field: \"weather\", type: \"nominal\"}\n }\n }\n})\n\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"md` ## Faceting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md` We can create multiple displays using various columns using the repeat operator, or we can also use faceting to drill down on values within a particular column`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"VegaLite({\n data: {values: data},\n facet: {column: {field: \"weather\", type: \"nominal\"}},\n spec: {\n width: 120,\n height: 120,\n mark: \"bar\",\n encoding: {\n x: {bin: \"true\", field: \"wind\", type: \"quantitative\"},\n y: {aggregate: \"count\", type: \"quantitative\"}\n }\n }\n})\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"md` # Interactions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md` ## Tooltips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md` Tooltip based on underlying data with a bar chart. Tooltips can be added through an encoding channel. Simply add each field you wish to display in the tooltip channel as seen below. For more customizations and different configurations, please consult the Vega-lite documentation on their website.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"VegaLite({\n data: {values: data},\n mark: \"bar\",\n encoding: {\n x: {field: \"weather\", type: \"nominal\"},\n y: {aggregate: \"count\", field: \"*\", type: \"quantitative\"},\n tooltip: [\n {field: \"weather\", type: \"nominal\"},\n {aggregate: \"mean\", field: \"precipitation\", type: \"quantitative\"}\n ]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"md` ## Overview and Detail`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md` Here we make a combined view of overview and detail by using a brush interaction to zoom in on a details in a subset of the timeseries data in one view while maintaining the context in a linked view. First we make two views of the data set using the same visual representation to maintain clarity. Note that we don't have to specify the height for the first vis - the system makes some reasonable assumptions. The data are the same in both views to start, but the lower view - the brush - will always maintain the full view of the data, where the top detailed view will show the data selected by the brush . Here are the two views without the brush.t`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"VegaLite({\n data: {values: data},\n vconcat: [\n {\n mark: \"area\",\n width: 480,\n encoding: {\n x: {\n field: \"date\",\n type: \"temporal\",\n axis: {title: \"\"}\n },\n y: {field: \"temp_max\", type: \"quantitative\"}}\n }, {\n height: 60,\n width: 480,\n mark: \"area\",\n encoding: {\n x: {\n field: \"date\",\n type: \"temporal\"\n },\n y: {\n field: \"temp_max\",\n type: \"quantitative\",\n axis: {tickCount: 2, gride: false}\n }\n }\n }]\n})\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"md `Now we add the following code to add the brush interaction. Here we are going to develop the code for a \"scrubber\" - a simple brush that manipulates a time view to change another representation (it's called a scrubber because we can \"scrub\" back and forward in both scale (range) and position of the data). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"html `\nFirst, we have to add a selection operator to the lower view and tell it where the selectable area is.
\n
\n\n\n\n\n\n\n\n\n\n\n

`selection:`	`{brush: {type: \"interval\",`	`encodings: [\"x\"]}`
adds the selection operator	sets the type of selector (brush) and the type of selection (interval)	sets the selectable area as the x axis

\n
\nThen we need to link the brush to the top view by adding it to the x-axis encoding.

\n\n\n\n\n\n\n\n\n\n\n

`mark{encoding:x:`	`{scale: {domain:`	`{selection: \"brush\"}}`
identifies the dimension to be brushed	sets what can be affected	connects the brush selector

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md `And here are the linked views with the brushable overview in the smaller timeline.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"VegaLite({\n data: {values: data},\n vconcat: [\n {\n mark: \"area\",\n width: 480,\n encoding: {\n x: {\n field: \"date\",\n type: \"temporal\",\n scale: {domain: {selection: \"brush\"}},\n axis: {title: \"\"}\n },\n y: {field: \"temp_max\", type: \"quantitative\"}}\n }, {\n height: 60,\n width: 480,\n mark: \"area\",\n selection: {\n brush: {type: \"interval\", encodings: [\"x\"]}\n },\n encoding: {\n x: {\n field: \"date\",\n type: \"temporal\"\n },\n y: {\n field: \"temp_max\",\n type: \"quantitative\",\n axis: {tickCount: 2, gride: false}\n }\n }\n }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"md` ## Brushing and Highlighting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md` Here we are looking at a Scatterplot Matrix (SPLOM) that we created above. This view allows us to look at each individual scatterplat simultaneously, but unfortunately we cannot link individual points between each scatterplot. To achieve this end, we once again use interaction. In this situation we use a brushing and highlighting technique to select a group of points and view them highlighted in the other scatterplots.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"VegaLite({\n data: {values: data},\n repeat: {\n column: [\"temp_max\", \"wind\", \"precipitation\"],\n row: [\"precipitation\", \"wind\", \"temp_max\"]\n },\n spec: {\n mark: \"point\",\n encoding: {\n x: {field: {repeat: \"column\"}, type: \"quantitative\"},\n y: {field: {repeat: \"row\"}, type: \"quantitative\"},\n color: {field: \"weather\", type: \"nominal\"}\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"md` As you may have noticed, this representation uses the repeat operator so our code will focus on the view specification of a generic scatterplot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"VegaLite({\n data: {values: data},\n repeat: {\n column: [\"temp_max\", \"wind\", \"precipitation\"],\n row: [\"precipitation\", \"wind\", \"temp_max\"]\n },\n spec: {\n mark: \"point\",\n selection: {\n brush: {\n type: \"interval\",\n }\n },\n encoding: {\n x: {field: {repeat: \"column\"}, type: \"quantitative\"},\n y: {field: {repeat: \"row\"}, type: \"quantitative\"},\n color: {condition: {selection: \"brush\", field: \"weather\", type: \"nominal\"}, value: \"grey\"}\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"VegaLite({\n data: {values: data},\n repeat: {\n column: [\"temp_max\", \"wind\", \"precipitation\"],\n row: [\"precipitation\", \"wind\", \"temp_max\"]\n },\n spec: {\n mark: \"point\",\n selection: {\n brush: {\n type: \"interval\",\n resolve: \"intersect\"\n }\n },\n encoding: {\n x: {field: {repeat: \"column\"}, type: \"quantitative\"},\n y: {field: {repeat: \"row\"}, type: \"quantitative\"},\n color: {condition: {selection: \"brush\", field: \"weather\", type: \"nominal\"}, value: \"grey\"}\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md` ## Brushing and Filtering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md` Sometimes in might be useful to filter data based on a brushing interaction. The following examples covers this`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"VegaLite(\n {\n data: {values: data},\n hconcat: [{\n mark: { type: \"point\",filled: \"true\"},\n encoding: {\n x: { field: \"precipitation\", type: \"quantitative\"},\n y: {field: \"temp_min\", type: \"quantitative\"},\n color: {field: \"weather\", type: \"nominal\"}\n },\n }, {\n mark: {type: \"point\",filled: \"true\"},\n encoding: {\n x: { field: \"temp_max\", type: \"quantitative\", scale: {domain: [-5, 40]}},\n y: {field: \"wind\", type: \"quantitative\", scale: {domain: [0, 10]}},\n color: {field: \"weather\", type: \"nominal\"}\n },\n }]\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"html `\nHere we are using a concatenation of multiple views. We begin by creating a brush selection on the first view. If unclear about this selection, please refer to previous examples. Next we connect this selection to a transformation using the transform operator which is part of the view specification of the second visualization. The transformation being performed is a filter for all the points contained within the bounds of the brush selecction..
\n
\n\n\n\n\n\n\n\n\n

`transform: [`	`{filter: {selection: \"brush\"}`
Introduces a transform operator which changes the view or underlying data	Filters data based on brush selection

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"VegaLite(\n {\n data: {values: data},\n hconcat: [{\n selection: {brush: {type: \"interval\"}},\n mark: { type: \"point\",filled: \"true\"},\n encoding: {\n x: { field: \"precipitation\", type: \"quantitative\"},\n y: {field: \"temp_min\", type: \"quantitative\"},\n color: {field: \"weather\", type: \"nominal\"}\n },\n }, {\n transform: [\n {filter: {selection: \"brush\"}}\n ],\n mark: {type: \"point\",filled: \"true\"},\n encoding: {\n x: { field: \"temp_max\", type: \"quantitative\", scale: {domain: [-5, 40]}},\n y: {field: \"wind\", type: \"quantitative\", scale: {domain: [0, 10]}},\n color: {field: \"weather\", type: \"nominal\"}\n },\n }]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md` ## 'Cross-filtering' using 'layers'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"md` In the following example we will be performing a \"cross-filtering\" interaction. Essentially, we are layering two histograms on top of each other across multiple dimensions and then filtering the values of one of them to create the perception of highlighting. We see the selected datapoints reflected in the view, but in the background we see the original view as well which provides context.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"VegaLite({\n data: {values: data},\n repeat: {column: [\"wind\", \"precipitation\", \"temp_max\"]},\n spec: {\n width: 120,\n height: 120,\n layer: [{\n selection: {brush: {type: \"interval\", encodings: [\"x\"]}},\n mark: \"bar\",\n encoding: {\n y: {aggregate: \"count\", type: \"quantitative\"},\n x: {field: {repeat: \"column\"}, bin: \"true\", type: \"quantitative\"}\n }\n }, {\n transform: [{filter: {selection: \"brush\"}}],\n mark: \"bar\",\n encoding: {\n y: {aggregate: \"count\", type: \"quantitative\"},\n x: { field: {repeat: \"column\"}, bin: \"true\", type: \"quantitative\"},\n color: {value: \"goldenrod\"}\n }\n }] \n}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"md` To accomplish this, we use the \"layer\" operator for combinining multiple views as well as a repeat operator. The layer operator syntax is pretty much identical to \"hconcat\" or \"vconcat\", except the views are layered on top of each other on aligned axes. The first view specification will be the lowest level, and the following one will be layered on top.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"html `\nFirst, we create a brush selection on the lower histogram view. This selects data that will be filterd on the upper view. We select data based on a selection along the x-axis encoding. Next we filter the data using a filter transform based on the brush selection we defined. Finally, we want to make sure that the two histograms are different colors so we can see the differences.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"md` ## Linked Dashboard with various selection (single and interval) and interaction (highlight and filter) types`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"md` We can combine different interaction techniques to accomplish various goals. Here we use a \"click\" interaction to highlight data according to weather type from the bar chart to the scatterplot. We also use a horizontal brush or scrubber to filter the data feeding into the bar chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"md` As you can see above we have created two selections. One in each view specification. The lower bar chart uses a click selection of type \"multi\". This means you can hold shift and select multiple bars at once. It is linked to the color condition in the upper scatterplot specification. This highlights the data associated with the weather type in the lower bar chart. Next we have a brush selection on the x-axis encoding in the scatterplot which is used to transform the lower bar chart view specification by filtering the data being fed into it based on the points that are contained within the brush.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"md` ## Challenge`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md` Create an interactive visualization using one view composition method and two interaction methods.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"md` ## Vega Embed`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"embed = require(\"vega-embed@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md` To deal with a lot of the interaction speed issues you might consider using vega-embed`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"viewof view = embed({\n $schema: 'https://vega.github.io/schema/vega-lite/v3.json',\n width: 360,\n data: {\n values: [\n {a: 'A', b: 28}, {a: 'B', b: 55}, {a: 'C', b: 43},\n {a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53},\n {a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52}\n ],\n name: 'source'\n },\n selection: {\n a: {type: 'single'}\n },\n mark: 'bar',\n encoding: {\n x: {field: 'a', type: 'ordinal'},\n y: {field: 'b', type: 'quantitative'},\n tooltip: {field: 'b', type: 'quantitative'},\n color: {\n condition: {selection: 'a', value: 'steelblue'},\n value: 'grey'\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"md` As you can see this has some extra code like the \"viewof\" and the schema definition. I encourage you to take a look at the vega-embed tutorial if you choose to use this. [Vega-Embed](https://beta.observablehq.com/@domoritz/hello-vega-embed)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}