From CS 294-10 Visualization Sp10

Jump to: navigation, search



Group Members

  • Boaz Avital
  • Akshay Kannan
  • Jeffrey Patzer


We propose to address a specific window management problem. The situation we wish to optimize is one where there are many windows containing related content, generally square, with the following properties: their contents may or may not have a specific ordering between them, they appear and disappear with no control from the user, there can be any number of windows visible at the same time, and all visible windows must be of uniform size. An example of a program where this situation could apply is a video conferencing application that only shows video of people who are actively speaking and hides the rest of the participants.

A solution to this problem would include an algorithm for efficient window placement and sizing, and a method for animating the windows such that the user can easily follow any specific window and understand the changes that are happening on the screen.

Initial Problem Presentation

Link to Slides

Slides: [1]

Title of Project

Effective Large-Scale Visualization of Dynamic Rectangular Fields

Problem & Motivation

Often, users need to monitor multiple dynamic streams of data all within a defined monitor space. Some examples:

  • Video surveillance streams from multiple sources
  • Chat conversations or videoconferencing with multiple participants
  • Incoming emails/fb posts/tweets?

Some traditional approaches include the following (citations?)

  • Displaying the fields in a tiled fashion, assigning equal/arbitrary sizes, different spaces
  • Forcing the user to context switch between the fields with tabs, dock, taskbar, etc

We introduce the following:

  • Algorithm for most effectively positioning multiple feeds in limited screen space
  • Dynamically resizing/hiding fields based on relevant importance
  • Heuristics to ascertain the importance of a given field based on change

This is good because:

  • Captivating experience for monitoring multiple data sources
    • Because fields are dynamically resized, the relative motion of fields will better attract user attention to points of interest (citation)
  • Improved ability to identify interesting trends.
    • Because more important fields are shown larger and in more detail, they allow users to more easily point out trends of interest and form useful information (citation?)


  • Demo
    • Demo of algorithm is here: [2]
    • Click the "+" on the bottom right to create a new field, and click on the +/- buttons in the field to change its importance.
  • Change-sensitive heuristic
    • Fields with more motion are more important
    • Fields are polled and importance score is recalculated at periodic intervals.
  • Fields are resized based on their importance
    • Higher importance -> larger size
    • Fields with lack of activity are collapsed and turned into icons with a timeout
  • Changes in field size are smoothed
    • Animated transitions will make change more apparent
    • Rather than an abrupt change in size, the smoothed transition will avoid distracting users tracking a given field.
    • We can do either a constant velocity or accelerated/decelerated animation.
  • Placement/positioning of fields
    • Use a tiling algorithm


We currently plan to implement the system in javascript. If this proves to be inadequate, then we will change the programming language to a more appropriate choice.

Future Work

  • Algorithm to determine important portions of a field, so more intelligent heuristics can be used to selectively occlude certain portions of a field with other fields and selectively allow overlap.
  • Grouping fields together based on similarity constraints.
  • Analysis of change in a feed (needs a certain % of change to be registered).

Related Work

Outline of Work & Deadlines until Midpoint Discussion

  • 4/9 - Finish background research and scope of implementation (All)
  • 4/16 - Storyboard of Interface (Jeff) & Basic Implementation (Boaz & Akshay)
  • 4/21 - More expanded prototype & implementation (All)

(This schedule is subject to change with changes of the project scope. )

Work Split of Implementation

  • Akshay - Designed and implemented windowing algorithm
  • Boaz - Implemented twitter firehose
  • Jeff - Combined the two systems to get dynamic windows

Final Deliverables

[add comment]
Personal tools