A3 for Digital Humanities

Due date: April 30 (23:55)

This assignment was largely inspired by a great paper by Micheal Correll and Jeff Heer "Black Hat Visualization" that appeared in 2017. Based on this, Niklas Elmquist created an assignment from which we steal as well as from this adoption at MIT. We hope you enjoy.

Learning objectives

deepen your knowledge and skills with Tableau
a critical discourse of how visualizations (and hence the data) can be understood
a critical discourse on the elements of visual encoding

Instructions

In this assignment, you will be visualizing a single dataset from two different perspectives: a "white hat" and a "black hat" one. White hat vs. black hat are terms from computer security, where a white hat hacker is someone who uses their skills for good, i.e. finding vulnerabilities in software and systems to help companies and their customers, whereas a black hat hacker uses them for their own (or their organization’s or country’s) gain. More specifically, a white hat visualization would be one where:

The visualizations are clear and easy to interpret for the intended audience (often the general population);
Any transformations, filtering, and computations done to the data are clearly and transparently communicated; and
The sources of the data, including potential bias, is communicated.

A black hat visualization, on the other hand, exhibits one or several of the following characteristics:

The visual representation is intentionally inappropriate, overly complex and/or too cluttered for the audience;
Labels, axes, and legends are misleading; Titles are skewed to intentionally influence the viewer’s perception;
The data has been transformed, filtered, or processed in an intentionally misleading way; or
The source and provenance of the data is not clear to the viewer.

For this assignment, you will work with a data set on US Mass shootings between 1982--2019 provided by Mother Jones. We leave it up to you what part of the data you will pick to make your case as a 'black hat' or 'white hat' visualization designer. Since you are visualizing this from two different perspectives (white hat vs. black hat) you will actually be generating two visualizations in total: one "white" and one "black". You are free to use any visualization technique to generate each submission. Your work has to be done in Tableau though. It is up to you to make your point (as a black or white hat designer) with one single chart or a dashboard. Each visualization should consist of a single page with the following information:

One or more visualizations;
Title (short sentence) describing the visualization;
One-paragraph description of what the visualization shows; and
Legend (if necessary).

Clearly mark each visualization with "white hat" or "black hat". Additional information you provide for each visualization depends on whether your visualization is white hat or black hat. For example, if you are creating a white hat visualization, you may want to clearly explain the source of your data, the organization that collected it, and how you have transformed it. For each visualization page, add a short description explaining your motivation and design process in producing this visualization. Be sure to discuss the ethical considerations of your design choices. You will be graded on this description (and whether the visualiztion is convincing). Please consider aspects such as visual encodings, labels, legends, etc. in addition to data transformations etc. Some additional considerations:

For white hat visualizations, it is not sufficient to just create a standard visualization and be done with it; you need to actively work to make your visualization as clear and transparent as possible!
For black hat visualizations, you are not allowed to include blatantly false data. You have to be creative in your deceptions. This can be done by playing with the coordinate axis (e.g. scales, etc). You might filter out inconvenient outliers or use favourable color maps and other inappropriate visual encodings.

Most of all, we hope you will have fun with it.

Submission instructions

Submissions (of a pdf file) should be done through Moodle.

A3 for Data Science

Due date: April 30 (23:55)

This is an introductory assignment designed to get you up and running with HTML, CSS, JavaScript, and designing a visualization with D3. Be aware that this course uses version 6 of D3.

Learning objectives

Using map projections in D3
Displaying geographically related data on a map
Dynamically changing the data displayed
Linking interactions with a different component

Instructions

Use the usa_median_income_per_state.csv dataset for this assignment. Additionally you will need a geojson file for displaying the geographical features (i.e. states as polygons) on the map, for this you can use us-states-geo.json file.

Ensure that you load the dataset properly into d3
Create a choropleth map (tip: use the d3.geoAlbersUsa() function to apply the Albers USA projection for your map) and filling each state's polygon on the map with a color representing the median household income in that state from year 2014. Make sure you select a fitting color scale for the data in hand; also keep accesibility (e.g. color blindness) in mind (useful source for selecting a color scale).
Implement a basic HTML form element (e.g. select) to allow changing the data column being displayed: either 2014 or 2004. Switching the year should update the data displayed on the map.
Implement an HTML table element next to the map. It should contain all the available data rows and columns from the dataset.
Implement a click interaction on each state on the map, so that the rows in the HTML table will be filtered and only show the clicked state. Clicking on an empty area on the map should remove this filter and again all the available rows should be displayed in the table.

