34:["$","title",null,{"children":"Homework 3 – Data Visualization with Vega-Lite | Jakob Li | Observable"}] 3c:T44e,## Part 5: Making your own charts Choose any fields from the `joined` array and make charts of your own. You are free to use any of the charts above (or charts from the [Vega-Lite example gallery](https://vega.github.io/vega-lite/examples/)) as starting points. Some ideas (though you should feel free to design your own): - We haven't yet looked at `make_world_better_percent` (the percentage of surveyed graduates from that school that believe they're making the world a better place). How does that relate to other fields in the data, e.g., `mid_career_pay`? - Which `type` of school has the highest `in_state_tuition`? (Hint: You would make a bar chart with a `mean` aggregation.) ${flag()} Make at least _three_ different charts, each exploring a question we haven't yet considered in the previous charts. Your charts should meet these requirements: - Each chart should have a meaningful title and axis/legend labels. - Your charts should not all use the same `mark` type. - For each chart, include a markdown cell explaining your interpretation of the chart, written in well-formed sentences.3d:[{"id":"d1c209dcaf67bd12d01c77e843981eb479d73339557a13340b2bb7544a41a9c68f01b7ab4a1470b626dfeb49a5b3b587280fde696d7475005659b22a593f4523","href":"https://static.observableusercontent.com/files/d1c209dcaf67bd12d01c77e843981eb479d73339557a13340b2bb7544a41a9c68f01b7ab4a1470b626dfeb49a5b3b587280fde696d7475005659b22a593f4523","name":"scatter.png","type":"image/png","lastModified":1792544564986,"size":170878},{"id":"9e8a40b0d2ba2c530066e8760cd7c5936c425b60fddee3298580964badb9bc6bbab7056948e6dae4b4c2646a5aa61f88d921f8693fdc96724d5d99a070196fa0","href":"https://static.observableusercontent.com/files/9e8a40b0d2ba2c530066e8760cd7c5936c425b60fddee3298580964badb9bc6bbab7056948e6dae4b4c2646a5aa61f88d921f8693fdc96724d5d99a070196fa0","name":"with-type.png","type":"image/png","lastModified":1792614059060,"size":203581}] 38:{"id":"f5f573f6bc532e04","slug":"homework-3-data-visualization-with-vega-lite","title":"Homework 3 – Data Visualization with Vega-Lite","thumbnail":"e01598057ad69c2d85614115246ce6e5545a593ec7ea276c898e95e15d07ffa2","access_level":"public","create_time":"$D2026-10-28T15:53:54.060Z","update_time":"$D2026-10-28T17:47:43.187Z","view_time":null,"first_public_time":"$D2026-10-28T17:47:57.815Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"23018a00ede481f1","login":"jakob-li","name":"Jakob Li","avatar_url":"https://avatars-next.observableusercontent.com/6c393c83504f993fa9d48bc1447081bc56d334770c648a9bfa08ab204d3b367e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":356,"publish_version":356,"role":null,"authored":false,"authors":[{"type":"individual","id":"166a45771d83b705","login":"jakob-li","name":"Jakob Li","avatar_url":"https://avatars-next.observableusercontent.com/6c393c83504f993fa9d48bc1447081bc56d334770c648a9bfa08ab204d3b367e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"23018a00ede481f1","login":"jakob-li","name":"Jakob Li","avatar_url":"https://avatars-next.observableusercontent.com/6c393c83504f993fa9d48bc1447081bc56d334770c648a9bfa08ab204d3b367e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Homework 3 – Data Visualization with Vega-Lite","cells":[{"id":1,"value":"# Homework 3 – Data Visualization with Vega-Lite","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"In class, we asked: **_Is an expensive college worth it?_** We answered it with numbers (averages, minimums, maximums, and a return-on-cost measure). However, to really understand the patterns in our data, we need to \"see all of it\". In this homework, you'll use **Vega-Lite** to look at the same data as visualizations.\n\nYou'll work with `joined`, the dataset we built in class by combining tuition data with salary data. Each record looks like this:\n\n```js\n{\n name: \"Auburn University\",\n state: \"Alabama\",\n state_code: \"AL\",\n type: \"Public\",\n degree_length: \"4 Year\",\n room_and_board: 13332,\n in_state_tuition: 11276,\n in_state_total: 24608,\n out_of_state_tuition: 30524,\n out_of_state_total: 43856,\n early_career_pay: 54400,\n mid_career_pay: 104500,\n make_world_better_percent: 51\n}\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"## Submission\n\nWhen you're finished, mark your notebook as **Unlisted** and submit the link in Canvas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Getting started","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$${flag('to-done')} You don't need to anything here. Confirm that you see a bar-chart resulting from the code below, and take a moment to study the code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"vl.spec({\n data: { values: joined.slice(0, 10) },\n mark: \"bar\",\n encoding: {\n x: { field: \"name\", type: \"nominal\" },\n y: { field: \"early_career_pay\", type: \"quantitative\" }\n }\n}).render()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Ponder:\n\n- Our dataset contains ${joined.length} institutions. How come we're only seeing 10 in the chart above?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## Part 1: Making your own bar charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$${flag()} In the cell below, copy the code for the chart above, and make the following three changes:\n\n- Change the `y` field to encode `mid_career_pay`.\n- Add a `title`. (See the [Vega-Lite documentation about adding titles](https://vega.github.io/vega-lite/docs/title.html).)\n- Give the y-axis a nicer label by adding `title` _inside_ the `y` encoding. ([See the Vega-Lite documentation about adding axis titles](https://vega.github.io/vega-lite/docs/axis.html).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"vl.spec({\n title: \"Payment Bar\",\n data: { values: joined.slice(0, 10) },\n mark: \"bar\",\n encoding: {\n x: { field: \"name\", type: \"nominal\" },\n y: { field: \"mid_career_pay\", type: \"quantitative\" }\n }\n}).render()// Your code here. Start by copying and pasting the code from the chart above.\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"## Part 2: Scatter plots\n\nWhen we want to see a relationship between two numbers across hundreds of a schools, another plot can help us out: the scatterplot.\n\nConsider the image below. This is just a screenshot of the desired image.\n\n${await FileAttachment(\"scatter.png\").image({ width: 300 })}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$${flag()} Fill in the blanks in the code below to produce the visualization above.\n\n_The `SyntaxError` will disappear once you fill in the blanks._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"vl.spec({\n data: { values: joined }, // Your data goes here\n mark: 'point', // What kind of \"mark\" are we drawing? Bar? Or point?\n width: 500,\n height: 500,\n encoding: {\n x: { field: \"in_state_tuition\", type: 'quantitative' },\n y: { field: \"early_career_pay\", type: 'quantitative' }\n }\n}).render()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## Part 3: Adding color\n\nWe'd like to be able to distinguish between public schools and private schools.\n\n${flag()} In the cell below, copy the completed scatterplot from the previous step, and add a `color` encoding. It should encode the `type` field from the data.\n\nA few things to notice:\n\n- The field named `type` in our data shows whether the school is \"Public\" or \"Private\". This is different from the `type` property used in the Vega-Lite specification to say what it's data type is! They just happen to share the same name.\n- Your chart will contain rather un-polished axis labels and titles, like `in_state_tuition` and `early_career_pay`. For each encoding, also specify a `title` property whose value is a meaningful title. E.g., `\"In State Tuition\"` is much nicer to publish than `in_state_tuition`!\n\n

