current page

history

user

Creating Interactive Visualization Software

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 zipdecode and NameVoyager applications we saw in class apply the interactive technique of dynamic queries -- first explored in the HomeFinder application -- to the problem of uncovering patterns in zip codes and baby names. Similarly, treemaps were originally developed to display hierarchical file structure, and were later 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 October 28 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, JavaScript, etc. In addition you may use any software toolkit to help you build the code. We have listed a few possible toolkits later in this assignment description. However, we would like you to submit either a final executable program that we can execute on either a Mac OS X or Windows XP machine, or better yet, a link to an online web-enabled visualization. If this is a problem for you, please talk to the course staff right away.

Deliverables

For this assignment you are responsible for the following:

  • 1. Describe the data domain and storyboard the interaction techniques you will use. 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 the 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.

  • 2. Implement your design. 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. Again, we would like you to submit either a final executable program that we can execute on a MacOS X or Windows XP machine, or better yet, a link to an online web-enabled visualization. If this is a problem for you, please talk to the course staff right away.

  • 3. Produce a final writeup. Your final submission should include:

    • 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?

Data Sets

We placed a list of data sets on the wiki. However, your best bet is to pick a data set or 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.

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.

  • HTML/JavaScript/XML - use standard web technologies to build the visualization. You may use libraries such as scriptaculous, dojo, and the Google Maps API to help build your visualization.

  • Protovis - Protovis is a JavaScript toolkit for creating browser-based visualizations. (JavaScript)

  • Flare - Flare is an ActionScript 3 library for creating visualizations for the Adobe Flash Player. (ActionScript 3)

  • Adobe Flex - Flex is an interface library and IDE (Flash Builder 4) for creating internet applications for the Adobe Flash Player. Flex Charting is an included library providing basic data visualization components. Adobe provides a free educational license for Flash Builder.

  • Processing / Processing.js - A popular Java-like graphics and interaction language and IDE. Processing has a strong user community with many examples.

  • Prefuse - The Prefuse information visualization toolkit (Java)

  • InfoVis Toolkit - The InfoVis Toolkit, from INRIA France (Java)

  • Piccolo - The Piccolo zoomable user interface toolkit, from the University of Maryland (Java and .NET)

In addition, you are free to use another library not presented here, including lower-level graphics 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 (for example, Spotfire and Tableau). 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 the course staff.

Debugging

For those using Protovis, I've found using the $.toJSON(jsonobject) very useful in debugging JSON objects on the browser. Use it in conjunction with jQuery! It's a killer combination with Firebug.

Submission Details

You may work individually or in pairs for this assignment. You may not work in groups larger than 2 people. Your completed assignment is due on Thursday Oct 28, by end of day (11:59pm).

To submit your assignment, create a new wiki page with a title of the form:

A3-LastnameFirstname

You should also create a link to your submission in the list below.

Add a link to your finished assignment here