A4-MasonSmith

From CS 294-10 Visualization Sp10

Jump to: navigation, search

Contents

Part 1

Technique

I really like the timebox concept, but I'm interested in allowing the user to perform more complicated queries in an intuitive manner. So, I'd like to construct an interface that allows a visual construction of advanced queries.

Image:masonsmith_mockup1.png

In this first example, we allow OR queries with separate boxes. The boxes are color coded, so they can be easily matched to the query construction interface on the right-hand side.

Image:masonsmith_mockup2.png

Here, the user has added an additional conditioned, that will be AND-ed with the previous set. The interface arranges AND conditions from top to bottom and OR conditions from left to right, making the parallel nature of OR more intuitive.

Domain

This interface will be useful for any time-series data, particularly for a large number of plots. I will probably use stock data.

Tools

I plan to use protovis + jQuery (+ Raphael.js), assuming reasonably performance. Otherwise, I'll fall back to Flare.

Part 2

Demonstration

The final product is available here. You can download the source here. Most of the functionality is contained in linequery.js.

Differences from the Storyboard

Unfortunately, due to my limited CSS skills, I couldn't make the interface quite as intuitive as the one in the storyboard. Instead, I use boxes to surround groups of timeboxes. The boxes are labeled `ALL OF` and `ANY OF` to represent the `AND` and `OR` cases respectively. They also switch between dotted and solid borders, to further illustrate the difference.

The stock data I was planning to use was too flat to fully demonstrate the utility of my interface, so I decided to use randomly generated data instead.

Implementation

I implemented the project as planned using Protovis + JQuery UI. I'm actually relatively inexperienced with JS, relatively languages I use more regularly, so I spent more time than I would've like wrestling with the language itself.

Overall, I spent roughly 12 hours from start to finish.



[add comment]
Personal tools