2e:null 2f:["$","title",null,{"children":"Lab 2 - Javascript, Introduction to Vega-Lite | Li Lucy | Observable"}] 34:[{"id":"b382dfbe71997d6675b5031668a8ad1544cd5f192e3d0cc799c98280a8dbbd652e5f67b83736815eefd832d111a17a19421e987ab08379907670555ab351069a","href":"https://static.observableusercontent.com/files/b382dfbe71997d6675b5031668a8ad1544cd5f192e3d0cc799c98280a8dbbd652e5f67b83736815eefd832d111a17a19421e987ab08379907670555ab351069a","name":"example@1.csv","type":"text/csv","lastModified":1611778608524.934,"size":2586},{"id":"94ec5cca59573f989ffe717840f81aaa9cc9a31a9fa49f4ebf545c7ea610ccccd9a17135ea592b2bba4166a7e13473b5cafb11480953e143e872dbfaedd3ae61","href":"https://static.observableusercontent.com/files/94ec5cca59573f989ffe717840f81aaa9cc9a31a9fa49f4ebf545c7ea610ccccd9a17135ea592b2bba4166a7e13473b5cafb11480953e143e872dbfaedd3ae61","name":"image@1.png","type":"image/png","lastModified":1611778608524.934,"size":58208}] 32:{"id":"19f1a4f7949ef4da","slug":"lab-2-javascript-introduction-to-vega-lite","title":"Lab 2 - Javascript, Introduction to Vega-Lite","thumbnail":"1358e703b41cbdf8882e0519d34adebf5cb305092a9db45066f217614f4718e9","access_level":"public","create_time":"$D2021-01-27T20:16:48.524Z","update_time":"$D2021-01-27T20:46:07.416Z","view_time":null,"first_public_time":"$D2021-01-27T20:47:06.416Z","fork":{"id":"27e192dee1ed7afd","slug":"lab-2-javascript-introduction-to-vega-lite","title":"Lab 2 - Javascript, Introduction to Vega-Lite","owner":{"id":"6cf6a6f13b29e1ce","login":"chunggrace","name":"Min Hyung Chung"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2fc7007ebe41840b","login":"lucy3","name":"Li Lucy","avatar_url":"https://avatars-next.observableusercontent.com/18a178f593fed9223ccd93d87a300883de293b5226459080858ed802164c1962","tier":"starter_2024"},"version":700,"publish_version":700,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d6e86363edb0d5f","login":"lucy3","name":"Li Lucy","avatar_url":"https://avatars-next.observableusercontent.com/18a178f593fed9223ccd93d87a300883de293b5226459080858ed802164c1962","tier":null}],"members":[{"type":"individual","id":"3d6e86363edb0d5f","login":"lucy3","name":"Li Lucy","avatar_url":"https://avatars-next.observableusercontent.com/18a178f593fed9223ccd93d87a300883de293b5226459080858ed802164c1962","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Lab 2 - Javascript, Introduction to Vega-Lite","cells":[{"id":0,"value":"md`# Lab 2 - Javascript, Introduction to Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md` Hi everyone ! Welcome to Lab 2. In this lab we will be reviewing some basic concepts of Javascript as well as a gentle introduction to Vega-lite which will be useful for future assignments. \n\nPlease check out the following link for [A Minimal Introduction to JavaScript and Observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable)\nand the [Introduction to Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite?collection=@uwdata/visualization-curriculum)\n\nHere is the [link for today's presentation slides](https://docs.google.com/presentation/d/1Uyfqn6Yq9IOol599NWpd1EhIVpL1qpGnMUlvpv9noJQ/edit?usp=sharing)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## Imports\n\nFirst, we need to import software libraries - vega-lite, d3, and printTable utility.\n\nRemember that each cell supports only one executable statement, so you have to enter the two import lines into two separate cells.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"html`\n\n\n

\nSection 1: Javascript\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`\nIn this section, we will briefly talk about Javascript basics. Observable notebook is a collection of cells that contain JavaScript code. Each cell is a separate script that runs independently. Observable caches the results of every cell that ran and helps users to get a better understanding of each code does.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`### Math operations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"1234132454+382479384732","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"Math.sqrt(121)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"Math.random()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`### String operations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"\"hello \"+\"world\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"\"monkey\"/4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"\"how long is this string?\".length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"\"ALL LOWER CASE\".toLowerCase()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`### Assigning values to variable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"num = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"str = \"1\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`### Value comparison`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"2<1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"\"a\" < \"b\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"//== and != indicates implicit check while === and !== are explicit check. This way the operator compares the pure values. \nnum == str","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"num===str","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`### AND operations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"// AND operations\ntrue && false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"false && false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"true && false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`### OR operations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"true || true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"true || false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"false || false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`### Arrays`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"// putting the values in a bracket [] separated by commas create a datatype array\n[1, 2, 3]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"// arrays can consist of elements of different data types \narr = [\"hello\", 1, 4, 3, 2, \"bye\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"// can index into the element in array \narr[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"// -1 index doesn't work for javascript to access the last element \narr[-1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"arr[arr.length-1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"arr.indexOf(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"//slicing from left, python equivalent of arr[2:] \narr.slice(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"//slicing from right, python equivalent of arr[-2:]\narr.slice(-2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"//slicing from both sides, python equivalent of arr[2:4]\narr.slice(2,4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"//turn array into string\narr.join(' *** ')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"//append new element at the end of the array \narr.concat('zzz')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"//can also append a nested list\narr.concat([[\"a\"], \"b\", \"c\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`### Objects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"obj = ({key1: \"apple\", key2: \"banana\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"obj.key1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"//return an array of property values\nObject.values(obj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"Object.keys(obj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"md`Arrays and objects can be used together to export and model data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"data = [\n {fruit_name: \"apple\", calories_per_serving: 95, carb_amount_grams: 25},\n {fruit_name: \"banana\", calories_per_serving: 105, carb_amount_grams: 27},\n {fruit_name: \"grape\", calories_per_serving: 62, carb_amount_grams: 16}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"data[0].fruit_name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"//The map function above applies the function to each element in the array and returns the results as a new array.\ndata.map(d => d.fruit_name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"// The filter function evaluates a function for each element in the array, and removes an element when the return value is not truthy\ndata.filter(d => d.fruit_name === \"apple\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"// => is an arrow function that shortens function exppressions\ndata.find(d => d.fruit_name === \"apple\").carb_amount_grams","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"md `### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"function add_two(a, b) { // function signature: name and input arguments\n return a + b; // function body, with return statement for output\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"add_two(1, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"add_two(\"a\", \"b\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"function add_carbs(a,b) {\n var a_carb = data.find(x => x.fruit_name === a).carb_amount_grams\n var b_carb = data.find(x => x.fruit_name === b).carb_amount_grams\n return a_carb + b_carb\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"add_carbs(\"apple\", \"banana\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`\nWe'll be using [dataset provided by Makeover Monday](https://data.world/makeovermonday/2018w38-trains-vs-planes-whats-the-real-cost-of-travel) for this exercise. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"fileContents = FileAttachment(\"example@1.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"//Parsing data into array \ndf = d3.csvParse(await fileContents.text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"printTable(df.slice(0, 20))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"html`\n\n\n

\nExercise 1: Practice Javascript\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"md`\nCreate a function called \"co2\" that takes in two inputs **Route** and **WeeksAhead** to return **Train**'s **EcoPassengerCO2**. \n\nFor example, co2(\"London-Amsterdam\", 2) should return 14.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"function co2(route, weeksAhead) {\n var routes = df.find(x => x.Route === route && x.WeeksAhead === weeksAhead && x.Mode === \"Train\").EcoPassengerCO2\n return routes\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"co2(\"London-Amsterdam\", 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"html`\n\n\n

\nSection 2: Vega-Lite\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"md`\nIn this exercise, we will learn how to create basic data visualizations using vega-lite. We will learn markPoint, markBar, and markLine on how each can be used to represent different aspects of information. \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"vl.markPoint()\n .data(df)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`\n- \\`fieldN()\\` indicates a *nominal* type (unordered, categorical data),\n- \\`fieldO()\\` indicates an *ordinal* type (rank-ordered data),\n- \\`fieldQ()\\` indicates a *quantitative* type (numerical magnitudes),\n- \\`fieldT()\\` indicates a *temporal* type (corresponding to [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) values)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"vl.markPoint()\n .data(df)\n .encode(\n vl.x().fieldQ(\"WeeksAhead\"),\n vl.y().fieldQ(\"TicketPrice\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"vl.markPoint()\n .data(df)\n .encode(\n vl.x().fieldQ(\"WeeksAhead\"),\n vl.y().fieldQ(\"TicketPrice\"),\n vl.color().fieldN(\"Route\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"vl.markPoint()\n .data(df)\n .encode(\n vl.x().fieldQ(\"WeeksAhead\"),\n vl.y().average(\"TicketPrice\"),\n vl.color().fieldN(\"Route\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"\n\nvl.markPoint()\n .data(df.filter(d => d.Mode === \"Plane\"))\n .encode(\n vl.x().fieldQ(\"WeeksAhead\"),\n vl.y().average(\"TicketPrice\"),\n vl.color().fieldN(\"Route\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"vl.markLine()\n .data(df.filter(d => d.Mode === \"Plane\"))\n .encode(\n vl.x().fieldQ(\"WeeksAhead\"),\n vl.y().average(\"TicketPrice\"),\n vl.color().fieldN(\"Route\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"vl.markLine()\n .data(df.filter(d => (d.Mode === \"Plane\" && d.Route === \"Munich-Budapest\")))\n .encode(\n vl.x().fieldQ(\"WeeksAhead\"),\n vl.y().average(\"TicketPrice\"),\n vl.color().fieldN(\"Route\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"vl.markBar()\n .data(df)\n .encode(\n vl.y().fieldN(\"Mode\"),\n vl.x().fieldQ(\"EcoPassengerCO2\"),\n vl.color().fieldN(\"Mode\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"df.forEach(function (element) {\n element.co2_per_min = element.EcoPassengerCO2 / element.RawTravelTime;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"vl.markBar()\n .data(df)\n .encode(\n vl.y().fieldN(\"Mode\"),\n vl.x().fieldQ(\"co2_per_min\"),\n vl.color().fieldN(\"Mode\")\n )\n .title({\n text: 'CO2 released per minute',\n anchor: 'middle',\n fontSize: 15\n })\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"html`\n\n\n

\nExercise 2: Practice Vega-Lite\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`You are planning to make a trip (this is post-covid) with Euro-train and would like to compare different ticket prices per route. Create a visualization using vega-lite that represents average price of tickets on all the weeks for train per destination. Your visualization can look something like this.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"FileAttachment(\"image@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"vl.markPoint()\n .data(df.filter(d => d.Mode === \"Train\"))\n .encode(\n vl.x().average(\"TicketPrice\"),\n vl.y().fieldN(\"Route\"),\n vl.color().fieldN(\"Route\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`## References\n\nhttps://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable\n\nhttps://observablehq.com/@uwdata/introduction-to-vega-lite?collection=@uwdata/visualization-curriculum\n\nhttps://observablehq.com/@i247sp20/lab-2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"