2b:null 2c:["$","title",null,{"children":"Week 1 Exercise: Visualization critique and basic Vega-Lite charts (due Sept 11) | Lakshmi Hukunda raju | Observable"}] 31:T9ac,# Week 1 Exercise: Visualization critique and basic Vega-Lite charts (due Sept 11) 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"](https://www.kaggle.com/datasets/crawford/1000-cameras-dataset) provided by Chris Crawford on Kaggle. We will be looking at some trends across the dataset's 13 features. This assignment is broken into **4** major sections: 1. Part 1: Importing Vega-Lite and the Camera dataset (10%) 2. Part 2: Camera Features Across Time (30%) 3. Part 3: Comparing Features (25%) 4. Part 4: Extending Our Understanding: Bar Charts, Boxplots, and Facets (35%) ## Assignment Instructions **Fork this notebook to make sure that you are working on your own copy!** Work your way down the notebook, making sure to run code blocks whenever they appear. Some parts may require you to fill out markdown blocks. Others will require code work. And some are not interactive and are just for instructions! All exercises will be marked with a **[TO-DO]**, so pay attention to them throughout the notebook. You may refer to either [Week 1 Lab](https://observablehq.com/@rk2546/2025-infovis-cse_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. ## Submission Instructions This assignment is due **September 11, 2025 @ 11:59pm**. Please follow the submission instructions: 1. _Make the notebook visible to the public._ This is accomplished by clicking the "Share" button at the top of the page and changing the "Access" settings for the Public to "Can view". 2. _Copy the Notebook URL in the same "Share" panel._ Feel free to use either an automatically-generated or custom URL. 3. In the markdown block below, _please fill out the following information._ The "Notebook URL" is the URL you copied in Step 2. **Not filling out the details below will result in a 0 for this assignment!** 4. _Download the notebook as a `.tgz` zip file._ This can be done by: 1. Scroll up to the top of the notebook, and click the "..." button. 2. `Export` -> `Download Code`. This produces a `.tgz` zip file. 3. On Brightspace, _navigate to "Assignments" and locate the corresponding assignment submission page._ 4. _Upload the `.tgz` zip file._32:T40b,--- ### Part 1c. Re-Mapping Feature Labels (6%) Redirect to the original ["1000 Cameras Dataset"](https://www.kaggle.com/datasets/crawford/1000-cameras-dataset) on another tab, and look at the data features provided by this dataset. Notice that many of the feature names contain parentheses and/or spaces, which are not very optimal for data handling. We need to change that by using JavaScript's `.map()` method to change data labels as so: |Original Feature Name|Modified Feature Name| |:--|:--| |"Model"|"model"| |"Release date"|"release_date"| |"Max resolution"|"max_resolution"| |"Low resolution"|"min_resolution"| |"Effective pixels"|"pixels"| |"Zoom wide (W)"|"zoom_wide"| |"Zoom tele (T)"|"zoom_tele"| |"Normal focus range"|"normal_focus_range"| |"Macro focus range"|"macro_focus_range"| |"Storage included"|"storage"| |"Weight (inc. batteries)"|"weight"| |"Dimensions"|"dimensions"| |"Price"|"price"| #### [TO-DO] Complete the `.map()` code below to re-label all feature labels. The first three are provided to you to help.33:T55b,> ========================= > > <Yeah, there's some relationships here, and the colors kind of help show how it changes over time too. Max resolution vs price shows a decent positive relationship — higher resolution generally means higher price, and you can see the newer cameras (by color) clustering toward higher resolution, matching what we saw in Part 2a. It's not super clean though, lots of scatter and a few pricey outliers that don't have crazy high resolution. Dimensions vs weight is the strongest relationship out of the three — bigger cameras basically always weigh more, pretty close to a straight line. Color doesn't add much new info here since the pattern holds across all years pretty evenly. Zoom wide vs zoom tele has a relationship too but it's looser — higher wide zoom usually means higher tele zoom, but there's a good amount of spread, plus a few outliers with way more tele zoom than wide zoom (probably superzoom cameras). Color mostly just shows this pattern is consistent across years rather than something new appearing over time. I think dimensions/weight is so strong because it's basically a physical relationship — bigger just means heavier. The other two are looser because they depend on more than just each other, like camera type or brand, not just the two features being compared. > > > =========================34:T7aa,## Part 4: Extending Our Understanding: Bar Charts, Boxplots, and Facets (35%) 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](https://vega.github.io/vega-lite/docs/bar.html).35:T7f5,--- ### Part 4c. Multi-Boxplot Weight vs. Dimension, Across Years (10%) We're generating a unique boxplot where we're adding **release_date** as a 3rd dimension to our boxplots. However, unlike the scatter plot in Part 3 where we used colors to represent years, we're binning the data by **release_date** and separating the data across several subplots that each represent a 5-year period. **Vega-Lite** uses a concept called ["facets"](https://vega.github.io/vega-lite/docs/encoding.html#facet) as a way to create these subplots across one or more data features. This is very similar to the concept of adding subplots to Python's "Matplotlib" plots, except that we need to define very specifically which data feature we want to generate the subplots from. In the code sample we're generating, we're producing several subplots. Each subplot will generate the data across time bins of 5 years. This means one subplot will show from 1990-1994, another from 1995-1999, and so on until 2009. In order to do this, we need to introduce two new concepts: `transform()` and `column()`. #### [TO-DO] (5%) The `transform()` method lets you modify the data provided in `data()` just for this chart. In this case, we need to transform the data by doing the following: 1. Using `calculate()` and the following string comprehension to generate 5-year bins across our **release_date** feature: ```javascript calculate("floor(datum.release_date / 5) * 5 + '-' + (floor(datum.release_date / 5) * 5 + 4)") ``` 2. rename this new bin column as **year_bin** so that we can reference it in the `encode()` method later. Modify the `transform()` method in the code sample as instructed. #### [TO-DO] (5%) The `column()` is an encoding method similar to `x()` and `y()` in that it must be called within the `encode()` function. We are effectively telling **Vega-Lite** to generate subplots by column. We want to generate this facet based on **year_bin**. Add one more `column()` encoding, using **year_bin** as its ORDINAL field. #### Solution Example:36:T455,> ========================= > > <Honestly the relationship between weight and dimension doesn't seem to change much across the different 5-year periods — bigger cameras still tend to weigh more in basically every bin, the pattern stays pretty consistent. That makes sense since it's kind of a physical relationship, bigger cameras just need more material regardless of what year it is. As for the 2005-2009 bin having way more entries but fewer outliers and less variation than 2000-2004, I think that says something about how the camera market matured. By the mid-2000s, cameras were probably a lot more standardized — manufacturers had settled into a few common form factors (compact point-and-shoots, mostly), so even with way more models being released, they were all pretty similar in size and weight to each other. Earlier on, in 2000-2004, cameras were still kind of all over the place in design since the technology and form factor hadn't been figured out yet, so you'd see more weird outliers and bigger swings in size/weight even with fewer total cameras.> > > =========================37:[{"id":"57e316b57010ad6db66c57c261fb0ca1f0a9dd22bcfaee48557f5e8757b4e44e7737f72551d599cd899eb12843b8cf28adc455b53ee04c24cc93d333b4dfe44d","href":"https://static.observableusercontent.com/files/57e316b57010ad6db66c57c261fb0ca1f0a9dd22bcfaee48557f5e8757b4e44e7737f72551d599cd899eb12843b8cf28adc455b53ee04c24cc93d333b4dfe44d","name":"2a.png","type":"image/png","lastModified":1757610372878.16,"size":64370},{"id":"33b8ea7f264b3ff87eb20ef502ff0c7c3fcc3875596fc5f191528e1c6ef5ab4b2d4e940eedef153c98fad47fddc795891f16ca2f45ff3592f11fe3cf132b65ec","href":"https://static.observableusercontent.com/files/33b8ea7f264b3ff87eb20ef502ff0c7c3fcc3875596fc5f191528e1c6ef5ab4b2d4e940eedef153c98fad47fddc795891f16ca2f45ff3592f11fe3cf132b65ec","name":"2b.png","type":"image/png","lastModified":1757610372911.918,"size":54078},{"id":"d53f1eb8c850af4a3b38cec1f18415092482071137ad2ac3cd6234d208c371ee225bd307bcd588bfa0701eb265e6a7222fe2b97cb1bc02551971459956cea540","href":"https://static.observableusercontent.com/files/d53f1eb8c850af4a3b38cec1f18415092482071137ad2ac3cd6234d208c371ee225bd307bcd588bfa0701eb265e6a7222fe2b97cb1bc02551971459956cea540","name":"2c.png","type":"image/png","lastModified":1757610372954.584,"size":72564},{"id":"0784a105a69d118b224beaf052cecc3de935324eaaf29096fed79e7efffd17dee65914dcf5b398b1b5fe7bcc0dc8850fee1b78f331874362465ebda17d11a053","href":"https://static.observableusercontent.com/files/0784a105a69d118b224beaf052cecc3de935324eaaf29096fed79e7efffd17dee65914dcf5b398b1b5fe7bcc0dc8850fee1b78f331874362465ebda17d11a053","name":"2d.png","type":"image/png","lastModified":1757610372903.044,"size":50163},{"id":"8c658626acfc2c0e04825ea0ad1d2fab69a6426c8cf0117de9a0f4e26a7b5847fb3c15f4f7edeb30b3b1a789b17412c0ea8976808ec63799d7e1ba9e2bc2432b","href":"https://static.observableusercontent.com/files/8c658626acfc2c0e04825ea0ad1d2fab69a6426c8cf0117de9a0f4e26a7b5847fb3c15f4f7edeb30b3b1a789b17412c0ea8976808ec63799d7e1ba9e2bc2432b","name":"3a.png","type":"image/png","lastModified":1757610372942.149,"size":111306},{"id":"de95bd12b07d3e2e251953708347b5854097f961e5a38aec768f3c45dce3de1aa3e1eb350ded44daf807e49d908f4613d0980fcf29b32433efdd553b3cb4d3ec","href":"https://static.observableusercontent.com/files/de95bd12b07d3e2e251953708347b5854097f961e5a38aec768f3c45dce3de1aa3e1eb350ded44daf807e49d908f4613d0980fcf29b32433efdd553b3cb4d3ec","name":"3b.png","type":"image/png","lastModified":1757610372931.87,"size":135506},{"id":"a54d7dca8af67997119e6661bfba62b7bdc48642cbe684ceae1a0645fe264714f3d74f9fb4cc69de9a665c313e9d5a82c4b4867c7ad8091b7ee603b7ecc2149d","href":"https://static.observableusercontent.com/files/a54d7dca8af67997119e6661bfba62b7bdc48642cbe684ceae1a0645fe264714f3d74f9fb4cc69de9a665c313e9d5a82c4b4867c7ad8091b7ee603b7ecc2149d","name":"3c.png","type":"image/png","lastModified":1757610372948.695,"size":106805},{"id":"8378419f1dad0df597b100fd9a25fc3d505496095eedcb96f495495ff59393ecee2228931e9a5d2e2e8892202aedb8e99b4221f9826c180bcf5e2fa14be28878","href":"https://static.observableusercontent.com/files/8378419f1dad0df597b100fd9a25fc3d505496095eedcb96f495495ff59393ecee2228931e9a5d2e2e8892202aedb8e99b4221f9826c180bcf5e2fa14be28878","name":"4a.png","type":"image/png","lastModified":1757610372884.374,"size":39890},{"id":"10ecf02863bedc1fb9bcb8a2f788460c806c0f1e3df8ea4cf6c24fe079cceb104475b876c4065b27cf40414522250e37ab9e7eee99881d78e57d77fb157d605e","href":"https://static.observableusercontent.com/files/10ecf02863bedc1fb9bcb8a2f788460c806c0f1e3df8ea4cf6c24fe079cceb104475b876c4065b27cf40414522250e37ab9e7eee99881d78e57d77fb157d605e","name":"4b.png","type":"image/png","lastModified":1757610372922.017,"size":56562},{"id":"31e056cc8b67d05403d262883b01dd39d750ff95c8c5066e0006b19563e6453d814544065c27699e266ec0ac7034417e48c45f855e8cd049210dc0730b32599f","href":"https://static.observableusercontent.com/files/31e056cc8b67d05403d262883b01dd39d750ff95c8c5066e0006b19563e6453d814544065c27699e266ec0ac7034417e48c45f855e8cd049210dc0730b32599f","name":"4c.png","type":"image/png","lastModified":1757610372954.514,"size":147660},{"id":"b616e9d6e3f60aae6125175c81b52a3b0996d232b5747d6bab5055b2f98809cf7c4c04102175d2b85b2660d77f02f116bc0f85c2b97189b45ec2d4abf465aadc","href":"https://static.observableusercontent.com/files/b616e9d6e3f60aae6125175c81b52a3b0996d232b5747d6bab5055b2f98809cf7c4c04102175d2b85b2660d77f02f116bc0f85c2b97189b45ec2d4abf465aadc","name":"camera_dataset.csv","type":"text/csv","lastModified":1757257178531.905,"size":86961}] 2f:{"id":"889b1550b5934ad7","slug":null,"title":"Week 1 Exercise: Visualization critique and basic Vega-Lite charts (due Sept 11)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-09-11T09:15:00.785Z","update_time":"$D2026-09-11T10:41:42.066Z","view_time":null,"first_public_time":"$D2026-09-11T10:42:19.234Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d5ead825994975c2","login":"lakshmi-hukunda-raju","name":"Lakshmi Hukunda raju","avatar_url":"https://avatars-next.observableusercontent.com/e918e120d7e6332eab81860310c55d446c3108b389e8491d6705f5446a1e85ff","tier":"starter_2024"},"version":659,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff6d6eceb45c4cd9","login":"lakshmi-hukunda-raju","name":"Lakshmi Hukunda raju","avatar_url":"https://avatars-next.observableusercontent.com/e918e120d7e6332eab81860310c55d446c3108b389e8491d6705f5446a1e85ff","tier":null}],"members":[{"type":"team","id":"d5ead825994975c2","login":"lakshmi-hukunda-raju","name":"Lakshmi Hukunda raju","avatar_url":"https://avatars-next.observableusercontent.com/e918e120d7e6332eab81860310c55d446c3108b389e8491d6705f5446a1e85ff","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: Visualization critique and basic Vega-Lite charts (due Sept 11)","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"---\n\n#### [TO-DO]\n\nFill out the following submission details:\n\n* **Name:** <Lakshmi Hukunda Raju>\n* **NetID:** <lh4140>\n* **SHARE URL:** <[https://old.observablehq.com/d/889b1550b5934ad7](https://old.observablehq.com/d/889b1550b5934ad7)>\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"## Part 1: Importing Vega-Lite and the Camera dataset (10%)\n\n---\n### Part 1a. Importing Vega-Lite (2%)\n#### [TO-DO]\nImport the **Vega-Lite** API into this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"import {vl} from \"@vega/vega-lite-api\";\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"---\n\n### Part 1b. Importing the Camera dataset (2%)\n#### [TO-DO]\nImport the \"camera_dataset.csv\" provided alongside this notebook by completing the code below. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":380,"value":"camera_data = FileAttachment(\"camera_dataset.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"cameras = camera_data.map(d => ({\n model: d[\"Model\"],\n release_date: d[\"Release date\"],\n max_resolution: d[\"Max resolution\"],\n min_resolution: d[\"Low resolution\"],\n pixels: d[\"Effective pixels\"],\n zoom_wide: d[\"Zoom wide (W)\"],\n zoom_tele: d[\"Zoom tele (T)\"],\n normal_focus_range: d[\"Normal focus range\"],\n macro_focus_range: d[\"Macro focus range\"],\n storage: d[\"Storage included\"],\n weight: d[\"Weight (inc. batteries)\"],\n dimensions: d[\"Dimensions\"],\n price: d[\"Price\"]\n\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"---\n\nInspecting the `cameras` dataset reveals that there are 13 columns and 1038 rows. This means that 13 features of cameras are recorded, and have 1038 unique cameras that were analyzed. In addition, there is only one kind of nominal data type: the **model** name. 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\nThe table below shows the first 5 rows of this cameras dataset:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"html`\n \n \n ${Object.keys(cameras[0]).map(key => html``)}\n \n \n \n ${cameras.slice(0, 5).map(row => html`\n ${Object.values(row).map(value => html``)}\n `)}\n \n

