Assignment 3: Persuasion & Deception

Date Posted: February 16, 2024

Due Date: March 1, 2024 11:59pm

Description

In this assignment we will explore how we can use visualization for persuasion and deception. You will create three visualizations: two to show how we can create visualizations of opposing perspectives from the same dataset, and one to explore how we can actively deceive readers through various manipulations.

Submission Requirements

Provided Template

In the GitHub repository, you will find six files: index.html, USgap.js, d3.v7.min.js,

simplestatistics.js, README.md, and spec.pdf. The index.html provides a minimal HTML outline to set up your webpage and structure your responses. The USgap.js file contains the data for your plots

and is described below. d3.v7.min.js is a copy of the d3 library. simplestatistics.js is a copy of   the simplestatistics library (discussed below). You will need to load these before any other scripts that use d3 or simplestatistics. README.md provides a template to use for documenting your repository as

described below.  Finally, spec.pdf contains a copy of the assignment specification (this document).

Over the course of this assignment, you may want to perform additional analyses when designing some of your plots, such as calculating a trend line using linear regression. For any extra analysis, you may use

whatever library you feel is appropriate or calculate it by hand. For convenience, I have a provided a library called simplestatistics.js that supports statistics such as linear regression . If using external libraries or

functions designed by anyone but yourself, be sure to cite them in your README.md.

Submitted Files

You will create your visualizations in index.html, it should be the only HTML file in your submission. You may add any additional JavaScript and CSS files as you see fit. At this point, I would like us to move away   from writing JavaScript code in HTML files. As such, the vast majority of your JavaScript should be written in an external .js file (or files) and loaded into your HTML page. You must add appropriate documentation   via commenting to all JavaScript code, whether it's in a separate .js file or written directly in your

index.html file. Finally, you should include a README.md file (using the given template) that provides a   text description of what is in your repository, how to run your program and any parameters that you used.  Also, document any idiosyncrasies, behaviors, or bugs of note that you want us to be aware of.  When you have completed your assignment, please submit the link to your GitHub repository on Canvas to indicate   that you have completed work on your assignment.

For two of the visualizations, you must use d3.js to create your plots. However, you may also use any

other external libraries that you see fit.  For the third visualization, you are free to use any tools you want to design it.  If you opt to use additional libraries or external tools, please document what you used and how    you used them in your README.md file.

Part 1: Creating Persuasive & Deceptive Visualizations (70 pts)

In this part, you will create three plots using the same dataset. The first two plots are designed to provide two opposing perspectives using the same dataset, to illustrate how we can design and manipulate

visualizations to persuade people towards a specific viewpoint. I will guide you towards what data to use to show each perspective but will leave it up to you to decide how best to encode that data. For the third

visualization, you will design a "black-hat" visualization. Specifically, you will design a visualization that intentionally misleads, stretches the truth or flat out lies.

The dataset we will use is the The World Bank's Overall Global Gender Gap Index . This dataset examines

the gap between men and women in four fundamental categories: Economic Participation and Opportunity, Educational Attainment, Health and Survival and Political Empowerment using 14 indicators from 2006 to

2022. The original dataset contains a Global Gender Gap Index, 4 sub-indexes and 14 indicators for 146

countries. For simplicity, I have provided a simplified version that contains only the Global Gender Gap Index and the 4 sub-indexes for just the U.S, from 2006-2022. For each index and sub-index, you will find an

attribute containing the index value for the U.S. (from 0-1) and an attribute containing the rank of the US  relative to the other 145 countries in the dataset. For example, for the Health and Survival sub-index, you will find the attributes "Health_and_Survival_index" and "Health_and_Survival_rank". The index values    range from 0 to 1, where 1 indicates gender equality for the given index.

1a. Amongst its peers, the US has seen a sharp decline in health and survival gender equity in recent years. (25 pts)

First, you will create a visualization that aims to persuade the reader that health and survival gender equity is declining in the US. To do this, you will create a plot of the rank of the US over time for the Health and    Survival indicator. How you design this plot is up to you. There are a few constraints in this part: (1) your

math should be sound - any mappings of the data to visual encodings should correctly quantify the

underlying value; (2) you should follow the design principles from class such as choosing the most effective channels for the most important data, using proper scales and labeling, etc.; and (3) you must use d3.js.

1b. The US gender equality in health and survival has remained steady at near equality over the last decade. (25 pts)

Now, you will create a visualization that aims to persuade the reader that the gender gap in health and

equality has remained largely unchanged in recent years and that the US is very nearly at equality. To do

this, you will create a plot of the index of the US over time for the Health and Survival indicator. Again, how you design this plot is up to you but the encoding should not be identical to the previous plot and the same constraints apply as specified above.