# Assignment 4: Creating Interactive Visualization Software

## Contents

### Assignment Due: March 8, 2010 (part 1 due March 1, 2010)

 ${\rightarrow}$

In this assignment, you will explore the issues involved in implementing interactive visualization software. You must choose the data domain as well as the techniques you wish to implement. For example, the cell phone finder application we saw in class applies the interactive technique of dynamic queries -- first explored in the HomeFinder application -- to the problem of choosing a cell phone. Similarly, treemaps were originally developed to display hierarchical file structure, and were recently adapted to the problem of interactively depicting a map of the stock market. We have seen many other examples of interactive visualization techniques in class and in the readings. The goal with this assignment is not only for you to gain hands-on experience implementing a visualization technique, but also for you to think about the effectiveness of the specific visualization techniques you re-implement in the context of the data domain you work with.

One challenge is to scope the assignment so that you can finish it by the March 8 due date. You can work by yourself or with a partner for this assignment. Groups of three or more are not allowed. Your group must write code for this assignment. You are free to write the code in any programming language/environment you prefer, including C++, Java, Flash, Ajax, etc. In addition you may use any software toolkit to help you build the code. I have listed a few possible toolkits later in this assignment description. However, I would like you to submit a final executable program that I can execute on my own on either a Mac Os X or a Windows XP machine. If this is a problem for you, please talk to me right away.

For this assignment you are responsible for the following:

• 1. Describe the data domain and storyboard interactive visualization techniques you will use (due March 1, 2010)
Start either by choosing a data domain or choosing the interactive visualization techniques you will implement. Think about why the domain and the techniques are a good match for one another. Then write a description of data domain and the interactive visualization application you will build. The description should include a storyboard of the interface/displays you will create. Be sure to explain the features of your application. Most importantly you should explain why the interaction techniques you will implement will be effective in the context of your data domain. The goal of this exercise is to think through the various concerns that go into the software implementation. This is why it is important that you perform this task first, before actually building the software. This description is due relatively soon, on March 1, 2010
• 2. Implement your design (due March 8, 2010)
Use the programming language and toolkit of your choice to implement your design. You may wish to spend some time looking into the various toolkits that are available. We have listed some of them at the end of this document. You are free to use any publicly available language and toolkit. However, I would like you to submit a final executable program that I can execute on my own on either a Mac OS X, or a Windows XP machine. If this is a problem for you, please talk to me right away.
• 3. Produce a final writeup (due March 8, 2010)
• The description with storyboards from part 1.
• A brief description of your final interactive visualization application.
• An explanation of changes between the storyboard and the final implementation.
• The bundled source code for your application, uploaded as a file (either a .zip or .tar.gz archive) linked to your assignment wiki page. Please ensure that the software submitted is in working order. If any special instructions are needed for building or running your software, please provide them.
• For submissions by groups of two, please also include a breakdown of how the work was split among the group members.
• Finally, please include a commentary on the development process, including answers to the following questions: Roughly how much time did you spend developing your application? What aspects took the most time?

Your assignment must be posted to the wiki before class on March 8, 2010, with part 1 (the initial description) posted on March 1, 2010.

# Resources

## Data Sets

I placed a list of data sets on the wiki for assignment 2. But, as in assignment 2, your best bet is to pick a data set or a domain that you are particularly interested in. Make sure to document where you get your data in your writeup of this assignment.

## Interactive Visualization Techniques

• The lecture on Interaction includes links to several interactive visualization applications. Think about adapting one of these techniques to your data set.
• We have read a lot of papers in class on interactive visualization techniques. If you are looking for more ideas check out the papers in the IEEE Visualization and IEEE Information Visualization conferences of the last few years.
• A bunch of examples are in our Visualization Gallery. The Collections and Commentary section at the end of the page may be particularly inspirational. But note that not all of these are interactive.

## Software Tools

A variety of useful toolkits have been designed to help support information visualization applications. Some include support for the full visualization pipeline from data to interactive graphics, while others focus only on a subset, typically graphics and interaction.

• Protovis - A Javascript API for creating visualizations developed by Mike Bostock and Jeff Heer. (Javascript)
• Flare - Flare is an ActionScript 3 version of Prefuse also developed by Jeff Heer. (ActionScript 3)
• Adobe Flex - This is where you can register for the educational version of Adobe Flex.
• Acquiring Flex - Step by step guide by Witton Chou to acquiring Flex
• Prefuse - The Prefuse information visualization toolkit, from Jeff Heer (Java)
• InfoVis Toolkit - The InfoVis Toolkit, from INRIA France (Java)
• Piccolo - The Piccolo user interface toolkit, from the University of Maryland (Java and .NET)
• Processing - A Java-like graphics and interaction language and IDE
• HTML/JavaScript/XML - use standard web technologies to build the visualization

In addition, you are free to use another library not presented here, including lower-level libraries such as OpenGL, Java2D, or GDI+. Just be sure to document your choice of tools and explain your decision.

A number of tools for creating visualizations without programming are also available (Tableau for example). While you are free to use them to explore your data set and try out design ideas, you must program the final application yourself. If you have any questions about the status of a given tool, please ask me.

# How to create your wiki page

Begin by creating a new wiki page for this assignment. The title of the page should be of the form:

A4-FirstnameLastname.

Replace Firstname and Lastname with your real first and last names. You can create the page by entering a url of the following form into your browser:

http://vis.berkeley.edu/courses/cs294-10-sp10/wiki/index.php/A4-FirstnameLastname

To upload images to the wiki, first create a link for the image of the form [[Image:image_name.jpg]] (replacing image_name.jpg with a unique image name for use by the server). This will create a link you can follow that will then allow you to upload the image. Alternatively, you can use the "Upload file" link in the toolbox to upload the image first, and then subsequently create a link to it on your wiki page.