CS 171 Visualization


Homework 2: Design Critique & Redesign
Due date: Wed, February 25th at 5pm EST

Everyday we are confronted with visualizations that attempt to distill and explain information about the world around us. These visualizations appear in a plethora of ways, such as infographics in daily newspapers and magazines, as diagrams in textbooks, and even as works of art. The goal of these graphics is to depict some aspect of, or relationship in, the data, while deemphsizing others. Sometimes the result is a brilliantly insightful view of the data, sometimes it is a cluttered and confusing mess, and at the worst, it can be a misleading depiction. For this assignment you will analyze visualizations that you find "out in the wild", and critique them based on the design priniciples discussed in class.

Part 1: The Good, the Bad, and the... (50 points)

For this first part of the assignment, your task is to scour the Web, print media, your textbooks, journal articles, etc. for one good visualization example, and one bad. Ideally, the visualization will address a question that you find personally interesting.

Your write-up will include an image of each of the visualizations and an analysis of their design - make sure to cite your sources, otherwise no points will be given!! Print media may be digitized using a scanner or a digital camera; for examples that appear on the web, include a screenshot as well as a link to the original source. Your analysis should address these questions for each visualization:

  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 design principles best describe why it is good / bad?
  6. What perceptual principles and color design rules are followed / violated? You may refer to the Color Rules in the downloads area by number (e.g., “R1, R4, and R6 were violated.”)
  7. Why do you like / dislike this visualization?

Your critiques will be graded based on the thoroughness of your evaluation, and your understanding of the design principles used (or, perhaps not used effectively!). Here is an example critique from the UC Berkeley visualization course by Maneesh Agrawala. Note that we ask you to specifically answer the questions above.

Part 2: Turn That Frown Upside Down! (50 points)

Now that you've estabilished why your bad visualization is ineffective and/or misleading, you will redesign the visualization 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.

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 explaination of your design process, decisions, and the principles you followed. Make a case as to why your redesign is better then the original! Be aware that a good design almost always requires several interations to achieve, so leave yourself enough time to experiment.

Submission Instructions

Your write-up will be as a webpage -- you can use any webpage layout your wish, or, cut and paste the html source from this page and plug in your work. To submit your homework, create a folder named lastname_firstinitial_hw2 and place your webpage write-up and your visualizations in this folder -- please make sure that all of the links in your write-up are relative to this folder! Compress the folder (please use .zip compression) and submit on the course iSite page in the HW 2 dropbox.

If we cannot access your work or links because these directions are not followed correctly, we will not grade your work.