31:T497,# Week 6 Exercise: Chart Types Review, Misleading Visualizations (Due Oct. 16) In this week's exercise, we will review how to generate the common chart types in D3 as a wrap-up as well as analyze misleading visualizations. ### Exercise Structure: 1. [_Extra Practice With D3 Charts_](#cell-10) [75%] - [_Scatter Plot: The Hertzsprung-Russell Diagram_](#cell-173) [15%] - [_Bar Charts: Video Game Sales by Genre_](#cell-175) [15%] - [_Line Plots: Unemployment Rates and Time Axes_](#cell-177) [20%] - [_Box-and-Whisker Plots: Practicing with SVG_](#cell-489) [25%] 2. [_Misleading Visualizations - Case Studies_](#cell-5) [25%] - [_Gun Deaths in Florida_](#cell-25) [5%] - [_6-month Active Users per Game Console_](#cell-53) [5%] - [_Weekly Grocery Spending_](#cell-84) [5%] - [_WW2 Wartime Poster_](#cell-90) [5%] - [_"The Times leaves the rest behind"_](#cell-118) [5%]

[NOTE]: This exercise will be particularly code-heavy. Keep in mind of your time commitment for this, and go at a steady pace you are comfortable with. Do not hesitate to ask online or during office hours for code questions.

32:T7d1,## 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. **_Academic Integrity Policies_** Please be mindful of our academic integrity policies when completing this assignment. ** _Submission Instructions_** This assignment is due **October 16th, 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._

[NOTE]: Please make sure to Read ALL instructions carefully for each part of this assignment; the code should try to match exactly the requirements specified!

[NOTE]: Please make sure to Check your SHARE URL link in the markdown box, alongside your Name and NetID, before submitting!

33:T613,#### [TO-DO, 15%] Your job is to complete the Hertzsprung-Russell diagram below. Right now, it's just a black box; we've already implemented the CSS styling for you, so you should focus primarily on the plotting logic. The final chart must show the following: - **[3%]**: The chart must be titled "Hertzsprung-Russell Diagram". The X-axis must be titled "Temperature". The Y-axis must be titled "Luminosity". - **[4%]**: The X-axis must represent the Temperature of stars. The scale is a linear scale. The scale increments from left to right. It must be positioned at the bottom of the chart. - **[4%]**: The Y-axis must represent the Luminosity of stars. The scale is also a linear scale. The scale increments from top to bottom. It must be positioned to the left of the chart. - **[4%]**: The points of the scatter plot must represent a star each (i.e. a row in the `star_data`). Graphically, stars must be `circle`s. Points must be colored using the `bv2rgb()` function. Each point must have a radius set to `0.5`.

[NOTE]: If you do not recall how to implement text elements for the chart and axes titles, feel free to refer to `instantiate_chart()` function we've used in previous exercises and labs and observe how they work.

