34:["$","title",null,{"children":"Week 1 Exercise: Basic Vega-Lite Charting and Visualizations (due Sept. 10) | Zhiqi Zhao | Observable"}] 3c:T6ba,This is a short exercised designed to further familiarize yourselves with **Vega-Lite** operations and conducting some basic critiques of visual charts. This exercise requires that we work with an "1000 Cameras Dataset" provided by Chris Crawford on Kaggle. We will be looking at some trends across a MODIFIED version of this, available at this Google Drive link. ## Assignment Instructions This assignment is due **September 10, 2026 @ 11:59pm**. We base our grading on the **last updated timestamp** of your notebook; please take care to not modify your notebook at any point after this submission time. Otherwise, please follow these instructions: 1. Fork this notebook to make sure that you are working on your own copy! 2. Fill your name and NetID in the code block below. **You will not receive credit if you do not fill this part properly.** 3. All required code exercises are marked with a [TO-DO]. Please fill these out to the best of your ability. - You may refer to either Week 1 Lab for reference or additional online resources such as documentation and public forums for help with these questions. - **Please be mindful of our academic integrity policies when completing this assignment.** 4. Make this notebook either public or unlisted. **You will not receive credit if you do not accomplish this step.** 5. On Brightspace, submit the URL to this notebook under the relevant assignment.3d:T834,--- ## Part 4: Extending Our Understanding: Bar Charts and Boxplots (22%) Scatter plots can only give us so much context to the data. We need additional charts to start observing trends more easily. One thing we hadn't considered thus far in our data is the number of cameras across time. What if our data is actually biased by having more recent cameras than pre-2000 cameras, for example? Are there other ways to visualize the same trends we've explored above? Let's try to understand the distributions of our data in different ways.. For this part, we need to extend into different chart types other than scatter plots. Make sure to get acquainted with the possible [mark types](https://vega.github.io/vega-lite/docs/mark.html#types) provided by **Vega-Lite**. We'll be focused on two distinct types: Bar Charts, and Boxplots.

Bar Charts v.s. Histograms: Which to Use?

Bar charts and histograms are very useful tools for demonstrating the distribution of data across either a spectrum of data or across aggregated sections of data. There is a distinction between them, however.

Bar charts describe distinct, discrete categories in the data. This can be features such as labels, company names, or seasons of a year. The bins of bar charts can be either nominal or ordinal.
Histograms describe the distribution of data across a spectrum of continuous data. The feature that is binned is usually quantitative and requires some intuition on how to divide the continuous data into equal segments.

For the purposes of this assignment, we'll explore bar charts. However, just know that Vega-Lite offers the ability to generate both kinds of graphs using the markBar() method; it's all about what kind of data you feed into it that determines whether it's a bar chart or a histogram. For the determined, we recommend at least viewing the possible types of encodings useful for bar charts.

