2f:null 30:["$","title",null,{"children":"Lab 2 - Javascript, Introduction to Vega-Lite | InfoViz Spring 2021 | Observable"}] 35:[{"id":"b382dfbe71997d6675b5031668a8ad1544cd5f192e3d0cc799c98280a8dbbd652e5f67b83736815eefd832d111a17a19421e987ab08379907670555ab351069a","href":"https://static.observableusercontent.com/files/b382dfbe71997d6675b5031668a8ad1544cd5f192e3d0cc799c98280a8dbbd652e5f67b83736815eefd832d111a17a19421e987ab08379907670555ab351069a","name":"example-1.csv","type":"text/csv","lastModified":1611778551781.498,"size":2586},{"id":"94ec5cca59573f989ffe717840f81aaa9cc9a31a9fa49f4ebf545c7ea610ccccd9a17135ea592b2bba4166a7e13473b5cafb11480953e143e872dbfaedd3ae61","href":"https://static.observableusercontent.com/files/94ec5cca59573f989ffe717840f81aaa9cc9a31a9fa49f4ebf545c7ea610ccccd9a17135ea592b2bba4166a7e13473b5cafb11480953e143e872dbfaedd3ae61","name":"image-1.png","type":"image/png","lastModified":1611778551872.548,"size":58208}] 33:{"id":"d9bbda8becdb4953","slug":"lab-2-javascript-introduction-to-vega-lite-kwsong","title":"Lab 2 - Javascript, Introduction to Vega-Lite","thumbnail":"1358e703b41cbdf8882e0519d34adebf5cb305092a9db45066f217614f4718e9","access_level":"public","create_time":"$D2021-01-27T18:01:36.059Z","update_time":"$D2021-01-27T20:30:36.870Z","view_time":null,"first_public_time":"$D2021-01-27T20:32:35.400Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"741ae1fc36a7b823","login":"info247-spring21","name":"InfoViz Spring 2021","avatar_url":null,"tier":"pro_2024"},"version":770,"publish_version":770,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a4545304ab4097b","login":"kwsong","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5ec12b257a9d5b9b9d927e14181b0c662ec9384fdade5063962c020638368d41","tier":null}],"members":[{"type":"individual","id":"6a4545304ab4097b","login":"kwsong","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5ec12b257a9d5b9b9d927e14181b0c662ec9384fdade5063962c020638368d41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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":false,"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":733,"value":"md`\nIn this section, we will quickly review basic operations using Javascript. Feel free to skip to the exercise (in green) if you are already familiar with these materials. \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. \n1 == \"1\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"1===\"1\"","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 returns only the element that satisfies the filtering criteria.\ndata.filter(d => d.fruit_name === \"apple\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"data.filter(d => d.calories_per_serving < 100 && d.carb_amount_grams < 25)","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":689,"value":"md` ## Dataset for Today\n`","pinned":false,"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. This is a dataset that discusses what is the \"real cost\" of traveling and presents various metrics that provides different aspects of what each trip will entail such as CO2 Emission per passenger on certain route using certain modes of transporation. \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 **TicketPrice**. \n\nFor example, co2(\"London-Amsterdam\", 2) should return 121.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"function co2(r, w) {\n return df.find(x => x.Mode == \"Train\" && x.Route === r && x.WeeksAhead == w).TicketPrice\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"md`\nHere is the most bare bone structure of what vega-lite code should look like. It includes what kind of viz methods to use (here I am using markpoint), what dataset I will be using, and finally .render() to render the visualization you have defined.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"md`\nSince we haven't defined any x, y axis for the plot, we are not yet seeing any valuable information.\n`","pinned":false,"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":705,"value":"md`\nLet's define x and y axis. Here I would like to compare how ticket prices change based on how many weeks ahead I am purchasing the ticket. \n`","pinned":false,"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":708,"value":"md`\nBetter than earlier version, but what information can you grasp from the above visualization? Since prices will differ by significant amount depending on the travelling route, I would like to further filter the data points to different routes. \n`","pinned":false,"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":711,"value":"md`\nBetter! But since there are so many different routes along with both modes of transportation (plane and train), the data is still hard to grasp. What if we average the ticket price for the modes? \n`","pinned":false,"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":713,"value":"md`\nLooks much clearer and I am starting to see some trend from the visualization. It looks like the earlier you book your ticket, the lower the ticket price tend to be. This information will be useful for those who want to get a general sense on how the prices differ disregarding what modes of transportation they use. What if I just want to see price information for planes? \n`","pinned":false,"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":716,"value":"md`\nHere you can easily see that average ticket price has gone up but the trend is still somewhat negative. Because of the dots overlapping with each other, it is not so clear to see the trends right away although the color coding helps.\n`","pinned":false,"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":718,"value":"md`\nHere I have converted the dot plot into a line chart. This way, it's much easier to see the trend per route depending on how many weeks ahead.\n`","pinned":false,"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":720,"value":"md`\nI would like to see how different the CO2 emmission in general is for different modes of transportation. Since I thought bar graph would be the most intuitive diagram for this purpose I used markBar() to display the viz. \n`","pinned":false,"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":727,"value":"md`\nHow would CO2 emmission per minute differ between plane and train? Here I used forEach function to create an additional column for our dataset that calculates the number. \n`","pinned":false,"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":730,"value":"md`\nLooks like the gap is even bigger if we consider CO2 release per minute. Plane rides might be faster and sometimes cheaper than train rides but the \"cost\" for environment may be greater than the gains.\n`","pinned":false,"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.x().fieldQ(\"WeeksAhead\"),\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":"$W35","stdlib":"1","titling":"auto"}} 34:"$33:body"