For this assignment, you will make a Black Hat visualization and a White Hat visualization using D3 & other tools such as d3-annotation.
The terms Black Hat and White Hat originate from old cowboy movies where the "bad cowboys" would always wear black hats, whereas the "good cowboys" would wear white hats. The words Black Hat/White Hat have become more synonymous with computer security now where hackers are labeled black or white depending on their intent.
A Black Hat Visualization would have one or several of the following problems with it:
- Intentionally complex and cluttered visualization that is hard to understand and read.
- Labels, axes, legends are intentionally misleading.
- Bad/Wrong color scales are used.
- Title of the visualization is intentionally skewed to bias the viewer's opinion of the visualization
- The data has been transformed and processed in a weird and/or misleading manner
- There is no evidence about the source of the data and how it was collected / where it was found
A White Hat Visualization would have all the properties that we look for in a good data visualization:
- The visual representation is clear and easy to understand for the intended audience
- Appropriate color scales are used and the legend is clearly labeled and visible with an appropriately sized font
- Any data transformations are clearly mentioned
- Gestalt principles are followed.
- Annotations are clearly visible and draw viewer's attention appropriately. Hint: Consider using d3-annotation - for this. d3-annotation is really awesome!
- The sources of data are stated for viewers to see & verify
Here are the specifications for the assignment.
To get a C (75), your assignment must contain:
- A screenshot/link of a poorly designed visualization (Black Hat) along with a description for why it is misleading
- A redesigned (White Hat) visualization of the same data with a description of why it is better and is not misleading. Your redesigned visualization can be made in Tableau, python, datawrapper, Rawgraphs, or d3.
To get a B (85), your assignment must contain:
- A screenshot/link of a poorly designed visualization (Black Hat) along with a description for why it is misleading
- A redesigned (White Hat) visualization of the same data with a description of why it is better and is not misleading. Your redesigned visualization must be made using d3.
To get an A(95), your assignment must contain:
- An intentionally misleading visualization that you create in d3 that is a Black Hat visualization with a description of why it is misleading
- A redesigned (White Hat) visualization of the same data with a description of why it is better and is not misleading. Your redesigned visualization must be made using d3.
- Both the visualizations must be on the same HTML page.
To get an A+(100), your assignment must contain:
- All the requirements to get an A and
- One of your previous d3 assignments and clearly state why it could be misleading.
- A redesigned version of the misleading visualization with a description of why it is better/not misleading. Your redesigned visualization must be made in d3.
- The original assignment and the redesigned visualization both must be on the same HTML page.
Note: For A/A+, you can use the same dataset to generate both the visualizations. Hint: It may be easier to make black hat visualizations for contentious topics such as climate change, pollution, country indicators, or elections.
Submitting the assignment
- The deliverable for this assignment will be link on your webpage that contains both the following visualizations on one page.
- On the left, a description of the Black Hat Visualization and all the reasons why it is misleading
- On the right, a description of the White Hat Visualization and why it is not misleading and better.
- You must include a list of all the changes you made to improve the original visualization