Assignment 3: Creating Interactive Visualization Software

From cs448b-fa16-wiki
Jump to: navigation, search

Assignment Due: October 31, 2016 before class


TimeSearcher.png


In this assignment, you will explore the issues involved in implementing interactive visualization software. Specifically we would like you to implement the interactive technique of dynamic queries in the style of the TimeSearcher application discussed in class. We have collected weekly stock closing prices of S&P 500 companies over the past year (from Bloomberg). Here is an image showing the data table format:


DataTable.png


Click here to download the data in CSV format.

Your goal is to show the stock trendlines provided in the data and to provide the following dynamic query functionality:

  • You must allow users to specify multiple timebox queries which filter the stock trendlines to the lines that pass through the timebox.
  • The timeboxes should be both draggable and resizable.
  • Users should be able to remove timeboxes.
  • Keep in mind that the data should be filtered in real-time.

More details about timebox queries can be found in this paper.

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 Javascript, C++, Java, etc. In addition you may use any software toolkit to help you build the code. We strongly recommend using Javascript and D3 for this assignment but I have listed a few other possible toolkits later in this assignment description. No matter what language/libraries you use we would like you to submit a final executable program that we can execute on our own on either a Mac Os X or a Windows machine. If this is a problem for you, please talk to us right away.

Deliverables

  • 1. Design and implement your design of TimeSearcher.
    Use the programming language and toolkit of your choice to implement your design (though we strongly recommend using Javascript and D3). 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, we would like you to submit a final executable program that we can execute on our own on either a Mac OS X, or a Windows machine. If this is a problem for you, please talk to us right away.
  • 2. Produce a final writeup.
    Your final submission should include:
    • A brief description of your final interactive visualization application.
    • The bundled source code for your application, uploaded as a webpage or 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 October 31, 2016.

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.

  • D3 - A Javascript library for creating visualizations. It is currently the most widely used library for creating visualizations on the web. (Javascript).
  • Protovis - A Javascript library for creating visualizations that was the precursor to D3. It offers a higher-level API but is less efficient and flexible than D3 (Javascript).
  • 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 WebGL, 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.

FAQ

How to respond to DOM events e.g. clicks?

Similar to jQuery, you can add event listeners in D3, using selection.on. For example, to listen to click events on circles and print out the associated data object:

d3.selectAll('circle')
  .on('click', function(d) { console.log(d); });

You can do this on any DOM element, including non-SVG elements.

My data is undefined

You are most likely trying to use your data before it is ready/loaded. In JavaScript, HTTP requests are handled asynchronously. When you call d3.csv, the browser starts to request that CSV resource, and it immediately continues to execute the following code:

d3.csv(url, function(error, data) {
  // This function gets called when the request is resolved (either failed or succeeded)

  if (error) {
    // Handle error if there is any
    return console.warn(error);
  }

  // If there is no error, then data is actually ready to use
  visualize(data);
});

// This code is going to run before data is loaded, and you cannot use the data here
nonDataRelatedStuff();

Add a link to your finished reports here

One you are finished editing the page, add a link to it here with full name as the link text. The wiki syntax will look like this: *[[A3-FirstnameLastname|Firstname Lastname]]. Hit the edit button for this section to see how I created the link for my name.