34:["$","title",null,{"children":"Homework 3 – Data Visualization with Vega-Lite | Jazmine | 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":"a919eb59060430bb","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-29T22:55:51.091Z","update_time":"$D2026-10-31T04:22:39.004Z","view_time":null,"first_public_time":"$D2026-10-31T04:22:49.369Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f9794693d27004e3","login":"jhazzy","name":"Jazmine","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":334,"publish_version":334,"role":null,"authored":false,"authors":[{"type":"individual","id":"542eace3fbc752f9","login":"jhazzy","name":"Jazmine","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f9794693d27004e3","login":"jhazzy","name":"Jazmine","avatar_url":null,"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":"// Your code here. Start by copying and pasting the code from the chart above.\nvl.spec({\n data: { values: joined.slice(0, 10) },\n mark: \"bar\",\n title: \"Top 10 Schools by Mid-Career Pay\",\n encoding: {\n x: { field: \"name\", type: \"nominal\" },\n y: {\n field: \"mid_career_pay\",\n type: \"quantitative\",\n title: \"Mid-Career Pay ($)\"\n }\n }\n}).render(\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 },\n mark: \"point\",\n width: 500,\n height: 500,\n encoding: {\n x: {\n field: \"in_state_tuition\",\n type: \"quantitative\",\n title: \"In-State Tuition ($)\"\n },\n y: {\n field: \"early_career_pay\",\n type: \"quantitative\",\n title: \"Early Career Pay ($)\"\n },\n color: {\n field: \"type\",\n type: \"nominal\",\n title: \"School Type\"\n }\n }\n}).render()\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":"Public school provide a low cost option with stable starting salaries, meanwhile private schools span a much wider and more expensive tuition range.","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: {\n field: 'state',\n type: 'nominal',\n title: 'State'\n },\n y: {\n aggregate: 'count',\n type: 'quantitative',\n title: 'Number of Schools'\n },\n color: {\n field: 'type',\n type: 'nominal',\n title: 'School Type'\n }\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":"Wyoming has a low number overall of schools, which are entirely public but Massachusetts stands out for having a high amount of private schools.","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":"vl.spec({\n data: { values: joined },\n mark: 'bar',\n title: 'Average In-State Tuition by School Type',\n encoding: {\n x: { field: 'type', type: 'nominal', title: 'School Type' },\n y: {\n aggregate: 'mean',\n field: 'in_state_tuition',\n type: 'quantitative',\n title: 'Average In-State Tuition ($)'\n },\n color: { field: 'type', type: 'nominal', legend: null }\n }\n}).render()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`\nPrivate schools have a higher average in state tuition compared to public schools, meaning that attending a private institution requires a substantially larger upfront financial investment**`\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"vl.spec({\n data: { values: joined },\n mark: 'circle',\n title: 'Alumni Impact vs. Mid-Career Salary',\n encoding: {\n x: {\n field: 'make_world_better_percent',\n type: 'quantitative',\n title: 'Alumni Making the World Better (%)'\n },\n y: {\n field: 'mid_career_pay',\n type: 'quantitative',\n title: 'Mid-Career Pay ($)'\n },\n color: { field: 'type', type: 'nominal', title: 'School Type' }\n }\n}).render()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`\nThe scatter plot shows the relationship between graduate earnings and social impact across both public and private categories, even schools with high mid-career salaries still feature high percentages of alumni who feel as if they are making the world a better place.\n`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"vl.spec({\n data: { values: joined },\n mark: 'boxplot',\n title: 'Distribution of Early Career Pay by School Type',\n encoding: {\n x: { field: 'type', type: 'nominal', title: 'School Type' },\n y: {\n field: 'early_career_pay',\n type: 'quantitative',\n title: 'Early Career Pay ($)'\n },\n color: { field: 'type', type: 'nominal', legend: null }\n }\n}).render()\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`\nThe box plot shows the spread and median of early career pay for public and private schools which shows that even though both types share similar median starting salaries, private institutions feature a wider range and higher outliers.\n`","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