Grading

We’ve broken the learning objectives down by numerical grade, 1 through 5. You will receive the best grade for which you’ve met at least one objective plus all fully completed grades below. Please be aware that that means that if you haven’t fully met all objectives for getting a 3 then you won't get a 2 or 1 even if you’ve completed all the objectives for the grade 2 or 1. We’ve structured the objectives so that they build on each other for the most part. So, in order to show that you’ve learned something for grade 2 then you’ll need to show that you’ve also met all requirements for grade 3, grade 4 and then some.

Grade 4 (50% - 62%)

10%: Adhering to the submission instructions as outlined below
17%: Loading the data properly into d3
35%: Creating a choropleth map and filling each state's polygon on the map with a color representing the median household income in that state from year 2014. Make sure you select a fitting color scale for the data in hand; also keep accesibility (e.g. color blindness) in mind (useful source for selecting a color scale).

Grade 3 (62.5% - 74.5%)

all the above plus:

12.5%: Implementing a basic HTML form element (e.g. select) to allow changing the data column being displayed: either 2014 or 2004. Switching the year should update the data displayed on the map.

Grade 2 (75% - 87%)

all the above plus:

12.5%: Implementing an HTML table element next to the map. It should contain all the available data rows and columns from the dataset.

Grade 1 (87.5% - 100%)

all the above plus:

13%: Implementing a click interaction on each state on the map, so that the rows in the HTML table will be filtered and only show the clicked state. Clicking on an empty area on the map should remove this filter and again all the available rows should be displayed in the table.

Submission instructions

Submissions should be done BOTH on Moodle and on the Uni Wien Almighty servers (see the instructions below), e.g.: http://wwwlab.cs.univie.ac.at/~myusername/VIS23S/A3/ (replace 'myusername' with your u:account username, which you use to login to Uni Wien services such as u:space)

Make sure your submission (i.e. the code) on the almighty web instance and on Moodle are identical. If you make any changes to your web instance submission after the deadline, make sure you submit the same changes to Moodle as well. These submissions will be compared by us and the modification dates of the files on the web servers will be checked in accordance with the deadlines & grace day usage.

Using your Almighty Web Instance

Server: almighty.cs.univie.ac.at
Username: myusername (your u:account username)
Password: your student password

Under the user directory (/home/myusername) in the server, create a folder called "public_html" (if it doesn't exist already). The files in this directory are made automatically online under http://wwwlab.cs.univie.ac.at/~myusername/ (replace 'myusername' with your u:account username, which you use to login to Uni Wien services such as u:space)

Inside the public_html folder create a folder called "VIS23S". Inside VIS23S create a folder called "A3". Your submission files should be placed directly in this order, that means your index.html should be immediately inside the A3 folder for this particular submission.

Make sure you visit the site http://wwwlab.cs.univie.ac.at/~{u:account username}/VIS23S/A3/ on your browser (we'll test with Chrome / Firefox) and that your code runs as expected.

Moodle Submission

Please submit a folder containing an index.html file which will open the view, the data file, and a readme describing what you did, why, and the data source(s) you used, as well as any other associated files to moodle. Please be sure if you submit a zip or tar.gz file that it properly unzips the files into a directory. It’s a good idea to try unzipping your file before submitting it to ensure that everything unzips properly and you don’t lose points. Use the following naming scheme for your submission: “myusername_A3.zip” - replace myusername with your u:account username. When we grade your work we will run

python -m SimpleHTTPServer

in the directory and then open index.html. So please ensure that your visualization works correctly under those conditions. Also, please make sure that you include your name in the readme file.

Just to be clear, here is a sample directory layout. You do not have to use this exact format but it must be clear which file is your readme, your html page, your data file, and your javascript file.

        myusername
      \
      | README.md
      | index.html
      | d3.min.js
      | vis.js
      | style.css
      | data.csv
    
      

Any additional libraries without prior permission will result in a 0

Late submission

Late Submissions are possible, you have a total of five grace days for all assignments. After these days are used up, remaining assignments must be submitted on time.

Academic Honesty