31:T588,html ` So now we add interaction using brushing. The general idea is that each view can have a brush (a selection operator) and can react to its own and/or any other selection operator (specified in other views). In this example we are specifying the same brush for each view, but we need to spec it in each view, because we are not using one view as the overview and one as the detail (see the next example). So first we add a selection operator to the first view and tell it where the selectable area is.

`selection:`	`{brush: {type: "interval",`	`resolve: "global"`
adds the selection operator	sets the type of selector (brush) and the type of selection (interval)	sets the way selections are resolved on multiple views. `global` means effects are global and all local effects in the group of views are cleared.

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

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

`32:T556,InteractiveTable = VegaLite({ data: {values: simpleCereals}, hconcat: [{ mark: { type: "circle", opacity: 0.5, stroke: "black", strokeWidth: 1 }, encoding: { y: {field: "rating",type: "quantitative" }, x: { field: "sugar", type: "quantitative"}, color: {condition: {selection: "plotbrush", field: "Type", type: "nominal"}, value: "grey"}, size: { field: "shelf", type: "ordinal" } }, selection: {"plotbrush": {type: "interval",resolve: "global"}}, }, { mark: { type: "point", opacity: 0.4, stroke: "black", strokeWidth: 1.5, size: 40, filled: true, "tooltip": [ {"field": "Brand","type": "nominal"}, {"field": "calories","type": "quantitative"} ], }, encoding: { y: {field: "rating", type: "quantitative" }, x: {field: "calories", type: "quantitative", scale: {"domain": [40,200]}}, color: {field: "Type", type: "nominal"}, strokeWidth: {condition: {selection: "plotbrush", value: 2}, value: 1}, fillOpacity: {condition: {selection: "plotbrush", value: 0.7}, value: 0.5}, size: { field: "shelf", type: "ordinal" }, size: {field: "sugar",type: "quantitative", legend: { title: "Sugars", clipHeight: 40}, scale: {range: [40, 400]} }, }, selection: {"plotbrush": {type: "interval",resolve: "global"}}, } ] })33:[] 2f:{"title":"Week 6: Interacting with Data and Views","cells":[{"id":0,"value":"md`# Week 6: Interacting with Data and Views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`Last week we considered a few basic visual forms: Histograms, Bar charts, stack bar charts, line charts, and scatterplots. Today we will take a deeper dive into interaction and multiple views. We will use the same data as last week to concatenate our views. All the data nd data-related functions are at the end of the workbook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md` ### Dot Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"md `This is the scatter plot of the Cereals data looking at the relation between sugars and ratings with the \\`\\`\\`NaN \\`\\`\\` values filtered out. The secondary variable is shelf palcement. I named it \\`\\`\\`CerealsSP1.\\`\\`\\`\nI also added a brush that only colours the elements when i brush them. I could also use different highlighting mechanisms.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"CerealsSP1 = VegaLite({\n data: {values: simpleCereals},\n width: 300,\n height: 300,\n mark: \n {\n type: \"circle\",\n opacity: 0.5,\n stroke: \"black\",\n strokeWidth: 1\n },\n encoding: {\n y: {\n field: \"rating\",\n type: \"quantitative\",\n },\n x: {\n field: \"sugar\",\n type: \"quantitative\"\n },\n color: {condition: {selection: \"plotbrush\", field: \"Type\", type: \"nominal\"}, value: \"grey\"},\n size: {\n field: \"shelf\",\n type: \"ordinal\"\n }\n },\n selection: {plotbrush: {type: \"interval\",resolve: \"global\"}}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"md ` I could also use different highlighting mechanisms for the brush. Let's try enlarging the stroke and changing the opacity.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"viewof CerealsSPbrush2 = VegaLite({\n data: {values: simpleCereals},\n width: 300,\n height: 300,\n mark: \n {\n type: \"circle\",\n opacity: 0.5,\n stroke: \"black\",\n strokeWidth: 1\n },\n encoding: {\n y: {\n field: \"rating\",\n type: \"quantitative\",\n },\n x: {\n field: \"sugar\",\n type: \"quantitative\"\n },\n color: {field: \"Type\", type: \"nominal\"},\n strokeWidth: {condition: {selection: \"plotbrush\", value: 2}, value: 1},\n fillOpacity: {condition: {selection: \"plotbrush\", value: 0.7}, value: 0.5},\n size: {\n field: \"shelf\",\n type: \"ordinal\"\n }\n },\n selection: {plotbrush: {type: \"interval\",resolve: \"global\"}}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"md `Same dataset but now looking at the relation between calories and rating with sugars instead of shelf placement as the secondary variable. I tweaked the size range to make the smaller points easier to see. Named \\`\\`\\`CerealsSP2\\`\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"CerealsSP2 = VegaLite({\n data: {values: simpleCereals},\n width: 300,\n height: 300,\n transform: [\n {\"filter\": {\"field\": \"rating\", \"gt\": 0}\n }\n ],\n mark: \n {\n type: \"point\",\n opacity: 0.4,\n stroke: \"black\",\n strokeWidth: 1.5,\n size: 40,\n filled: true,\n \"tooltip\": [\n {\"field\": \"Brand\",\"type\": \"nominal\"},\n {\"field\": \"calories\",\"type\": \"quantitative\"}\n ],\n },\n encoding: {\n y: {\n field: \"rating\",\n type: \"quantitative\",\n },\n x: {\n field: \"calories\",\n type: \"quantitative\",\n scale: {\"domain\": [40,200]}\n },\n color: {\n field: \"Type\",\n type: \"nominal\"\n },\n size: {\n field: \"sugar\",\n type: \"quantitative\",\n legend: {\n title: \"Sugars\", clipHeight: 40\n },\n scale: {\n range: [40, 400]\n }\n },\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md `The problem with combining them in an HTML table is that they do not interact as a single cell, because they are only \\`\\`\\`div\\`\\`\\` elements and so we can't easily combine interactions. Let's put them together in a single cell. We can do this using \\`\\`\\`hconcat\\`\\`\\` and \\`\\`\\`vconcat\\`\\`\\`. Here they are but with no interactions.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"VegaLite({\n data: {values: simpleCereals},\n hconcat: [{\n mark: \n {\n type: \"circle\",\n opacity: 0.5,\n stroke: \"black\",\n strokeWidth: 1\n },\n encoding: {\n y: {field: \"rating\",type: \"quantitative\" },\n x: { field: \"sugar\", type: \"quantitative\"},\n color: {\n field: \"Type\",\n type: \"nominal\"\n },\n size: {\n field: \"shelf\",\n type: \"ordinal\"\n }\n }\n},\n{\nmark: \n {\n type: \"point\",\n opacity: 0.4,\n stroke: \"black\",\n strokeWidth: 1.5,\n size: 40,\n filled: true,\n \"tooltip\": [\n {\"field\": \"Brand\",\"type\": \"nominal\"},\n {\"field\": \"calories\",\"type\": \"quantitative\"}\n ],\n },\n encoding: {\n y: {field: \"rating\", type: \"quantitative\" },\n x: {field: \"calories\", type: \"quantitative\", scale: {\"domain\": [40,200]}},\n color: {\n field: \"Type\",\n type: \"nominal\"\n },\n size: {field: \"sugar\",type: \"quantitative\", legend: { title: \"Sugars\", clipHeight: 40},\n scale: {range: [40, 400]} },\n }\n}\n]\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"SP1=CerealsSP1;","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### Bubble Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"VegaLite({\n data: {values: Disasters},\n width: 600,\n height: 400,\n mark: {\n type: \"circle\",\n opacity: 0.8,\n stroke: \"black\",\n strokeWidth: 1\n },\n encoding: {\n x: {\n field: \"Year\",\n type: \"ordinal\",\n axis: {labelAngle: 0}\n },\n y: {\n field: \"Entity\",\n type: \"nominal\",\n },\n size: {\n field: \"Deaths\",\n type: \"quantitative\",\n legend: {\n title: \"Annual Global Deaths\", clipHeight: 30\n },\n scale: {\n range: [0, 5000]\n }\n },\n color: {\n field: \"Entity\",\n type: \"nominal\",\n legend: null\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md` ### Strip Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"VegaLite({\n data: {values: Cars},\n mark: \"tick\",\n encoding: {\n x: {field: \"Horsepower\", type: \"quantitative\"},\n y: {field: \"Cylinders\", type: \"ordinal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`### Multi-series Line Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"VegaLite({\n data: {values: Stocks},\n width: 600,\n height: 400,\n mark: {type: \"line\", opacity: 0.7, strokeWidth: 3},\n encoding:{\n x: {field: \"date\", type: \"temporal\"},\n y: {field: \"price\", type: \"quantitative\"},\n color: {field: \"symbol\", type: \"nominal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md` ### Grouped Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"VegaLite({\n data: {values: Population},\n transform: [\n {filter: \"datum.year == 2000\"}\n ],\n width: 20,\n mark: \"bar\",\n encoding: {\n column: {field: \"age\", type: \"ordinal\", spacing: 10},\n y: {aggregate: \"sum\", field: \"people\", type: \"quantitative\"},\n x: {\n field: \"sex\", type: \"nominal\", \n },\n color: {field: \"sex\", type: \"nominal\", scale: {range: [\"#EA98D2\", \"#659CCA\"]}},\n \n },\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md `Let's relabel our gender field to use M and F. I use a \\`\\`\\`transform\\`\\`\\` calculation in the data itself. Note that we have to do some tricky things with escaping string constants to make this work. Then I turn off the \\\"gender\\\" label in the x axis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"VegaLite({\n data: {values: Population},\n transform: [\n {filter: \"datum.year == 2000\"},\n {\"calculate\": \"if(datum.sex==1,\\\"M\\\",\\\"F\\\")\", \"as\": \"gender\"}\n ],\n width: 20,\n mark: \"bar\",\n encoding: {\n \n column: {field: \"age\", type: \"ordinal\", spacing: 10},\n y: {aggregate: \"sum\", field: \"people\", type: \"quantitative\"},\n x: {\n field: \"gender\", \n type: \"nominal\",\n axis: { title: \"\"}\n },\n color: {field: \"gender\", type: \"nominal\", scale: {range: [\"#EA98D2\", \"#659CCA\"]}}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md` ### Gantt Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"VegaLite({\n data: {\n values: [\n {\"task\": \"A\", \"start\": 1, \"end\": 3},\n {\"task\": \"B\", \"start\": 3, \"end\": 8},\n {\"task\": \"C\", \"start\": 8, \"end\": 10}\n ]\n },\n mark: \"bar\",\n encoding: {\n y: {field: \"task\", type: \"ordinal\"},\n x: {field: \"start\", type: \"quantitative\"},\n x2: {field: \"end\", type: \"quantitative\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md` ### Log Scaled Scatterplot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"VegaLite({\n data: {values: Gapminder},\n width: 600,\n height: 400,\n mark: \"circle\",\n encoding: {\n y: {\n field: \"health\",\n type: \"quantitative\"\n },\n x: {\n field: \"income\",\n type: \"quantitative\",\n scale: {type: \"log\"}\n },\n size: {field: \"population\", type: \"quantitative\"},\n color: {value: \"black\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md` ### Heatmap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"VegaLite({\n data: {values: Weather},\n mark: \"rect\",\n encoding: {\n x: {field: \"date\", timeUnit: \"date\", type: \"ordinal\", title: \"Day\", axis: {labelAngle: 0}},\n y: {field: \"date\", timeUnit: \"month\", type: \"ordinal\", title: \"Month\"},\n color: {field: \"temp_max\", aggregate: \"max\", type: \"quantitative\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md` ### Exercises From Last week continued: \\n\n*Answers at the end of class*` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md` **Challenge** create a chart to answer: \\n\n1.) How has live expectancy changed in all of the worlds countries? \\n\n2.) What is the break down (proportions) of cars with various cylinder #'s? \\n\n3.) How has seattle wind changed year over year? \\n\n4.) Are life expectancy and fertility correlated? \\n\n5.) What is the overall distribution of MPGs in cars? `","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md` ### Imports and Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"VegaLite = require('vega-embed@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"embed = require('vega-embed@3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"md `This is the simplified Cereals dataset cleaned, with all invalid numbers in the ratings set to \\`\\`\\` NaN \\`\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"cerealsCleaned = d3.csv(\"https://gist.githubusercontent.com/SFU-IAT355/8359599c1f5fbbbdc32028cd224fe827/raw/2d47488ed13afb4b55db02c9ab17b43351b20b1a/gistfile1.txt\", function(d) {\n return {\n Brand: d.Brand,\n mfr: d.mfr,\n sugar: +d.sugars,\n fiber: +d.fiber,\n carbo: +d.carbo,\n rating: +d.rating,\n shelf: +d.shelf,\n fat: +d.fat,\n Type : d.Type,\n calories: +d.calories\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md `This is the extracted array of invalid entries.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"function CheckValid(val)\n{\n return (isNaN(val));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"invalidCereals = simpleCereals.filter(function(cereal) {\n return ((isNaN(cereal.rating) || (cereal.rating==0)));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"Population = d3.json(\"https://raw.githubusercontent.com/vega/vega-datasets/master/data/population.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"Countries = d3.json(\"https://raw.githubusercontent.com/vega/vega-datasets/master/data/countries.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"Cars = d3.json(\"https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"Cereals = d3.csv(\"https://gist.githubusercontent.com/SFU-IAT355/8359599c1f5fbbbdc32028cd224fe827/raw/2d47488ed13afb4b55db02c9ab17b43351b20b1a/gistfile1.txt\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"Weather = d3.csv(\"https://vega.github.io/vega-lite/data/seattle-weather.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"Gapminder = d3.csv(\"https://raw.githubusercontent.com/vega/vega-datasets/master/data/gapminder-health-income.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"Disasters = d3.csv(\"https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"Stocks = d3.csv(\"https://raw.githubusercontent.com/vega/vega-datasets/master/data/stocks.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"simpleCereals = {\n let p1 = 0;\n let i=0;\n \n console.log (\"Starting\"); \n for (i=0;i