2d:null 2e:["$","title",null,{"children":"Week 2 Lab: Intro to Vega-Lite Data Transformations, Working with Real Datasets | rk2546 | Observable"}] 33:T463,Feel free to explore some more obvious and useful properties similar to `.width()` and `.height()`: | Method | Purpose | | ------------------- | ---------------------------------------------- | | `.width(...)` | Plot width | | `.height(...)` | Plot height | | `.title(...)` | Chart title | | `.padding(...)` | Space around the chart | | `.background(...)` | Background color | | `.autosize(...)` | Controls how chart sizing works | | `.config(...)` | Global styling/configuration | | `.view(...)` | Styling of the plotting area | | `.description(...)` | Accessibility/metadata description | | `.transform(...)` | Data transformations | | `.params(...)` | Parameters/interactions | | `.resolve(...)` | Scale/axis/legend behavior for composed charts | 34:T60d,This doesn't really give us anything, in all honesty. The scatter plot doesn't give us the level of detail we got with our histograms. This is a problem called **overplotting**, when many points are superimposed on top of each other. This makes data easy to misread and interpret incorrectly. The floor is yours at this point. You have access to different [mark types](https://vega.github.io/vega-lite/docs/mark.html) and have a sense of how to [aggregate data](https://vega.github.io/vega-lite/docs/aggregate.html). You've had a chance (ideally) to have done our [previous assignment](https://observablehq.com/@rk2546/2025-infovis-cse_exercise-1) that messes around with certain encodings and marker types already. Let's play around with them for a bit on our own.

[TO-DO]

Generate a new plot on your own, using either histograms or scatter plots (or a unique mark of your own) that showcases trends across either or both Rotten Tomatoes ratings and IMDB ratings. Examples include maybe introducing color to your charts, or using unique combinations of binning and scatter plots. This is an open question and is left up to your imagination.

[Note]

Previously, we formatted TO-DOs in this format:

chart# = vl.markCircle(). //...

You don't necessarily have to follow this format. You can simply call:

vl.markCircle()....render()

Just make sure you call .render() at the end.

35:T465,--- ### Part 2b. Sorting There may be some interesting variation, but it's a bit mentally tasking to try to understand overall rankings across genres. Rather than sort the genres alphabetically, let's try to sort them in _descending order_ of rating (i.e. the genres with the higher ratings are at the top, while the genres with the lower ratings are at the bottom). Vega-Lite has a `.sort()` method that can be appended to an axis (documentation). The `` dictates to Vega-Lite _how_ to sort the associated axis. We want to tell Vega-lite to sort the y-axis based on the average Rotten Tomatoes ratings, in descending order.

[TO-DO]

Modify the chart code so that the y-axis is sorted in descending order. Do this by appending the .sort(<sort-by params>) method to the y-axis. Replace <sort-by params> appropriately. You should get a similar chart as below:

${await FileAttachment("2b.png").image({width:400})}

36:T70b,### Part 2d. Inter-Quartile Range Even with this data, we should still be a bit skeptical. What if, within the genres themselves, there's some skew caused by outliers and such? Observing the variation within each genre is a good way to extend our analysis. Let's add some _nuance_ to our bar chart by considering the [**"Inter-Quartile Range (IQR)"**](https://en.wikipedia.org/wiki/Interquartile_range) of each genre. The IQR is a special range across a set of values that represents where the _middle half_ of the data resides in. A _quartile_ represents 25% of data values. The IQR therefore represents the two middle quartiles, or the middle 50% of data. In Vega-Lite, we can represent the IQR of an axis by using not just `.x()` like we've always done so far, but also `.x2()`. If both `.x()` and `.x2()` are present in a Vega-Lite chart, then it tells Vega-Lite that there are a "start" and "end" to... _something_, along the x-axis (and the same for `.y()` and `.y2()`). What that _something_ is, we indicate by appending a modifier method to it (very similar to `.bins()`). In this case, we want to specify the IQR; this would translate to adding the following encodings: - `vl.x().q1()` - `vl.x2().q3()` With this code, we are telling Vega-Lite "along the x-axis, the start must represent the lower IQR boundary, while the end must reprsent the upper IQR boundary". FYI, there is a `.q2()` modifier present, but that represents the _median_!

[TO-DO]

Modify our chart so that the bar charts only show the IQR of Rotten Tomato entries for each genre. You must still sort the genres by median. Your plot should look similar to the one below:

${await FileAttachment("2d.png").image({width:400})}

37:[{"id":"c52f131fca9221dbf422c7816cb97812aced2629307e8bebd646aa106037925fdd5aa78e079d6654b20fee30724ba706a6285dc6527ceb1964687ad689827d4e","href":"https://static.observableusercontent.com/files/c52f131fca9221dbf422c7816cb97812aced2629307e8bebd646aa106037925fdd5aa78e079d6654b20fee30724ba706a6285dc6527ceb1964687ad689827d4e","name":"2d.png","type":"image/png","lastModified":1757687054377.843,"size":16268},{"id":"48ff1c5be053d312811ec50770a25d304f1b0a731b281eaf82f2d543d2be989994f773a27d431c58cc6fa813c0a166176463a3cdac7c81526d3d8a0b1c1e5bf8","href":"https://static.observableusercontent.com/files/48ff1c5be053d312811ec50770a25d304f1b0a731b281eaf82f2d543d2be989994f773a27d431c58cc6fa813c0a166176463a3cdac7c81526d3d8a0b1c1e5bf8","name":"2e.png","type":"image/png","lastModified":1757687392311.111,"size":15986},{"id":"8bd3536dda7451fef9af8157c825eb37c74aced0987ddef7b35b69aeb4dffbf0cabbe5c91cfd7bb4f42277ca4425e9b9e4f55077da5eaf1682e3af061ea2a45f","href":"https://static.observableusercontent.com/files/8bd3536dda7451fef9af8157c825eb37c74aced0987ddef7b35b69aeb4dffbf0cabbe5c91cfd7bb4f42277ca4425e9b9e4f55077da5eaf1682e3af061ea2a45f","name":"1a.png","type":"image/png","lastModified":1757634221306.768,"size":146853},{"id":"3e565b5c9209b03cf3ed00d3bdc170e77fe1a6a30654f6e47129da8b0c83447ce234c607581579b4c43b922661e5f1cfc92314918fe1ef278ae1957efaa93b23","href":"https://static.observableusercontent.com/files/3e565b5c9209b03cf3ed00d3bdc170e77fe1a6a30654f6e47129da8b0c83447ce234c607581579b4c43b922661e5f1cfc92314918fe1ef278ae1957efaa93b23","name":"1b.png","type":"image/png","lastModified":1757634788789.614,"size":85375},{"id":"9edb148c238503109f45e27c69bb120db74cbfbe17430203649a6229816de5063b8919ad8c6c4ec6ad6b6e817c2d9aebd334e3e8f2a58786b27cd6b3ea8d9e35","href":"https://static.observableusercontent.com/files/9edb148c238503109f45e27c69bb120db74cbfbe17430203649a6229816de5063b8919ad8c6c4ec6ad6b6e817c2d9aebd334e3e8f2a58786b27cd6b3ea8d9e35","name":"2c.png","type":"image/png","lastModified":1757686205440.525,"size":14699},{"id":"1461bb8f67ba8d287311635a7347a246eb3e25dce1c816b94016897d6aecd6a0b361ec8577a8e9c25616b8d698445fe4fcbabc528af791bd4fb90cf6bc4d5846","href":"https://static.observableusercontent.com/files/1461bb8f67ba8d287311635a7347a246eb3e25dce1c816b94016897d6aecd6a0b361ec8577a8e9c25616b8d698445fe4fcbabc528af791bd4fb90cf6bc4d5846","name":"1c.png","type":"image/png","lastModified":1757636101816.066,"size":48859},{"id":"acee43c223b56331d2688138c74fafca98a97e9eb330ba78a6c0c4370ba8a8fa75640239e099525464a6cd6ffcde68a082dfc3a537252681cb161057e1580653","href":"https://static.observableusercontent.com/files/acee43c223b56331d2688138c74fafca98a97e9eb330ba78a6c0c4370ba8a8fa75640239e099525464a6cd6ffcde68a082dfc3a537252681cb161057e1580653","name":"1d.png","type":"image/png","lastModified":1757636114022.496,"size":51792},{"id":"8a83b45e62ba3757cdce6ed41e96156a389dd027ea0abfbdcf09114f3c7f389544b9f1da1dfa0bc97839c943d26558499f36ce1ffe6ec2f60c82c99277b7713e","href":"https://static.observableusercontent.com/files/8a83b45e62ba3757cdce6ed41e96156a389dd027ea0abfbdcf09114f3c7f389544b9f1da1dfa0bc97839c943d26558499f36ce1ffe6ec2f60c82c99277b7713e","name":"2a.png","type":"image/png","lastModified":1757683451443.753,"size":14950},{"id":"55157d88371ef5f3a4fe50eb456266ab3709d296ea438a95546e15efb51edd690c4596b95098d357177a3063b68995303c706fdf07031784d558f01be6a3066e","href":"https://static.observableusercontent.com/files/55157d88371ef5f3a4fe50eb456266ab3709d296ea438a95546e15efb51edd690c4596b95098d357177a3063b68995303c706fdf07031784d558f01be6a3066e","name":"2b.png","type":"image/png","lastModified":1757684064577.093,"size":14930},{"id":"ef1053b80e60ecf7aaeec165f1f2a1a512c0fa864e90aa0d6d8e8c80e307ebc921ed12eae87144f76f13764c683a7e2c818502f6a287a5cfff9a93a501eb27e3","href":"https://static.observableusercontent.com/files/ef1053b80e60ecf7aaeec165f1f2a1a512c0fa864e90aa0d6d8e8c80e307ebc921ed12eae87144f76f13764c683a7e2c818502f6a287a5cfff9a93a501eb27e3","name":"movies.json","type":"application/json","lastModified":1788562184319,"size":1399981}] 31:{"id":"175e388596ddc957","slug":"2026-infovis-cse_week-2-lab","title":"Week 2 Lab: Intro to Vega-Lite Data Transformations, Working with Real Datasets","thumbnail":"ae5c9ad097af694dbdbdcac16663a80c2ed59ac8310ceaef9cb54a72dac88240","access_level":"public","create_time":"$D2026-09-04T16:16:59.392Z","update_time":"$D2026-09-04T23:00:38.606Z","view_time":null,"first_public_time":"$D2026-09-11T02:57:58.986Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024"},"version":746,"publish_version":746,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc2916ccfd28b14","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/a17ba87a2618a0219160d264d7e13fdef2d4fb8bd902ae457541c60e7498fc11","tier":null}],"members":[{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":27,"collection":null,"type":"notebook","body":{"title":"Week 2 Lab: Intro to Vega-Lite Data Transformations, Working with Real Datasets","cells":[{"id":316,"value":"# Week 2 Lab: Intro to Vega-Lite Data Transformations, Working with Real Datasets\n\nThis lab exercise covers the importance of data transformations when visualizing data. This lab exercise is heavily extrapolated from [\"Data Transformations\"](https://observablehq.com/@uwdata/data-transformation) by Jeffrey Heer and the UW Interactive Data Lab.\n\nDuring our [Week 1 Lab](https://ctsilva.github.io/2025-InfoVis-CSE/labs/week1-lab.html#/), we covered **Vega-Lite** and **Observable** basics. In this lab, we will focus less on **Observable**'s tools and more on using **Vega-Lite** to transform data and generate meaningful charts.\n\n**Please create a fork of this notebook for your own records.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"import { vl } from '@rk2546/infovis-cse-backend';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"---\n## The Movies Dataset\n\n**Vega-Lite** provides several [interesting datasets](https://vega.github.io/vega-datasets/) for us to use. We will be working with a data table consisting of _movies_. This movies dataset contains variables such as the film name, director, genre, and ratings across aggregate websites such as [Rotten Tomatoes](https://www.rottentomatoes.com/) and [IMDb](https://www.imdb.com/). However, this dataset has many problems, such as missing data. Let's take a look by importing the data ourselves.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"movies = FileAttachment(\"movies.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`${movies.length} rows, ${Object.keys(movies[0]).length} columns`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Inputs.table(movies.slice(0,5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"There appear to be 3201 rows and 16 columns (or features). The first five rows reveal some `null` data entries, meaning they are missing from the dataset. Not the best start, but we'll work with what we got.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":497,"value":"---\n## 0. Re-Sizing Vega-Lite Charts\n\nExercise and Lab #1 have involved some pretty small graphs. Let's briefly go over how we can re-size them to make them more visible.\n\nIn addition to `.data()` and `.encode()`, you can also explicitly define the width and height of your Vega-Lite plots. Observe the example below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"\nvl.markPoint()\n .data(movies)\n .encode(\n vl.x().fieldQ(\"Worldwide Gross\"),\n vl.y().fieldQ(\"US Gross\"),\n vl.tooltip().fieldN(\"Title\")\n )\n .width(600) // We made the plot be 600px wide\n .height(500) // We made the plot be 500px tall\n .render()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"If you want to make charts be as wide as the notebook itself (which allows some dynamic widths for your plots), Observable exposes a `width` variable. Observe the same plot above, but with this modification:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"\nvl.markPoint()\n .data(movies)\n .encode(\n vl.x().fieldQ(\"Worldwide Gross\"),\n vl.y().fieldQ(\"US Gross\"),\n vl.tooltip().fieldN(\"Title\"),\n vl.color().value(\"lightblue\")\n )\n .width(width) // We made the plot be as wide as the notebook\n .height(width * 0.35) // We made the plot be 35% of the width of the notebook\n .render()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"---\n\n## 1. _Binning_ Movie Ratings\n\nOne of the most common visual tools for aggregation are _histograms_: bar charts across categorical data that represent summations, means, etc. across _binned_ data. Bins allow us to convert continuous data into discrete groups and observe trends across the groups. Let's use histograms and its use of bins to depict why this can be helpful for us.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":502,"value":"### 1a. Raw Movie Ratings\nTo better understand the importance of aggregation, let's look at raw, unaggregated data of movie ratings across Rotten Tomatoes and IMDb. We'll use **Vega-Lite** to produce a scatter plot using the `circle` mark.\n\n

[TO-DO]

Generate a scatter plot with the circle marker, with the X-axis representing the Rotten Tomatoes ratings (Rotten Tomatoes Rating) and IMDb ratings (IMDB Rating). You should be able to replicate something close to the provided sample chart:\n

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"\n// TO-DO:\nchart1 = null\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"// Do not modify\nchart1?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"### 1b. Binned Data\n\nThat's a large cloud of data points, isn't it? It implies a trend or correlation between the ratings of the two websites, but there's too much visual clutter. Let's look deeper by _binning_ the data along the Rotten Tomatoes ratings into distinct groups. To do this, we need modify our `vl.x()` encoding by adding `.bin()`.\n\nVega-Lite offers two ways to bin data. If we use `.bin(true)`, then Vega-Lite will auto-calculate the bins for us. Instead, we can declare characteristics about the bin, such as the maximum number of bins and the size of each bin. To do that, we need to replace the boolean `true` with a JSON object, such as `{maxbins:}`.\n\n

[TO-DO]

Modify the scatter plot by adding .bin({maxbins:20}) to the x-axis. You should produce a figure similar to the sample shown below:\n

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"\n// TO-DO:\nchart2 = null\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"// Do not modify\nchart2?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"### 1c. Ratings Histogram: Rotten Tomatoes\n\nI think it's worth looking into the distribution of movie ratings across each aggregator website. That'll give us an idea of how movies are generally ranked on either website and whether there may be some nuances to how their users treat movies.\n\n

[TO-DO]

\n Let's generate a histogram that counts the number of movies per bin. Let's create a histogram showing the number of movies per rating bin for Rotten Tomatoes. To do that, we need the following changes:\n

Change from .markCircle() to .markBar() - this transforms the chart into a bar chart that's perfect for histograms.
Drop IMDb ratings from the y-axis, and instead show .count().

Your result should look something similar to what's provided below.

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"\n// TO-DO:\nchart3 = null\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"// Do not modify\nchart3?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"### 1d. Ratings Histogram: IMDb\n\n

[TO-DO]

Let's generate a similar histogram count chart, but instead use IMDb's ratings for the x-axis. All other parts of the chart should remain the same. Again, your graph should look similar to the one below:

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"\n// TO-DO:\nchart4 = null\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"// Do not modify\nchart4?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"Let's consider what these two charts are telling us about how Rotten Tomatoes and IMDb rate their movies. \n\n_Rotten Tomatoes movies appear to be somewhat evenly distributed across all ratings, with an exception at the edge cases such as with really low or high ratings. This is very interesting, given that Rotten Tomatoes ratings are determined through a \"thumbs-up\" or \"thumbs-down\" binary rating. This histogram shows that there is definitely a good mixture of good and bad movies represented on the website._\n\n_IMDb is definitely more skewed, with a bell-shaped curve around `6.0` to `7.5` and ratings gradually falling off at the outer edges of the distribution. Given that IMDb users rate movies based on a range from `1` to `10`, the histogram implies that IMDb users really prefer this `6.0` to `7.5` range of rating. Note that this data distribution was only possible because, unlike Rotten Tomatoes' binary \"thumbs-up\" or \"thumbs-down\" rating, IMDb allows for a range of possible values to evaluate movies._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"### 1e. Re-Introducing Scatter Plots, Updated Transformations\n\nWe've done a bit of aggregation for both Rotten Tomatoes rankings and IMDb ratings. With that in mind, let's return to scatter plots for a moment, like in Part 1a. What would happen if we were to bin across both the x- and y-axes of a scatter plot?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"vl.markCircle()\n .data(movies)\n .encode(\n vl.x().fieldQ('Rotten Tomatoes Rating').bin({maxbins: 20}),\n vl.y().fieldQ('IMDB Rating').bin({maxbins: 20})\n )\n .width(400)\n .height(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"\n// TO-DO\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"---\n\n## Part 2: Aggregation & Ratings by Genre\n\nAlongside _binning_, another data transformation that's common is **aggregation**. We use aggregation to _summarize groups of data_ - not the literal \"add everything together\" kind of summarize, but rather using characteristics such as _mean_, _median_, _min/max_, and so on. The Vega-Lite documentation includes the [full set of available aggregation functions](https://vega.github.io/vega-lite/docs/aggregate.html#ops), which may be worth reading through.\n\nLet's use aggregation to observe trends across movie genres. Specifically, let's consider this question: _Do different genres of films receive consistently different ratings from critics?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":439,"value":"### Part 2a. Average Rating Across Genres\n\n

[TO-DO]

Generate a horizontal bar chart, with the y-axis showing movie genres (Major Genre) and the x-axis showing the average (a.k.a. the arithmetic mean) Rotten Tomatoes rating (Rotten Tomatoes Rating) for each genre. You should see something similar to the following:\n

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"\n// TO-DO\nchart5 = null\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"// Do not modify\nchart5?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"\n// TO-DO\nchart6 = null\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"// Do not modify\nchart6?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"_The sorted plot suggests that critics think highly of documentaries, musicals, westerns, and dramas, but look down on romantic comedies and horror films... Not to mention the presence of `null` movies too._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"### Part 2c. Averages (Mean) v.s. Median\n\nAverages are a very common way to summarize data, but they are vulnerable to _outliers_ that may skew the data. In some cases, it may be better to use [**median**](https://en.wikipedia.org/wiki/Median) to represent the data. Simply put, the _median_ does a good job of dividing the data into two roughly equal halves and is known as a [\"robust statistic\"](https://en.wikipedia.org/wiki/Robust_statistics). Outliers will do little to alter the _median_.\n\n

[TO-DO]

\n Modify the previous chart so that the chart uses .median() instead of .average() where needed. Your chart should look similar to the one below:\n

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"\n// TO-DO:\nchart7 = null\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"// Do not modify\nchart7?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"_It looks like some genres with similar averages have swapped places. Documentaries, for example, are not as popular as unsorted movies, whatever they may be. But overall, it doesn't look like the order of popular movies has changed too much. Thrillers, rom-coms, and horror still are pretty unpopular..._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"\n// TO-DO:\nchart8 = null\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"// Do not modify\nchart8?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"### Part 2e. IMDb Ratings by Genre?\n\n

[TO-DO]

\n A simple question: what would IMDb's ratings look like per genre? Let's find out. Modify the chart in Part 2d to look at IMDb ratings. Your chart should look similar to the following:\n

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":490,"value":"\n// TO-DO:\nchart9 = null\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"// Do not modify\nchart9?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"---\n## Appendix\n\n

Do not modify anything below this point.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"import { css } from \"@rk2546/infovis-cse-backend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"css","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"2","titling":"auto"}} 32:"$31:body"