${key}
${value}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"This looks like a pretty comprehensive dataset. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"## Part 2: Camera Features Across Time (30%)\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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"---\n### Part 2a. Max resolution v.s. Release date (5%)\n#### [TO-DO]\nGenerate a scatter chart (can be circles, points, or squares) with the following encodings:\n\n1. X-axis: **release_date** as an ORDINAL data type. (2%)\n2. Y-axis: **max_resolution** as a QUANTITATIVE data type. (2%)\n3. Tooltip: **model** name as a NOMINAL data type. (1%)\n\n#### Solution Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"FileAttachment(\"2a.png\").image({width:300})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"vl.markCircle()\n .data(cameras)\n .width(500)\n .height(450)\n .encode(\n vl.x().fieldO(\"release_date\"),\n vl.y().fieldQ(\"max_resolution\"),\n vl.tooltip().fieldN(\"model\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"---\n### Part 2b. Normal focus range v.s. Release Date (5%)\n#### [TO-DO]\nGenerate a scatter chart (can be circles, points, or squares) with the following encodings:\n\n1. X-axis: **release_date** as an ORDINAL data type. (2%)\n2. Y-axis: **normal_focus_range** as a QUANTITATIVE data type. (2%)\n3. Tooltip: **model** name as a NOMINAL data type. (1%)\n\n#### Solution Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"FileAttachment(\"2b.png\").image({width:300})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"vl.markCircle()\n .data(cameras)\n .width(500)\n .height(400)\n .encode(\n vl.x().fieldO(\"release_date\"),\n vl.y().fieldQ(\"normal_focus_range\"),\n vl.tooltip().fieldN(\"model\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"---\n### Part 2c. Dimensions v.s. Release date (5%)\n#### [TO-DO]\nGenerate a scatter chart (can be circles, points, or squares) with the following encodings:\n\n1. X-axis: **release_date** as an ORDINAL data type. (2%)\n2. Y-axis: **dimensions** as a QUANTITATIVE data type. (2%)\n3. Tooltip: **model** name as a NOMINAL data type. (1%)\n\n#### Solution Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":538,"value":"FileAttachment(\"2c.png\").image({width:300})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"vl.markCircle()\n .data(cameras)\n .width(500)\n .height(400)\n .encode(\n vl.x().fieldO(\"release_date\"),\n vl.y().fieldQ(\"dimensions\"),\n vl.tooltip().fieldN(\"model\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"---\n### Part 2d. Price v.s. Release date (5%)\n#### [TO-DO]\nGenerate a scatter chart (can be circles, points, or squares) with the following encodings:\n\n1. X-axis: **release_date** as an ORDINAL data type. (2%)\n2. Y-axis: **price** as a QUANTITATIVE data type. (2%)\n3. Tooltip: **model** name as a NOMINAL data type. (1%)\n\n#### Solution Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":541,"value":"FileAttachment(\"2d.png\").image({width:300})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"vl.markCircle()\n .data(cameras)\n .width(500)\n .height(400)\n .encode(\n vl.x().fieldO(\"release_date\"),\n vl.y().fieldQ(\"price\"),\n vl.tooltip().fieldN(\"model\")\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"vl.markCircle()\n .data(cameras)\n .width(500)\n .height(400)\n .encode(\n vl.x().fieldO(\"release_date\"),\n vl.y().fieldQ(\"price\"),\n vl.tooltip().fieldN(\"model\")\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"---\n### Part 2e. Observing and Describing Trends (10%)\n#### [TO-DO]\n\nAnswer the following questions about the four features we plotted in Parts 2a-2d:\n\n1. Where there any trends that you observed in the data features as time passed?\n2. If so, describe their nature: are they necessarily strong trends, and do they have any outliers?\n3. Why do some features display trends while others may not necessarily display trends?\n\n_No need to go full statistical analysis or technical answers about cameras - rather, what does the data visually tell you?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":420,"value":"> =========================\n> \n> <Part 3: Comparing Features (25%)\nTrends across time may indicate the possibility of certain features being related to one another. Let's try to visually analyze for any relationships between features. Let's also add some color variation to visualize release_date as 3rd dimension to our data analysis.\n\nPart 3a. Max resolution v.s. Price v.s. Release date (5%)\n[TO-DO]\nGenerate a scatter chart (can be circles, points, or squares) with the following encodings:\n\nX-axis: max_resolution as an QUANTITATIVE data type. (1%)\nY-axis: price as a QUANTITATIVE data type. (1%)\nColor: release_date as an ORDINAL data type. (2%)\nTooltip: model name as a NOMINAL data type. (1%)\nSolution Example:\n >\n> \n> =========================","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"---\n\n## Part 3: Comparing Features (25%)\n\nTrends across time may indicate the possibility of certain features being related to one another. Let's try to visually analyze for any relationships between features. Let's also add some color variation to visualize **release_date** as 3rd dimension to our data analysis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":427,"value":"---\n### Part 3a. Max resolution v.s. Price v.s. Release date (5%)\n#### [TO-DO]\nGenerate a scatter chart (can be circles, points, or squares) with the following encodings:\n\n1. X-axis: **max_resolution** as an QUANTITATIVE data type. (1%)\n2. Y-axis: **price** as a QUANTITATIVE data type. (1%)\n3. Color: **release_date** as an ORDINAL data type. (2%)\n4. Tooltip: **model** name as a NOMINAL data type. (1%)\n\n#### Solution Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":544,"value":"FileAttachment(\"3a.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"vl.markPoint()\n .data(cameras)\n .encode(\n vl.x().fieldQ('max_resolution'),\n vl.y().fieldQ('price'),\n vl.color().fieldO('release_date'),\n vl.tooltip().fieldN('model')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"---\n### Part 3b. Dimensions v.s. Weight v.s. Release date (5%)\n#### [TO-DO]\nGenerate a scatter chart (can be circles, points, or squares) with the following encodings:\n\n1. X-axis: **dimensions** as an QUANTITATIVE data type. (1%)\n2. Y-axis: **weight** as a QUANTITATIVE data type. (1%)\n3. Color: **release_date** as an ORDINAL data type. (2%)\n4. Tooltip: **model** name as a NOMINAL data type. (1%)\n\n#### Solution Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":548,"value":"FileAttachment(\"3b.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"vl.markPoint()\n .data(cameras)\n .encode(\n vl.x().fieldQ('dimensions'),\n vl.y().fieldQ('weight'),\n vl.color().fieldO('release_date'),\n vl.tooltip().fieldN('model')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"---\n### Part 3c. Zoom wide v.s. Zoom tele v.s. Release date (5%)\n#### [TO-DO]\nGenerate a scatter chart (can be circles, points, or squares) with the following encodings:\n\n1. X-axis: **zoom_wide** as an QUANTITATIVE data type. (1%)\n2. Y-axis: **zoom_tele** as a QUANTITATIVE data type. (1%)\n3. Color: **release_date** as an ORDINAL data type. (2%)\n4. Tooltip: **model** name as a NOMINAL data type. (1%)\n\n#### Solution Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":551,"value":"FileAttachment(\"3c.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"vl.markPoint()\n .data(cameras)\n .encode(\n vl.x().fieldQ('zoom_wide'),\n vl.y().fieldQ('zoom_tele'),\n vl.color().fieldO('release_date'),\n vl.tooltip().fieldN('model')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"---\n### Part 3d. Observing and Describing Trends (5%)\n#### [TO-DO]\nFor the three graphs we generated above, provide a similar analysis as in **Part 2e**.\n\n1. Where there any trends that you observed in the data features as time passed?\n2. If so, describe their nature: are they necessarily strong trends, and do they have any outliers?\n3. Why do some features display trends while others may not necessarily display trends?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"---\n### Part 3e. Colors and Data Interpretation (5%)\n#### [TO-DO]\nAs mentioned during Week 1's Lab session, color can be an important tool for visualization. Consider the new colors we've applied to our three comparison charts and answer the following question in a few sentences (no more than a paragraph):\n\n- In which graphs did coloration appear to work well to add context to the data? And which graphs did coloration not help at all?\n- Were there any charts where you believed that the coloration actually may misconstrue your understanding of possible trends?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"> =========================\n> \n> <Color worked best on the max resolution vs price chart, since it actually added something — you could see newer cameras clustering toward higher resolution, which tied nicely back to the trend from Part 2a. On dimensions vs weight, color didn't really add much, since that relationship held pretty much the same across every year, so the colors just kind of sat there without showing anything new. Zoom wide vs zoom tele was somewhere in between — color showed the relationship was consistent over time, but it wasn't super informative either. I wouldn't say any of the charts were actually misleading, but on dimensions vs weight the colors could almost make you think there's a year-based pattern when really it's mostly just random since the relationship barely changes across years. >\n> \n> =========================","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"---\n### Part 4a. How many camera entries per year? (10%)\n#### [TO-DO] (5%)\nGenerate a bar chart that visualizes the number of camera models across 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 chat. We emphasize \"bar chart\" as we are treating the **release_date** as an ordinal data type.\n\n#### [TO-DO] (5%)\nIn the markdown block after generating the bar chart, in a few sentences, describe how the number of camera entries per year may or may not have skewed our initial analyses of the data in Parts 2 and 3.\n\n#### Solution Graph Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":554,"value":"FileAttachment(\"4a.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"vl.markBar()\n .data(cameras)\n .encode(\n vl.x().fieldO('release_date'),\n vl.y().aggregate('count')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"> =========================\n> \n> <Yeah, looking at this bar chart, the number of camera entries is definitely not even across years — there's way more cameras from the mid-2000s than from the mid-90s. That probably does skew the earlier scatter plots a bit, since a handful of points in 1994-1996 are way easier to read as \"the trend\" than the dense cluster of points in 2005-2007, even though the later years just have more data overall. So some of what looked like strong trends earlier (like max resolution) might partly just be because there's more data to show the spread in later years, while the earlier years might look artificially \"cleaner\" just because there's fewer points to begin with. >\n> \n> =========================","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"---\n### Part 4b. Weight v.s. Dimension, Revisited via Boxplots (10%)\n#### [TO-DO] (5%)\nGenerate 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\n#### [TO-DO] (5%)\nIn the markdown block below the code for the chart, describe the relationship between the dimensions and weight of cameras. How does the boxplot affect your ability to interpret the data trend, if any?\n\n#### Solution Graph Example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"FileAttachment(\"4b.png\").image({width:400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"vl.markBoxplot()\n .data(cameras)\n .encode(\n vl.x().fieldQ('dimensions').bin({step: 10}),\n vl.y().fieldQ('weight')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"> =========================\n> \n> <The boxplot makes the dimensions vs weight relationship a lot easier to read than the raw scatter plot did. You can clearly see the median weight climbing as dimension bins increase, which confirms the positive relationship from Part 3b, but now it's summarized instead of just a cloud of dots. It also shows how much the weight actually varies within each dimension bin — some bins have pretty tight boxes (not much spread in weight for that size range), while others have wider boxes or more outliers, meaning cameras of similar size can still vary a good amount in weight. Overall the boxplot strips away a lot of the visual noise from the scatter plot and makes the underlying trend way more obvious, though you do lose the ability to see individual camera models like the tooltip did before. >\n> \n> =========================","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":563,"value":"FileAttachment(\"4c.png\").image({width:1000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"vl.markBoxplot()\n .data(cameras)\n .transform(\n vl.calculate(\"floor(datum.release_date / 5) * 5 + '-' + (floor(datum.release_date / 5) * 5 + 4)\").as('year_bin')\n )\n .encode(\n vl.x().fieldQ('dimensions').bin({step: 10}),\n vl.y().fieldQ('weight'),\n vl.column().fieldO('year_bin')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"---\n### Part 4d. Boxplots Across Time (5%)\n#### [TO-DO]\n\nObserve the relationship between **dimensions** and **weight** across each of the 5-year periods. Answer the following questions:\n\n1. Has the relationship between weight and dimension really changed at all across the yearly bins? Why or why not do you think so?\n2. Looking at Part 4A, we should see a multitude of entries in the 2005-2009 plot. However, we see very few outliers and variation in cameras in this yearly period than in 2000-2004, for example. What can you intuit about the nature of more recent cameras compared to their older siblings?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 30:"$2f:body"