A Web-based Large-scale Timelapse Editor for Creating and SharingGuided Video Tours and Interactive Slideshows

Yen-Chia Hsu∗ Paul Dille† Randy Sargent‡ Christopher Bartley§ Illah Nourbakhsh¶

The Robotics Institute, Carnegie Mellon University

ABSTRACT

Scientists, journalists, and photographers have used advanced cam-era technology to capture extremely high resolution timelapses anddeveloped information visualization tools for data exploration andanalysis. However, it takes a great deal of effort for professionals toform and tell stories after exploring data, since these tools usuallyprovide little aids in creating visual elements. We present a web-based timelapse editor to support the creation of guided video toursand interactive slideshows from a collection of large-scale spacialand temporal images. Professionals can embed these two visual el-ements into webpages in conjunction with various forms of digitalmedia to tell multimodal and interactive stories.

Index Terms: Information visualization, Visualization systemsand tools

1 INTRODUCTION AND RELATED WORK

As camera technology proliferates, the quantity and resolution ofdigital images have increased exponentially. Researchers haveworked on creating tools for generating, exploring, and sharinglarge-scale timelapses after capturing high quality images. For in-stance, Sargent et al. [6] have developed an integrated solution tocapture and stitch gigapixel timelapses, generate multi-resolutionvideo tiles, and visualize the results in an interactive web-basedviewer. Professionals have used the technology to document theentire context of a site, capture extreme details in scenes, and sharehigh resolution timelapses on the Internet. One example is theGoogle Annual Earth Timelaspe [1] consisting of 29 cloud-free mo-saics of the planet from Landsat satellite imagery between 1984 and2012, with each frame containing nearly 1 trillion explorable pixels.

Such visualization tools enable browsing large-scale images andprovide powerful data exploration experiences to professionals.However, most existing tools lack the capability for professionalsto create visual elements for data-driven storytelling through spaceand time, affording the presentation of a sequence of related factsfound during exploration. If professionals want to create videotours, they need to import timelapses into video editing software.This process is impractical and takes a huge amount of time as mostsoftware cannot handle large datasets that do not fit into memory.

To address this problem, we present a web-based timelapse ed-itor [3] operating along large-scale space and time to assist pro-fessionals in creating visual elements based on facts found duringexploration. The editor allows the creation of guided video toursand interactive slideshows to enhance different story structures de-scribed by Segel and Heer [7]. Guided video tours present changesover time in author-driven stories, having linear visualization paths

∗e-mail: yenchiah@andrew.cmu.edu†e-mail: pdille@andrew.cmu.edu‡e-mail: rsargent@andrew.cmu.edu§e-mail: cbartley@andrew.cmu.edu¶e-mail: illah@andrew.cmu.edu

Figure 1: The timelapse editor.

and limited interactivity. Interactive slideshows store various in-teresting locations and facilitate follow-up exploration for reader-driven stories, having little prescribed orderings and high interac-tivity. Each tour or slideshow is a micro-story and can be integratedby professionals with other types of media into a mega-story [5].

2 CREATING VIDEO TOURS OR INTERACTIVE SLIDESHOWS

When scientists find interesting events while exploring the time-lapse in the zoomable and pannable viewer, they can use the editorattached at the bottom of the viewer (Figure 1) to create guidedvideo tours defined by sequences of keyframes containing the time,location, and scale of different views. Users can use the functionsprovided on the main control bar to add keyframes. On the left sideof the viewer above the scale bar, there is a small box displayingthe satellite image quality relative to a resolution to assist scientistsin choosing appropriate scales. If a keyframe is unwanted or mis-placed, users can select the keyframe and then delete it or drag it toa desired place in the sequence. Each keyframe in the container hasauxiliary functions for users to update the keyframe to the currentview, duplicate the keyframe, and add corresponding descriptions.

Users can click on the play button on the main control bar topreview the tour animated by using a linear motion for each pair ofkeyframes using default transition settings. In the keyframe con-tainer, users can specify transition parameters between two consec-utive keyframes. There are two main types of transitions: speed andduration. A speed transition uses the user-defined playback rate rel-ative to the original video rate and automatically computes the du-ration. The editor uses 100% speed as the default transition setting.In contrast, a duration transition calculates the speed accordinglyfrom the user-defined duration. For short timelapses (e.g. less than100 frames), users can assign a desired looping parameter, the num-ber of times to loop through the entire timelapse video between twokeyframes. While looping the entire video, the editor introduces a

Figure 2: The guided video tour.

0.5 second dwelling time for a better transition effect, meaning thatthe animation pauses at the very beginning and end of the timelapsefor 0.5 second. By using the animation logic described above, userscan perform the following five different camera motions:

