2c:null 2d:["$","title",null,{"children":"Week 2 Lab: Intro to Vega-Lite Data Transformations, Working with Real Datasets (Solutions) | rk2546 | Observable"}] 32: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 | 33: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.

34: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})}

35: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})}

36:[{"id":"55157d88371ef5f3a4fe50eb456266ab3709d296ea438a95546e15efb51edd690c4596b95098d357177a3063b68995303c706fdf07031784d558f01be6a3066e","href":"https://static.observableusercontent.com/files/55157d88371ef5f3a4fe50eb456266ab3709d296ea438a95546e15efb51edd690c4596b95098d357177a3063b68995303c706fdf07031784d558f01be6a3066e","name":"2b.png","type":"image/png","lastModified":1757684064577.093,"size":14930},{"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":"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":"9edb148c238503109f45e27c69bb120db74cbfbe17430203649a6229816de5063b8919ad8c6c4ec6ad6b6e817c2d9aebd334e3e8f2a58786b27cd6b3ea8d9e35","href":"https://static.observableusercontent.com/files/9edb148c238503109f45e27c69bb120db74cbfbe17430203649a6229816de5063b8919ad8c6c4ec6ad6b6e817c2d9aebd334e3e8f2a58786b27cd6b3ea8d9e35","name":"2c.png","type":"image/png","lastModified":1757686205440.525,"size":14699},{"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":"ef1053b80e60ecf7aaeec165f1f2a1a512c0fa864e90aa0d6d8e8c80e307ebc921ed12eae87144f76f13764c683a7e2c818502f6a287a5cfff9a93a501eb27e3","href":"https://static.observableusercontent.com/files/ef1053b80e60ecf7aaeec165f1f2a1a512c0fa864e90aa0d6d8e8c80e307ebc921ed12eae87144f76f13764c683a7e2c818502f6a287a5cfff9a93a501eb27e3","name":"movies.json","type":"application/json","lastModified":1791341954739,"size":1399981}] 30:{"id":"b4325f1350e1dbed","slug":"2026-infovis-cse_week-2-lab-solutions","title":"Week 2 Lab: Intro to Vega-Lite Data Transformations, Working with Real Datasets (Solutions)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-09-04T13:15:36.426Z","update_time":"$D2026-10-07T03:03:26.321Z","view_time":null,"first_public_time":"$D2026-10-07T03:03:32.317Z","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","bio":""},"version":748,"publish_version":748,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc2916ccfd28b14","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/a17ba87a2618a0219160d264d7e13fdef2d4fb8bd902ae457541c60e7498fc11","tier":null,"bio":""}],"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 2 Lab: Intro to Vega-Lite Data Transformations, Working with Real Datasets (Solutions)","cells":[{"id":316,"value":"# Week 2 Lab: Intro to Vega-Lite Data Transformations, Working with Real Datasets (Solutions)\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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"import { vl } from '@rk2546/infovis-cse-backend';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"movies = FileAttachment(\"movies.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Inputs.table(movies.slice(0,5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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

[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

[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

[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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"\n// TO-DO:\nchart4 = vl.markBar()\n .data(movies)\n .encode(\n vl.x().fieldQ('IMDB Rating').bin({maxbins: 20}),\n vl.y().count()\n )\n .width(500)\n .height(300)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"// Do not modify\nchart4?.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"\n// SAMPLE ANSWER #1\nvl.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 vl.size().count()\n )\n .width(500)\n .height(300)\n .render()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"\n// SAMPLE ANSWER #2\nvl.markBar()\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 vl.color().count()\n )\n .width(500)\n .height(300)\n .render()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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

[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

[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

Do not modify anything below this point.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"css","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2"}} 31:"$30:body"