Project Overview
When initiating this project, our fundamental goal was to allow a user to dynamically analyze his or her Gmail inbox using an intuitive interface. Specifically, we wanted to enable the user to obtain a clear picture of his or her email interactions with a certain query over time. The time-based trends of a certain query in a user’s email inbox are obviously complex in the sense that they have many distinct components: seasonality of email threads, keywords in subject lines and message snippets, timestamps, number of email messages in a thread, and more. In other words, the direct questions which we tried to answer were the following:
- How do interactions between two people change over time? Is there any correlation between time and message content or frequency?
- What is the trend in a keyword in these interactions over time?
- How does message size (the number of messages in a thread) depend on keyword and time?
Visualization Approach
The time series is made up of daily data points arranged in a line graph format, which has time (by day) on the x-axis and number of emails on that day on the y-axis. You can highlight individual data points to see a popup with information about the date. The date range shown can be adjusted using the slider. The slider interface allows the user an intuitive interface to drill down by date. This filtering method consists of two knobs on a slider, which you can use to filter each part of the visualization. Upon selecting a new time period, the top time series animates to reflect the previously active viewís new place in the updated timeseries, then show the added points at the conclusion of this tween. The bottom threads also update to reflect the current time period. Aside from the knobs, the slider accepts mouse clicks on the left and right arrows to allow you a more granular selection of dates than is available with a rough mouse drag.
The linear thread viewer at the bottom is a visual adaptation of the emails in the time period, with each individual thread visible. Instead of the previous approach, which grouped threads by day, this portion of the visualization does not perform any grouping. Rather, it is possible to view the individual threads in a linear pattern. A linear encoding mechanism was chosen so that it is possible to see the progression over time, while still allowing for a view of what will sometimes be thousands of threads. To encode the number of messages in a thread, an ordinal approach was used, with the maximum size chosen so as to not cause overlap between the threads in the scatter field. When a point in the field is highlighted, more information appears below the linear visualization. This information contains subject, snippet, and time, allowing you to learn more about the email. The active email in the scatter is highlighted with another hue, letting you immediately identify it in the field. The legend also visually links similar-sized threads in the current viewing window.
Overall, we created a visualization that was simple and intuitive to use. We also made an effort to make our theme consistent with Google's (since, after all, it visualizes a GMail inbox). This visualization lends itself to many levels of detail -- the time series shows an overall sketch of the e-mail interactions, while the thread viewer shows the e-mails individually. Hovering over data points and thread circles will also reveal further information. The two parts of the visualization are linked together with the grey arrow, and this use of linking, brushing, and highlighting is an integral part of the visualization.
Screenshots/Applets
You will first enter your Gmail account and password information, along with a query (e.g. ìfrom: Yuhki Yamashitaî or ìvisualizationî) whose search results will be visualized. If the search result is retrieved properly, you will be given a link to the visualization of these messages.
The time series initially shows all of threads over the range of dates of the messages returned by the query, and this range can be decreased by dragging the handles of the sliders at the top of the visualization. (Finer control of this range can be achieved by clicking on the left and right arrows that surround the start and end dates of the timeline.)
Hovering over the time series will show the total number of threads in that particular day. Note that you will begin to see individual points in the graph when you are zoomed in enough.
The bottom half of the visualization shows the individual threads of the given time period as circles whose size reflect the size of the thread. (To be more precise, it shows a portion of these threads at a time in a smaller window.) The darkened circle indicates the thread whose details are currently displayed, and there is a corresponding grey arrow pointing at the date of the message in the time series. This window (and the circle that is darkened) can be moved back and forth using the slider and left/right arrows in a similar fashion to the slider discussed above. Hovering over the circles will also display of the details of the corresponding message. (One can also hover over the circles in the legend for linking and brushing effects with similarly sized threads.)
Downloads
Live version of the appletStatic version of the applet with source code