31:[{"id":"ec36e0d88bbf411258b8692f2c13beb26f2089ed35f416d5f2845dbe367e18c829327bd525e8d2a73d98a94346717eac6c0bcade22dc88292448b0c28ceee06a","href":"https://static.observableusercontent.com/files/ec36e0d88bbf411258b8692f2c13beb26f2089ed35f416d5f2845dbe367e18c829327bd525e8d2a73d98a94346717eac6c0bcade22dc88292448b0c28ceee06a","name":"untitled (12).png","type":"image/png","lastModified":1632708941349.867,"size":574990},{"id":"aaa609965e04b1b10a2aaf0ec87243efad3009af37111f4f6d8c987bd2a5928d4c679e930f766a0456fee20c833ae2efe112096502811e62333a53f7ab5445ca","href":"https://static.observableusercontent.com/files/aaa609965e04b1b10a2aaf0ec87243efad3009af37111f4f6d8c987bd2a5928d4c679e930f766a0456fee20c833ae2efe112096502811e62333a53f7ab5445ca","name":"test@1.png","type":"image/png","lastModified":1632708941349.867,"size":54337},{"id":"f6baa6e735aefa1867a839f442c80dbc8fd52f4a47700606c2ab6df4e7b56605df47c0b66586beec671491e577e53919f64fe950338d2439b34ff312e1e73dd8","href":"https://static.observableusercontent.com/files/f6baa6e735aefa1867a839f442c80dbc8fd52f4a47700606c2ab6df4e7b56605df47c0b66586beec671491e577e53919f64fe950338d2439b34ff312e1e73dd8","name":"untitled (11).png","type":"image/png","lastModified":1632708941349.867,"size":704811},{"id":"53b3b3b2b6dcd3dac5359ad50aaa90ef68ec6cd163a957d153807a0393b7a57548a33613c4a85ea75b677a74670142e174ae315cd1264b87fac3433df4611cd3","href":"https://static.observableusercontent.com/files/53b3b3b2b6dcd3dac5359ad50aaa90ef68ec6cd163a957d153807a0393b7a57548a33613c4a85ea75b677a74670142e174ae315cd1264b87fac3433df4611cd3","name":"untitled (10).png","type":"image/png","lastModified":1632708941349.867,"size":215948},{"id":"408ca504bd5cc8e5bc6c9b801c30732c9590b6022ed628f1ef34baf583f34ab1afc421954bd04f822b6b98251b9ff532773349203df930f0fbb258d422e9da9d","href":"https://static.observableusercontent.com/files/408ca504bd5cc8e5bc6c9b801c30732c9590b6022ed628f1ef34baf583f34ab1afc421954bd04f822b6b98251b9ff532773349203df930f0fbb258d422e9da9d","name":"untitled (3).png","type":"image/png","lastModified":1632708941349.867,"size":113225},{"id":"9dee0b4505626377072ca87ba5ac8677ecaa850819d746de88b6a2b25519e300a5d864152551343f0b414ba9c1949741a1e5315a4763ae418daa963bdeb0e170","href":"https://static.observableusercontent.com/files/9dee0b4505626377072ca87ba5ac8677ecaa850819d746de88b6a2b25519e300a5d864152551343f0b414ba9c1949741a1e5315a4763ae418daa963bdeb0e170","name":"untitled (7).png","type":"image/png","lastModified":1632708941349.867,"size":101035},{"id":"41afc55abe4e7db2d5ccb63487845dfff3af1e92f873be53d811b460d388862d37a552a3b762fddd36dd735bedebda0b44306af59bab31e453ec8b268f9f8ca6","href":"https://static.observableusercontent.com/files/41afc55abe4e7db2d5ccb63487845dfff3af1e92f873be53d811b460d388862d37a552a3b762fddd36dd735bedebda0b44306af59bab31e453ec8b268f9f8ca6","name":"untitled (8).png","type":"image/png","lastModified":1632708941349.867,"size":69438},{"id":"a97cfd0a0a9b5182830e5ef47b560c36ce392b5bbf4d9694c121a9768263ee654a728654badaaa8ceca87b0b80bbf8df982f217fd967efefb3865cf6847d2cd1","href":"https://static.observableusercontent.com/files/a97cfd0a0a9b5182830e5ef47b560c36ce392b5bbf4d9694c121a9768263ee654a728654badaaa8ceca87b0b80bbf8df982f217fd967efefb3865cf6847d2cd1","name":"untitled (6).png","type":"image/png","lastModified":1632708941349.867,"size":92735},{"id":"a291da52f1076c2e1011c408f74b9d2912c554e46bb1d84b9c2ed1e90cc46b4bcbb118dc9d2b39dfc748a510d3524bf253077b491441fe0c925b990fcc63f001","href":"https://static.observableusercontent.com/files/a291da52f1076c2e1011c408f74b9d2912c554e46bb1d84b9c2ed1e90cc46b4bcbb118dc9d2b39dfc748a510d3524bf253077b491441fe0c925b990fcc63f001","name":"untitled (1).png","type":"image/png","lastModified":1632708941349.867,"size":65882},{"id":"0e73cd3bf78711bb32e89db30e78f9c9abc6b80f1a0aaad385875e010d0b25286f33245676371f73808c31e9832a1fff1c5f0dfd9dcbe07ac06cb7d31b7f6e88","href":"https://static.observableusercontent.com/files/0e73cd3bf78711bb32e89db30e78f9c9abc6b80f1a0aaad385875e010d0b25286f33245676371f73808c31e9832a1fff1c5f0dfd9dcbe07ac06cb7d31b7f6e88","name":"untitled (5).png","type":"image/png","lastModified":1632708941349.867,"size":82042},{"id":"fee3afbdea59972be936b91103dcde2b68c37045e0fd4fc6d835b9e7b52da24158c3f47bad2b51e1c4d25b23ba4363c3b261c0f708ed643fa61d4b338f158bf4","href":"https://static.observableusercontent.com/files/fee3afbdea59972be936b91103dcde2b68c37045e0fd4fc6d835b9e7b52da24158c3f47bad2b51e1c4d25b23ba4363c3b261c0f708ed643fa61d4b338f158bf4","name":"untitled (4).png","type":"image/png","lastModified":1632708941349.867,"size":41765},{"id":"c0431f5d73807268850d0552d0595e456e844d6ce446b8a8c5737e7d3c8fb08bf83987833b7fa52ddf7a2e3d07a385f303e803bb56038a222bf1516e231ca424","href":"https://static.observableusercontent.com/files/c0431f5d73807268850d0552d0595e456e844d6ce446b8a8c5737e7d3c8fb08bf83987833b7fa52ddf7a2e3d07a385f303e803bb56038a222bf1516e231ca424","name":"untitled (2).png","type":"image/png","lastModified":1632708941349.867,"size":63248},{"id":"ef1d71c1bd49cf2835f77355e65a6d0cc07a5dcaf5f1713ae837a29bb02df98d461dcacfe6170f63a1e85dc502e86c40f1b13902642b5263320ebb83bcb428d3","href":"https://static.observableusercontent.com/files/ef1d71c1bd49cf2835f77355e65a6d0cc07a5dcaf5f1713ae837a29bb02df98d461dcacfe6170f63a1e85dc502e86c40f1b13902642b5263320ebb83bcb428d3","name":"untitled (9).png","type":"image/png","lastModified":1632708941349.867,"size":89784},{"id":"e0f8b052b985b632faab45c6d4b40f98fdd19a8d0e670c49296dabb23330f2a120f96549ff8f188fc3a7ed356530db8160fe567fdf6df3bc7790d6aabe7797d7","href":"https://static.observableusercontent.com/files/e0f8b052b985b632faab45c6d4b40f98fdd19a8d0e670c49296dabb23330f2a120f96549ff8f188fc3a7ed356530db8160fe567fdf6df3bc7790d6aabe7797d7","name":"untitled.png","type":"image/png","lastModified":1632708941349.867,"size":68380}] 2f:{"title":"Top 10 Stanford Undergraduate Majors","cells":[{"id":0,"value":"# Top 10 Stanford Undergraduate Majors","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"md`\nThis notebook is designed to excerise your ability to produce a variety of different visualizations for the [Top 10 Stanford Undergraduate Majors data](https://magrawala.github.io/cs448b-fa21/assets/a1/StanfordTopTenMajors2010s.csv) (from [CS448B: Visualization - Assignment 1](https://magrawala.github.io/cs448b-fa21/a1.html)) using Vega-Lite. \n\nYou may find these Vega-Lite resources helpful:\n- [Intro to Vega-Lite Notebook](https://observablehq.com/@stanfordvis/introduction-to-vega-lite)\n- [Visual Encodings Notebook](https://observablehq.com/@stanfordvis/data-types-graphical-marks-and-visual-encoding-channels)\n- [Data Transformations Notebook](https://observablehq.com/@stanfordvis/data-transformation)\n- [Chart Type Examples Notebook](https://observablehq.com/@observablehq/vega-lite-chart-types)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md` \n## Load and prepare the data\n\nWe have used the [Arquero](https://observablehq.com/collection/@uwdata/arquero) JavaScript library to load the Top Ten Stanford Undergraduates data into a variable called \\`majorsData\\` (open the cell showing the table to see what we did). We have also added a derived column **StartYear** that takes values in the **Year** column formatted as 20XX-YY and removes everything after the initial year to produce values formatted as 20XX. ***How does it help us to add this column?*** \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"//majorsData = d3.csv(`https://magrawala.github.io/cs448b-fa21/assets/a1/StanfordTopTenMajors2010s.csv`);\n//majorsData = aq.loadCSV(`https://magrawala.github.io/cs448b-fa21/assets/a1/StanfordTopTenMajors2010s.csv`);\nviewof majorsData = aq.fromCSV(await fetch(`https://magrawala.github.io/cs448b-fa21/assets/a1/StanfordTopTenMajors2010s.csv`)\n .then(res => res.text()),{ parse: { Year: String } }) //Treat Year column as string not date\n .derive({ StartYear: d => op.substring(d.Year,0,4)}) // derive StartYear column\n .view()\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"majorsData","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"md`\nYou may have noticed that Arquero puts the data in a slightly different data structure than we have seen in the past. Nevertheless we can treat \\`majorsData\\` as a data table and feed it into Vega-Lite just as we have seen the introductory Vega-Lite notebooks. If you are interested in learning more about Arquero, you might start with this [sequence of notebooks](https://observablehq.com/@uwdata/introducing-arquero?collection=@uwdata/arquero).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`---\n##

Exercises

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`\n1: Make a bar chart showing the ***total number of students*** for each of the top 10 subjects summed from 2011 to 2018.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"vl.markBar()\n .data(majorsData)\n .encode(\n //Code here -- be careful with aggregating the data across the years\n )\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`\n2: Make a chart showing the ***min/max range of number of students*** for each of the top 10 subjects.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"vl.markBar()\n .data(majorsData)\n .encode(\n //Code here\n )\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`\n3: Make a 1D vertical scatterplot showing the number of students across the top 10 subjects. The vertical axis should be number of students there should be one point for each number of students in each subject and startyear. Color the points by subject. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"vl.markPoint({filled: true}) // What happens if filled is false? What is the default?\n .data(majorsData)\n .encode(\n // Code here\n )\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"md`\n4: Make a series of 1D horizontal scatterplots showing the number of students for each of the top 10 subjects. The horizontal axis should be startyear and the vertical axis should be subject. Redundantly encode the subject using color and the shape of the mark.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"vl.markPoint({filled: true})\n .data(majorsData)\n .encode(\n // Code here\n )\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`\n5: Make a bar chart showing the ***total number of students*** summed across the top 10 subjects for each year between 2011 and 2018.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"vl.markBar()\n .data(majorsData)\n .encode(\n //Code Here\n )\n.render()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`\n6: Make a stacked bar chart showing the ***total number of students*** in the top 10 subjects for each year between 2011 and 2018. Each bar should be divided into segments using color, one segment color per subject. Use tooltips to give the number of students when hovering on the segments of the bar.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"vl.markBar()\n .data(majorsData)\n .encode(\n //Code here -- After making the bar chart as above, try normalizing the bars to cover the full range of the y-axis\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`\n7: Make a stacked area chart showing the ***total number of students*** in the top 10 subjects for each year between 2011 and 2018. Each area should be color based on subject.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"vl.markArea()\n .data(majorsData)\n .encode(\n // Code here -- again try normalizing the data on the y-axis.\n vl.tooltip(['Subject', 'Number of Students'])\n )\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`\n8: Make a line chart showing the number of students across the years 2011 to 2018 with one line for each of the top 10 subjects. Redundantly encode the subject using the color of the line.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"vl.markLine()\n .data(majorsData)\n .encode(\n // Code here\n vl.tooltip(['Subject', 'Number of Students'])\n )\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`\n9: Make a heatmap using \\`markRect()\\` encoding startyear on the x-axis, subject on the y-axis and color each cell based on the corresponding number of students.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"vl.markRect()\n .data(majorsData)\n .encode(\n //Code here\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"md`\n10: Make a dot plot using \\`markCircle()\\` encoding startyear on the x-axis, subject on the y-axis and color and size each cell based on the corresponding number of students.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"vl.markCircle()\n .data(majorsData)\n .encode(\n //Code here\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`\n11: Make a faceted set of bar charts -- one per subject -- with each column showing the number of students for each year. Redundantly encode the subject using color.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"vl.markBar()\n .data(majorsData)\n .encode(\n //Code here\n )\n // .width(130)\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"md`\n12: Make a faceted set of pie charts -- one per subject -- with each arc in each pie showing the number of students for each year. Redundantly enocde the subject using color. Note that you should use \\`markArc()\\` and will probably need to normalize the data mapped to the angle of the arc. Put the year and number of students in the tooltip assocaited with each arc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"vl.markArc({\"stroke\": \"#fff\"}) //What does setting this stroke property do? Try removing it here.\n .data(majorsData)\n .encode(\n //Code here\n vl.tooltip(['Year', 'Number of Students'])\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`\n13: Make a faceted set of pie charts -- one per startyear -- with each arc in each pie showing the number of students for each subject. Redundantly enocde the subject using color. Note that you should use \\`markArc()\\` and will probably need to normalize the data mapped to the angle of the arc. Put the subject and number of students in the tooltip assocaited with each arc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"vl.markArc({\"stroke\": \"#fff\"})\n .data(majorsData)\n .encode(\n //Code here\n vl.tooltip(['Subject', 'Number of Students'])\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"md`\n14: Make a 2D scatterplot where each point (x,y) shows (number of computer science students, number of biology students). You may first have to transform the data -- pivoting the table so that the subjects become columns, the values remain number of students and the data is grouped by startyear. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"viewof test = vl.markPoint()\n .data(majorsData)\n .transform(\n //Code the pivot here\n vl.pivot(/* data field */).value(/* data field*/).groupby([/*data field*/])\n ) \n .encode(\n //Code here\n vl.tooltip(\"StartYear\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"//Use this to visualize the data before and after the pivot. source_0 is the source data, data_0 is the pivoted data\nvegaDataViewer(test, {dataset: \"source_0\"}) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"md `---\n# Imports and Requirements\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"import {vegaDataViewer} from \"@john-guerra/vega-data-viewer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md` ### Unused Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require(\"d3-fetch@1\") // For fetching data from URL using d3 (loading only a subset of d3 here)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}