CIS 497 Senior Capstone Design Project Project Proposal Specification Instructors: Norman I. Badler, Michael L.

Rivera, Eric S. Lee

3D Timeline Visualization of Social Media Data

Samantha Swee Merritt
Advisor: Norman Badler University of Pennsylvania

ABSTRACT Timeline visualizations, which are useful for many applications from stories to social media, are designed to coherently organize and draw connections between inherently chronological datasets. However, the multidimensional nature of modern social-media timelines that incorporates everything from feeds such as on Facebook or Twitter to media such as photographs and videos creates a problem with using the traditional timeline model. In this paper, I discuss a method to creating a three-dimensional timeline visualization that addresses the different issues inherent in visualizing large, complex, and inherently chronological datasets. The approach creates a model that shows how a users timeline connects to that of their friends, and allows for exploration as well as clarifying temporal patterns in the social media interactions. User research and case studies are conducted to demonstrate the ease of use, and the effectiveness of the application in showing connections over time. Project Blog: http://takingalittlepoeticlicense.blogspot.com/ GitHub Repository: https://github.com/ManthaSwee/SeniorDesignTimeline/

1. INTRODUCTION In this project, I am looking to explore different ways of using a three-dimensional environment to design a visualization that effectively communicates the intricate connections that people have formed on Facebook. The core problem that I am tackling is how to take a massive quantity of information (all of a Facebook users interaction data) and organize it in a coherent and easily understandable visual model. The final product should allow a user to draw quick conclusions about their Facebook history, as well as draw more subtle conclusions through features of the application that allow them to isolate various components of their information. As social media becomes more pervasive, and people invest more time in using the Internet to communicate with each other, they generate a massive quantity of data. As Facebook is structured as a timeline, tracking all major life changes a user has, it makes sense that there must be a way to sensibly organize and visualize this information such it can be seen and conclusions drawn about the information in a single look. There have been recent studies done where researchers have looked into how to make easily readable, visually appealing, useful timeline visualizations. However, the vast majority of this work has been done in two dimensions and by visualizing a timeline in three dimensions, we can explore how to make multi-dimensional data more easily visually communicable. I propose to address this problem by creating a three dimensional application that uses either real or mock Facebook data to create a visual model of a users timeline. Through this application, I will be able to design and create a system that will allow a user to utilize a three dimensional space to more clearly understand and see patterns in their timeline data, as well as explore methods of multidimensional data visualization. By creating this application, three-dimensional methods of visualizing timelines will

become a part of the conversation surrounding timeline visualization, and this project may also be able to contribute to the conversation surrounding multi-variable data visualization. This project makes the following contributions: Contributes to the discussion surrounding timeline visualization Explores the benefits of tracking timeline information in three dimensional environment Offers a method for visualizing the massive amount of information generated through Facebook interactions 1.1 Design Goals This project is meant to appeal to three parties: Facebook users, people interested in human-computer interaction and UI design, and researchers who are either studying methods of timeline visualization or multi-dimensional data visualization. By creating something that provides a unique and personal experience for each person, that is at the intersection of many fields interested in different components of information visualization, this project allows for each person to use the application for entertainment as well as to educate themselves about their social media habits. 1.2 Projects Proposed Features and Functionality For my project I will implement the following features: - Core Functionality: three dimensionally model Facebook timeline and interaction data around a users core timeline - Bundling : allow the user to select two users to be core lines. - Selectivity : allowing the user to select the type of interactions that will create connections, as well as view selected friends timelines in isolation from the rest of the network.

CIS 497/EAS499 Senior Design Project

N. I. Badler, M. L. Rivera, E. S. Lee - CIS 497/EAS499

