2c:null 2d:["$","title",null,{"children":"Week 6 Exercise: Chart Types Review, Misleading Visualizations (Due Oct. 16) | NYU | Observable"}] 32: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.

33: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!

34: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})}35:Tb90,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`. */ const x_axis = d3.scaleLinear().domain(d3.extent(star_data,d=>d.color)).range([0,width]) //linear, left to right increment const y_axis = d3.scaleLinear().domain(d3.extent(star_data,d=>d.absolute_magnitude)).range([0,height]) //linear, top to bottom increment chart.append("g").attr("transform",`translate(0,${height})`).call(d3.axisBottom(x_axis)) chart.append("g").call(d3.axisLeft(y_axis)) chart.append("text").attr('x',width/2).attr('y',-margins.top/2).style('text-anchor','middle').style('font-weight',700).text('Hertzsprung-Russell Diagram') //Chart title chart.append("text").attr('x',width/2).attr('y',height+margins.bottom/2+15).style('text-anchor','middle').text('Temperature') //x-title chart.append("text").attr('transform',`rotate(-90)`).attr('x',-height/2).attr('y',(-margins.left/2)-5).style('text-anchor','middle').text('Luminosity') //y-title chart.selectAll('.point') .data(star_data) .enter() .append("circle") .attr('class','point') .attr("cx",(d)=>x_axis(d.color)) .attr("cy",(d)=>y_axis(d.absolute_magnitude)) .attr("r",0.5) .style('fill',(d)=>bv2rgb(d.color)) /* ==================== ====== END TO-DO ====== ==================== */ // Return `svg.node()` return svg.node(); }36: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})}37:Tb0c,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. */ const width = 800; const height = 600; const margins = {top:80, left:80, right:80, bottom:50}; svg.attr('width', width + margins.left + margins.right) .attr('height', height + margins.top + margins.bottom) const bar_chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins.left}, ${margins.top})`); const x_axis = d3.scaleLog().domain([1,d3.max(game_sales,d=>d.EU_Sales)+10]).range([0,width]) //Log Scale, EU_Sales 1,max+10 const y_axis = d3.scaleBand().domain(unique(game_sales.map(d=>d.Genre))).range([height,0]) bar_chart.append("g").call(d3.axisTop(x_axis)) bar_chart.append("g").call(d3.axisLeft(y_axis)) bar_chart.append("text").attr('x',width/2).attr('y',-margins.top/2-20).style('text-anchor','middle').style('font-weight',700).text('Video Game Sales, by Genre') //Chart title bar_chart.append("text").attr('x',width/2).attr('y',-margins.top/2+10).style('text-anchor','middle').text('EU Sales (Log Millions)') //x-title bar_chart.append("text").attr('transform',`rotate(-90)`).attr('x',-height/2).attr('y',(-margins.left/2)-20).style('text-anchor','middle').text('Genres') //y-title const color = d3.scaleOrdinal(d3.schemePaired); bar_chart.selectAll('rect') .data(game_sales) .enter() .append('rect') .attr('x', d => x_axis(1)) .attr('y', d => y_axis(d.Genre)) .attr('width', d => x_axis(d.EU_Sales)-x_axis(1)) .attr('height', y_axis.bandwidth()) .attr('fill',d=>color(d.Genre)) /* ==================== ====== END TO-DO ====== ==================== */ return svg.node() }38: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.

