Due date: Wed, March 4th at 7pm EST
This midterm should take you 90 to 120 minutes. Of course you can spend much more time on it. But if you find yourself tinkering with details, e.g., measuring circle diameters to get the proportions exactly right, then you are wasting your efforts. We are looking to see if you can apply the principles discussed in class to critique and design static and interactive visualizations.
You will be graded based on how precise you are about your data types, visual encodings, perceptual principles, and interaction techniques. Use the terms that were introduced in class as much as possible. We will also grade the overall impression of your visualization design. But as with any creative activity, there are no right or wrong answers -- just better or worse choices. Be thoughtful, be concise, be creative -- and above all, have fun.
It goes without saying that all submitted work has to be your own and that you may not get help from anyone but the TFs, in keeping with our academic honesty policy and the Wheaton Honor Code.
Part 1: Visualization Critique (25 points)
From: Newsweek,Special Inauguration Issue, Jan 26, 2009, pp. 54. Large PDF (1.3 MB)
Take a look at the visualization above, which has three distinct parts (migration, major metros, and urban sprawl), and write a visualization critique. Your analysis should address these questions for each of the three parts:
- Who is the intended audience?
- What tasks does it enable?
- List all the data types this visualization represents (quantitative, ordinal, nominal)
- How is each data type visually encoded?
- What design principles best describe why it is good / bad?
- 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.”)
- 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!).
Part 2: Visualization Redesign (25 points)
Select two of the three parts of the visualization in Part 1 and redesign them with principles of excellence in mind. These two redesigned visualizations should be linked in some way.You can use any tools available to you (i.e. Photoshop, pen and paper, markers, paint, PowerPoint, Keynote, Matlab, etc.) to generate your redesigns. You do not have to worry about getting all the quantitative information correct, and you may use “ ... “ to indicate more of the same. When choosing colors you may refer to the Color Brewer scales. These redesigns are for a color print publication such as Newsweek, and would be presented together.
In your write-up, include the redesigns as a digital image (again, you can digitize print versions using a scanner or digital camera), and a thorough explaination of your design process, data type and visual encoding decisions, and the perceptual and design principles you followed. Make a case as to why your redesign is better than the original.
Part 3: Interaction Design (25 points)
Now turn the visualization redesign of Part 2 into an interactive visualization using the simple interaction sketch technique described in class. You can use any part of your redesign in Part 2 by cutting and pasting it. Indicate interaction techniques using the terms introduced in class, such as brushing and linking, zooming, animated transitions, etc.
You can use any tools available to you (i.e. Photoshop, pen and paper, markers, paint, PowerPoint, Keynote, Matlab, etc.) to generate your redesign. As shown in class, it may be most effective to use slides to show interactions since you can refer to them by number (e.g., “if you click here then jump to slide 5”) and since you can add notes to each slide. Be creative -- there is no right or wrong way to sketch interactions! Your interaction sketch should be included in your write-up as either a series of annotated images, or, (preferably) as a series of slides, exported to pdf from PowerPoint or Keynote. For the latter option, include a link in your write-up to the pdf file.
In your interaction sketch, add a thorough explanation of your design process, decisions, and the interaction principles you followed. Make a case as to why your redesign is better than the original and why it is better than your static visualization in Part 2.
Part 4a: Data Types (10 points)
From the questionnaire in HW 0 we collected -- among others -- the following data items for all CS 171 students:
- What kind of computer(s) do you own?
- What operating system(s) do you run on your computer(s)?
- What is the resolution of your (primary) computer's monitor?
- How long have you been programming?
- How often do you write code?
- What is your primary programming language?
- What other languages do you know?
- What computer science courses have you already taken, if any?
- Overall, how comfortable are you with programming?
Look at the questionnaire for more details. For each of the following tasks, select the data items that are required to answer the question, and transform each data item into the appropriate data type (nominal, ordinal, or quantitative). You can refer to the data item by number, e.g., “a) 1 = nominal, 3 = ...”
- What is the relationship between operating system and numbers of years of programming experience?
- Do students who are more comfortable with programming have bigger monitors?
- What programming languages do experienced programmers use?
- How many students with less than a year programming experience took CS 50?
- Do students that write code often and that are comfortable with programming own a laptop?
Part 4b: Visual Encodings and Visualization Types (15 points)
For each task of Part 4a, choose an appropriate visualization type of the ones available in Many Eyes (e.g., “stacked graph”). Choose effective visual encodings for each data type you chose in Part 4. You may use the terminology used by Mackinlay (e.g., “1 nominal -> encode with hue and position”).
In your write-up, describe how the visual encodings are used in the visualization with words. You do not need to submit sketches, unless you feel it is easier to explain your choices that way.
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 midterm exam, create a folder named lastname_firstinitial_midterm 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 Midterm dropbox.
If we cannot access your work or links because these directions are not followed correctly, we will not grade your work.