2. RELATED WORK In this section, our research into related work and discussion of the contribution this project has for the field will focus on two main factors: previous research and discussion of the importance of timeline visualization-specifically to the field of information visualization--and implemented/designed examples of timelines, both interactive applications as well as static images that preceded this project. 2.1 Previous Research on Timeline Visualization The field of timeline visualization, at this point in time, has dedicated much effort to designing aesthetically pleasing and legible two-dimensional visualizations through algorithms. The StoryFlow: Tracking the Evolution of Stories (inspiration for this project) project in December 2013 IEEE journal, discusses the issues with timelines having too much space in the timeline, too many wiggly lines, and too much visual inconsistancy. Their solution involved algorithms that compressed the wiggle room and optimized for more visual consistancy using hierarchial decision-making algorithms about spacing [LWW*13]. This paper drew on more core concepts from a 1988 paper on creating generated, readable graphs that discussed the issues surrounding spacing, layout and diagram design using generation methods as opposed to manual design. Their discussion was based on the idea that in many fields of computer science, models representing reality are needed, and are often needed based on much different iteration of data, making it unproductive to draw by hand. The paper emphasises the importance of readability (defined as, if its meaning is easily captured by the way it is drawn, a theory that is core to this project and information visualization in general) and the nature of using automatic tools to achieve readability [TBB88]. A 2012 paper entitled Design Considerations for Optimizing Storyline Visualizations discusses the issues of portraying the temporal dynamics of social interactions in a single image plane, and the nature of using graphs to depict relatonships between entities in social networks. They specifically focus on the issues, limitations, and possible solutions for doing this in two dimensions [TM12]. A project that involved visualizing timelines that involve information hierarchies, and proposes possible solutions for visualizing information that is naturally hierarchial and occurs over a period of time (similar to Facebooks system of posting, liking, and commenting) and discusses some of the considerations of visualizing hierarchial data [BBD08]. In A Visual Interface for Multivariate Temporal Data: Finding Patterns of Events across Multiple Histories the authors define the term temporal pattern to mean a sequence of point events seperated by timespans; this is integral to consider in this project, as we are dealing with temporal patterns in the form of Facebook timelines which exemplify the definition of a temporal pattern. The paper created a two dimensional interface in which users could find patterns across large, complex datasets, but more specifically, discusses the importance and issues behind allowing users to find a pattern of events in data [FKSS06].

2.2 Previous Examples of Timeline Visualizations Examples of timeline visualizatins have a long and rich history extending back far into history. One of the earlier, most influential examples that contributed to the field of information visualization was Charles Minards visual history of Napolean Bonapartes Russian campaign. Notable professor in the field of information design, Edward Tufte, has discussed the piece extensively, making the map one of the best examples of a simple, effective timeline that clearly shows multivariablee data on a two-dimensional field [Tuf14]. Another example, more directly relevant to our task at hand is Emma Willards Temple of Time which creates a three dimensional structure to show many variables that have changed throughout the course of history. While her piece was done in two dimensions, its use of of a drawn third dimension to add complexity to the information implies that a third dimension is sometimes necessary (or at the very least, a logical) choice to represent multi-variable and complex chronological data [Sch10]. A second classification of timeline visualizations to consider is visualizations that allow for a level of interaction with a user. One example of this is the synchronoptic history chart, which combines lifelines of individuals, parallel timelines of over 3000 events relating to science, culture and politics, and 24 historical maps in a single chart. This piece is highly related to this project because of its emphasis on visualizing correlating but distinct data in a single visualization [Fri07]. Another example of a simpler project is the Movies Timeline by Patrick Mineault; this project worked as a proof of concept and allowed users to gave users parallel timelines of actors, movies, technological advancements and allowed the ability to zoom in or out of specific time periods. This piece is an example of a user directed timeline, an interactive application, and the importance of proof of concept works to the field [Fri07]. Further projects that are more inherently user directed are the LifeLines project, the myHistro project, and Beedocs timelines. The LifeLines project (LifeLines: Using Visualization to Enhance Navigation and Analysis of Patient Records) shows an example of a project that was created to solve a problem and give the user the ability to better analyze and draw conclusions about a dataset through visualization [PMS*98]. myHistro.com is an example of a timeline that utilizes available technology to best integrate diverse sets of information into concrete, correlated visualizations for users. Beedocs, a tool which allows a user to create a two dimensional timeline which is then visualized rudimentarily in three dimensions, shows that there has only been minimal work in generative, three-dimensional timelines. 2.3 Contribution to Related Work This project contributes in the following ways: it introduces three dimensions to the discussion of timeline visualizations, emphasizes the intricate nature of connections in social media, and explores the issues inherent to interaction enhancing user experience in timelines. By introducing a third dimension, the project expands on the issue of visualizing multivariable data and different solutions for handling multidimensional data. The social media component of the