Expand this to see what your result chart should look like.

\n ${await FileAttachment(\"with-type.png\").image({ width: 400 })}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"vl.spec({\n data: { values: joined }, // Your data goes here\n mark: 'point', // What kind of \"mark\" are we drawing? Bar? Or point?\n width: 500,\n height: 500,\n encoding: {\n x: { field: \"in_state_tuition\", type: 'quantitative', title: \"In State Tuition\"},\n y: { field: \"early_career_pay\", type: 'quantitative', title: \"Early Career Pay\"},\n color: {field: 'type', type:'nominal'}\n },\n}).render()// Your code here\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$${flag()} 1 or 2 sentences: What do you notice about the relationship between in-state tuition, early career salary, and the school's public/private status?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"\nI see that public in state tuition is around 10,000 to 20,000, and the early career pay is really close to 60,000. I see private being separated, where their in state tuition is 10,000 to 60,000, and the early career pay is scattered around 34K to 90K.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"## Part 4: Aggregations\n\nVega-Lite has some basic functionality for performing _aggregations_ in the plot itself, like counting records or computing averages.\n\nLet's make a chart that shows **bars** with the following encodings:\n\n- On the x axis, each state\n- On the y axis, _the number of records within that state_\n\nYou'll begin like you have before (already done for you), you will end up with a long series of squares: one \"bar\" per state, as requested!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"vl.spec({\n data: {\n values: joined\n },\n width: width,\n mark: 'bar',\n encoding: {\n x: { field: 'state', type: 'nominal' },\n y: { aggregate: 'count', type: 'quantitative'},\n color: {field: 'type', type: 'nominal'}\n }\n}).render()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$${flag()} In the cell above, we want to do the following:\n\n**1. Add a `y` encoding that shows _the number of records_**. We can do that by adding this to the `encoding` object, beneath the `x` encoding:\n\n```\ny: {\n aggregate: 'count', type: 'quantitative'\n}\n```\n\nInstead of directly encoding the `y` position to a field in the dataset, we are encoding it to the result of a \"count\" operation. We're using the `count` aggregation here. [Vega-Lite offers many other aggregations as well](https://vega.github.io/vega-lite/docs/aggregate.html).\n\nYou should end up with a bar chart showing the number of schools in each state.\n\n_Note that this is a filtered dataset; recall that in our previous notebook we had _joined_ our tuition data and salary data, which resulted in losing some rows._\n\n**2. Next, it'd be great if we could see how many schools in each state are public vs. private.** Add a `color` encoding to the chart, mapping color to the `type` field in the dataset.\n\nYou will see a _stacked bar chart_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$${flag()} What do you notice about the schools in Wyoming? What about Massachusetts?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"\nI noticed that Wyoming private is super low compared to other privates their count record are at 1. I see that Massachusetts public is way more count records than private.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// Write your code in this cell and add more cells as needed\nvl.spec({\n data: {values: joined},\n mark: 'bar',\n encoding: {\n x: {field: \"name\", type: 'nominal'},\n y: {field: 'make_world_better_percent', type: 'quantitative', title: 'Make World Better'},\n }\n}).render()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"vl.spec({\n data: {values: joined},\n mark: 'point',\n encoding: {\n x: {field: \"out_of_state_tuition\", type: 'quantitative', title: 'Out Of State Tuition'},\n y: {field: 'early_career_pay', type: 'quantitative', title: 'Early Career Pay'},\n color: {field: 'type', type: 'nominal'}\n }\n}).render()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"vl.spec({\n data: {values: joined},\n mark: 'bar',\n encoding: {\n x: {field: \"name\", type: 'nominal'},\n y: {field: 'mid_career_pay', type: 'quantitative', title: 'Mid Career Pay'},\n }\n}).render()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"display(joined[0])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import { flag, stylesheet } from 'observable:@ayaankazerouni/utils'","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { joined, joinFigure } from 'observable:@ayaankazerouni/csc1024-college-analysis'","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"2"}} 33:null