_There is no need to create a legend for this chart._ If successful, your chart must look similar to the following (the position and appearance of minor characteristics such as title text may differ): ${await FileAttachment('hz_diagram.png').image({width:300})}34:T709,hz_diagram = { // Define the dimensiosn of the chart. const width = 600; const height = 600; const margins = {top:50, left:50, right:50, bottom:50}; // Create the SVG, with the relevant styling const svg = d3.create('svg') .attr('width', width + margins.left + margins.right) .attr('height', height + margins.top + margins.bottom) .style("background-color", "#000") .style("color", "#fff") .attr("fill", "#fff") .attr("font-family", "sans-serif") .attr("font-size", 15) // Create the chart inside of the SVG const chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins.left}, ${margins.top})`); /* ==================== ===== BEGIN TO-DO ===== ==================== */ /* - [3%]: The chart must be titled "Hertzsprung-Russell Diagram". The X-axis must be titled "Temperature". The Y-axis must be titled "Luminosity". - [4%]: The X-axis must represent the Temperature of stars. The scale is a linear scale. The scale increments from left to right. It must be positioned at the bottom of the chart. - [4%]: The Y-axis must represent the Luminosity of stars. The scale is also a linear scale. The scale increments from top to bottom. It must be positioned to the left of the chart. - [4%]: The points of the scatter plot must represent a star each (i.e. a row in the `star_data`). Graphically, stars must be `circle`s. Points must be colored using the `bv2rgb()` function. Each point must have a radius set to `0.5`. */ /* ==================== ====== END TO-DO ====== ==================== */ // Return `svg.node()` return svg.node(); }35:T6a9,#### [TO-DO, 15%] Create a horizontal bar chart that comprises of the following: - **[3%]**: The chart must be titled "Video Game Sales, by Genre". The X-axis must be titled "EU Sales (Log Millions)". The Y-axis must be titled "Genres". - **[3%]**: The chart must be 800px wide and 600px tall, with margins that all text to be legible and not overlap with axes ticks or other graphical elements. - **[4%]**: The X-axis must represent the `EU_Sales` feature. The axis must use a log scale. The scale must have a domain between `1` and the maximum of EU_Sales + 10,, and be positioned at the top of chart. - **[3%]**: The Y-axis must represent the `Genres` feature. The axis must use a band scale (to map from discrete to continuous values). The Y-axis must be positioned on the left, and there is no specific order expected for the genres. - **[2%]**: The bars must be horizontal and colored in a discrete manner that makes it easy to distinguish adjacent bars.

[NOTE]: Unlike the scatter plot, now you are responsible for setting the width, height, and margins of the chart. We've created the `svg` for you as scaffolding, but you need to apply additional attributes to it. If you do not know how to render the bars for the bar chart, make sure to use `rect` and look up the [_documentation_](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) on it.

Though we are indeed using colors, _a legend isn't necessary for this chart_. If successful, you should generate a graph similar to that below (your colors, margins, and other minor design choices may differ): ${await FileAttachment("vg_sales@2.png").image({width:300})}36:T50c,vg_sales = { // Scaffolding for the SVG, to make sure things work. const svg = d3.create('svg'); /* ==================== ===== BEGIN TO-DO ===== ==================== */ /* - [3%]: The chart must be titled "Video Game Sales, by Genre". The X-axis must be titled "EU Sales (Log Millions)". The Y-axis must be titled "Genres". - [3%]: The chart must be 800px wide and 600px tall, with margins that all text to be legible and not overlap with axes ticks or other graphical elements. - [4%]: The X-axis must represent the `EU_Sales` feature. The axis must use a log scale. The scale must have a domain between 1 and the maximum of EU_Sales + 10, and be positioned at the top of chart. - [3%]: The Y-axis must represent the `Genres` feature. The axis must use a band scale (to map from discrete to continuous values). The Y-axis must be positioned on the left, and there is no specific order expected for the genres. - [2%]: The bars must be horizontal and colored in a discrete manner that makes it easy to distinguish adjacent bars. */ /* ==================== ====== END TO-DO ====== ==================== */ return svg.node() }37:T5f0,Line plots are different from your typical scatter plot or bar chart in that, rather than render _multiple_ data rows as individual elements, we are rendering a _single_ [`path` element](https://www.w3schools.com/graphics/svg_path.asp) that is comprised of line segments. To generate a single `path` element in your SVG graph, look at this example: ````js chart.append('path') .datum(data) .attr("d", d3.line() .x(function(d) { return x_scale(d.x) }) .y(function(d) { return y_scale(d.y) }) ) // .... other attributes ```` Notice the changes: the use of `.datum()` instead of `.data` and the new `d` attribute that expects a `d3.line().x().y()`. You may also want to modify the `fill`, `stroke`, and `stroke-width` attributes to stylize the path, as `path` can also be used to generate shapes as well as lines.

[NOTE]: You might be curious what's the difference between `.datum()` and `.data()`. The simplest way to view this is the situational context. In a normal scatter plot, for example, you are plotting multiple points. This semantically means you need "data". However, for a line plot, though you are using a dataset with multiple rows, you are ultimately generating a single `path` element. Semantically speaking, you are only creating a single element - hence the singular "datum" nomenclature. You can technically also use `data` with `path` too, but you MUST use the `data().enter().append()` method for plotting multiple elements.

38:T5fd,#### [TO-DO, 20%] Let's try to generate a line plot with the unemployment data `unemp_data`. Notice that `unemp_data` has two features: a `timestamp` feature and a `value` feature. The `timestamp` feature is actually already parsed to fit D3's time axes, so we don't need further conversions or whatnot (if you're interested, look at the [unemp_data code block](#unemp_data) to learn more). This unemployment line plot must have the following characteristics: - **[3%]**: The chart must be 500px wide and 400px tall, with 60px margins in all directions. - **[3%]**: The chart must be titled "Unemployment Rates in the USA Among 16+ Year-Olds (2000-2025)". The x-axis must be titled "Date", while the y-axis must be titled "Unemployment Rate (%)". - **[4%]**: The X-axis must represent the `timestamp` feature. The expected scale is `scaleTime()`. The X-axis must be placed at the bottom of the chart and must increment from left to right. - **[4%]**: The Y-axis must represent the `value` feature. The expected scale is a linear scale. The Y-axis must be placed at hte left of the chart and must increment from bottom to top. - **[6%]**: The line must be a `path` that uses `datum()`. The line must use the new `d` attribute. The line must be styled such 1) that there is no fill, 2) the line color is "steelblue", and 3) the stroke width is set to 1.5. Since we aren't using colors, _a legend isn't needed_. Your graph will probably look similar to that shown below: ${await FileAttachment("unemp_chart.png").image({width:300})}39:T55f,unemp_chart = { // Scaffolding for the SVG, to make sure things work. const svg = d3.create('svg'); /* ==================== ===== BEGIN TO-DO ===== ==================== */ /* - [3%]: The chart must be 500px wide and 400px tall, with 60px margins in all directions. - [3%]: The chart must be titled "Unemployment Rates in the USA Among 16+ Year-Olds (2000-2025)". The x-axis must be titled "Date", while the y-axis must be titled "Unemployment Rate (%)". - [4%]: The X-axis must represent the `timestamp` feature. The expected scale is `scaleTime()`. The X-axis must be placed at the bottom of the chart and must increment from left to right. - [4%]: The Y-axis must represent the `value` feature. The expected scale is a linear scale. The Y-axis must be placed at the left of the chart and must increment from bottom to top. - [6%]: The line must be a `path` that uses `datum()`. The line must use the new `d` attribute. The line must be styled such 1) that there is no fill, 2) the line color is "steelblue", and 3) the stroke width is set to 1.5. */ /* ==================== ====== END TO-DO ====== ==================== */ return svg.node(); }3a:T49e,### 1D. Box-and-Whisker Plots: Practicing with SVG [25%] If you recall, in [_Week 2 Lab_](https://observablehq.com/@rk2546/2025-infovis-cse_week-2-lab), we covered the concept of inter-quartile ranges. Let's take that to the next step and use D3 to render a familiar chart type: box-and-whisker plots. To generate these kinds of charts, we need to be able to use JavaScript to calculate the IQR of samples of data. Unfortunately, D3 doesn't have an immediate solution to generating boxplots. Our solution requires that we **manually code every line**, including the `rect` that acts as the box, the larger line that cuts through the entire boxplot to represent the data range, and other auxiliary lines. We'll cover that in brief.

[NOTE]: Note that charts with multiple box-and-whisker plots (or honestly any kind of composite chart) can get really code-heavy and is generally difficult for those new to JavaScript. Instead of starting with the complicated stuff, let's practice with a single chart first; whether you investigate the more complicated visualizations is up to your own time.

3b:T4e0,#### [TO-DO, 6%] Let's start with a simple exercise. We want to render **four (4)** lines in a mini-SVG we generated below. We COULD use `path` elements, but fortunately HTML comes with a [`` element](https://www.w3schools.com/graphics/svg_line.asp) already for us. In this way, we can append `line` to our SVGs just like with "g" and "rect" and so on. `` expects four attributes at least: `x1`, `y1`, `x2`, and `y2`. As it should be clear, these represent the coordinates in your SVG where the endpoints of the line ought to be. In our implementation below, let's generate those four lines. Your four lines must have the following endpoints and characteristics, _relative to the origin (bottom-left)_: - **[1%]**: `(100, 50)` to `(100, 150)` - **[1%]**: `(100, 150)` to `(175, 150)` - **[1%]**: `(175, 150)` to `(225, 200)` - **[1%]**: `(75, 250)` to `(275, 175)` - **[2%]**: All lines must have a stroke set to "black" and a stroke-width of 2px. We've already created the scaffolding for the chart. You must **MANUALLY** create the lines by appending them each to the provided `svg` (i.e. do not use `.selectAll().data().enter().append()`. Try to match the provided preview below on the left; your answer is printed on the right.3c:T874,#### [TO-DO, 19%] Let's generate a boxplot to represent the data distribution of `dummy_data`. Let's say that we want our boxplot to be 50px wide and placed at an X-coordinate of 75px, relative to the chart. Your tasks are thus: - **[3%]**: Generate a plot that is 150px wide and 400px tall. It should have margins of 50px in all directions. - **[4%]**: Create a y-axis that represents `dummy_data` in of itself. The scale should be linear, placed on the left side of the chart, and must increment from bottom to top. - **[1%]**: Use `calc_quartiles()` to calculate the IQR of `dummy_data`. - **[3%]**: Append 3 lines to the chart that represent the `min` and `max` outputted by `calc_quartiles()`. The three lines are: - **[1%]**: The horizontal "min" line, placed at a y-coordinate of `min` and has a length matching the stated boxplot width. - **[1%]**: The horizontal "max" line, placed at the y-coordinate of `max` and has a length matching the stated boxplot width. - **[1%]**: The vertical "data range" line, placed in the middle of the boxplot and spanning from `min` to `max`. - **[5%]**: Create a `rect` that represents the "box" of the boxplot. The `rect` must: - **[1%]**: Have an `x` that aligns with the left endpoints of the "min" and "max" lines. - **[1%]**: Have a `y` set to `q3` returned from `calc_quartiles()`. - **[1%]**: Have a `width` set to the stated width of the boxplot. - **[1%]**: Have a `height` that allows the rect to stretch to `q1`. - **[1%]**: Must be stylized to have a black border and have a light gray fill. - **[3%]**: Create a horizontal "median" line that: - **[1%]**: has a y-coordinate set to the `median` returned by `calc_quartiles()`. - **[1%]**: Must span from the left to the right ends of the `rect` box. - **[1%]**: Must be colored "yellow".

[NOTE]: Remember that SVGs have a reference point set to the top-left. Keep this in mind when determining the y-coordinates and heights of your lines and box.

Your plot is expected to match the preview provided below. ${await FileAttachment('boxplot.png').image({width:200})}3d:T7da,boxplot = { // Scaffolding for the SVG, to make sure things work. const svg = d3.create('svg'); /* ==================== ===== BEGIN TO-DO ===== ==================== */ /* [3%]: Generate a plot that is 150px wide and 400px tall. It should have margins of 50px in all directions. */ /* [4%]: Create a y-axis that represents `dummy_data` in of itself. The scale should be linear, placed on the left side of the chart, and must increment from bottom to top. */ /* [1%]: Use `calc_quartiles()` to calculate the IQR of `dummy_data`. */ /* [3%]: Append 3 lines to the chart that represent the `min` and `max` outputted by `calc_quartiles()`. The three linesa re: - [1%]: The horizontal "min" line, placed at a y-coordinate of `min` and has a length matching the stated boxplot width. - [1%]: The horizontal "max" line, placed at the y-coordinate of `max` and has a length matching the stated boxplot width. - [1%]: The vertical "data range" line, placed in the middle of the boxplot and spanning from `min` to `max`. */ /* [5%]: Create a `rect` that represents the "box" of the boxplot. The `rect` must: - [1%]: Have an `x` that aligns with the left endpoints of the "min" and "max" lines. - [1%]: Have a `y` set to `q3` returned from `calc_quartiles()`. - [1%]: Have a `width` set to the stated width of the boxplot. - [1%]: Have a `height` that allows the rect to stretch to `q1`. - [1%]: Must be stylized to have a black border and have a light gray fill. */ /* [3%]: Create a horizontal "median" line that: - [1%]: has a y-coordinate set to the `median` returned by `calc_quartiles()`. - [1%]: Must span from the left to the right ends of the `rect` box. - [1%]: Must be colored "yellow". */ /* ==================== ====== END TO-DO ====== ==================== */ return svg.node() }3e:T493,## Part 2: Misleading Visualizations - Case Studies [25%] Here, we have some examples of misleading visualizations that were in social media, propaganda pieces, and news articles. All of these are guaranteed to be misleading in some way, by their very nature. However, _just because a visualization is misleading doesn't mean that it was done with malicious intent_ - sometimes, visualizations are just simply bad or messy. Your job is to identify why these visualizations are misleading. To review, here are some common techniques that people _may_ use that lead to misleading graphs: |Misleading Technique|Description|Example| |:--|:--|:--| |Truncated axis|Start the y-axis above zero to exaggerate differences|Bar chart that starts at 80 instead of 0| |Inconsistent scales|Change the axis scale between charts|Line chart where x-axis spacing is uneven| |Cherry-picking data|Show only a subset of data to support a point|Only show 3 years instead of 10| |Cumulative vs. non-cumulative|Misuse aggregation to distort trends|Cumulative line suggests continuous growth| |Visual emphasis|Use color, size, or area to overstate importance|Big red bar vs. muted gray others|3f:[{"id":"edcc7d9615c45c91b19bc84f3d95610dc9681e96cd552c5b7829b7eb18d6dbda313a526cae6e148fa7969926adc5b6f7db57dbd2de5854490242238146f1a72a","href":"https://static.observableusercontent.com/files/edcc7d9615c45c91b19bc84f3d95610dc9681e96cd552c5b7829b7eb18d6dbda313a526cae6e148fa7969926adc5b6f7db57dbd2de5854490242238146f1a72a","name":"video_games_sales.csv","type":"text/csv","lastModified":1760309547180.275,"size":1372380},{"id":"07b9da9a9aad89bf3524c28591a923a250eeea1255eef34a8fd2658fc1f75784ea37b4535b2eda2935dc043f8c8876dced16910f9219bed592952a5132701963","href":"https://static.observableusercontent.com/files/07b9da9a9aad89bf3524c28591a923a250eeea1255eef34a8fd2658fc1f75784ea37b4535b2eda2935dc043f8c8876dced16910f9219bed592952a5132701963","name":"hz_diagram.png","type":"image/png","lastModified":1760331435144.08,"size":430563},{"id":"a55f7f55f042868544573aac784eba29af2af1c452d7fa1e4f68b960b2622240f0272048127b0ca612164b910506eaeae04ffab573c119915693b38116e1077f","href":"https://static.observableusercontent.com/files/a55f7f55f042868544573aac784eba29af2af1c452d7fa1e4f68b960b2622240f0272048127b0ca612164b910506eaeae04ffab573c119915693b38116e1077f","name":"boxplot.png","type":"image/png","lastModified":1760367586141.759,"size":26066},{"id":"d1774f931241f292a7d0c822c424e2f0553b3938539cdc57da7a1c156371770effcbf7596188086d6d40fccb5c35ccc43c46e38e8bdbc8ccce08a7078c6a0327","href":"https://static.observableusercontent.com/files/d1774f931241f292a7d0c822c424e2f0553b3938539cdc57da7a1c156371770effcbf7596188086d6d40fccb5c35ccc43c46e38e8bdbc8ccce08a7078c6a0327","name":"BLS-Unemployment-2000_2025.csv","type":"text/csv","lastModified":1760326399293.112,"size":1451},{"id":"9eccfc7273325b421d8f3888f5999781d69e5ce5715a51b66a233f06174d0ffde7b00152b740815618016735ca01cfc5fcdefcf5837b463ebc62ecbe81321917","href":"https://static.observableusercontent.com/files/9eccfc7273325b421d8f3888f5999781d69e5ce5715a51b66a233f06174d0ffde7b00152b740815618016735ca01cfc5fcdefcf5837b463ebc62ecbe81321917","name":"the_times.png","type":"image/png","lastModified":1760306496814.192,"size":504962},{"id":"8216a21e56319a791aaf6c7fff46ff9fadf9cf342704bae7dcdc83867a951c7c9ce05e6c28ab49868ea130262ccaf9dc309d97b0d6a7c09bf24691d5b69d5fef","href":"https://static.observableusercontent.com/files/8216a21e56319a791aaf6c7fff46ff9fadf9cf342704bae7dcdc83867a951c7c9ce05e6c28ab49868ea130262ccaf9dc309d97b0d6a7c09bf24691d5b69d5fef","name":"unemp_chart.png","type":"image/png","lastModified":1760336994121.367,"size":127049},{"id":"47cd0517332204eb086a598b16f237b71ce716ca33d506e874b030b433d45dead1a5c42d7028ccf5dd1c33b0e10cdea996a1e587d8015d43cd349752450a5f3d","href":"https://static.observableusercontent.com/files/47cd0517332204eb086a598b16f237b71ce716ca33d506e874b030b433d45dead1a5c42d7028ccf5dd1c33b0e10cdea996a1e587d8015d43cd349752450a5f3d","name":"hertzsprung–russell.csv","type":"text/csv","lastModified":1760328094927.306,"size":665977},{"id":"0316bd4ff325c80d790cccb976464f424d1d07a9e7c19c773ad071883d8f8fdf7c2f6286d77989ba534badd898ea388c8bbbedba32f2c0b9ca376d8e90e3c733","href":"https://static.observableusercontent.com/files/0316bd4ff325c80d790cccb976464f424d1d07a9e7c19c773ad071883d8f8fdf7c2f6286d77989ba534badd898ea388c8bbbedba32f2c0b9ca376d8e90e3c733","name":"a_study_in_empires.jpeg","type":"image/jpeg","lastModified":1760305787695.478,"size":269512},{"id":"da5254caa49f5f548b4ae1bf8349639ce7f4faf17bb6baa99589a7bbb395fedd834bc58855fe2e6a2f3df95445b2e522e311a15b73d9ca0611c90c27429870ac","href":"https://static.observableusercontent.com/files/da5254caa49f5f548b4ae1bf8349639ce7f4faf17bb6baa99589a7bbb395fedd834bc58855fe2e6a2f3df95445b2e522e311a15b73d9ca0611c90c27429870ac","name":"groceries.jpg","type":"image/jpeg","lastModified":1760305154491.568,"size":95864},{"id":"97c4be6b8f003a9f3a8590c25b2280bc7c68f9057f063a4d86caf29dca4330ad4b200fb0ceb4c77b9da3d884b0a35123280de1351d5a07ee3d60f0047b6e636f","href":"https://static.observableusercontent.com/files/97c4be6b8f003a9f3a8590c25b2280bc7c68f9057f063a4d86caf29dca4330ad4b200fb0ceb4c77b9da3d884b0a35123280de1351d5a07ee3d60f0047b6e636f","name":"active-user-percentage.webp","type":"image/png","lastModified":1760304388675.923,"size":65482},{"id":"8b271285147fa74e599cdf2160449d24eea7e24673edac3b1b0f39676b24263c33ebbadec3f6b6b42adcdf059a70425a3839db05c985a32b3193e3c6d3731c35","href":"https://static.observableusercontent.com/files/8b271285147fa74e599cdf2160449d24eea7e24673edac3b1b0f39676b24263c33ebbadec3f6b6b42adcdf059a70425a3839db05c985a32b3193e3c6d3731c35","name":"ChristineChan_GunDeathsInFlorida_Reuters2014.png","type":"image/png","lastModified":1760303427045.307,"size":179324},{"id":"4c036cb84beee97075344f59e941e7f675d6b4172fa7c3a4c2da20428ab109c058f84661e4a3774e53fbb154c8f9572d30504c039cf23acbe8d5b8f993462552","href":"https://static.observableusercontent.com/files/4c036cb84beee97075344f59e941e7f675d6b4172fa7c3a4c2da20428ab109c058f84661e4a3774e53fbb154c8f9572d30504c039cf23acbe8d5b8f993462552","name":"vg_sales@2.png","type":"image/png","lastModified":1760398781991.821,"size":110611}] 2f:{"title":"Week 6 Exercise: Chart Types Review, Misleading Visualizations (Due Oct. 16)","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":744,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":749,"value":"---\n\n#### [TO-DO]\n\nFill out the following submission details:\n\n* **Name:** <FULL NAME>\n* **NetID:** <NET ID>\n* **SHARE URL:** <NOTEBOOK URL>\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"## Part 1: Extra Practice With D3 Charts [75%]\n\nSo far, we've only worked with scatter plots and D3 - albeit, with some nifty additional components such as legends and interactive elements. This time, we'll round things out by going over D3 versions of scatter plots, bar charts, and line plots. We'll also take the time to explore some new charts we haven't seen before.\n\nWe will be working with some statistics from the video game industry. Namely, we will be looking at video game sales! The relevant dataset is `game_sales`, which we've printed in a table below:","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"### 1A. Scatter Plot: The Hertzsprung-Russell Diagram [15%]\n\nWe will be printing a very interesting plot known as the [_\"Hertzsprung-Russell Diagram\"_](https://en.wikipedia.org/wiki/Hertzsprung%E2%80%93Russell_diagram). This diagram is a scatter plot that depicts the relationship between stars' luminosity and temperature. Curiously, the diagram was created independently by two separate individuals: Ejnar Hertzsprung (1911) and Henry Norris Russell (1913).\n\nInspired by D3's own [_Hertzsprung-Russell Diagram implementation_](https://observablehq.com/@d3/hertzsprung-russell-diagram), let's generate a similar scatter plot for ourselves. We have a dataset `star_data` that contains the original data. If you look closely, you'll notice that this dataset has only two features: `absolute_magnitude` (AKA the luminosity) and `color` (AKA temperature).","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"star_data = FileAttachment(\"hertzsprung–russell.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"star_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"The `absolute_magnitude` column makes sense, as luminosity can be easily thought of as a quantitative value. The more curious feature is the `color` feature, which is also numerical. We need a means to convert this column's scalar values into RGB data. We have a helper function [`bv2rgb()`](#bv2rgb) that helps us with this conversion. In fact, `bv2rgb()` will take the place of the typical `d3.scaleSequential()`; you can use this as an example of a custom function that designers can write up manually, instead of using pre-defined D3 functions.\n\n

[NOTE]: To apply the `bv2rgb()` function, you don't need to use `d3.scale` or anything like that. Instead, the function `bv2rgb()` acts like its own scale function in of itself. you can test this out by just trying to run `bv2rgb()` in a separate code block and seeing what gets outputted.

","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"### 1B. Bar Charts: Video Game Sales by Genre [15%]\n\nLet's try to render a bar chart using D3, which compares categorical data to quantitative data. For this part, we'll be using a [_Kaggle dataset_](https://www.kaggle.com/datasets/zahidmughal2343/video-games-sale) provided by Zahid Feroze. This dataset represents video game sales across multiple platforms, genres, and publishers. The data spans from 1980 to 2018. Sales include North America (NA) sales, European (EU) sales, Japan (JP) sales, Other sales, and Global Sales, all in millions. Observe the data below:","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"raw_game_sales = FileAttachment(\"video_games_sales.csv\").csv({typed:true}).then(_data => {\n return _data.filter( d => d['NA_Sales'] > 0 && d['EU_Sales'] > 0)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"game_sales = {\n // 1. group data\n const grouped = raw_game_sales.reduce((acc, row) => {\n const genre = row.Genre;\n const sales = parseFloat(row.EU_Sales);\n if (!acc[genre]) acc[genre] = [];\n acc[genre].push(sales);\n return acc;\n }, {});\n\n // 2. compute Mean for each category\n const condensed = Object.entries(grouped).map(([genre, sales]) => ({\n Genre: genre,\n EU_Sales: sales.reduce((a, b) => a + b, 0)\n }));\n\n // 3. Return\n return condensed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"game_sales","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"We want to create a bar chart. To generate bar charts, we need to create a `rect` element for each bar. Here's an example of a typical bar chart where the categories are on the X-axis and the values are on the Y-axis (i.e. a vertical bar chart):\n\n````js\nchart.selectAll('rect')\n .data(data)\n .enter()\n .append('rect')\n .attr('x', d => x_scale(d.x_value))\n .attr('y', d => y_scale(d.y_value))\n .attr('width', x_scale.bandwidth()) \n .attr('height', d => height - y_scale(d.y_value)) \n // ...\n````\n\nEach `rect`'s coordinates (`x` and `y`) are the top-left corner of the rectangle element. Depending on if you're creating a horizontal or vertical bar chart, the height/width of the bar is that axis scale's `.bandwidth()`.","pinned":false,"hidden":false,"mode":"md"},{"id":466,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"### 1C. Line Plots: Unemployment Rates and Time Axes [20%]\n\nThis is the first time we will be practicing with line plots and D3! in this case, we will be plotting the USA's unemployment rate across the years. The dataset for this chart comes from [_The U.S. Bureau of Labor Statistics_](https://data.bls.gov/timeseries/LNS14000000) and represents the unemployment rate (percentage) of individuals aged 16 or older in the USA, from 2000 to 2025.","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"unemp_data = {\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n return FileAttachment(\"BLS-Unemployment-2000_2025.csv\").csv({typed:true}).then(_data => {\n return _data.flatMap(d => months.map((month, i) => ({\n timestamp: d3.timeParse(\"%Y-%m-%d\")(`${d.Year}-${String(i+1).padStart(2, '0')}-01`),\n value: d[month]\n })))\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"unemp_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"$37","pinned":false,"hidden":false,"mode":"md"},{"id":477,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"$3a","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"$3b","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"{\n const width = 300, height=300;\n const preview_svg = d3.create('svg').attr('width',width).attr('height',height).style('background-color', '#eee');\n const preview_data = [\n {from:[100,50],to:[100,150]},\n {from:[100,150],to:[175,150]},\n {from:[175,150],to:[225,200]},\n {from:[75,250],to:[275,175]}\n ];\n const lines = preview_svg.selectAll('line')\n .data(preview_data)\n .enter().append('line')\n .attr('x1', d => d.from[0])\n .attr('y1', d => height - d.from[1])\n .attr('x2', d => d.to[0])\n .attr('y2', d => height - d.to[1])\n .attr('stroke', 'black')\n .attr('stroke-width', 2);\n\n return htl.html`

${preview_svg.node()}

${lines_exercise.node()}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"lines_exercise = {\n\n // Scaffolding Provided\n const width = 300, height = 300;\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n .style('background-color', '#eee');\n\n /* ====================\n ===== BEGIN TO-DO =====\n ==================== */\n \n\n \n\n \n /* ====================\n ====== END TO-DO ======\n ==================== */\n \n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"---\n\nLet's apply what we learned so far to help us generate our boxplot. For this one, we'll be rendering a dummy array literally named `dummy_data`:","pinned":false,"hidden":false,"mode":"md"},{"id":519,"value":"dummy_data = [12,19,11,13,12,22,13,4,15,16,18,19,20,12,11,9]","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"A box-and-whisker plot requires that we know the following about our sample data: 1) the quartiles (q1 and q3) of the data, and 2) the median. To help us, we created a helper function [`calc_quartiles()`](#calc_quartiles) to calculate these properties of any data array we pass to it; feel free to look at if it you're interested in how it works.\n\nFor the sake of argument, let's say we want to create a _vertical_ boxplot. This means that we need the following elements:\n\n- A `rect` that represents the \"box\" part of the boxplot.\n- A long vertical line to represent the data range.\n- Three short, horizontal lines to represent the ends of the vertical line as well as the median line.\n","pinned":false,"hidden":false,"mode":"md"},{"id":507,"value":"$3c","pinned":false,"hidden":false,"mode":"md"},{"id":662,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$3e","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"#### [TO-DO, 25%]\n\nFor each example, please provide a short description (approx. 2-4 sentences) that describes why the visualization is misleading. Specifically, point out the following:\n\n1. **[1%]**: What narrative is the visualization trying to establish?\n2. **[2%]**: What visual design elements did the designer use to reinforce this narrative? This can refer to any element about the visualization (e.g. color, axes scales, sizes, shapes, axes).\n3. **[2%]**: **Referring to at least one of the strategies described in the table above**, explain why is the visualization is misleading, erroneous, deceptive, and/or a bad visualization.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"---\n${await FileAttachment(\"ChristineChan_GunDeathsInFlorida_Reuters2014.png\").image({width:600})}","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"===============\n\n> [TO-DO]\n\n\n\n===============","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"---\n${await FileAttachment(\"active-user-percentage.webp\").image({width:600})}","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"===============\n\n> [TO-DO]\n\n\n\n\n===============","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"---\n${await FileAttachment(\"groceries.jpg\").image({width:600})}","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"===============\n\n> [TO-DO]\n\n\n\n===============","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"---\n${await FileAttachment(\"a_study_in_empires.jpeg\").image({width:600})}","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"===============\n\n> [TO-DO]\n\n\n\n===============","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"---\n${await FileAttachment(\"the_times.png\").image({width:600})}","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"===============\n\n> [TO-DO]\n\n\n\n===============","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":768,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":401,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {textarea} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"function unique(array) {\n return array.filter((v, i) => array.indexOf(v) === i);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"function bv2rgb(bv) {\n bv = Math.max(-0.4, Math.min(2, bv));\n let t;\n return `#${[\n bv < 0 ? (t = (bv + 0.4) / 0.4, 0.61 + (0.11 * t) + (0.1 * t * t))\n : bv < 0.4 ? (t = bv / 0.4, 0.83 + (0.17 * t))\n : 1,\n bv < 0 ? (t = (bv + 0.4) / 0.4, 0.70 + (0.07 * t) + (0.1 * t * t))\n : bv < 0.4 ? (t = bv / 0.4, 0.87 + (0.11 * t))\n : bv < 1.6 ? (t = (bv - 0.4) / 1.20, 0.98 - (0.16 * t))\n : (t = (bv - 1.6) / 0.4, 0.82 - (0.5 * t * t)), \n bv < 0.4 ? 1\n : bv < 1.5 ? (t = (bv - 0.4) / 1.1, 1 - (0.47 * t) + (0.1 * t * t))\n : bv < 1.94 ? (t = (bv - 1.5) / 0.44, 0.63 - (0.6 * t * t))\n : 0\n ].map(t => Math.round(t * 255).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"function calc_quartiles(data) {\n var data_sorted = data.sort(d3.ascending); // Sort the data in ascending order\n var q1 = d3.quantile(data_sorted, .25); // Calculate Q1\n var q3 = d3.quantile(data_sorted, .75); // Calculate Q3\n var median = d3.quantile(data_sorted, .5); // Calculate the Median\n\n var interQuantileRange = q3 - q1; // The IQR is derived from between Q3 and Q1\n var min = q1 - 1.5 * interQuantileRange // The `min` is the end of the line that passes through the boxplot\n var max = q1 + 1.5 * interQuantileRange // Ditto for `max`. Except that `min` is lower than Q1, while `max` is above Q3.\n\n // Return an object\n return {\n q1: q1, \n q3: q3, \n median: median, \n iqr: interQuantileRange,\n min: min,\n max: max\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"### CSS Styling","pinned":false,"hidden":false,"mode":"md"},{"id":558,"value":"css = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3f","stdlib":"1","titling":"auto"}