34:["$","title",null,{"children":"Homework 3 – Data Visualization with Vega-Lite | Emmanuel Moneda | 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":"987e5668029a3cc6","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-28T17:04:18.841Z","update_time":"$D2026-10-30T16:52:52.816Z","view_time":null,"first_public_time":"$D2026-10-30T16:39:07.643Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"072af1879e1ca85e","login":"xander","name":"Emmanuel Moneda","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":339,"publish_version":339,"role":null,"authored":false,"authors":[{"type":"individual","id":"c4658abd9d943864","login":"xander","name":"Emmanuel Moneda","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"072af1879e1ca85e","login":"xander","name":"Emmanuel Moneda","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 mid career pay schools',\n encoding: {\n x: { field: \"name\", type: \"nominal\" },\n y: { field: 'mid_career_pay', type: 'quantitative', title: \"mid career salary\" }\n }\n}).render()","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 },\n mark: \"point\",\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":"// Your code here\nvl.spec({\n data: {values: joined},\n mark: \"point\",\n encoding: {\n x: { field: 'in_state_tuition', type: 'quantitative', title: 'tuition in state' },\n y: { field: \"early_career_pay\", type: \"quantitative\", title: 'early pay' },\n color: { field: 'type', type: 'nominal', title: 'public or private' }\n }\n}).render()","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":"\nPrivate schools generally have a higher in state tuition costs and higher early career pay, whereas public schools mostly concentrate at lower tuition price points.","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: { values: joined },\n mark: 'bar',\n encoding: {\n x: { field: \"state\", type: \"nominal\" },\n y: { aggregate: 'count', type: 'quantitative', title: 'school count' },\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":"\nWyoming only has one school in the dataset, while Massachusetts has a lot of schools and most of them are 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":"vl.spec({\n data: { values: joined },\n mark: 'bar',\n title: 'average mid career pay by type',\n encoding: {\n x: { field: 'type', type: 'nominal' },\n y: { aggregate: 'mean', field: 'mid_career_pay', type: 'quantitative', title: 'mean 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":46,"value":"private schools pay a bit more on average.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"vl.spec({\n data: { values: joined },\n mark: 'point',\n title: 'correlation between tuition and mid career pay',\n encoding: {\n x: { field: 'in_state_tuition', type: 'quantitative' },\n y: { field: 'mid_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":47,"value":"more expensive tuition usually means better pay later","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"vl.spec({\n data: { values: joined.slice(0, 15)},\n mark: 'bar',\n title: 'top 15 schools for early pay',\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":48,"value":"the highest paying schools drop off pretty fast","pinned":false,"hidden":false,"mode":"md","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