3e:[{"id":"bde99b6aceba5deeae47692af5158ee34b13288f2217dc9a3706857a680f831bf2b5313afd99168430259989cde8a76f04c78324d43ae7e632d61227e1a25cb2","href":"https://static.observableusercontent.com/files/bde99b6aceba5deeae47692af5158ee34b13288f2217dc9a3706857a680f831bf2b5313afd99168430259989cde8a76f04c78324d43ae7e632d61227e1a25cb2","name":"e1_2a.png","type":"image/png","lastModified":1788454814604,"size":15153},{"id":"39ba775b9bc121273433116220c04f636fc8e23df43ea5a64ac769e3b677489f5eabec2e2a6451f3c19a5106d4d2d2558ed85ca36175e1da6d3d171882050a45","href":"https://static.observableusercontent.com/files/39ba775b9bc121273433116220c04f636fc8e23df43ea5a64ac769e3b677489f5eabec2e2a6451f3c19a5106d4d2d2558ed85ca36175e1da6d3d171882050a45","name":"e1_2b.png","type":"image/png","lastModified":1788462666612,"size":66955},{"id":"ef9bdcc1ec82198820ef6617d5612f15f94be9e9e7f0206a2ec3c54272b0119f59167cc357458a8ff354fe35295224031e49dbbadbc613028b1ebe7ff0a0618a","href":"https://static.observableusercontent.com/files/ef9bdcc1ec82198820ef6617d5612f15f94be9e9e7f0206a2ec3c54272b0119f59167cc357458a8ff354fe35295224031e49dbbadbc613028b1ebe7ff0a0618a","name":"e1_2c.png","type":"image/png","lastModified":1788463783365,"size":27089},{"id":"07874fdce61fac453f1deb02324762b07521beaef9dd454e5e639e4c33a7173e46004c795722820a62650e6b34abd2c86ed2998d15e615a742dff33dedaa5158","href":"https://static.observableusercontent.com/files/07874fdce61fac453f1deb02324762b07521beaef9dd454e5e639e4c33a7173e46004c795722820a62650e6b34abd2c86ed2998d15e615a742dff33dedaa5158","name":"e1_2d.png","type":"image/png","lastModified":1788464717797,"size":43440},{"id":"aa8b6de5c50132d7c086bceac7ec633d419223803264e3898f1ecd63586daae68d5973ccd207d9b95baca3b5a9514f73f57fbc7bb7f2416d551782dcd23fb8dd","href":"https://static.observableusercontent.com/files/aa8b6de5c50132d7c086bceac7ec633d419223803264e3898f1ecd63586daae68d5973ccd207d9b95baca3b5a9514f73f57fbc7bb7f2416d551782dcd23fb8dd","name":"e1_3a.png","type":"image/png","lastModified":1788466078705,"size":64548},{"id":"001ec89b2b1e21f2e6e60ab5358d79d8804746564ea767b47c980a20ea12fd941900c3d5d779bb2bc7def6aa4c557303e90c20d9800c60ca72d12d60eb7cdee6","href":"https://static.observableusercontent.com/files/001ec89b2b1e21f2e6e60ab5358d79d8804746564ea767b47c980a20ea12fd941900c3d5d779bb2bc7def6aa4c557303e90c20d9800c60ca72d12d60eb7cdee6","name":"e1_3b.png","type":"image/png","lastModified":1788467999124,"size":48125},{"id":"76e3fa0489c5baab6e764dbd6e7af52a4ff00a13ae7214cafaa8124a1b80283b8f276d4ec34439d6f1d03e37e645ee1fba766c29b56093fa16892465aaf6839d","href":"https://static.observableusercontent.com/files/76e3fa0489c5baab6e764dbd6e7af52a4ff00a13ae7214cafaa8124a1b80283b8f276d4ec34439d6f1d03e37e645ee1fba766c29b56093fa16892465aaf6839d","name":"e1_3c.png","type":"image/png","lastModified":1788469453614,"size":59790},{"id":"a94265fb099782f47fa922feb28e5455c875f0302e792f00541a30fafdc206b41916ae8745083e378ac5adfee827ba6d037c481e7db414e5f4b19e745e8de9b6","href":"https://static.observableusercontent.com/files/a94265fb099782f47fa922feb28e5455c875f0302e792f00541a30fafdc206b41916ae8745083e378ac5adfee827ba6d037c481e7db414e5f4b19e745e8de9b6","name":"e1_4a.png","type":"image/png","lastModified":1788470222557,"size":23559},{"id":"d382b789a15fd8d7d816115a46b8bd040fc20ba18dce38eee36b9cd91cc1bced01c4ba014ae60e10c17bf8e7e7be1e3403aadcd8c1bb7bea3855185f99491152","href":"https://static.observableusercontent.com/files/d382b789a15fd8d7d816115a46b8bd040fc20ba18dce38eee36b9cd91cc1bced01c4ba014ae60e10c17bf8e7e7be1e3403aadcd8c1bb7bea3855185f99491152","name":"e1_4b.png","type":"image/png","lastModified":1788470502738,"size":28285},{"id":"2c88a82f0f56f271e97da64bac9c9bda9712c6804551a743e393fe357de9e79e39f7984ddf288a6b89418b95982a6b27a89b29d9e95e6879ecd733f863d21dfc","href":"https://static.observableusercontent.com/files/2c88a82f0f56f271e97da64bac9c9bda9712c6804551a743e393fe357de9e79e39f7984ddf288a6b89418b95982a6b27a89b29d9e95e6879ecd733f863d21dfc","name":"camera_dataset.csv","type":"text/csv","lastModified":1788467534798,"size":101786}] 38:{"id":"c139b2eee2153d3c","slug":"week-1-exercise-basic-vega-lite-charting-and-visualizations-due-sept-10","title":"Week 1 Exercise: Basic Vega-Lite Charting and Visualizations (due Sept. 10)","thumbnail":null,"access_level":"public","create_time":"$D2026-09-07T18:36:22.728Z","update_time":"$D2026-09-08T20:42:44.158Z","view_time":null,"first_public_time":"$D2026-09-08T20:44:07.989Z","has_unpublished_edits":null,"fork":{"id":"9e804183defae70c","slug":"2026-infovis-cse_week-1-exercise","title":"Week 1 Exercise: Basic Vega-Lite Charting and Visualizations (due Sept. 10)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ec4f177fe289becd","login":"zz10677","name":"Zhiqi Zhao","avatar_url":null,"tier":"starter_2024","bio":"","following":false},"version":1076,"publish_version":1076,"role":null,"authored":false,"authors":[{"type":"individual","id":"ffa59d7ff73f730c","login":"zz10677","name":"Zhiqi Zhao","avatar_url":null,"tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"ec4f177fe289becd","login":"zz10677","name":"Zhiqi Zhao","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":"Week 1 Exercise: Basic Vega-Lite Charting and Visualizations (due Sept. 10)","cells":[{"id":0,"value":"# Week 1 Exercise: Basic Vega-Lite Charting and Visualizations (due Sept. 10)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":568,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"---\n\n

[TO-DO]

Fill your name and NetID:

[TO-DO]

Import the camera_dataset provided at this Google Drive link as a CSV, not as a JSON.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":380,"value":"camera_data = FileAttachment(\"camera_dataset.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"If you imported the data successfully, you should see a table below populated by the first 8 data samples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"// Do not modify\ncamera_data\n ? Inputs.table(camera_data.slice(0, 8))\n : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"Inspecting the dataset reveals that there are 15 columns and 1038 rows. This means that 15 features of cameras are recorded, and have 1038 unique cameras that were analyzed. In addition, there are three nominal data types: the `Model` name, the `Brand` name, and the `Price tier`. All other data features appear to be either quantitative or temporal, in the case of `Release date`. However, for the purposes of this assignment, **we will treat the `Release date` as an ORDINAL data feature**. This is because the `Release date` feature isn't a full timestamp and there's an implied order given the way years come one after another.\n\n|Original Feature Name|\n|:--|\n|\"Model\"|\n|\"Brand\"|\n|\"Release date\"|\n|\"Max resolution\"|\n|\"Low resolution\"|\n|\"Effective pixels\"|\n|\"Zoom wide\"|\n|\"Zoom tele\"|\n|\"Normal focus range\"|\n|\"Macro focus range\"|\n|\"Storage included\"|\n|\"Weight\"|\n|\"Dimensions\"|\n|\"Price\"|\n|\"Price tier\"|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"---\n## Part 2: Camera Features Across Time (40%)\n\nOne of the more salient things that may be interesting to observe is how cameras have changed over time. Let's try to do some charting to visually understand what's going on with cameras. In fact, let's observe changes over time based on the features we've listed above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"### Part 2a. Max resolution v.s. Release date (10%)\n\n

[TO-DO]

\n Generate a chart with the following properties:\n

Type: circle chart. (2%)
X-axis: Release date as an ordinal data type. (3%)
Y-axis: Max resolution as a quantitative data type. (3%)
Tooltip: Model name as a nominal data type. (2%)

Solution:

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

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"\n// [TO-DO]\nchart1 = vl\n .markCircle()\n .data(camera_data)\n .encode(\n vl.x().fieldO(\"Release date\"),\n vl.y().fieldQ(\"Max resolution\"),\n vl.tooltip().fieldN(\"Model\")\n )\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"\n// Do not modify\nchart1?.render()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"### Part 2b. Normal focus range v.s. Release Date (10%)\n\n

[TO-DO]

\n Generate a chart with the following properties:\n

Type: point chart (2%)
X-axis: Release date as an ordinal data type. (3%)
Y-axis: Normal focus range as a quantitative data type. (3%)
Tooltip: Model name as a nominal data type. (2%)

Solution:

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

[TO-DO]

\n Generate a chart with the following properties:\n

Type: square chart. (2%)
X-axis: Release date as an ordinal data type. (3%)
Y-axis: Dimensions as a quantitative data type. (3%)
Tooltip: Model name as a nominal data type. (2%)

Solution:

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

[TO-DO]

\n Generate a chart with the following properties:\n

Type: circle, point, or square chart (2%)
X-axis: Release date as an ordinal data type. (3%)
Y-axis: Price as a quantitative data type. (3%)
Tooltip: Model name as a nominal data type. (2%)

Solution:

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

[TO-DO]

\n Generate a scatter chart (can be circles, points, or squares) with the following encodings:\n

X-axis: Max resolution as an quantitative data type. (3%)
Y-axis: Price as a quantitative data type. (3%)
Color: Effective pixels as an ordinal data type. (3%)
Tooltip: Model name as a nominal data type. (2%)

Solution:

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

[TO-DO]

\n Generate a scatter chart (can be circles, points, or squares) with the following properties:\n

X-axis: Weight as an quantitative data type. (3%)
Y-axis: Price as a quantitative data type. (3%)
Color: Price tier as an nominal data type. (3%)
Tooltip: Brand name as a nominal data type. (2%)

Solution:

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

[TO-DO]

\n Generate a scatter chart (can be circles, points, or squares) with the following encodings:\n

X-axis: Zoom wide as an ordinal data type. (3%)
Y-axis: Zoom tele as a quantitative data type. (3%)
Color: Price tier as an nominal data type. (3%)
Tooltip: Brand name as a nominal data type. (2%)

Solution:

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

[TO-DO]

Generate a bar chart that visualizes the number of cameras reported for each year (x-axis). To do this, you need to take advantage of the markBar() mark type and play around with the aggregate() encoding for the y-axis. There is no need to render a tooltip or colors for this bar chart. We emphasize \"bar chart\" as we are treating the Release date as an ordinal data type.\n

Type: bar chart with proper aggregate() usage (5%)
Correct X-axis field and type (3%)
Correct Y-axis field and type (3%)

Solution:

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

[TO-DO]

\n Generate a boxplot of the relationship between Dimensions (x-axis) and Weight (y-axis). While we recommend that you bin the cameras' dimensions by magnitudes of 10, it's up to you. To use boxplots, make sure to use the markBoxplot() method provided by Vega-Lite.\n

Type: Boxplot with bin properly used (5%)
Correct X-axis field and type (3%)
Correct Y-axis field and type (3%)

Solution:

\n ${await FileAttachment(\"e1_4b.png\").image({width:400})}>\n

Do not modify anything beyond this point

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"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":587,"value":"css","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"// Do not modify this\nsubmission = ({\n student_name,\n student_netid,\n camera_data,\n chart1,\n chart2,\n chart3,\n chart4,\n chart5,\n chart6,\n chart7,\n chart8,\n chart9\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"2"}} 33:null