39: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})}3a:Tb45,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. */ const width = 500; const height = 400; const margins = {top:60, left:60, right:60, bottom:60}; svg.attr('width', width + margins.left + margins.right).attr('height', height + margins.top + margins.bottom) const line_chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins.left}, ${margins.top})`); const x_axis = d3.scaleTime().domain(d3.extent(unemp_data,d=>d.timestamp)).range([0,width]) const y_axis = d3.scaleLinear().domain(d3.extent(unemp_data,d=>d.value)).range([height,0]) line_chart.append("g").attr("transform",`translate(0,${height})`).call(d3.axisBottom(x_axis)) line_chart.append("g").call(d3.axisLeft(y_axis)) line_chart.append("text").attr('x',width/2).attr('y',-margins.top/2).style('text-anchor','middle').style('font-weight',700).text('Unemployment Rates in the USA Among 16+ Year-Olds (2000-2025)') //Chart title line_chart.append("text").attr('x',width/2).attr('y',height+margins.bottom/2+15).style('text-anchor','middle').text('Date') //x-title line_chart.append("text").attr('transform',`rotate(-90)`).attr('x',-height/2).attr('y',(-margins.left/2)-5).style('text-anchor','middle').text('Unemployment Rate (%)') //y-title line_chart.append('path') .datum(unemp_data) .attr("d", d3.line() .x(function(d) { return x_axis(d.timestamp) }) .y(function(d) { return y_axis(d.value) })) .style('fill', 'none') .style('stroke', 'steelblue') .style('stroke-width', 1.5) /* ==================== ====== END TO-DO ====== ==================== */ return svg.node(); }3b: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.

3c: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.3d: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})}3e:Te2d,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. */ const width = 150; const height = 400; const margins = {top:50, left:50, right:50, bottom:50}; svg.attr('width', width + margins.left + margins.right).attr('height', height + margins.top + margins.bottom) const box_plot = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins.left}, ${margins.top})`); /* [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. */ const y_axis = d3.scaleLinear().domain([d3.min(dummy_data)-4,d3.max(dummy_data)+3]).range([height,0]) //Used dummy data values but have been manipulated to match the y-axis range of the sample box-plot box_plot.append("g").call(d3.axisLeft(y_axis)) /* [1%]: Use `calc_quartiles()` to calculate the IQR of `dummy_data`. */ const stats = calc_quartiles(dummy_data) /* [3%]: Append 3 lines to the chart that represent the `min` and `max` outputted by `calc_quartiles()`. The three lines 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`. */ box_plot.append("line").attr('x1', 75).attr('y1', y_axis(stats.min)).attr('x2', 75+50).attr('y2', y_axis(stats.min)).attr('stroke', 'black').attr('stroke-width', 1) box_plot.append("line").attr('x1', 75).attr('y1', y_axis(stats.max)).attr('x2', 75+50).attr('y2', y_axis(stats.max)).attr('stroke', 'black').attr('stroke-width', 1) box_plot.append("line").attr('x1', 100).attr('y1', y_axis(stats.min)).attr('x2', 100).attr('y2', y_axis(stats.max)).attr('stroke', 'black').attr('stroke-width', 1) /* [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. */ box_plot.append("rect").attr('x', 75).attr('y', y_axis(stats.q3)).attr('width', 50) .attr('height', y_axis(stats.q1) - y_axis(stats.q3)).attr('fill', 'lightgray').attr('stroke', 'black').attr('stroke-width', 1); /* [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". */ box_plot.append("line").attr('x1', 75) .attr('x2', 75+50).attr('y1', y_axis(stats.median)) .attr('y2', y_axis(stats.median)).attr('stroke', 'yellow').attr('stroke-width', 1); /* ==================== ====== END TO-DO ====== ==================== */ return svg.node() }3f: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|40:T618,=============== > The visualisation is trying to establish the narrative that post the introduction of the Florida 'Stand Your Ground' Law, the number of murders committed using firearms have decreased. > > The designer uses elements such as flipping the y-axis so that the number of deaths increase from top to bottom. This inversion makes the line graph slope downward after 2005, giving the impression of a decline. This plays on the general visual logic that the y-axis increments from the bottom up, making the viewer assume that the numbers have dropped when in fact they have increased post the introduction of the law. Moreover, the designer uses the red background to further make it seem like the line graph is to be viewed from the bottom up, further emphasising the 'falling' slope. Moreover, the number annotations in bold have also been carefully placed and selected so as to give the effect of a decline from the starting point (873->721). Although, this might be factual, it is not reflective of the effect of the Law itself. > > This visualization uses the “axes manipulation / inconsistent scale” strategy, a form of visual deception.This misleading design due to flipping of the axis makes the trend appear to be decreasing instead of increasing, supporting a deceptive narrative that the law has had a huge positive impact on gun deaths in Florida.In addition, the use of strong red shading creates emotional emphasis by drawing attention to the lower part of the chart and reinforcing the misleading downward trend. > ===============41:T48a,=============== > The visualization aims to present the idea that all major gaming consoles maintained relatively stable active user percentages between January and June 2009, while also suggesting that the Xbox 360 performed the best and the Wii performed the worst. > > The designer reinforces this narrative by using Active User Percentage instead of the actual count of active users. This distinction can mislead viewers into assuming that the Wii performed poorly, even though it might have had a much larger overall user base than the PlayStation 3. Additionally, the visualization uses a truncated y-axis starting at 5%, which exaggerates small differences between the consoles and visually amplifies the trends. > > This design is misleading due to cherry-picking of data and the use of truncated axis. It only shows the percentage of active users without providing the total number of users per console while also emphasising differences by starting the axis at 5. As a result, viewers may incorrectly interpret the graph as comparing total user activity across platforms rather than proportions within each console’s user base. > ===============42:T484,=============== > The visualization aims to show how much people spend on groceries each week, suggesting that the majority of people spend between $100 and $200, while very few spend more than $300. > >The designer uses colored nested squares to represent spending categories. In this visualisation, larger squares visually seem to correspond to larger squares. However, instead of using area, the designer is actually using square length to represent the proportional hierarchy of spending. The use of bright, contrasting colors helps differentiate categories and draw the viewer’s eye toward the center and the largest square which visually dominate the image. This draws attention to the fact that the most people spend $100-$200 a week, while the smallest group is those that spend >$300. > >This visualization is misleading due to the misuse of area proportions and visual emphasis. Each square’s side length, rather than its area, appears to correspond to the percentage values.This can create confusion as the about $100 category has a smaller looking area than under $100 even though they about $100 is a greater percentage. > ===============43:T4ae,=============== > The visualization aims to call out the idea that Germany is considered an “aggressor nation” while Great Britain controls a massive global empire. It suggests the narrative that Britain is the real power. > > The designer uses a side-by-side comparison to create emphasise a visual difference in size with the left being a tiny shape and the right being an array of large, bold black shapes representing British colonies around the world, occupying “26% of the world.” This stark contrast in size and space creates a powerful visual juxtaposition. The framing title “The Aggressor Nation?” and the use of large black silhouettes against a blank white background further emphasize the irony and moral criticism. > >This visualization uses visual emphasis and cherry-picking to make push its narrative rather than a fair comparison between the two countries. The designer has purposely spread out the colonies to be disconnected and large. The lack of scale and geographic positioning creates a strong emphasis on Britain's control. Moreover, the overall visualisation conveniently omits other factors that are vital for the comparison of 'aggression'. ===============44:T4ed,=============== >The visualization promotes the narrative that The Times newspaper is outperforming its competitors in both print and online formats. > >The designer reinforces this narrative through several visual choices. The bars representing The Times are drawn in a darker, bolder color, making them more visually prominent than the competitors’ lighter bars. In particular, the comparison between The Times and the Daily Telegraph uses a truncated y-axis, exaggerating the difference in sales and creating the illusion of significant growth. Moreover, the visualization omits data on online visitors for other newspapers, presenting The Times’ website statistics in isolation. This selective omission hides meaningful context i.e. other papers might have similar or even higher online readership. This skews the viewer’s interpretation of The Times’ overall performance. > >This visualization employs both truncated axes and cherry-picking to create a deceptive impression of superiority, ultimately misrepresenting The Times as being far more dominant than it likely is in reality. It does this by omitting information of online visitors for other papers and exaggerating the difference between the Times and the Daily Telegraph. ===============45:[{"id":"edcc7d9615c45c91b19bc84f3d95610dc9681e96cd552c5b7829b7eb18d6dbda313a526cae6e148fa7969926adc5b6f7db57dbd2de5854490242238146f1a72a","href":"https://static.observableusercontent.com/files/edcc7d9615c45c91b19bc84f3d95610dc9681e96cd552c5b7829b7eb18d6dbda313a526cae6e148fa7969926adc5b6f7db57dbd2de5854490242238146f1a72a","name":"video_games_sales.csv","type":"text/csv","lastModified":1760553317947.528,"size":1372380},{"id":"07b9da9a9aad89bf3524c28591a923a250eeea1255eef34a8fd2658fc1f75784ea37b4535b2eda2935dc043f8c8876dced16910f9219bed592952a5132701963","href":"https://static.observableusercontent.com/files/07b9da9a9aad89bf3524c28591a923a250eeea1255eef34a8fd2658fc1f75784ea37b4535b2eda2935dc043f8c8876dced16910f9219bed592952a5132701963","name":"hz_diagram.png","type":"image/png","lastModified":1760553317947.528,"size":430563},{"id":"a55f7f55f042868544573aac784eba29af2af1c452d7fa1e4f68b960b2622240f0272048127b0ca612164b910506eaeae04ffab573c119915693b38116e1077f","href":"https://static.observableusercontent.com/files/a55f7f55f042868544573aac784eba29af2af1c452d7fa1e4f68b960b2622240f0272048127b0ca612164b910506eaeae04ffab573c119915693b38116e1077f","name":"boxplot.png","type":"image/png","lastModified":1760553317947.528,"size":26066},{"id":"d1774f931241f292a7d0c822c424e2f0553b3938539cdc57da7a1c156371770effcbf7596188086d6d40fccb5c35ccc43c46e38e8bdbc8ccce08a7078c6a0327","href":"https://static.observableusercontent.com/files/d1774f931241f292a7d0c822c424e2f0553b3938539cdc57da7a1c156371770effcbf7596188086d6d40fccb5c35ccc43c46e38e8bdbc8ccce08a7078c6a0327","name":"BLS-Unemployment-2000_2025.csv","type":"text/csv","lastModified":1760553317947.528,"size":1451},{"id":"9eccfc7273325b421d8f3888f5999781d69e5ce5715a51b66a233f06174d0ffde7b00152b740815618016735ca01cfc5fcdefcf5837b463ebc62ecbe81321917","href":"https://static.observableusercontent.com/files/9eccfc7273325b421d8f3888f5999781d69e5ce5715a51b66a233f06174d0ffde7b00152b740815618016735ca01cfc5fcdefcf5837b463ebc62ecbe81321917","name":"the_times.png","type":"image/png","lastModified":1760553317947.528,"size":504962},{"id":"8216a21e56319a791aaf6c7fff46ff9fadf9cf342704bae7dcdc83867a951c7c9ce05e6c28ab49868ea130262ccaf9dc309d97b0d6a7c09bf24691d5b69d5fef","href":"https://static.observableusercontent.com/files/8216a21e56319a791aaf6c7fff46ff9fadf9cf342704bae7dcdc83867a951c7c9ce05e6c28ab49868ea130262ccaf9dc309d97b0d6a7c09bf24691d5b69d5fef","name":"unemp_chart.png","type":"image/png","lastModified":1760553317947.528,"size":127049},{"id":"47cd0517332204eb086a598b16f237b71ce716ca33d506e874b030b433d45dead1a5c42d7028ccf5dd1c33b0e10cdea996a1e587d8015d43cd349752450a5f3d","href":"https://static.observableusercontent.com/files/47cd0517332204eb086a598b16f237b71ce716ca33d506e874b030b433d45dead1a5c42d7028ccf5dd1c33b0e10cdea996a1e587d8015d43cd349752450a5f3d","name":"hertzsprung–russell.csv","type":"text/csv","lastModified":1760553317947.528,"size":665977},{"id":"0316bd4ff325c80d790cccb976464f424d1d07a9e7c19c773ad071883d8f8fdf7c2f6286d77989ba534badd898ea388c8bbbedba32f2c0b9ca376d8e90e3c733","href":"https://static.observableusercontent.com/files/0316bd4ff325c80d790cccb976464f424d1d07a9e7c19c773ad071883d8f8fdf7c2f6286d77989ba534badd898ea388c8bbbedba32f2c0b9ca376d8e90e3c733","name":"a_study_in_empires.jpeg","type":"image/jpeg","lastModified":1760553317947.528,"size":269512},{"id":"da5254caa49f5f548b4ae1bf8349639ce7f4faf17bb6baa99589a7bbb395fedd834bc58855fe2e6a2f3df95445b2e522e311a15b73d9ca0611c90c27429870ac","href":"https://static.observableusercontent.com/files/da5254caa49f5f548b4ae1bf8349639ce7f4faf17bb6baa99589a7bbb395fedd834bc58855fe2e6a2f3df95445b2e522e311a15b73d9ca0611c90c27429870ac","name":"groceries.jpg","type":"image/jpeg","lastModified":1760553317947.528,"size":95864},{"id":"97c4be6b8f003a9f3a8590c25b2280bc7c68f9057f063a4d86caf29dca4330ad4b200fb0ceb4c77b9da3d884b0a35123280de1351d5a07ee3d60f0047b6e636f","href":"https://static.observableusercontent.com/files/97c4be6b8f003a9f3a8590c25b2280bc7c68f9057f063a4d86caf29dca4330ad4b200fb0ceb4c77b9da3d884b0a35123280de1351d5a07ee3d60f0047b6e636f","name":"active-user-percentage.webp","type":"image/png","lastModified":1760553317947.528,"size":65482},{"id":"8b271285147fa74e599cdf2160449d24eea7e24673edac3b1b0f39676b24263c33ebbadec3f6b6b42adcdf059a70425a3839db05c985a32b3193e3c6d3731c35","href":"https://static.observableusercontent.com/files/8b271285147fa74e599cdf2160449d24eea7e24673edac3b1b0f39676b24263c33ebbadec3f6b6b42adcdf059a70425a3839db05c985a32b3193e3c6d3731c35","name":"ChristineChan_GunDeathsInFlorida_Reuters2014.png","type":"image/png","lastModified":1760553317947.528,"size":179324},{"id":"4c036cb84beee97075344f59e941e7f675d6b4172fa7c3a4c2da20428ab109c058f84661e4a3774e53fbb154c8f9572d30504c039cf23acbe8d5b8f993462552","href":"https://static.observableusercontent.com/files/4c036cb84beee97075344f59e941e7f675d6b4172fa7c3a4c2da20428ab109c058f84661e4a3774e53fbb154c8f9572d30504c039cf23acbe8d5b8f993462552","name":"vg_sales@2.png","type":"image/png","lastModified":1760553317947.528,"size":110611}] 30:{"id":"f6379cf4a6cba817","slug":null,"title":"Week 6 Exercise: Chart Types Review, Misleading Visualizations (Due Oct. 16)","thumbnail":"a896b5839e58c9e6d8e3cd885e68afe305046682ec83e04f0affd3b4334659bf","access_level":"public","create_time":"$D2025-10-15T18:35:17.947Z","update_time":"$D2025-10-17T00:07:16.412Z","view_time":null,"first_public_time":"$D2025-10-15T18:35:17.947Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9f0e7a056e171f1e","login":"nyu34","name":"NYU","avatar_url":"https://avatars-next.observableusercontent.com/2d4bc1e34109ca4a768a9988c04daf63bb3b75d51019c1264cf163e913a8562b","tier":"starter_2024"},"version":1021,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"03df06c91a2bb0e9","login":"anushri-iyer","name":"Anushri Iyer","avatar_url":"https://avatars-next.observableusercontent.com/17802ee9d3daba50a72b15f0997290e6a630e2c752bc2c0f872a839f9ab5a4e3","tier":null}],"members":[{"type":"individual","id":"03df06c91a2bb0e9","login":"anushri-iyer","name":"Anushri Iyer","avatar_url":"https://avatars-next.observableusercontent.com/17802ee9d3daba50a72b15f0997290e6a630e2c752bc2c0f872a839f9ab5a4e3","tier":null,"role":"editor"},{"type":"team","id":"9f0e7a056e171f1e","login":"nyu34","name":"NYU","avatar_url":"https://avatars-next.observableusercontent.com/2d4bc1e34109ca4a768a9988c04daf63bb3b75d51019c1264cf163e913a8562b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Week 6 Exercise: Chart Types Review, Misleading Visualizations (Due Oct. 16)","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":749,"value":"---\n\n#### [TO-DO]\n\nFill out the following submission details:\n\n* **Name:** Anushri Iyer\n* **NetID:** ai2185\n* **SHARE URL:** https://observablehq.com/d/f6379cf4a6cba817\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"star_data = FileAttachment(\"hertzsprung–russell.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"star_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":836,"value":"bv2rgb(0.6) //testing out function","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":372,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"game_sales","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"unemp_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":595,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 svg.append(\"line\").attr('x1', 100).attr('y1', height - 50).attr('x2', 100).attr('y2', height - 150).attr('stroke', 'black').attr('stroke-width', 2)\n svg.append(\"line\").attr('x1',100).attr('x2',175).attr('y1',height-150).attr('y2',height - 150).attr('stroke', 'black').attr('stroke-width', 2)\n svg.append(\"line\").attr('x1',175).attr('x2',225).attr('y1',height-150).attr('y2',height-200).attr('stroke', 'black').attr('stroke-width', 2)\n svg.append(\"line\").attr('x1',75).attr('x2',275).attr('y1',height-250).attr('y2',height-175).attr('stroke', 'black').attr('stroke-width', 2)\n \n /* ====================\n ====== END TO-DO ======\n ==================== */\n \n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"calc_quartiles(dummy_data) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":662,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"---\n${await FileAttachment(\"ChristineChan_GunDeathsInFlorida_Reuters2014.png\").image({width:600})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"misleading1","database":"$undefined"},{"id":53,"value":"---\n${await FileAttachment(\"active-user-percentage.webp\").image({width:600})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"$41","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"---\n${await FileAttachment(\"groceries.jpg\").image({width:600})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"$42","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"---\n${await FileAttachment(\"a_study_in_empires.jpeg\").image({width:600})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"$43","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"---\n${await FileAttachment(\"the_times.png\").image({width:600})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":768,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":401,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {textarea} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":202,"value":"function unique(array) {\n return array.filter((v, i) => array.indexOf(v) === i);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"### CSS Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"css = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1","titling":"auto"}} 31:"$30:body"