SIG Center for Computer Graphics 2014.

N. I. Badler, M. L. Rivera, E. S. Lee - CIS 497/EAS499

project lends itself to the discussion of timelines being inherent to social media, reflecting the continual and somewhat endless cycle of virtual interaction. Finally it combines two distinct discussions into a single forum and creates a system that attempts to tackle both the issues of timeline visualization as well as dealing with multidimensional data. 3. PROJECT PROPOSAL The three-dimensional model itself will consist of the following components: a core, axons, and dendrites. The core refers to the central line running through the three dimensional system that represents the current users timeline. Axons refer to the lines used to represent timelines of each of the users friends, which run parallel to the core in a radial spacing around it. The term dendrites refer to the connections between the axons and the core, where the main users timeline is connected to one of their friends. The system as a single entity is constructed as a network showing each of these components in connection with each other. Through the creation of this application, it will become easier for a user to see patterns in their timeline and social media interactions emerge through navigation of the three dimensional space. This project contributes to the conversation surrounding multi-variable data visualization, as well as explores three dimensional forms of timeline visualization more extensively than in previous research. 3.1 Anticipated Approach In order to create this project, I plan to create a working application using WebGL and JavaScript. To get the data, I will create a server that will provide the data to a user, once they have provided Facebook information, and I have used JavaScript and had Facebook authenticate it. Once I have the data, JavaScript will be used to create objects from it, representing the users timeline as well as their friends. At this point I will create an algorithm to draw all the connection between the users and their friends. The final model will then be visualized in WebGL, creating a final threedimensional structure that will be served to the user to explore and view. During this process, I will also develop an interface that the user can use to traverse the 3D environment that has been created, and use tooltips to provide more information about clicked/hovered sections of the visualization. As discussed above, the process will involve creating the application with fake data, but with authentication features built in for further development should data become available. 3.2 Target Platforms This application will be available to web users on any major browser and use JavaScript (specifically WebGL), CSS, and HTML to construct the core of the visualization. 3.3 Evaluation Criteria The three-dimensional multivariable portion of this project should be evaluated by being compared to existing

three-dimensional visualizations that handle multidimensional data such as the cam tree, the information landscape and information cube on how well it visually interprets the multiple dimensions of timeline data. This evaluation should be given by conducting a user study and comparing it to user studies on other methods, discussing the pros and cons of different visualizations in three dimensions [WCJ98]. On a secondary level, it should be evaluated on the factors important in timeline visualization: readability, ability for the user to see temporal patterns, and whether it is possible to draw non-trivial conclusions about Facebook interactions because of the manner of visualization. This should be evaluated by comparing a users experience with the three dimensional timeline to that of their experience interacting with both the actual Facebook timeline and a mock two-dimensional timeline that I will create for purposes of showing the limitations of readability with a mass amount of data. 4. RESEARCH TIMELINE For the research timeline, I considered the idea that milestones should encompass clearly defined, different goals (regardless that completion of the goals may require overlapping tasks). The first milestone is meant to mark the end of the core research period of the project, where the final project idea is solidified and a small working model built to iron out any conceptual problems. The second milestone acts as a marker of when the core of the project work should be finished, as there is a good chance that I will run into unforeseen problems: by planning the core work to be in a deliverable state by the beta version, with only features still left to implement, I allow for course correction should a delay arise. The final project should be a completed application with all previously described features implemented. Milestone One : (Alpha Version)
By the first milestone, I should have completed all back-

ground reading and the proposal, have generated data to work with, and have a simple visualization working locally. Milestone Two : (Beta Version)
By the second milestone, I should have put the applica-

tion on the web, be serving the data to the remote server, and have the core visualization working, with the plans and designs for the additional features sketched out and beginning to be implemented. Final Project Deliverables By the end of the semester I should have:
A final visualization comprised of all the components

discussed in the paper above, and all of the additional features working.
A demo using generated/collected data to show a proof of

concept (should the data not be accessible)

SIG Center for Computer Graphics 2014.

N. I. Badler, M. L. Rivera, E. S. Lee - CIS 497/EAS499

A demo using real data (minimal though it may be) as a

