30:T73d,vegalite({ data: {values: data}, vconcat: [ { hconcat: [ { width: 400, height: 300, mark: {type: "point",filled: "true"}, encoding: { x: { field: "precipitation", type: "quantitative"}, y: {field: "wind", type: "quantitative"}, tooltip: [{field: "date", type: "monthdate"}, { field: "temp_max", type: "quantitative"}], color: {condition: {selection: "click", field: "weather", type: "nominal"}, value: "lightgrey"} }, size: {field: "precipitation", type: "quantitative", scale: {domain: [1, 100]}}, selection: {plotbrush: {type: "interval",resolve: "global"}}, transform: [{filter: {selection: "brush"}}] }, { encoding: { color: { condition: { field: "weather", title: "weather", selection: "click", type: "nominal" }, value: "lightgray" }, x: {aggregate: "average", field: "precipitation",type: "quantitative"}, y: {field: "weather", type: "nominal"} }, width: 400, mark: "bar", size: {field: "weather", type: "quantitative", scale: {domain: [1, 50]}}, selection: {click: {encodings: ["color"], type: "multi"}}, transform: [{filter: {selection: "plotbrush"}}], transform: [{filter: {selection: "brush"}}] } ] }, { height: 100, width: 800, mark: "line", encoding: { x: {timeUnit: "monthdate", field: "date", type: "temporal"}, y: { field: "wind", type: "quantitative", axis: {tickCount: 2, gride: false}}, color: {condition: {selection: "click", field: "weather", type: "nominal"}, value: "lightgrey"} }, selection: {"brush": {encodings: ["x"], type: "interval", resolve: "intersect"}}, transform: [{filter: {selection: "plotbrush"}}] }] }) 31:T432,vegalite({ data: {values: data}, vconcat: [ { mark: "point", encoding: { x: {timeUnit: "monthdate", field: "date", type: "temporal"}, y: {field: "temp_max", type: "quantitative"}, color: { condition: { field: "weather", selection: "click", type: "nominal" }, value: "lightgray" }, size: {field: "precipitation", type: "quantitative", scale: {domain: [1, 50]}}, }, width: 800, height: 400, selection: {brush: {encodings: ["x"], type: "interval"}} }, { 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", selection: {click: {encodings: ["color"], type: "multi"}}, transform: [{filter: {selection: "brush"}}] } ] }) 32:[] 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('vega-lite@2.0.0-beta.2/build/vega-lite.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"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 {\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 ","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`","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":278,"value":"md` ## Overview and Detail\nHere 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. \nFirst 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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"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":false,"hidden":false,"mode":"ojs"},{"id":288,"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":245,"value":"\nhtml `\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":296,"value":"md `And here are the linked views with the brushable overview in the smaller timeline.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"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":109,"value":"md` ## Brushing and filtering in coordinated views\n\nRemember our PW view the scatter plot with wind and precipitation? What if we wanted to use the same timeline brush to affect that view? Generally, i want to see what the wind and precipitation were at particular times of the year. So can I refine the scatter plot using the timeline brush as a filter?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"PW2 = 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":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"TLBrush = vegalite({\n data: {values: data},\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})","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md ` That means I need to add the timeline view to the scatter plot: I will use vconcat again.\nThen I make the plot brushable. What happens when I do this? \nThen I added some more detail to the timeline plot to show the weather categories. This combination is good but I am missing something.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"vegalite(\n {\n data: {values: data},\n vconcat: [\n {\n mark: {type: \"point\",filled: \"true\"},\n encoding: \n {\n x: { field: \"precipitation\", type: \"quantitative\"},\n y: {field: \"wind\", type: \"quantitative\"},\n tooltip: [{field: \"date\", type: \"monthdate\"}, { field: \"temp_max\", type: \"quantitative\"}],\n color: {condition: {selection: \"plotbrush\", field: \"weather\", type: \"nominal\"}, value: \"grey\"}\n },\n selection: {plotbrush: {type: \"interval\",resolve: \"intersect\"}},\n transform: [{filter: {selection: \"brush\"}}]\n }, \n {\n height: 100,\n width: 480,\n mark: \"line\",\n encoding: \n {\n x: {timeUnit: \"monthdate\", field: \"date\", type: \"temporal\"},\n y: { field: \"wind\", type: \"quantitative\", axis: {tickCount: 2, gride: false}},\n color: {selection: \"brush\", field: \"weather\", type: \"nominal\"}\n },\n selection: {\"brush\": {encodings: [\"x\"], type: \"interval\", resolve: \"intersect\"}},\n transform: [{filter: {selection: \"plotbrush\"}}]\n }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"md `This set would be more useful if we had a way to select the individual weather categories. I'd like to be able to directly select the options in the legend but VegaLite makes me use an HTML element. So i will make a new smaller view with selectable elements as a bar chart.\nBecause I am still having trouble applying two filters to all displays I set the plot brush to have a global effect. Seems to work. Starting to look something like a weather dashboard. But check out the strange behaviour of the line chart for the snow values - because the line plot wants to be continuous, the snow line sometimes looks continuous, giving the false impression that there is snow in the summer. Not always though. I have to check out what is going on here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"md` ## Brushing and Highlighting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md` We can use highlighting with various forms of logic to explore data from multiple displays`","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 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":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"md` ## Brushing and Filtering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"vegalite(\n {\n data: {values: data},\n hconcat: [\n {\n selection: {brush: {type: \"interval\"}\n },\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":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"md` ## 'Cross-filtering' using 'layers'`","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 },\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":151,"value":"md` ## Linked Dashboard with various selection (single and interval) and interaction (highlight and filter) types`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}