Homework 4.1: The Shneiderman Mantra - Revised
Due date: Thursday, March 4th at 11:59pm EST
By now we've discussed design principles, the visualization process, acquiring data, perceptual principles, colors, and interaction. This week, we'll pay particular attention to The Shneiderman Mantra: "Overview first, zoom and filter, details on demand." It's as close as we've got to a central dogma, so keep it in mind as you work through this week's open-ended problem set.
Grading
Part 1: What do you care about? (20%)
Think about a domain that interests you and tell briefly us in your writeup why you chose it. (1-2 sentences, preferably bulleted)
Now identify at least 5 questions within that domain and list them via bullet points in your writeup. Choose one of the questions and note your choice.
Now head out into the Information Superhighway and hunt down some data! You may find the Resources page on the cs171 site useful; the Stanford graphics department has some links to some good online databases; you can try this site; or Google the heck out of your domain to find the relevant stuff! This may also be useful. You may need to do these past few steps a couple of times to settle on a question/domain that both interests you and has good data relatively available. Be sure to cite your data sources in your writeup! A link to the website and single sentence will do. Please also include in your writeup a link to your actual data file so that the grading TF can simply slick on it to open your my_data.tsv file (or whatever you decide to call it).
Note that it will be easiest to use your data in a CSV (comma-separated values) or TSV (tab-separated values) format. You can use Excel/OpenOffice/a handy Python script to run through data files and change them into the format of your choice.
Part 2: Designing an Interaction (40%)
Now that you have a question and some data, storyboard a visualization on paper, in Keynote/Powerpoint, or in the visual format of your choice. As you design this visualization, pay particular attention to the Shneiderman Mantra: overview, zoom and filter, details on demand. As an example, suppose we wanted to answer the question, "Do more population-dense states have more crime?" We might first present an overview -- a scatterplot charting population density against crime rates. Then we might filter by having a key where the user can select which regions (New England, Mid-Atlantic, South, etc.) to display, with the scales readjusting to the data being displayed and the data points sliding to their new positions on the scale. And finally we might provide details on demand by popping up the state name, population density, and crime rate data when the mouse hovers over a specific dot. That's just an example; apply the mantra to your own domain, question, and data in whatever way is appropriate! Include your plan/storyboard for this in your writeup and briefly explain your plan. See part three in here or here for example storyboards. Yours definitely need not be quite so polished.
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, inlcude a link in your write-up to the pdf file. Once again, your storyboard need not be perfect, and while you should spend sufficient time planning before you start programming, do not waste time making your plan immaculate and beautiful. Be efficient and thoughtful!
Part 3: From paper to Processing! (40%)
Using Processing, bring your sketch to life! Please take your redesign from Part 2 and implement it using Processing. Remember, the focus of this assignment is applying the overview - zoom+filter - details on demand mantra, so make sure your final design reflects this. If time is an issue for you, you need not implement your full interaction as designed in part 2. You may implement just overview + filtering or overview + details on demand. Going back to the example given in part 2, this might mean building a scatterplot with the filtering system described above, or a scatterplot which pops up details when the user mouses over a dot. In your writeup, explain whether you chose zooming/filtering or details on demand and why. In an ideal situation, your visualization would feature both, but we do not intend to overwhelm you with this assignment. As you begin to think about implementing interaction, referring again to the Milk-Tea-Coffee sketch from HW 1 may be helpful. In addition, the Processing docs are great -- you'll find the "Input" section particularly useful.
If you would like to use a medium other than Processing, feel free to do so as always. Processing, however, is the only tool the course staff will support for this problem set. In any case, your final product must be easily runnable and linked/embedded in your writeup. Make sure to include any special instructions necessary for building and running your submission.
Export your sketch as an applet, and include the applet in your write-up. If you are having serious issues embedding the applet, at the very least link to the .jar file from the 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. How long did you spend in development? What was the most time-consuming or difficult part? Also discuss changes you made between your design and your implementation. Remember, concision is a virtue!
Extra Credit: Now do it in Protovis.
Take your sketch from Part 3 and choose one view -- perhaps the overview -- to implement in Protovis. This part need not be interactive, as we've had less experience with Protovis thus far. This may require thinking about the construction of your visualization slightly differently, since Processing is iterative and Protovis is declarative.
In addition to closely examining the example charts that came with your Protovis download, the more complex examples here should prove helpful as you tinker with Protovis. You should read through the initial Protovis paper, as well. Step one should be getting your data into the appropriate form so that you can store it a Javascript variable in a .js file, which you can then access in your visualization by sucking in the .js file. See the line <script type="text/javascript" src="crimea.js"> in the Nightingale's Rose viz, for instance. Then you'll want to decide what marks you'll need and start breaking the design down into its composite elements.
Embed your Protovis visualization in your writeup. You'll need to make sure that the Protovis files are in the proper places so that your image works. In your writeup, concisely tell us what the most difficult part of implementing your viz in Protovis was. Also address the differences in working in Processing and Protovis.
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.
A SPECIAL NOTE FOR SUBMISSIONS FROM HERE ON OUT: Please be certain to use .zip compression and to name your writeup "writeup.html." This is absolutely essential.
To submit your homework, create a folder named lastname_firstinitial_hw4 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! Also include any code you've written (for example, Processing sketches, etc.). 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. These instructions can also be found here.
Due date: Thursday, March 4th at 11:59pm EST
By now we've discussed design principles, the visualization process, acquiring data, perceptual principles, colors, and interaction. This week, we'll pay particular attention to The Shneiderman Mantra: "Overview first, zoom and filter, details on demand." It's as close as we've got to a central dogma, so keep it in mind as you work through this week's open-ended problem set.
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. Please note the addition to the submission instructions at the end of this document. If your submission is not done properly, it will delay and lower your grade.
Part 1: What do you care about? (20%)
Think about a domain that interests you and tell briefly us in your writeup why you chose it. (1-2 sentences, preferably bulleted)
Now identify at least 5 questions within that domain and list them via bullet points in your writeup. Choose one of the questions and note your choice.
Now head out into the Information Superhighway and hunt down some data! You may find the Resources page on the cs171 site useful; the Stanford graphics department has some links to some good online databases; you can try this site; or Google the heck out of your domain to find the relevant stuff! This may also be useful. You may need to do these past few steps a couple of times to settle on a question/domain that both interests you and has good data relatively available. Be sure to cite your data sources in your writeup! A link to the website and single sentence will do. Please also include in your writeup a link to your actual data file so that the grading TF can simply slick on it to open your my_data.tsv file (or whatever you decide to call it).
Note that it will be easiest to use your data in a CSV (comma-separated values) or TSV (tab-separated values) format. You can use Excel/OpenOffice/a handy Python script to run through data files and change them into the format of your choice.
Part 2: Designing an Interaction (40%)
Now that you have a question and some data, storyboard a visualization on paper, in Keynote/Powerpoint, or in the visual format of your choice. As you design this visualization, pay particular attention to the Shneiderman Mantra: overview, zoom and filter, details on demand. As an example, suppose we wanted to answer the question, "Do more population-dense states have more crime?" We might first present an overview -- a scatterplot charting population density against crime rates. Then we might filter by having a key where the user can select which regions (New England, Mid-Atlantic, South, etc.) to display, with the scales readjusting to the data being displayed and the data points sliding to their new positions on the scale. And finally we might provide details on demand by popping up the state name, population density, and crime rate data when the mouse hovers over a specific dot. That's just an example; apply the mantra to your own domain, question, and data in whatever way is appropriate! Include your plan/storyboard for this in your writeup and briefly explain your plan. See part three in here or here for example storyboards. Yours definitely need not be quite so polished.
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, inlcude a link in your write-up to the pdf file. Once again, your storyboard need not be perfect, and while you should spend sufficient time planning before you start programming, do not waste time making your plan immaculate and beautiful. Be efficient and thoughtful!
Part 3: From paper to Processing! (40%)
Using Processing, bring your sketch to life! Please take your redesign from Part 2 and implement it using Processing. Remember, the focus of this assignment is applying the overview - zoom+filter - details on demand mantra, so make sure your final design reflects this. If time is an issue for you, you need not implement your full interaction as designed in part 2. You may implement just overview + filtering or overview + details on demand. Going back to the example given in part 2, this might mean building a scatterplot with the filtering system described above, or a scatterplot which pops up details when the user mouses over a dot. In your writeup, explain whether you chose zooming/filtering or details on demand and why. In an ideal situation, your visualization would feature both, but we do not intend to overwhelm you with this assignment. As you begin to think about implementing interaction, referring again to the Milk-Tea-Coffee sketch from HW 1 may be helpful. In addition, the Processing docs are great -- you'll find the "Input" section particularly useful.
If you would like to use a medium other than Processing, feel free to do so as always. Processing, however, is the only tool the course staff will support for this problem set. In any case, your final product must be easily runnable and linked/embedded in your writeup. Make sure to include any special instructions necessary for building and running your submission.
Export your sketch as an applet, and include the applet in your write-up. If you are having serious issues embedding the applet, at the very least link to the .jar file from the 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. How long did you spend in development? What was the most time-consuming or difficult part? Also discuss changes you made between your design and your implementation. Remember, concision is a virtue!
Extra Credit: Now do it in Protovis.
Take your sketch from Part 3 and choose one view -- perhaps the overview -- to implement in Protovis. This part need not be interactive, as we've had less experience with Protovis thus far. This may require thinking about the construction of your visualization slightly differently, since Processing is iterative and Protovis is declarative.
In addition to closely examining the example charts that came with your Protovis download, the more complex examples here should prove helpful as you tinker with Protovis. You should read through the initial Protovis paper, as well. Step one should be getting your data into the appropriate form so that you can store it a Javascript variable in a .js file, which you can then access in your visualization by sucking in the .js file. See the line <script type="text/javascript" src="crimea.js"> in the Nightingale's Rose viz, for instance. Then you'll want to decide what marks you'll need and start breaking the design down into its composite elements.
Embed your Protovis visualization in your writeup. You'll need to make sure that the Protovis files are in the proper places so that your image works. In your writeup, concisely tell us what the most difficult part of implementing your viz in Protovis was. Also address the differences in working in Processing and Protovis.
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.
A SPECIAL NOTE FOR SUBMISSIONS FROM HERE ON OUT: Please be certain to use .zip compression and to name your writeup "writeup.html." This is absolutely essential.
To submit your homework, create a folder named lastname_firstinitial_hw4 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! Also include any code you've written (for example, Processing sketches, etc.). 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. These instructions can also be found here.