Web. 29 Jan. 2014. [PMS*98] Plaisant, Catherine, Richard Mushlin, Aaron Snyder, Jia Li, Dan Heller, and Ben Shneiderman. "LifeLines: Using Visualization to Enhance Navigation and Analysis of Patient Records." American Medical Informatic Association Annual Fall Symposium 8 (1998): 76-80. Print. Scheuessler, Jennifer. "How to Draw Time." ArtsBeat. The New York Times, 15 Apr. 2010. Web. 29 Jan. 2014. <http://artsbeat.blogs.nytimes.com/2010/04/15/ how-to-draw-time/?_php=true&_type=blogs& _r=0>. "Synchroptic World History." World History. Encyclopedia Britannica, n.d. Web. 29 Jan. 2014. <http://www.hyperhistory.com/>. [TBB88] Tamassia, Roberto, Giussepe Battista, and Carlo Battini. "Automatic graph drawing and readability of diagrams." IEEE Transactions on Systems, Man and Cybernetics 18 (1988): 6179. IEEExplore. Web. 29 Jan. 2014. Tanahashi, Yuzuru, and Kwan-Liu Ma. "Design Considerations for Optimizing Storyline Visualizations." IEEE Transactions on Visualization and Computer Graphics 18.12 (2012): pg. 2679-2688. Print. "The most simple way to make beautiful multimedia timelines.." BEEDOCS Timeline 3D. BeeDocs, n.d. Web. 29 Jan. 2014. <http://www.beedocs.com/>. Tufte, Edward. "Poster: Napoleon's March." Edward Tufte: Posters and Graph Paper. N.p., n.d. Web. 29 Jan. 2014. <http://www.edwardtufte.com/tufte/posters>.
Wiss, Ulrika, David Carr, and Hakan Jonsson. "Evaluating Three-Dimensional Information Visualization Designs: a Case Study of Three Designs." Information Visualization, 1998. Proceedings July (1998): 137 - 144. Print.

proof of concept of authenticating and querying Facebook.

Finalized proposal and documentation of this project

Project Future Tasks If I had six more months to work on this project, I would work with Facebook to get access to as much data as possible. I would find ways to visualize likes, research different ways to integrate photos and uploads, as well as links and videos; typical timelines struggle to incorporate media without disrupting the flow or the clarity of the timeline. With six more months I would spend more time refining the visualization, conduct user research, and incorporate as much data as possible while maintaining the original vision. (see Figure 1) 5. METHOD 6. RESULTS 7. CONCLUSIONS and FUTURE WORK References [BBD08] Burch, Michael, Fabian Beck, and Stephan Diehl. "Timeline Trees: Visualizing Sequences of Transactions in Information Hierarchies." Publications. N.p., n.d. Web. 29 Jan. 2014. <http://www.st.unitrier.de/~diehl/pubs/avi08.pdf>. Fails, Jerry Alan, Amy Karlson, Layla Shahamat, and Ben Shneiderman. "A Visual Interface for Multivariate Temporal Data: Finding Patterns of Events across Multiple Histories." Publications by the University of Maryland. University of Maryland, n.d. Web. 29 Jan. 2014. <http://www.cs.umd.edu/hcil/fails/publications/ VAST2006-PatternFinder.pdf> [Fri07] Friendly, Michael. "DataVis.ca." Gallery of Data Visualization. N.p., n.d. Web. 29 Jan. 2014. <http://www.datavis.ca/gallery/timelines.php>. "Geo-Located Interactive Timelines With A Social Twist." Create Free Interactive Timelines. Stories Displayed on Maps. MyHistro, n.d. Web. 29 Jan. 2014. <http://www.myhistro.com/>. [LWW*13] Liu, Shixia, Yingcai Wu, Enxun Wei, Mengchen Liu, and Yang Liu. "StoryFlow: Tracking the Evolution of Stories." IEEE Transactions on Visualization and Computer Graphics (Proceedings of IEEE InfoVis 2013) 19.12 (2013): StoryFlow: Tracking the Evolution of Stories. [TM12] [Sch10]

[Tuf14]

[FKSS06]

[WCJ98]

SIG Center for Computer Graphics 2014.

N. I. Badler, M. L. Rivera, E. S. Lee - CIS 497/EAS499

Figure 1: For publications with color tables and figures that span two columns like your gant chart or results will.

SIG Center for Computer Graphics 2014.