From CS 294-10 Visualization Sp10

Jump to: navigation, search

Assignment 4 – Creating Interactive Visualization Software

1. Data Domain and Storyboard of Interactive Storyboard Techniques

In this assignment I will build from my previous work on visualization of information on the activities of Congress. In the static visualization, I presented the aggregate count of action by type (i.e. introduced in House, introduced in Senate, passed in House, etc. ) as a running total plotted for each day Congress is in session.

The primary functions I wish to enable are:

1.Explore specific activity for a given day

2.Highlight activity regarding one bill, or a subset of bills

3.Highlight regions in the chart and connections to their associated legislative stage keys

4.Generate a list of bills from one Senator/Representative or a subset of Senator/Representatives

5.Generate a list of Senators/Representatives from a list of bills.

6.Filter by stage in the legislative process

7.Filter by committee

8.Select a list of bills by stage in the legislative process and date window

9.Search by text in title

10. Search by text in sponsor name

The interactive techniques I plan to add to enable these functions are:

1.Semantic Zoom

Zooming in on a particular region in the chart will have a specific semantic meaning. That meaning is to show, in more detail, the component activities that made up the aggregate represented by the count plotted on the y axis.

Under normal circumstances (screen size, resolution, etc) there is insufficient space along the x axis to show per day activities. However, when zoomed to a sufficient degree, there will be enough space to show activities per day. In order to show components of the aggregate, only one day need be in the zoomed viewport. In order to show transitions from one day to the next, and therefore the actions taken, at least two days must be highlighted.

2.Multiple Linked Views

In addition to the chart visualization of the data, table views will be added to allow selections of bills, billActions, Senators/Representatives, and Committees. These tables will be representations of the same data that is shown in the chart and will therefore be part of the brushing and filtering interactions.

The tables will allow for the highlighting in function 2.

Additional tables will be added as follows:

Legislative Stage Table: to enable highlighting in function 3 (in addition to mouse over features)

Currently Selected Bills: to enable list functions 4 and 5 in conjunction with the other tables, and to allow query outputs to be used as query inputs

Filter functions 6 and 7 will also be enabled by these tables


Highlighting regions on the x axis in the chart will, in conjunction with radio buttons to determine mode, allow for brushing in the following manner

Introduced – show bills that have been introduced in this range to be shown in the brush selection table, along with any subsequent actions

Action Taken - show all bills that had any actions taken in this window

Active Bills – show all bills that were alive in this window, even if introduced earlier and no subsequent action taken

This function in conjunction with the legislative stage filter table will allow for function 8.

4.Dynamic Query

Each table will have the ability to apply a filter on any field and have the results immediately propagated through the corresponding views. This will allow for search functions 9 and 10, as well as other search functions

Here is a storyboard of what I have in mind: File:Zw_assignment_4.JPG

Final Writeup

Brief Description of Final Interactive Visualization:

The final visualization is basically the storyboard, except that the tables are not laid over the chart and are instead given their own realestate on screen. I also didn't make as much progress with brushing as I had originally hoped.

The final visualization has 4 major components to it:

1) Generator Window

This is where the interaction begins. The user must choose a session of congress and a chamber from the drop down boxes and then hit the "Generate" button to generate the visualization. This will cause a new row to appear in the generator window, a new tab in the categories window, a new tab in the top window, and a new chart in the chart tab of the top window. Toggling the "added" button on a given row will cause that view's chart to become visible or invisible in the charts tab.

2) Categories Window

The categories window will contain one tab for each view generated by the generator window. Each tab has a table of categories of congressional action that were taken and the count of the number of times they were taken. By right clicking on a row the user can cause all bills that were counted in that category to be highlighted in the chart. Another set of actions available by right clicking is the selection of all bills that were counted in that category to be selected in the Generated Bill Window in the top tab. The user can then right click on those rows to perform other functions, such as highlighting or creating a group.

3) Groups Window

Groups can be created by selecting a set of bills from the top window, right clicking and choosing "create group". The user will be prompted for a name for the group. This action creates a separate tab with only the selected bills in it.

4) Top Window

The top window contains 2 tabs by default, and 1 additional tab for each view created. The two default tabs are the chart tab and the "all bills" tab. The additional tabs hold the bills that represent the subset included in a generated view. (i.e. house bills from the 110th session of congress, or senate bills from the 111th, etc)

4.1) Charts Window

Each view that is created will have its own chart in the chart window. Whether that chart is visible is determined by the "added" checkbox in the generator window. Multiple charts can be show at the same time to create a small multiples effect, useful for comparisons. The ordering of the charts is changed by the order in which they are "added" by the button in the generator window, but fixed to one or two charts per row. Each chart has extensive panning and zooming capabilities. The wheel mouse can be used to zoom in and out, as can holding the left mouse button down over the start of the desired zoom window, dragging and releasing the button when the mouse is over the end of the desired zoom window. Right clicking on the chart allows for zooming out. Panning left and right can be achieved by holding down the shift key, and the left mouse button, and dragging the mouse left or right.

4.2) All Bills Window

The all bills window is a list of all available bills for view generation.

4.3-n) Generated Bill Windows

The Generated bill windows contain lists of the subset of all bills represented in the given view. Right clicking on the bills allows for highlighting them in the chart view, removing highlights, and creating groups.


Aside from the layout of tables in their own space, the final visualization very closely tracks the storyboard. Dynamic filtering, though available in the code, was not in the end exposed to the user, with a preference for the generator interface instead. This was done to minimize confusion, and give a natural starting point to the visualization.

Source Code:

Source code requests can be sent to: zev d0t winkelman at gmail.com

Development Process:

I've been working on this since it was assigned. The last 20% of cleaning it up and making it (semi)usable for someone who didn't write the code (i.e. me) took most of the time.

[add comment]
Personal tools