31:[] 2f:{"title":"Week 6: Interaction 1","cells":[{"id":0,"value":"md`# Week 6: Interaction 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md` In this tutorial, we will be coving basic interactions using Vega-Lite.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## 1 Simple selections + brushing(highlighting)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"VegaLite ({\n data: {values: Cars},\n mark: \"circle\",\n selection: {\n pts: {type: \"single\", on: \"click\"}\n },\n encoding: {\n x: {field: \"Horsepower\", type: \"quantitative\"},\n y: {field: \"Miles_per_Gallon\",type: \"quantitative\"},\n color:{\n condition: {\n selection: \"pts\",\n field: \"Origin\", type: \"nominal\"\n },\n value: \"gray\"\n},\n tooltip: {field: \"Cylinders\", type: \"quantitative\"}\n}\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"md` ### Point`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"VegaLite({\n data: {values: Cars},\n mark: \"circle\",\n\n encoding: {\n x: {field: \"Horsepower\", type: \"quantitative\"},\n y: {field: \"Miles_per_Gallon\", type: \"quantitative\"}\n }\n \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md` ### Tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"VegaLite({\n data: {values: Cars},\n mark: \"circle\",\n selection: {\n pts: {type: \"single\", on: \"mouseover\"}\n },\n encoding: {\n x: {field: \"Horsepower\", type: \"quantitative\"},\n y: {field: \"Miles_per_Gallon\", type: \"quantitative\"},\n color: {\n condition: {\n selection: \"pts\",\n field: \"Origin\", type: \"nominal\"\n },\n value: \"gray\"\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md `### Area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"VegaLite({\n data: {values: Cars},\n mark: \"circle\",\n selection:{\n area: {type: \"interval\"}\n },\n encoding: {\n x: {field: \"Horsepower\", type: \"quantitative\"},\n y: {field: \"Miles_per_Gallon\", type: \"quantitative\"},\n color: {\n condition: {\n selection: \"area\",\n field: \"Origin\", type: \"nominal\"\n },\n value: \"gray\"\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"md` ### Attribute`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"VegaLite({\n data: {values: Cars},\n mark: \"circle\",\n selection: {\n Country:{\n type: \"single\",\n fields: [\"Origin\"],\n bind: {input: \"select\", options: [null, \"Europe\", \"Japan\", \"USA\"]}\n }\n },\n encoding: {\n x: {field: \"Horsepower\", type: \"quantitative\"},\n y: {field: \"Miles_per_Gallon\", type: \"quantitative\"},\n color: {\n condition: {selection: \"Country\",\n field: \"Origin\", type: \"nominal\"\n },\n value: \"gray\"\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"md` **Challenge**: Create a scatterplot that plots Horsepower versus Weight and uses an area brush selection to vary the size and fillOpacity of each mark.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"VegaLite({\n data: {values: Cars},\n mark: \"circle\",\n selection:{\n area: {type: \"interval\"}\n },\n encoding: {\n y: {field: \"Horsepower\", type: \"quantitative\"},\n x: {field: \"Weight_in_lbs\", type: \"quantitative\"},\n color: {field: \"Origin\", type: \"nominal\"},\n size:{\n condition: {selection: \"area\", value: 20},\n value:5\n },\n fillOpacity: {\n condition: {selection: \"area\",\n value: 1\n },\n value: .6\n }\n }\n \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"md ` ## Sorting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"viewof Sort= menu ('Sort', [\"ascending\", \"descending\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"md ` ### By values in chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"VegaLite({\n data: {values: Cars},\n mark: \"bar\",\n encoding: {\n x: {field: \"Origin\", type: \"nominal\", sort: {encoding: \"y\", order: Sort}},\n y: {aggregate: \"median\", field: \"Horsepower\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"md ` ### By values not in chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof field = menu('field', [\n \"Acceleration\", \"Horsepower\", \"Displacement\", \"Weight_in_lbs\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"VegaLite({\n data: {values: Cars},\n mark: \"bar\",\n encoding: {\n x: {field: \"Cylinders\", type: \"nominal\", sort: {op: \"average\", field: field, order: \"ascending\"}},\n y: {aggregate: \"median\", field: \"Horsepower\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"md ` ## Filtering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md `### by range slider`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof range = rangeSlider({\n min: d3.min(Cars, d => d.Acceleration),\n max: d3.max(Cars, d => d.Acceleration),\n value: this ? this.value : [9, 18],\n title: 'Acceleration',\n description: 'filtering by acceleration'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"VegaLite({\n data: {values: Cars},\n transform: [\n {filter: {field:\"Acceleration\", lte:range[1]}},\n {filter: {field:\"Acceleration\", gte:range[0]}},\n ],\n\n mark: \"circle\",\n encoding: {\n x: {field: \"Horsepower\", type: \"quantitative\"},\n y: {field: \"Miles_per_Gallon\", type: \"quantitative\"},\n color: {field: \"Origin\", type: \"nominal\" }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"md` **Challenge**: Create a bar chart using origin and max acceleration and filter it using drop down menu for cylinders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md ` ## Multiple views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"md `To introduce you to linking multiple visulizations, we are covering how to compose multiple visualizations. Today we will just cover simple multi-view composition.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md` ### Concatenation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"VegaLite({\n data: {values: weather},\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: \"precipitation\", type: \"quantitative\"},\n y: {field: \"wind\", type: \"quantitative\"},\n color: {field: \"weather\", type: \"nominal\"}\n }\n }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"md ` ### Repeat`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"VegaLite({\n data: {values: weather},\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":195,"value":"md` ### Facet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"VegaLite({\n data: {values: weather},\n facet: {column: {field: \"weather\", type: \"nominal\"}},\n spec: {\n width: 120,\n height: 120,\n mark: \"bar\",\n encoding: {\n x: {field: \"wind\", type: \"quantitative\", bin: \"true\"},\n y: {aggregate: \"count\", type: \"quantitative\"}\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"md` ## Brushing and Filtering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"VegaLite(\n {\n data: {values: weather},\n hconcat: [\n {\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":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"md` ### Brushing and highlighting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"VegaLite({\n data: {values: weather},\n repeat: {\n column: [\"temp_max\", \"wind\"],\n row: [\"precipitation\",\"temp_max\"]\n },\n spec: {\n mark: \"point\",\n selection: {\n brush: {\n //highlights all insersecting values for 4 graphs\n type: \"interval\", resolve: \"intersect\"\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\"},\n value: \"gray\"}\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"md` ### Overview and Detail`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"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":208,"value":"VegaLite({\n data: {values: weather},\n vconcat: [{\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 }, {\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, grid: false}\n }\n }\n }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"md` **Challenge** Create a timeline of wind that uses a \"scrubber\" brush to filter a scatterplot of precipitation versus temp_max.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md` **Challenge** Modify the previous to add a bar chart that shows average precipitation for each weather type`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md `**Challenge**: create an interactive visualization that you find interesting using the cars dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"weather = d3.csv(\"https://vega.github.io/vega-lite/data/seattle-weather.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"import {slider, menu, checkbox} from '@jheer/dom-utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"Cars = d3.json(\"https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"VegaLite = require('vega-embed@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}