) .transform( vl.lookup().from(vl.data().key().fields()) ) ... ``` We're basically telling Vega-Lite to "look up" some query feature in the main dataset within ... something. That "something" ends up being our second dataset, reformatted using `.key()` and `.fields()` to make it easy to search through. For those familiar with Python pandas, we are basically performing an inner merge; for those familiar with SQL databases, the equivalent is inner joins. Make sure to read up the official documentation before you move on. In order for this transformation to work, there needs to be some overlapping feature between `usa` and `pop_data`. Finding what those overlapping features are in these datasets is effectively up to you.45:T53b,

[TO-DO]

Create a Geoshape chart that depicts the population changes with respect to counties. Your code can be effectively formed by combining all our lessons from Parts 2A to 2D. Here's your requirements:

Use the vl.markGeoshape({...}) to create the geomap. (2%)
Your main dataset must be usa. Definitely pay attention to and read up the difference between .mesh() and .feature() here. Finally, think about how you're going to connect usa and pop_data and reflect that here. (3%)
Add a vl.lookup(...).from(...) transformation to connect usa to pop_data. (5%)
Incorporate the color scheme we used in Part 2D, including the same domain, scheme, and legend. (5%)
Implement a tooltip that shows the population change per county. (1%)
Use an "identity" projection. (1%)
The chart must be 600px wide, 400px tall, and titled "Population Changes from 2010 to 2011". (1%)

Solution:

${await FileAttachment("e3_2_geo.png").image({width:600})}

46:T429,### 2F. Multi-Chart Layouts (10%) Let's use some concatenation again to combine our geochart with another chart.

[TO-DO]

Let's create a vertical bar chart that shows the distribution of population changes and counts how many counties in the USA exhibit which levels of population change. We'll then use concatenation to combine our geochart with our new bar chart together.

Create a vertical bar chart with chart7 where the X-axis represents population_change without any binning. The Y-axis should be the # of USA counties. The bars should be colored based on the same color scheme as our geochart. The chart must be 600px wide and 100px tall. (5%)
For chart8, vertically concatenate our geochart (chart6) with our new bar chart (chart7), with the geochart on top and the bar chart on the bottom. (5%)

Solution:

${await FileAttachment("e3_2f.png").image({width:600})}

47:[{"id":"72a25ac0d0587076929b07dae88e25858d4972b40077257c050545c2167598e6d819ae1f190184ae189608a99c7554128a4a3b6eaf1f0bbbb3763e9f9f4acbd5","href":"https://static.observableusercontent.com/files/72a25ac0d0587076929b07dae88e25858d4972b40077257c050545c2167598e6d819ae1f190184ae189608a99c7554128a4a3b6eaf1f0bbbb3763e9f9f4acbd5","name":"e3_1e.png","type":"image/png","lastModified":1788846599422,"size":90221},{"id":"ccbc1c14c333da54cd5feb856346b2ac6599a4b39eddce7b2a77fd7eb2f236f439e01589f0f72a50fd2eb5b8fdae1d7ee2c201a74f4b3df1d6bdbaefefd1cc3a","href":"https://static.observableusercontent.com/files/ccbc1c14c333da54cd5feb856346b2ac6599a4b39eddce7b2a77fd7eb2f236f439e01589f0f72a50fd2eb5b8fdae1d7ee2c201a74f4b3df1d6bdbaefefd1cc3a","name":"e3_2a.png","type":"image/png","lastModified":1788849831441,"size":21657},{"id":"2b2466dba4c2f62c5bf8695dd1027d1c63f93fe10b98ffb83cec9d55cf75737b23e9ed65f9321487a46eb142a500ba31c37fa6c2219b47df6372f2b02f63f3bf","href":"https://static.observableusercontent.com/files/2b2466dba4c2f62c5bf8695dd1027d1c63f93fe10b98ffb83cec9d55cf75737b23e9ed65f9321487a46eb142a500ba31c37fa6c2219b47df6372f2b02f63f3bf","name":"e3_2f.png","type":"image/png","lastModified":1788889441820,"size":295495},{"id":"f6e79713260d92de89005d389aaff63df6a158b7de03dee80f3fd33864a5059d7fdca37ee8405fcaff38bc09f661aaef78eea05511597f15039b06e4e3e27f20","href":"https://static.observableusercontent.com/files/f6e79713260d92de89005d389aaff63df6a158b7de03dee80f3fd33864a5059d7fdca37ee8405fcaff38bc09f661aaef78eea05511597f15039b06e4e3e27f20","name":"e3_1b.png","type":"image/png","lastModified":1788844447737,"size":10311},{"id":"bf08df12cd0984b5f5ac1b59a87fa1dfa390a871416bdade2c11ded818056fada71a410832dceaf5078e762b1c172e5b1bbf007aca78c0d90b92dea2d18ffdfe","href":"https://static.observableusercontent.com/files/bf08df12cd0984b5f5ac1b59a87fa1dfa390a871416bdade2c11ded818056fada71a410832dceaf5078e762b1c172e5b1bbf007aca78c0d90b92dea2d18ffdfe","name":"e3_1c.png","type":"image/png","lastModified":1788846297127,"size":146785},{"id":"877294695a49b40d84033456fcce071d7fa810c45c16c29e7bb6e790c7b69998e32c306592ad354ec619aa04f2fe5b20fa79bb21ee2fb8d97c3770851ee9a998","href":"https://static.observableusercontent.com/files/877294695a49b40d84033456fcce071d7fa810c45c16c29e7bb6e790c7b69998e32c306592ad354ec619aa04f2fe5b20fa79bb21ee2fb8d97c3770851ee9a998","name":"e3_1d.png","type":"image/png","lastModified":1788846317686,"size":157456},{"id":"e3c5d46e7536e49c845ef7e7ec31c7c6f3e39f737ea74b7fb30f18f822e5db2d29f179fe3338a852b2155cd366cc88eabc07c1b39bb3b5f5245c62f9db9e6d92","href":"https://static.observableusercontent.com/files/e3c5d46e7536e49c845ef7e7ec31c7c6f3e39f737ea74b7fb30f18f822e5db2d29f179fe3338a852b2155cd366cc88eabc07c1b39bb3b5f5245c62f9db9e6d92","name":"e3_2_geo.png","type":"image/png","lastModified":1788860524103,"size":285084},{"id":"62bc8863570d3ef4834754e1c6088509e8f886017e046f5f53f22562425ff9d798653cc23af76b4cc67f69a65831bcb50384667734ee44d53f4ec8ad6137edf5","href":"https://static.observableusercontent.com/files/62bc8863570d3ef4834754e1c6088509e8f886017e046f5f53f22562425ff9d798653cc23af76b4cc67f69a65831bcb50384667734ee44d53f4ec8ad6137edf5","name":"usa_population_change_10-11.csv","type":"text/csv","lastModified":1790283520809,"size":39290}] 39:{"id":"f314c26effb727aa","slug":"week-3-exercise-chart-design-and-encoding-alternatives-due-sept-24","title":"Week 3 Exercise: Chart design and encoding alternatives (Due Sept. 24)","thumbnail":"e8cff879df0ff0e3869d7521b3f857763976990930ff24c4f6c2fc65437768c3","access_level":"public","create_time":"$D2026-09-24T19:22:40.190Z","update_time":"$D2026-09-24T21:40:00.146Z","view_time":null,"first_public_time":"$D2026-09-24T21:41:25.631Z","has_unpublished_edits":null,"fork":{"id":"43b170f512a481d3","slug":"2026-infovis-cse_week-3-exercise","title":"Week 3 Exercise: Chart design and encoding alternatives (Due Sept. 24)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"eb343ee805d246f5","login":"gz2448","name":"Gaochang Zhao","avatar_url":"https://avatars-next.observableusercontent.com/0c8bde6dbe758901b56c05987e8b5fd22de343b0c41ab227e674fff352124be5","tier":"starter_2024","bio":"","following":false},"version":1281,"publish_version":1281,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b38bf4be00e3b6f","login":"gz2448","name":"Gaochang Zhao","avatar_url":"https://avatars-next.observableusercontent.com/0c8bde6dbe758901b56c05987e8b5fd22de343b0c41ab227e674fff352124be5","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"eb343ee805d246f5","login":"gz2448","name":"Gaochang Zhao","avatar_url":"https://avatars-next.observableusercontent.com/0c8bde6dbe758901b56c05987e8b5fd22de343b0c41ab227e674fff352124be5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 3 Exercise: Chart design and encoding alternatives (Due Sept. 24)","cells":[{"id":607,"value":"# Week 3 Exercise: Chart design and encoding alternatives (Due Sept. 24)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"---\n

[TO-DO]

Fill your name and NetID:

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":609,"value":"student_name = \"Gaochang Zhao\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"student_netid = \"gz2448\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"---\n## Part 1: Seattle Weather - Domains, Ranges, and Multi-View Compositions via Concatenation and Facets [40%]\n\nWe want to produce a multi-view composite figure that depicts weather patterns in Seattle, Washington. Specifically, we want to observe if there are any characteristics of how the weather is like year-round in Seattle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"### 1A. Importing the Weather Dataset (5%)\n\nThe dataset we'll be using is provided by Vega-Lite, but we'll be doing something different here. This time, we'll be using **D3.js** to import data. This requires a bit of a different code syntax, though we've already experienced D3.js in Exercise #2 last week. Consider the following syntax:\n\n```\ndata = d3.csv()\n```\n\nThere are other ways to import data with D3.js, but for now let's import the data from Vega-Lite using this link:\nhttps://vega.github.io/vega-datasets/data/seattle-weather.csv.\n\n

[TO-DO]

Import weather_data by using d3.csv() and the seattle weather data via the link above.

[NOTE]

D3.js and pure JavaScript can be used to do interesting things such as extracting unique values out of dataset features. For the purposes of this assignment, we'll be just manually defining these arrays; in later assignments, we'll be using JavaScript and D3.js to do these operations.

[TO-DO]

How many entries in our dataset correspond to each weather type? Let's use a horizontal bar chart to observe. Create a horizontal bar chart depicting the aggregated counts of reports, by weather. The chart should have these characteristics:\n

The bar chart is horizontal, with the y-axis showing the weather type and the x-axis showing the number of records corresponding to each weather type. (5%)
The chart is sorted in descending order along the Y-axis based on the number of records per weather type. In other words, the weather type with the highest count is at the top. (5%)
The color of the bars should correspond to the weather colors we defined with weather_domain and weather_range. (4%)
The chart should be 600px wide and 200px tall. (1%)

Solution:

\n ${await FileAttachment(\"e3_1b.png\").image({width:600})}\n

[TO-DO]

\n Vertically concatenate our charts from Part 1B (chart1) and Part 1C (chart2) so that the maximum temperature chart is place above the weather types bar chart. Do NOT recreate your charts; merely use chart1 and chart2 as variables.\n

Solution

\n ${await FileAttachment('e3_1d.png').image({width:600})}\n

[TO-DO]

Using D3 syntax, import the TopoJSON data from https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json. You should NOT FileAttachment system nor upload the dataset as a file to this notebook.

[NOTE]

Import the population change data from Google Drive. You are free to upload the data onto your notebook and use FileAttachment() like we've done previously.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"\n// TO-DO\npop_data = FileAttachment(\"usa_population_change_10-11.csv\").csv()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"{\n if (pop_data == null) return;\n return Inputs.table(pop_data.slice(0,10), {layout:\"auto\"})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"### 2D. Visualizing Population Changes (7%)\n\nLet's try to understand population changes. This is a simple bar chart, where we visualize the changes recorded in `population_data`, but with a twist: we will generate a custom legend that visually depicts the range of population changes by color.\n\nThe [documentation](https://vega.github.io/vega-lite/docs/legend.html) has many properties ranging from general properties applied to all legends and specific legend types (i.e. gradients). To generate a custom legend, let us consider the task:\n\n1. We want to represent population changes as a color gradient.\n2. The legend must be positioned in a way that doesn't conflict too much with the resulting visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"$43","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":432,"value":"\n// TO-DO\nlegend = ({\n title: \"Population change(%)\",\n format: \"%\",\n orient: \"top-right\",\n direction: \"horizontal\",\n tickCount: 5,\n gradientLength: 240,\n gradientThickness: 8\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"// DO NOT MODIFY\nvl.markBar()\n .data(pop_data.slice(0,10))\n .encode(\n vl.x().fieldN('id'),\n vl.y().fieldQ('population_change'),\n vl.color().fieldQ('population_change')\n .scale({domain: [-0.03, 0, 0.03], scheme: 'redblue'})\n .legend(legend),\n )\n .width(350)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":635,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"\n// TO-DO\nchart6 = vl\n .markGeoshape({\n stroke: \"black\",\n strokeWidth: 1\n })\n .data(\n vl.topojson(usa)\n .feature(\"counties\")\n )\n .transform(\n vl.lookup(\"id\")\n .from(\n vl.data(pop_data)\n .key(\"id\")\n .fields(\"population_change\")\n )\n )\n .encode(\n vl.color()\n .fieldQ(\"population_change\")\n .scale({\n domain: [-0.03, 0, 0.03],\n scheme: \"redblue\"\n })\n .legend(legend),\n\n vl.tooltip()\n .fieldQ(\"population_change\")\n .format(\"%\")\n )\n .project(\n vl.projection(\"identity\")\n )\n .width(600)\n .height(400)\n .title(\"Population Changes from 2010 to 2011\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"// DO NOT MODIFY\nchart6?.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"\n// TO-DO\nchart7 = vl.markBar()\n .data(pop_data)\n .encode(\n vl.x()\n .fieldQ(\"population_change\"),\n\n vl.y()\n .count()\n .title(\"Count of Records\"),\n\n vl.color()\n .fieldQ(\"population_change\")\n .scale({\n domain: [-0.03, 0, 0.03],\n scheme: \"redblue\"\n })\n .legend(null)\n )\n .width(600)\n .height(100)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"chart7?.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"\n// TO-DO\nchart8 = vl\n .vconcat(\n chart6,\n chart7\n )\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"// Do not modify\nchart8?.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"

[NOTE]

Normally, it's a good idea to define the number of bins for a bar chart using a modifier like .bins({maxbins:<#>}). However, we don't do that here. Why? Because when you combine both our geochart and our bar chart together, you'll run into a conflict in how the population_change variable is represented across both charts. When concatenating, we are not just slapping two charts together; Vega-Lite is attempting to reconcile the two charts at the data and encoding level. Our geochart does not use any binning to represent population_change, and the histogram should avoid doing the same.

[NOTE]

Do not modify anything below this point.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"import { css, vl } from \"@rk2546/infovis-cse-backend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"css","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"answers = ({\n student_name,\n student_netid,\n weather_data,\n chart1, chart2, chart3, chart4,\n usa, pop_data,\n chart5, chart6, chart7, legend, chart8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"### Notes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"#### Legend Formats\n\n|Specifier|Meaning|Example(s)|\n|:-:|:--|:--|\n|`f`|Fixed-point decimal|`.2f`: float value to the nearest hundredth|\n|`%`|Percent|`+.1%`: percentage to the nearest tenth, showing the sign|\n|`$`|Add a currency symbol||\n|`,`|Separator by thousands|`$,.0f`: US currency, rounded| \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 3a:"$39:body"

[NOTE] Be Prepared for Exercise 3

Domain and Range in Visualization

[TO-DO]

Solution:

[TO-DO]

Solution:

[NOTE]

[TO-DO]

Solution:

[TO-DO]

[TO-DO]

Solution:

[TO-DO]

Solution:

[TO-DO]

[TO-DO]

[NOTE]

[TO-DO]

Solution:

[TO-DO]

Solution

[TO-DO]

[NOTE]

[NOTE]

[NOTE]