Homework 2: Design Critique & Redesign
Due date: Thursday, February 18th at 11:59pm 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.
Grading
Part 1: The Good, the Bad, and the... (40%)
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:
Your critiques will be graded based on the thoroughness of your evaluation, and your understanding of the perceptual and design principles used (or, perhaps not used effectively!). Here is an example critique from the UC Berkeley visualization course by Maneesh Agrawala. You can also see some successful design critiques from last year's midterm exam here and here. Note that we ask you to specifically answer the questions above. Please also bear in mind that concision is a virtue. More words do not mean more points; instead, save yourself the extra work and explain using the technical language we've begun to acquire in this course.
Part 2: Turn That Frown Upside Down! (40%)
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. 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. Choose the medium that you are most comfortable with and that allows you to communicate your redesign efficiently and effectively.
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. Include the iterations in your writeup, as well.
Part 3: Oh hi there, Protovis. (20%)
Let's learn something new! Last week you walked through some basic Processing code. This week we're going to do the same, but with Protovis.
PRELIMINARY READING: Click here and read this page to understand at the most basic level how Protovis code is structured. The rest of the tutorial pages are also suggested. Make sure you understand each line in the sample code on the page linked to above.
To start, let's take a look at a scatterplot taken from the ExampleCharts page on the Protovis website. Once you are viewing the plot, click View > Page Source in your browser (or whatever you need to do in order to view the source code for a website in the browser of your choice). You'll note that there are several chunks of markup/code separated by indentation, each ending in a semicolon. We'll take a look at these one by one. Answer the questions that follow in your writeup:
Chunk 1:
<html>
<head>
<title>Scatterplot</title>
<script type="text/javascript" src="../protovis-d3.1.js"></script>
</head>
<body>
<script type="text/javascript+protovis">
According to the Getting Started page, what does it does this chunk of markup do?
Chunk 2:
var data = pv.range(100).map(Math.random),
w = 400,
h = 400,
x = pv.Scale.linear(0, 99).range(0, w),
y = pv.Scale.linear(0, 1).range(0, h),
c = pv.Scale.linear(0, 1).range("orange", "brown");
Here we're creating a bunch of Javascript variables. You can see in line 2 and 3 here, we seem to be defining a width and a height. We'll see those come into play later. First let's look at line 1. It may be helpful to read about Javascript arrays to understand exactly what is going on in this line. Given that range(100) generates an array of counting numbers up to 100 and that Math.random generates random numbers, what is being stored in data? Look up the .map function in the Javascript arrays page.
Chunk 3:
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.top(5)
.strokeStyle("#ccc");
Read the PvPanel page in the Protovis documentation and explain this chunk in English.
Chunk 4:
vis.add(pv.Rule)
.data(y.ticks())
.bottom(function(d) Math.round(y(d)) - .5)
.strokeStyle("#eee")
.anchor("left").add(pv.Label)
.text(function(d) d.toFixed(1));
Here we're adding a rule to the panel we just created. Given that, please explain this chunk in English.
Chunk 5:
vis.add(pv.Rule)
.data(x.ticks())
.visible(function(d) d > 0)
.left(function(d) Math.round(x(d)) - .5)
.strokeStyle("#eee")
.anchor("bottom").add(pv.Label)
.text(function(d) d.toFixed());
Please explain this chunk in English.
Chunk 6:
vis.add(pv.Dot)
.data(data)
.left(function() x(this.index))
.bottom(y)
.strokeStyle(c)
.fillStyle(function() this.strokeStyle().alpha(.2));
Read about dots and then please explain this chunk in English. Pay particular attention to the last line, for which this may be helpful to you.
Chunk 7:
vis.render();
Please explain this line in English. It may be helpful to read the description of render().
Hopefully this walkthrough was fairly painless. Next week, we'll get you in the game actually writing your own Protovis visualizations from scratch!
Extra Credit: Now do it in Processing!
For extra credit, take your redesign from Part 2 and implement it in Processing. Add at least one significant interactive element to the design -- perhaps a mouseover or animated transition. Go wild!
Export an applet (via File > Export) and embed it in your writeup. Also, briefly describe any challenges/successes you had in going from a paper or static redesign to a digitized, interactive final product.
Submission Instructions
Your homework write-ups 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_hw2 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) 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 18th at 11:59pm 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.
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 getting all 4s 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: The Good, the Bad, and the... (40%)
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:
- 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 design rules are followed / 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 perceptual and design principles used (or, perhaps not used effectively!). Here is an example critique from the UC Berkeley visualization course by Maneesh Agrawala. You can also see some successful design critiques from last year's midterm exam here and here. Note that we ask you to specifically answer the questions above. Please also bear in mind that concision is a virtue. More words do not mean more points; instead, save yourself the extra work and explain using the technical language we've begun to acquire in this course.
Part 2: Turn That Frown Upside Down! (40%)
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. 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. Choose the medium that you are most comfortable with and that allows you to communicate your redesign efficiently and effectively.
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. Include the iterations in your writeup, as well.
Part 3: Oh hi there, Protovis. (20%)
Let's learn something new! Last week you walked through some basic Processing code. This week we're going to do the same, but with Protovis.
PRELIMINARY READING: Click here and read this page to understand at the most basic level how Protovis code is structured. The rest of the tutorial pages are also suggested. Make sure you understand each line in the sample code on the page linked to above.
To start, let's take a look at a scatterplot taken from the ExampleCharts page on the Protovis website. Once you are viewing the plot, click View > Page Source in your browser (or whatever you need to do in order to view the source code for a website in the browser of your choice). You'll note that there are several chunks of markup/code separated by indentation, each ending in a semicolon. We'll take a look at these one by one. Answer the questions that follow in your writeup:
Chunk 1:
<html>
<head>
<title>Scatterplot</title>
<script type="text/javascript" src="../protovis-d3.1.js"></script>
</head>
<body>
<script type="text/javascript+protovis">
According to the Getting Started page, what does it does this chunk of markup do?
Chunk 2:
var data = pv.range(100).map(Math.random),
w = 400,
h = 400,
x = pv.Scale.linear(0, 99).range(0, w),
y = pv.Scale.linear(0, 1).range(0, h),
c = pv.Scale.linear(0, 1).range("orange", "brown");
Here we're creating a bunch of Javascript variables. You can see in line 2 and 3 here, we seem to be defining a width and a height. We'll see those come into play later. First let's look at line 1. It may be helpful to read about Javascript arrays to understand exactly what is going on in this line. Given that range(100) generates an array of counting numbers up to 100 and that Math.random generates random numbers, what is being stored in data? Look up the .map function in the Javascript arrays page.
Chunk 3:
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.top(5)
.strokeStyle("#ccc");
Read the PvPanel page in the Protovis documentation and explain this chunk in English.
Chunk 4:
vis.add(pv.Rule)
.data(y.ticks())
.bottom(function(d) Math.round(y(d)) - .5)
.strokeStyle("#eee")
.anchor("left").add(pv.Label)
.text(function(d) d.toFixed(1));
Here we're adding a rule to the panel we just created. Given that, please explain this chunk in English.
Chunk 5:
vis.add(pv.Rule)
.data(x.ticks())
.visible(function(d) d > 0)
.left(function(d) Math.round(x(d)) - .5)
.strokeStyle("#eee")
.anchor("bottom").add(pv.Label)
.text(function(d) d.toFixed());
Please explain this chunk in English.
Chunk 6:
vis.add(pv.Dot)
.data(data)
.left(function() x(this.index))
.bottom(y)
.strokeStyle(c)
.fillStyle(function() this.strokeStyle().alpha(.2));
Read about dots and then please explain this chunk in English. Pay particular attention to the last line, for which this may be helpful to you.
Chunk 7:
vis.render();
Please explain this line in English. It may be helpful to read the description of render().
Hopefully this walkthrough was fairly painless. Next week, we'll get you in the game actually writing your own Protovis visualizations from scratch!
Extra Credit: Now do it in Processing!
For extra credit, take your redesign from Part 2 and implement it in Processing. Add at least one significant interactive element to the design -- perhaps a mouseover or animated transition. Go wild!
Export an applet (via File > Export) and embed it in your writeup. Also, briefly describe any challenges/successes you had in going from a paper or static redesign to a digitized, interactive final product.
Submission Instructions
Your homework write-ups 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_hw2 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) 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.