2f:[{"id":"e71ecf3d4583c393872c57a47a62ee98b663f7f55ec42bd4bae9b6f7523e10a865ac0c37897a1ac7803e50ecbe40a1bbee781132cacece142e31c6d6e3392f35","href":"https://static.observableusercontent.com/files/e71ecf3d4583c393872c57a47a62ee98b663f7f55ec42bd4bae9b6f7523e10a865ac0c37897a1ac7803e50ecbe40a1bbee781132cacece142e31c6d6e3392f35","name":"sportsref_2019_qb.csv","type":"text/csv","lastModified":1705521737951.503,"size":9073},{"id":"141c453f7870c44713175481ca8332d41affcdb22008fe15f25981987a41547f8d0829fd4ef5a1f1c90a8db9217a24bbf88c42d845dec07d3efce5995c33e05c","href":"https://static.observableusercontent.com/files/141c453f7870c44713175481ca8332d41affcdb22008fe15f25981987a41547f8d0829fd4ef5a1f1c90a8db9217a24bbf88c42d845dec07d3efce5995c33e05c","name":"sportsref_lsu.csv","type":"text/csv","lastModified":1705521737951.503,"size":6932},{"id":"e7ca4a7fc731f81e3ea1b987b2756cd4a822cf29bd750d8d447cb952fbd90e70944ab4b7f686bef1689d7891442c49b947709c81d683492ba8bc4a95a0c88d12","href":"https://static.observableusercontent.com/files/e7ca4a7fc731f81e3ea1b987b2756cd4a822cf29bd750d8d447cb952fbd90e70944ab4b7f686bef1689d7891442c49b947709c81d683492ba8bc4a95a0c88d12","name":"raw_lsu_data.json","type":"application/json","lastModified":1705522775469.706,"size":16494}] 2d:{"title":"Observable/Arquero/Vega-Lite Practice Notebook - Thu Do","cells":[{"id":0,"value":"# Observable/Arquero/Vega-Lite Practice Notebook - Thu Do\n\nWe'll be using this notebook to practice some of the functions while we discuss them in class. Fork a copy into your own workspace to get started.\n\nMake sure to have a window open with the [Week 2 resources](https://github.com/odu-cs725-infovis/public-spr24/blob/main/agenda.md#resources-1) for Observable, Vega-Lite, and Arquero tutorials.","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"## Dataset\n\nSince we've just wrapped up the [College Football Playoff](https://collegefootballplayoff.com/) and are getting ready for the [NFL playoffs](https://www.nfl.com/standings/playoff-picture), we're going to look at some football data from my favorite college football team, the [LSU Tigers](https://lsusports.net/sports/fb/). In 2019, they went undefeated and [won the national championship](https://lsusports.net/news/2020/01/13/lsu-football-national-championship-game-recap/). Many of the players from this team are now in the NFL, including [Joe Burrow](https://www.nfl.com/players/joe-burrow/), who won the Heisman Award (best player in college football).\n\n2019 College Football Passing Statistics, https://www.sports-reference.com/cfb/years/2019-passing.html \nLSU School History, https://www.sports-reference.com/cfb/schools/louisiana-state/","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"## Observable Intro\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"The first thing to notice is that this notebook has two data files attached (see the paperclip icon on the right). These are CSV files from the webpages mentioned above.\n\nBelow, I've used Observable's `FileAttachment` function to load the CSV files into JavaScript Arrays of Objects:\n* `raw_qb_data` - Quarterback (QB) data from 2019 College Football Passing Statistics\n* `raw_lsu_data` - LSU team performance data ","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"raw_qb_data = FileAttachment(\"sportsref_2019_qb.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"raw_lsu_data = FileAttachment(\"sportsref_lsu.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"### Interacting with Data and Arrays\n\n❓ **Try it out:** Click on the ▸ icon above to examine one of the arrays. You can click on one of the inner ▸ icons to see the full object. \n\nNote the difference in the colors of data based on the datatype: \n* null values are green\n* strings are \"blue\" and in quotation marks\n* numeric data is blue-green without quotation marks\n\nNote that if you see a number inside quotation marks, it has been parsed as a string and not numeric, so you'll likely need to convert it.","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"One more thing to note about data variables is that you can export the data as CSV or JSON. If you hover in the margin to the left of the array and click on the three vertical dots, you'll see several options, including \"Download CSV\" and \"Download JSON\".\n\n❓ **Try it out:** Download the `raw_lsu_data` as a JSON file.","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"### Data Table Cell\n\nAnother way to load data into the notebook is to use have Observable load and insert a preview of the file into a cell.\n\n❓ **Try it out:** Click on the paper clip, click the ... next to one of the named files, then \"Insert into notebook\". 👇 👉 ","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"raw_lsu_data1 = FileAttachment(\"raw_lsu_data.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"### Explore right sidebar icons\n\n❓ **Try it out:** Click on each of the icons in the right side panel so that you're familiar with what they offer. \n\nMake sure to review the Observable docs in our Week 2 Resources so that you'll have an idea of where to look when you need to reference something later.","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"## Arquero\n\nBefore we create any charts, let's look at Arquero, a nice JavaScript library for manipulating data. If you've used R's [dpylr](https://dplyr.tidyverse.org/), the commands will be very familiar to you.\n\nWe'll walk through the \"Introducing Arquero\" notebook and then come back here to practice using our football data.\n","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"### Getting data into Arquero data tables\n\n❓ **Try it out:** Load the data from `raw_qb_data` and `raw_lsu_data` into Arquero tables and view the first 10 rows.","pinned":false,"hidden":false,"mode":"md"},{"id":426,"value":"viewof qb_data = aq.from(raw_qb_data).view(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"viewof lsu_data = aq.from(raw_lsu_data).view(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"### Sort (orderby)\n\n❓ **Try it out:** Use `orderby()` to sort one of the tables by a column in descending order. Don't forget to use `view()` to see the resulting table. ","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"lsu_data\n .orderby(aq.desc('Year'))\n .view(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"### Select columns\n\n❓ **Try it out:** Use `select()` to show only the Player, School, and Conf columns from the QB data and `orderby()` to sort these by Conference (Conf).","pinned":false,"hidden":false,"mode":"md"},{"id":442,"value":"qb_data \n .select('Player', 'School', 'Conf')\n .orderby('Conf')\n .view(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"### Filter rows\n\n❓ **Try it out:** Use `filter()` to show only QBs in the SEC conference.","pinned":false,"hidden":false,"mode":"md"},{"id":445,"value":"qb_data\n .filter(qb => qb.Conf === 'SEC')\n .view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"❓ **Try it out:** Filter the QB data to show only QBs with more than 10 rushing touchdowns (`Rush TD`), sort in descending order by number of rushing touchdowns, and don't show columns related to passing (`Cmp`, `Att`, `Pct`, `Yds`, `Y/A`, `AY/A`, `TD`, `Int`, `Rate`).","pinned":false,"hidden":false,"mode":"md"},{"id":447,"value":"qb_data\n .filter(qb => qb['Rush TD'] > 10)\n .orderby(aq.desc('Rush TD'))\n .select(aq.not('Cmp', 'Att', 'Pct', 'Yds', 'Y/A', 'AY/A', 'TD', 'Int', 'Rate'))\n .view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"### Create new columns (derive)\n\n❓ **Try it out:** Derive a new column that reflects the total number of TDs that each QB was responsible for (sum of `TD` and `Rush TD`). Then show the top 10 QBs by number of total TDs.","pinned":false,"hidden":false,"mode":"md"},{"id":454,"value":"qb_data\n .derive({'Total TD': qb => qb.TD + qb['Rush TD']})\n .orderby(aq.desc('Total TD'))\n .view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"### Summarize data (rollup, groupby)\n\n❓ **Try it out:** Compute the average number of passing TDs (`TD`) by QBs in each conference, display from most to least","pinned":false,"hidden":false,"mode":"md"},{"id":460,"value":"qb_data\n .filter(d => d.Conf != null)\n .groupby('Conf')\n .rollup({\n avg_passing_TD: d => op.mean(d.TD)\n })\n .orderby(aq.desc('avg_passing_TD'))\n .view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"### Aggregate and window in derive() and filter()\n\n❓ **Try it out:** Show the top 2 QBs in each conference with the most passing TDs (`TD`).","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"qb_data.filter(d => d.Conf != null)\n.groupby('Conf')\n.orderby(aq.desc('TD')).filter( d => op.rank() <=2).orderby('Conf').view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"Ranks 3-5:","pinned":false,"hidden":false,"mode":"md"},{"id":477,"value":"qb_data.filter(d => d.Conf != null)\n.groupby('Conf')\n.orderby(aq.desc('TD')).filter( d => op.rank() >2 && op.rank() < 5).orderby('Conf').view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"## Charts to Create\n\nNow, we'll walk through creating some charts using these datasets.\n\nUsing QB data:\n* scatterplot \n * x: Att - number of passing attempts\n * y: Yds - total yards gained\n * color: Conf\n * only for players with at least 9 games (G)\n* bar \n * x: TD - number of passing touchdowns\n * y: Player\n * color: Conf\n * only for the top 15 players by TD, sorted by TD\n* boxplot \n * y: TD\n * only for players in the SEC (Conf)\n\nUsing LSU team data:\n* line \n * x: Year\n * y: Pct - winning percentage\n * only from 1955-2021\n \nAs you're learning Vega-Lite and D3, it's helpful to prepare your data using Arquero first. You then see exactly what values are being used in your charts.","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"## Data Preparation\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"❓ **Scatterplot data:** Filter QB data for players with at least 9 games, select only the needed columns.","pinned":false,"hidden":false,"mode":"md"},{"id":481,"value":"viewof scatterplot = qb_data.filter(d => d.G >= 9).select('Player', 'G', 'Att', 'Yds', 'Conf').view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"❓ **Bar chart data:** Filter QB data for top 15 players with most passing touchdowns, select only the needed columns.\n\nHint: For this one, you might want to check out the [`slice`](https://uwdata.github.io/arquero/api/verbs#slice) verb.","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"qb_data.orderby(aq.desc('TD')).slice(0,15).select('Player','Conf','Yds','TD').view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"viewof data2 = qb_data\n .orderby(aq.desc('TD'))\n .filter(d => d.rank() < 15) // .slice(0,15)\n .select('Player', 'Conf', 'Yds', 'Att', 'G', 'TD').view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"❓ **Boxplot data:** Filter QB data for players in the SEC (Conf)","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"viewof boxData = qb_data\n .filter(d => d.Conf === \"SEC\")\n .select(\"TD\", \"Conf\", \"Player\")\n .view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"❓ **Line data:** Filter LSU data for years from 1955-2021","pinned":false,"hidden":false,"mode":"md"},{"id":503,"value":"viewof line_data = lsu_data\n .orderby(aq.desc('Year'))\n .filter(d => d.Year > 1954) // .filter(d => d.Year >= 1955 && d.Year <= 2021)\n .view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"## Charts\n\nInclude axis labels and titles as appropriate. These should be informative and the titles should reflect any conclusions that you can make from the data.","pinned":false,"hidden":false,"mode":"md"},{"id":359,"value":"❓ **Scatterplot**: x: Att, y: Yds, color: Conf","pinned":false,"hidden":false,"mode":"md"},{"id":519,"value":"viewof scatter = vl.markPoint()\n .data(scatterplot)\n .encode(\n vl.x().fieldQ(\"Att\"),\n vl.y().fieldQ(\"Yds\"),\n vl.color().fieldN(\"Conf\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"❓ **Bar chart**: x: TD, y: Player","pinned":false,"hidden":false,"mode":"md"},{"id":521,"value":"vl.markBar()\n.data(data2)\n.encode(\n vl.x().fieldQ('TD'),\n vl.y().fieldN('Player').sort('-x')\n).render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"❓ **Boxplot**: y: TD","pinned":false,"hidden":false,"mode":"md"},{"id":512,"value":"vl.markBoxplot()\n .data(boxData)\n .encode(\n vl.y().fieldQ(\"TD\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"❓ **Line chart**: x: Year, y: Pct","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"viewof view_line = vl.markLine()\n .data(line_data)\n .title(\"Winning percentage from 1955 to 2021\")\n .encode(\n vl.x().fieldO(\"Year\"),\n vl.y().fieldQ(\"Pct\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"## More Practice\n\nFor more practice, here are a few suggestions for things to try in your notebook:\n* add formatting - axis labels, chart sizing, informative titles, etc.\n* add tooltips\n* use repeat/facet/concat to create multiple charts with the QB data\n* download another team's historical data (Georgia, Alabama, ODU), attach to the notebook, merge, and layer on the line chart\n","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"import { aq, op } from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}