Homework 3: Color - Critique & Redesign
Due date: Thursday, February 25th at 11:59pm EST
Color plays a critical role in visualization design and can make the difference between a good and great visualization, or (when used poorly) the culprit for a bad and often misleading data display. Data visualizations in settings ranging from scientific journal papers to magazines to cable news shows are commonly guilty of using color either in ineffective or inappropriate ways resulting in misinformed audiences. For this assignment, you will analyze sample visualizations and critique them based on the color and design principles discussed in class and the readings. You will then chose one of the visualizations to carefully redesign, and make your new design a reality by implementing it with Processing.
Grading
Part 1: Visualization Critique (30%)
Presented below are two visualizations. For both images, please answer the following set of questions based on what has been discussed in lecture, in Ware, and in Brewer (1999):
1. Who is the intended audience?
2. What tasks does it enable?
3. List all the data types this visualization represents (quantitative, ordinal, nominal).
4. How is each data type visually encoded?
5. What kind of color scheme is used (sequential, diverging, qualitative)?
6. What perceptual principles and color design rules are followed/violated? You may refer to the linked Color Rules summary guide by number (e.g., “R1, R4, and R6 were violated.”).
7. Are the colors used friendly for color blind viewers? Why?
8. What design principles best describe why it is good/bad?
9. Why do you like/dislike this visualization?
Note: The "Matter of Choice" image was scanned from a magazine, so please ignore the visual artifacts (e.g. ripped paper).
Part 2: Redesign (40%)
Now that you've established the ineffective and/or misleading aspects of these visualizations, chose one visualization to redesign with principles of excellence in mind. You can use any tools available to you (i.e. Photoshop, pen and paper, markers, paint, PowerPoint, Keynote, Matlab, etc.) to generate your redesign. Include at least one significant interactive element in the design -- perhaps a mouseover or animated transition. Also, feel free to use Color Brewer for picking colors and schemes.
In your write-up, include the redesign as a digital image (again, you can digitize print versions using a scanner or digital camera), and a thorough explanation of your design process, decisions, and the principles you followed. You will not be evaluated on whether your redesign is perfect and/or flashy. We will look to see what choices you made and whether you justified them properly. Make a case as to why your redesign is better then the original! Be aware that a good design almost always requires several iterations to achieve, so leave yourself enough time to experiment.
Part 3: Processing Implementation (30%)
Using Processing, bring your sketch to life! Please take your redesign from Part 2 and implement it using Processing. Export your sketch as an applet, and include the applet in your write-up. In your write-up, make sure to include a few comments about what you liked/hated and found hard/easy about implementing your design in Processing.
Extra Credit: Now go fix that other image!
For extra credit, fix the other image! Please follow the instructions for Part 2 (above) and redesign the image you had previously not chosen. Again, keep principles of color and design excellence in mind.
Submission Instructions
Your homework write-up will be submitted as a webpage. You can use any webpage creation environment you wish, e.g., a text editor or Google docs. The web development environment DreamWeaver is available for download for FAS students (distance students will have to VPN onto the Harvard network first). We are not picky about whether your html is immaculate.
To submit your homework, create a folder named lastname_firstinitial_hw3 and place your webpage write-up and your other files in this folder. Your webpage writeup should be a single .html page. Please make sure that all of the links in your write-up are relative to this folder! Compress the folder (please use .zip compression, thus your submitted file will be lastname_firstinitial_hw3.zip) and submit on the course iSite page in the appropriate dropbox. If we cannot access your work or links because these directions are not followed correctly, we will not grade your work.
Due date: Thursday, February 25th at 11:59pm EST
Color plays a critical role in visualization design and can make the difference between a good and great visualization, or (when used poorly) the culprit for a bad and often misleading data display. Data visualizations in settings ranging from scientific journal papers to magazines to cable news shows are commonly guilty of using color either in ineffective or inappropriate ways resulting in misinformed audiences. For this assignment, you will analyze sample visualizations and critique them based on the color and design principles discussed in class and the readings. You will then chose one of the visualizations to carefully redesign, and make your new design a reality by implementing it with Processing.
Grading
The homework will be graded according to the guidelines from the syllabus:
5 = Exceptional / above and beyond (we will only give out maybe 5-10 of these for each homework)
4 = Very Solid / no mistakes (or really minor)
3 = Good / some mistakes
2 = Fair / some major conceptual errors
1 = Poor / did not finish?
0 = Did not participate / did not hand in
A 4 constitutes a perfect grade, and a 4 is equivalent to an A. A combination of 4s and 3s end up being A- to B, and so on. TFs will evaluate your work holistically beyond mechanical correctness and focus on the overall quality of the work. In addition to the scores the TFs will give detailed written feedback.
Part 1: Visualization Critique (30%)
Presented below are two visualizations. For both images, please answer the following set of questions based on what has been discussed in lecture, in Ware, and in Brewer (1999):
1. Who is the intended audience?
2. What tasks does it enable?
3. List all the data types this visualization represents (quantitative, ordinal, nominal).
4. How is each data type visually encoded?
5. What kind of color scheme is used (sequential, diverging, qualitative)?
6. What perceptual principles and color design rules are followed/violated? You may refer to the linked Color Rules summary guide by number (e.g., “R1, R4, and R6 were violated.”).
7. Are the colors used friendly for color blind viewers? Why?
8. What design principles best describe why it is good/bad?
9. Why do you like/dislike this visualization?
Note: The "Matter of Choice" image was scanned from a magazine, so please ignore the visual artifacts (e.g. ripped paper).
Part 2: Redesign (40%)
Now that you've established the ineffective and/or misleading aspects of these visualizations, chose one visualization to redesign with principles of excellence in mind. You can use any tools available to you (i.e. Photoshop, pen and paper, markers, paint, PowerPoint, Keynote, Matlab, etc.) to generate your redesign. Include at least one significant interactive element in the design -- perhaps a mouseover or animated transition. Also, feel free to use Color Brewer for picking colors and schemes.
In your write-up, include the redesign as a digital image (again, you can digitize print versions using a scanner or digital camera), and a thorough explanation of your design process, decisions, and the principles you followed. You will not be evaluated on whether your redesign is perfect and/or flashy. We will look to see what choices you made and whether you justified them properly. Make a case as to why your redesign is better then the original! Be aware that a good design almost always requires several iterations to achieve, so leave yourself enough time to experiment.
Part 3: Processing Implementation (30%)
Using Processing, bring your sketch to life! Please take your redesign from Part 2 and implement it using Processing. Export your sketch as an applet, and include the applet in your write-up. In your write-up, make sure to include a few comments about what you liked/hated and found hard/easy about implementing your design in Processing.
Extra Credit: Now go fix that other image!
For extra credit, fix the other image! Please follow the instructions for Part 2 (above) and redesign the image you had previously not chosen. Again, keep principles of color and design excellence in mind.
Submission Instructions
Your homework write-up will be submitted as a webpage. You can use any webpage creation environment you wish, e.g., a text editor or Google docs. The web development environment DreamWeaver is available for download for FAS students (distance students will have to VPN onto the Harvard network first). We are not picky about whether your html is immaculate.
To submit your homework, create a folder named lastname_firstinitial_hw3 and place your webpage write-up and your other files in this folder. Your webpage writeup should be a single .html page. Please make sure that all of the links in your write-up are relative to this folder! Compress the folder (please use .zip compression, thus your submitted file will be lastname_firstinitial_hw3.zip) and submit on the course iSite page in the appropriate dropbox. If we cannot access your work or links because these directions are not followed correctly, we will not grade your work.