• Animate zooming, panning, and time simultaneously by addingtwo keyframes at different locations and dates, and then settingspeed or duration to a non-zero value.

• Pause zooming and panning but animate time by adding twokeyframes at different dates but the same location, and then set-ting speed or duration to a non-zero value.

• Pause time but animate zooming and panning by adding twokeyframes at different locations but the same date, and then set-ting duration to a non-zero value.

• Pause zooming, panning, and time simultaneously by adding twokeyframes cloned at the same location and date, and then settingduration to a non-zero value.

• Jump immediately from the first keyframe to the second one byforcing duration to be zero.

When finished editing, users can click the share button to dis-seminate or embed the guided video tour (Figure 2) encoded in anURL (uniform resource locator) into a storytelling webpage. De-scriptions associated with each keyframe show up as video cap-tions. The tour interface displays a time stamp, a scale bar, and asmall Google map to provide contextual information. A button atthe top left of the interface allows users to stop the tour.

Professionals can also use the editor to create interactiveslideshows (Figure 3) containing a collection of locations. Theworkflow is similar to the one for creating video tours. The editorturns keyframes into slides and omitting all transition parameters.Audiences first see an overview and then can choose an interestinglocation to zoom in and to request detailed information. When au-diences hover a mouse onto a slide, a message box containing cor-responding descriptions fades into the interface. Clicking on a slideanimates the viewer to a keyframe representing an interesting loca-tion. Professionals can use interactive slideshows for storytelling ina webpage or for visual exhibitions on hyperwalls in museums.

3 DISCUSSION AND FUTURE WORK

After releasing the editor in 2012, we collaborated with a journal-ist at TIME magazine in telling a story about extreme natural re-sources, global climate changes, and urban explosions on Earth.We render the tours into high-quality videos and then the journalistintegrated these videos with the timelapse viewer and other formsof digital media into a compelling story [2]. Audiences first expe-rienced a prescribed author-driven story with rich multimedia con-taining space-time tours and then were free to explore the time-lapse by themselves. We also worked with scientists in the Ex-plorables team in Pittsburgh in 2014 to create interactive slideshows

Figure 3: The interactive slideshow.

for telling a reader-driven story about landscape changes along Tai-wan’s coastline over a two-decade period [4]. In 2014 we assistedscientists at the Exploratorium museum in San Francisco to install avisual exhibition showing an interactive slideshow on a hyperwall.The professionals we collaborated with were able to create toursor slideshows by using the editor over approximately half an hourof training and to use these visual elements in forming interestingstories. However, there are research questions we need to answer:

• What is the efficiency of the editor? Can professionals use iteasily without spending too much effort?

• Do stories integrating custom guided tours and interactiveslideshows encourage audiences to explore the timelapse?

• Do custom guided tours and interactive slideshows help audi-ences gain insights from stories formed by professionals?

Developing tools to support the creation of visual elements forstorytelling depends heavily on the user needs from professionals.It is vital to collaborate with target users and keep them in the de-sign loop. In the future, we plan to conduct a medium to long termuser evaluation [8] to answer the research questions. We hope theeditor can truly help professionals focus more on the content of sto-ries rather than time-consuming and laborious work.

ACKNOWLEDGEMENTS

Google Earth Engine, TIME magazine, and all other participants.

REFERENCES

[1] Google earth engine - landsat annual earth timelapse, 2012. https://earthengine.google.org/#intro/Amazon.

[2] Timelapse: Landsat satellite images of climate change, via google earthengine, 2012. http://world.time.com/timelapse/.

[3] Timelapse Editor. http://timemachine.cmucreatelab.org/wiki/EarthEngineTourEditor.

[4] Landscape Changes along Taiwan’s Coastline over a Two-DecadePeriod, 2012. http://explorables.cmucreatelab.org/explorables/timelapse-story-telling.html.

[5] R. Jain and M. Slaney. Micro stories and mega stories. IEEE Multime-dia, 20:86–90, 2013.

[6] R. Sargent, C. Bartley, P. Dille, J. Keller, and I. Nourbakhsh. TimelapseGigaPan: Capturing, Sharing, and Exploring Timelapse Gigapixel Im-agery. In Fine International Conference on Gigapixel Imaging for Sci-ence, 2010.

[7] E. Segel and J. Heer. Narrative visualization: Telling stories with data.IEEE Transactions on Visualization and Computer Graphics, 16:1139–1148, 2010.

[8] B. Shneiderman and Catherine Plaisant. Strategies for Evaluating In-formation Visualization Tools: Multi-dimensional In-depth Long-termCase Studies. In Proceedings of the 2006 AVI workshop on BEyondtime and errors: novel evaluation methods for information visualiza-tion, pages 1–7, 2006.