INOM EXAMENSARBETE TEKNIK,GRUNDNIVÅ, 15 HP

, STOCKHOLM SVERIGE 2018

Creating and Evaluating an Interactive Visualization Tool For Crowd Trajectory Data

CHRISTINA SONEBO

JOEL EKELÖF

KTHSKOLAN FÖR ELEKTROTEKNIK OCH DATAVETENSKAP

Creating and Evaluating anInteractive Visualization ToolFor Crowd Trajectory Data

CHRISTINA SONEBO

JOEL EKELÖF

Date: June 6, 2018Supervisor: Christopher PetersExaminer: Örjan EkebergSchool of Electrical Engineering and Computer ScienceSwedish title: Att bygga och utvärdera ett interaktivtvisualiseringsverktyg för gångbanor hos folksamlingar

Abstract

There is currently no set standard for evaluating visualization environments.Even though the number of visualizations has increased, there is a tendencyto overlook the evaluation of their usability. This thesis investigates how avisualization tool for crowd trajectory data can be made using the visualizationtechnique of animated maps and the JavaScript library D3.js. Furthermore itexplores how such a visualization tool can be evaluated according to a suggestedframework for spatio-temporal data.

The developed tool uses data taken from the UCY Graphics Lab, consistingof 415 trajectories collected from a video recorded at a campus area. Userevaluation was performed through a user test with a total of six participants,measuring effectiveness as completed tasks, and satisfaction as ease of use forthree different amounts of trajectories. Qualitative data was recorded throughusing the think aloud protocol to gather feedback to further improve the im-plementation. The evaluation shows that the visualization tool is usable andeffective, and that the technique of animated maps in combination with aheatmap can aid users when exploring and formulating ideas about data of thiskind. It is also concluded that the framework is a possible tool to utilize whenvalidating visualization systems for crowd trajectory data.

Keywords: Visualization techniques, D3.js, spatio-temporal data, user evalua-tion, evaluation framework, animated maps

Sammanfattning

Det finns i dagsläget ingen etablerad standard för att utvärdera visualiseringssy-stem. Även om antalet visualiseringar har ökat finns det en tendens att förbiseutvärderandet av deras användbarhet. I det här arbetet undersöker vi hur ettvisualiseringsverktyg för data av gångbanor hos folksamlingar kan skapas, medhjälp utav visualiseringsmetoden animated maps och JavaScript-biblioteketD3.js. Vidare undersöker vi hur det är möjligt att evaluera ett visualiserings-verktyg utefter ett givet ramverk.

Visualiseringsverktyget använder data från UCY Graphics Lab. Datan består av415 gångbanor som är insamlade från en videoinspelning av ett campusområde.En utvärdering genomfördes sedan med sex deltagare, där visualiseringenseffektivitet och användarvänlighet mättes. Frågorna ställdes för tre olika mäng-der av gångbanor. Kvalitativa data dokumenterades genom en så kallad ”thinkaloud”, för att ge återkoppling och förslag på möjliga förbättringar av visu-aliseringen. Evalueringen visar på att animated maps i kombination med enheatmap kan hjälpa användare att utforska data av gångbanor hos folksamling-ar, samt att verktyget är effektivt och användbart. Det är också visat att detramverk som användes vid evalueringen är ett möjligt verktyg för att valideravisualiseringsverktyg av den typ som gjorts i det här projektet.

Contents

1 Introduction 1

1.1 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.2 Research Questions . . . . . . . . . . . . . . . . . . . . . . . 2

1.3 Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.4 Thesis Outline . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Background 4

2.1 Trajectory Data . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2 Crowds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.2.1 The Dataset . . . . . . . . . . . . . . . . . . . . . . . 5

2.3 Data Visualization . . . . . . . . . . . . . . . . . . . . . . . 6

2.3.1 The Visual Information Seeking Mantra . . . . . . . . 7

2.3.2 Techniques to Visualize Trajectory Data . . . . . . . . 7

2.4 User Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.4.1 Usability Evaluation and Common Metrics . . . . . . 9

2.4.2 Think Aloud Protocol . . . . . . . . . . . . . . . . . 10

CONTENTS

2.4.3 Analytical Tasks for Trajectory Data . . . . . . . . . . 10

2.5 Related Work . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.5.1 Spatio-Temporal Visualizer . . . . . . . . . . . . . . . 11

2.5.2 Comparing 2D Static Maps and STC . . . . . . . . . . 12

2.6 Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.6.1 DOM . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.6.2 Web-development tools . . . . . . . . . . . . . . . . . 13

3 Method 14

3.1 The Implementation . . . . . . . . . . . . . . . . . . . . . . . 14

3.1.1 Data Cleaning and Formatting . . . . . . . . . . . . . 14

3.1.2 The Visualization . . . . . . . . . . . . . . . . . . . . 15

3.2 Mapping Framework to User Tasks . . . . . . . . . . . . . . . 17

3.3 Pilot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.4 User Study . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4 Results 20

4.1 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.2 User Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

5 Discussion 29

5.1 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

6 Conclusion 32

CONTENTS

Bibliography 33

A Results in Tables 36

CONTENTS

Chapter 1

Introduction

1.1 Purpose

There are several research areas where there is a need to understand and exploretrajectory data of crowds. One such example is crowd simulations, where aninterest lies in understanding what realistic-looking trajectories look like, foruse in the special effects of movies, games and architectural walkthroughs.There are also applications where one is less concerned with simulated virtualpedestrians but more so with the behaviour of real humans, like evacuationscenarios and surveillance footage. But generally datasets of trajectories arelarge and complex, and can run over extended periods of time [12]. This ofcourse poses a challenge - how can users meant to inspect data of this naturebe aided in this task?

The field of visualization research might provide an answer, as it consists ofbuilding new tools and techniques meant to improve the users cognitive process[21], and could be viewed as assisting humans with data analysis, througheither creating completely new ways of visualizing data or by increasing one’sability to interact with it.

However, the usability of such a visualization also needs to be validated. Thereare several different approaches to evaluate the usability of visualization en-vironments, and there is currently no established standard. Even though thenumber of visualizations has increased, there is a tendency to overlook the eval-

1

2 CHAPTER 1. INTRODUCTION

uation of their usability [8]. There are studies where the technique "validationthrough awesome example" [10] still is applied - convincing the reader of itsviability by simply presenting pictures of the visualization and its features.

Thus the purpose with this thesis is twofold - first an attempt is made to build avisualization tool which can aid users in their exploration of crowd trajectorydata, but also evaluate it according to a framework.

1.2 Research Questions

The following research questions will be investigated in this thesis:

• How can D3.js be used to create a visualization of crowd trajectories?

• How can such a visualization be evaluated?

1.3 Scope

The implementation built is based on techniques from cartography and ge-ographical information systems. However it does not utilize GPS data andfocuses on the movement of crowds. The dataset used in this work is smalland originates from a video file. The video captures the movement of peoplewalking at a campus area and the data consists of 415 trajectories in total. Thisis also the maximum amount of trajectories that the tool will be tested for.

As for the validation of the final product a user test will be conducted usinga framework proposed by Adrienko et al. [16] for analytical tasks of spatio-temporal data. This framework contains four different categories of tasks,whereof three of these categories are to be tested in this work. The metricsmeasured will be effectiveness as completed tasks and satisfaction as ease ofuse, where users rate the experienced difficulty of the tasks on a scale from 1to 5, where 1 is easy and 5 is difficult.

CHAPTER 1. INTRODUCTION 3

1.4 Thesis Outline

Chapter 2 describes relevant research and techniques used to create visualiza-tions of trajectories. It also presents the dataset and tools used in this project.

Chapter 3 describes the methods used when creating the visualization tool andhow it was evaluated.

Chapter 4 presents the results generated by the project and the user study.

In chapter 5 the results are discussed with regards to the research questions.Future work and possible improvements are also provided.

Chapter 6 presents the conclusions that were drawn from this project.

Lastly, there is a bibliography of sources and an appendix with the results intables.

Chapter 2

Background

In this section relevant background information is introduced. Firstly trajectorydata and crowds are defined. Then topics related to the data visualization arepresented, such as visualization techniques and design guidelines together withtheory and techniques related to user evaluation. Lastly, related works arepresented.

2.1 Trajectory Data

Trajectory data is spatio-temporal - belonging to both space and time. Atrajectory can be viewed as the trace of a moving object, a path through space asa function of time. Examples of moving objects could be anything from peopleto particles - their commonality being that they are entities with positioningor geometrical properties that change over time [19]. The data of trajectoriesis typically represented by a set of chronologically ordered location points,P = 〈xn, yn, tn〉 where xi, yi are geographical coordinates at time ti, and n isthe total number of elements in the series [15]. When put together, these createa trajectory T = {P1, P2, ..., Pn}.

It is also possible that the data contains information besides the location pointsthemselves. These attributes are either derived from or associated with the dataand is often referred to as thematic [12]. Examples of such attributes could becategory, the speed of an object at a given time, or what direction the object is

4

CHAPTER 2. BACKGROUND 5

facing.

2.2 Crowds

There are several definitions attempting to describe what a crowd is. However,Challenger et al.[7] mention that there are several common characteristicsbetween these crowd definitions - stating that a crowd is a large group of peoplethat are gathered at a specific location at a specific time and that they displaycommon goals and behavior.

They also list a set of key criteria which may characterize a crowd:

• Size - there should be a sizeable gathering of people.

• Density - crowd members should be co-located in a particular area, witha sufficient density distribution.

• Time - individuals should typically come together in a specific locationfor a specific purpose over a measurable amount of time.

• Collectivity - crowd members should share a social identity, commongoals and interests, and act in a coherent manner.

• Novelty - individuals should be able to act in a coherent manner, despitecoming together in an unfamiliar situation.

2.2.1 The Dataset

The chosen dataset for this thesis has its origins from the UCY ComputerGraphics Lab [22]. The material consists of a video of people walking througha campus area, as seen in Figure 2.1. This video file is accompanied by a.vsp file containing a series of coordinates, paired with the frame in whichthey where captured. The thematic information stored in addition to this isgaze-direction. For a detailed description of the .vsp file’s format, see Figure2.2.

6 CHAPTER 2. BACKGROUND

Figure 2.1: Video footage of campus area

Figure 2.2: The format of the .vsp file.

2.3 Data Visualization

Data visualization is the creation of graphical representations or images ofinformation. It can be viewed as an application of computer graphics, usingcomputer graphics methods to display data. But rather than focusing on purelyvisual aspects, it aims to aid users in discovering and formulating ideas aboutdatasets through visualization [20].

Consequently it consists of several disciplines such as human-computer inter-action, user perception, statistics and data mining - a combination of computa-tional power and human visual perception[20].

CHAPTER 2. BACKGROUND 7

2.3.1 The Visual Information Seeking Mantra

The Visual Information Seeking mantra - overview first, zoom and filter, thendetails-on-demand, was first described by Schneiderman in 1996 and is widelycited within information visualization research [3]. It attempts to describehow data is effectively presented to users and often serves as a guideline andas an inspiration for practitioners within the field of data visualization. Themantra consists of six tasks that users of a visualization system should be ableto perform:

• Overview first: capture the entire dataset in one view.

• Zoom and filter: remove unnecessary information and reduce the amountof data displayed.

• Details on demand: display additional information if requested, withoutrequiring a change of view.

• Relate: enable the users to observe relationships in the data.

• History: enable users return to a previous state, and compare it to a otherstates of representation.

• Extract: extract information of interest, so that users do not need toreproduce the same steps of data manipulation to retrieve it again.

In this thesis the mantra has been mainly used as a guideline in the designprocess, presented in section 3.1.

2.3.2 Techniques to Visualize Trajectory Data

This section will present techniques used to visualize trajectory data, commonlyfound within geographic information systems.

Static and Animated Maps

Static and animated maps are considered to be the most common methods tovisualize movement of discrete objects [2]. These maps often make use of

8 CHAPTER 2. BACKGROUND

linear symbols, such as lines and arrows to represent trajectories. Other visualattributes like color, thickness and transparency can be added to represent eventsor changes. Static maps are able to capture spatio-temporal information in aspecific moment or aggregated over time to display a general picture. However,they are not able to show how data changes over time. An example of such avisualization is shown in Figure 2.4 (a).

Animated maps with an interactive time filter are able to show how relationshipsin data changes and evolves over time. As in the case of static maps, trajectoriesare often displayed as linear symbols. The map has been complemented with aninteractive slider for time with which the user can select a time interval. Withthis filter, segments of trajectories present in the chosen time interval are drawn.In Figure 2.3 and 2.4 (b) examples of such visualizations are demonstrated.

Figure 2.3: Illustration of an animated map. The visualization consists ofseveral maps, each one capturing a moment in time. Source: [12]

CHAPTER 2. BACKGROUND 9

Figure 2.4: (a) A static map over ship routes (b) Animated map with interactivetime filter. Source: [2]

2.4 User Evaluation

2.4.1 Usability Evaluation and Common Metrics

ISO 9241-11:2018 states that ”usability focuses on the effectiveness, efficiencyand satisfaction of the user’s interaction with the object of interest”, and definesthese metrics as the following:

Effectiveness as ”the accuracy and completeness with which users achievespecified goals”, where accuracy is how well the outcome matches the intendedoutcome, and completeness how well users are able to achieve all intendedoutcomes.

Efficiency as ”the resources used in relation to the results achieved”, whereresources could be time, money, effort or similar.

Satisfaction as ”the extent to which the user’s physical, cognitive and emotionalresponses that result from use of a system, product or service meet user’s needsand expectations” [1].

10 CHAPTER 2. BACKGROUND

In section 3.2 these metrics are used to test the visualization.

2.4.2 Think Aloud Protocol

A think-aloud prompts the user to speak their thoughts while interacting with asystem. These studies typically focus on the interaction between the partici-pants and the system, making them well suited when attempting to identify itsstrengths and weaknesses [4]. It also offers insight into the cognitive processof the user.

2.4.3 Analytical Tasks for Trajectory Data

When analyzing spatio-temporal data such as trajectories, patterns can emergein respect to both the past and the present. These patterns consist of changesthat occur over time and there are different approaches to categorize them.Pequet [17], considers spatio-temporal data to consist of three co-dependentparts: space (where), time (when) and objects(what). These parts can becombined into three basic tasks:

• When + where→ what: Describe the objects or set of objects that arepresent at a given location or set of locations at a given time or set oftimes.

• When + what→ where: Describe the location or set of locations occu-pied by a given object or set of objects at a given time or set of times.

• Where+what→ when: Describe the times or set of times that a givenobject or set of objects occupied a given location or set of locations.

Adrienko et al [16], extend these questions by adding search levels - elementaryand general - when users focus on one or multiple objects. They also argue thatcognitive operations of identifying or comparing objects should be considered.By grouping the parts of when and what + where, the extended task can bepresented as four categories:

• Elementary “when” and elementary “what + where”: describe char-acteristics of this object (location) at the given time moment.

CHAPTER 2. BACKGROUND 11

• Elementary “when” and general “what + where”: describe the situa-tion at the given time moment.

• General “when” and elementary “what + where”: describe the dy-namics of characteristics of this object (at this location) over time.

• General “when” and general “what + where”: describe the evolutionof the overall situation over time.

How this framework is put to use for the implementation in this thesis isdescribed in further detail in section 3.2.

2.5 Related Work

In this section related works which use relevant visualization techniques arepresented. It also features work that have used the framework by Adrienko etal. [16] when designing and validating a product.

2.5.1 Spatio-Temporal Visualizer

In this study by Hugo Sequeira [18] a visualization tool was built using thetechnique of animated maps. It was developed with web development tools,one of them being D3.js. The objective was to provide users with a tool thatenabled them to explore and compare trajectories of objects by observing theirmovement. The tool utilized a slider to adjust a time interval, making it possibleto restrict data with time as a criteria and navigate through it. The dataset usedconsisted of GPS trajectories, tracking 182 people over a period of 5 years,mainly located in Beijing, China. When designing and evaluating this tool,tasks were constructed using the framework by Adrienko et al [16]. Howeverthese tasks were not performed by users in actual usability tests, but rather justto prove that the system could provide answers to questions of this nature.

12 CHAPTER 2. BACKGROUND

Figure 2.5: The spatio-temporal visualizer with time-slider, displaying 24trajectories over a period of 94 hours. 1

2.5.2 Comparing 2D Static Maps and STC

ST-TrajVis is an application that uses 2D static maps and a space time cube(STC) to visualize trajectory data. The space-time cube is a visualizationtechnique which uses two dimensions to represent space and a third dimensionfor time. An image of the system with the two techniques side by side can beseen in figure 2.6. A study performed by Gonçalves et al. [13] investigatedthe usability of the system through a user study with five participants whenthe system was still in development. The dataset was a subset of the GeoLifeproject and consisted of trajectories from one user in the time period of onemonth. Metrics tested were efficiency in terms of time performing tasks andeffectiveness in amount of completed tasks and their accuracy. A similar studywas made comparing the exact same techniques in [11], but with a larger set ofparticipants. It consisted of 16 people and measured the same metrics.

1Source: https://github.com/hugocore/spatiotemporal-visualizer

CHAPTER 2. BACKGROUND 13

Figure 2.6: The system ST-TrajVis with a 2D map to the left, and a space-timecube to the right. Source: [13]

2.6 Tools

2.6.1 DOM

The Document Object Model is a programming interface supported by mostmodern browsers. It represents documents, such as HTML or XML docmentsin an object-oriented manner with a tree structure. A web page is a documentand the DOM allows users to manipulate the document. This is can be usefulwhen creating a visualization or a webpage. Often JavaScript is used to addand remove objects from the webpage by manipulating the DOM.[14]

2.6.2 Web-development tools

HTML, CSS and JavaScript are the basic building-blocks of a webpage.HTML provides the layout of the page, CSS the styling and JavaScript is usedto manipulate the DOM.

Bootstrap is a front-end framework that divides the page into a grid-structure,which makes it easy to control the layout of the page [5]. D3.js is a data drivenapproach to manipulate documents. It helps users to build and manipulateDOM-objects based on the data provided [9].

How these technologies were used in order to create an interactive visualizationof the data is described in further detail in section 3.1.

Chapter 3

Method

First, all methods related to building the visualization will be presented - frompre-processing the data to the different parts that the visualization consistsof. Secondly, a description of how the user evaluation was conducted will beprovided, from constructing user tasks, to how the actual tests were performed.

3.1 The Implementation

The visualization was created using D3.js together with Bootstrap to help withthe layout. It consists of three parts - an overview in the form of a heatmap, theanimated map as a graph of trajectories, and a slider which provides a tool tofilter the data. D3.js was used to read a JSON-file with data and build a path foreach trajectory by appending elements to an SVG using D3’s built in functions.

3.1.1 Data Cleaning and Formatting

As illustrated in figure 2.2, the data contained information about gaze directionand lines with control points. This thematic information was irrelevant for thevisualization and was therefore removed. A Java-program was built to extractthe relevant information and format it as JSON-objects. The format of theresulting JSON objects is as follows:

14

CHAPTER 3. METHOD 15

{ ”person”:0, ”x”:174.0, ”y”:-131.0, ”frame”:0 }

These objects where then stored as an array in a JSON-file.

3.1.2 The Visualization

Animated Map

The animated map was the main focus of the visualization, as it provides detailsabout the trajectories. It consists of several paths, each corresponding to atrajectory in the data. Researchers from the Embodied Social Agents Lab(ESAL) at KTH suggested that a head - a symbol like an arrow or circle -should be added to the path. This would indicate the last position of the objectand therefore also the direction in which it was moving when animated. Tofurther clarify this, as well as adding an element of time to a static view of theanimated map, they also suggested that the opacity of the paths declined thefurther away from the head the path-segment was. Their motivation behindthis design was that one would be able to know if any collisions had occurredand what person visited a certain area first. In figure 3.1 the animated map isillustrated.

Figure 3.1: Left: the animated map displaying 79 filtered trajectories. Right:the animated map displaying the entire dataset of 415 trajectories.

16 CHAPTER 3. METHOD

Slider

At the top of the page a slider was placed, which allows users to filter the dataon frames. The slider was built by using a code example from Mike Bostockfound at bl.ocks.org [6], shared under GNU General Public License version 3.

By allowing users to filter on frames they are able explore the data in a smalltime-interval. When selecting a part of the slider the animated map will updateto only show trajectories within the frames that have been selected. This allowsusers to forward/rewind the time and explore how the trajectories change overtime.

Figure 3.2: The slider with a selected interval.

Heatmap

A static heatmap was added in order to provide an overview of the data. Thisstatic map can provide an aggregated view of the trajectories over time, illus-trating the density which otherwise has to be computed by the user throughobserving individual trajectories in the animated map, something which couldbecome a strenuous task with large datasets.

The heatmap consists of 10 000 small rectangles, each corresponding to aspecific location in the scene from which the data is taken. Each square hasa color corresponding to the amount of people that has been registered at thecorresponding location. The heatmap was built by creating a set amount ofrectangles and then going through the data, changing the color of rectangleswith the same coordinates as the coordinates of the data. The heatmap used inthe implementation is provided in figure 3.3.

CHAPTER 3. METHOD 17

Figure 3.3: The heatmap

3.2 Mapping Framework to User Tasks

In order to evaluate the visualization tool, user tasks were created based onthe framework in section 2.4.3. An initial literature study produced threeinstances where this framework was used to construct such tasks. However,only two of these performed actual user tests. Moreover these applicationswere geographical information systems with datasets containing GPS data [11,13].

Despite the differences between the implementation in this thesis and previousworks, the framework offered a level of abstraction which made it applicableto this project. When constructing the tasks the two levels of elemental andgeneral were taken into consideration - whether users focus on one or multipleobjects, as well as the two categories of user objectives identify and compare.

The questions together with their respective category is presented below.

Question 1: Can you identify and give an example where someone is walkingat a different speed than someone else?

With this question the user is prompted to compare a difference between twoobjects - in this case speed. The task belongs to the category ”general when

18 CHAPTER 3. METHOD

and general what+where”.

Question 2: Can you locate any group behaviors in the scene between frame100 - 1300?

The question asks whether users can identify patterns that occur in crowds -for instance when people form a group and walk together. This task is in thecategory ”general when and elementary what + where”.

Question 3: Choose a person and track them throughout the scene, can youdescribe their movement?

This question is also categorized as ”general when and elementary what +where”. However, it is different than the previous question as it tasks users touse the visualization tool by filtering and forwarding/rewinding in time to firstidentify and then follow a certain individual.

Question 4: Can you tell how many people are present in the scene betweenthe frames 400-900?

This question belongs to the category of ”elementarywhen and general what+where”and asks the user to identify the number of trajectories present within a specificinterval.

Question 5: Can you tell what the most visited locations are in this scene overthe entire time span?

This question is a way to ask users to describe the evolution of the overallsituation over time, through identifying hot spots. This is also a task whichfalls under the category of general when and general what+where.

One category that has not been captured as a question by the work in this thesisis elementary “when” and elementary “what + where”. This is due to thefact that the implementation does not support this kind of interaction yet. Itwould mean that a specific person could be selected out of the dataset and itscharacteristics displayed.

CHAPTER 3. METHOD 19

3.3 Pilot

A small pilot study with three participants was conducted, with the primaryinterest to see how fast users felt familiar with using the time filter and observinganimated trajectories. Another objective with the pilot was to test a selection oftasks that had been constructed with the framework suggested by Adrienko et al.[16] and observe how they translated into action with users. They were askedto think aloud while performing a task and their comments were collected. Inparticular they were queried on what they thought about following individualtrajectories, as well as seeing the overall trend of movement in the scene.

3.4 User Study

After having performed the small scale pilot study, a user test was conductedwith more participants. The questions constructed with the framework men-tioned in section 3.2 were used.

The visualization was tested on three different densities scaled linearly from 50up to 415 trajectories which was the total amount present in the dataset. Thuseach test was performed with 50, 230 and 415 trajectories. To rule out anyorder effects, a total of six participants were recruited and assigned a uniquecombination of densities to test.

First the participants were informed on the procedure of the test as well astheir rights. At the beginning of the experiment, all features of the tool weredemonstrated to the participants. A short explanation of the dataset beingdisplayed was given. Each person was given time to try the slider and itseffects and ask questions if anything needed to be clarified. Afterwards eachparticipant was asked to perform the five tasks.

Efficiency was not measured, since users were asked to provide their thoughtsthrough the think aloud protocol. This could have affected the completion-timefor each task and thus a compromise was made to collect qualitative data.

Chapter 4

Results

4.1 Implementation

In section 3.1.2 a method to create a visualization tool for crowd trajectory datausing D3.js is described. The layout of the final product can be seen in 4.1. Theseparate features of this implementation are shown in figure 4.2 and figure 4.3.

Figure 4.1: The entire visualization tool in one view. Time slider, animatedtrajectories within selected frame interval and a heatmap.

20

CHAPTER 4. RESULTS 21

Figure 4.2: The animated map and the time slider.

Figure 4.3: The heatmap together with description and legend.

22 CHAPTER 4. RESULTS

4.2 User Test

In the user test participants were asked to perform the five tasks from section3.2. Effectiveness was measured as completion - whether the task could becompleted or not. Satisfaction was measured as ease of use, asking test subjectsto rate how difficult it was to perform a task on a scale from 1-5, where 1 wasconsidered easy and 5 difficult.

All users were able to complete all tasks.

A graph of the average difficulty for questions 1-5 for all three densities, aswell as well as the average of each individual question can be seen in 4.9. Theexperienced difficulty for each question is reported as separate graphs below.Tables of the collected data is also available in Appendix A.

Question 1: Can you identify and give an example where someone is walkingat a different speed than someone else?

As seen in figure 4.4, three out of six participants rated the difficulty of this taskas a 1 for all densities. There is a notable difference for one participant - ratingthe difficulty of this particular task at 4 and 4.5, however this user provided nofurther information to motivate their rating. While performing this task, twoparticipants noted that trajectories with the color of a pale yellow was difficultto distinguish from the rest.

CHAPTER 4. RESULTS 23

Figure 4.4: The experienced difficulty of question 1, for 50, 230 and 415trajectories for all six participants. Difficulty was rated on a scale from 1 to 5,where 1 was considered easy and 5 difficult.

Question 2: Can you locate any group behaviors in the scene between frame100 - 1300?

When performing this task all six of the test subjects looked at the trails to see ifobjects moved in parallel and in a close proximity to one another. All of the testsubjects found instances where people were walking in pairs. However, fourout six also found a larger group of three people. The experienced difficultyfor this task can be seen in figure 4.5.

24 CHAPTER 4. RESULTS

Figure 4.5: The experienced difficulty of question 2, for 50, 230 and 415trajectories for all six participants. Difficulty was rated on a scale from 1 to 5,where 1 was considered easy and 5 difficult.

Question 3: Choose a person and track them throughout the scene, can youdescribe their movement?

Users had two different approaches to solve this task. Three users chose asmaller time interval and tracked the movement of the person by moving theinterval back and forth, describing the movement step by step. The other threeidentified where the person entered the scene, selecting this as the beginning ofthe interval and then continued to expand their selection until noting that an exithad been made. They then had the entire trajectory, with head and tail for theentirety of its presence in the scene to look at and describe. The experienceddifficulty for this task can be seen in figure 4.6.

CHAPTER 4. RESULTS 25

Figure 4.6: The experienced difficulty of question 3, for 50, 230 and 415trajectories for all six participants. Difficulty was rated on a scale from 1 to 5,where 1 was considered easy and 5 difficult.

Question 4: Can you tell how many people are present in the scene betweenthe frames 400-900 ?

The difficulty of performing this task for all three densities can be seen in figure4.7, where it can be noted that the average experienced difficulty was the samefor 50 trajectories as for 230 trajectories. Four out of the six users counted theamount of trajectories instead of reading the number printed at first. However,they found the number eventually while performing the task. Test participantfive thought that the number was not printed clearly enough and motivatedtheir rating of difficulty based on this. Two of the users also commented thatthe slider did not provide enough accuracy and that it was hard to know theexact size of the chosen time interval.

26 CHAPTER 4. RESULTS

Figure 4.7: The experienced difficulty of question 4, for 50, 230 and 415trajectories for all six participants. Difficulty was rated on a scale from 1 to 5,where 1 was considered easy and 5 difficult.

Question 5: Can you tell what the most visited locations are in this scene overthe entire time span?

The experienced difficulty for this task can be seen in figure 4.8. All test subjectsused the heatmap to perform this task. Note that the average experienceddifficulty for the densities of 230 and 450 trajectories was the same.

One user commented that the heatmap looked too sparse when performingthe task at a density of 50 trajectories and therefore rated the difficulty as 2.Two participants also experimented with the slider to select the entire intervalto create an aggregated view of all trajectories - commenting that it was notpossible to determine whether or not some trajectories were hidden underneathothers offering no aid in the task. However, they also noted that this viewprovided them with the areas that were not visited.

CHAPTER 4. RESULTS 27

Figure 4.8: The experienced difficulty of question 5, for 50, 230 and 415trajectories for all six participants. Difficulty was rated on a scale from 1 to 5,where 1 was considered easy and 5 difficult.

The average difficulties for the three different densities can be seen in figure4.9. On average it appears that question 2 - whether or not any group behaviorscould be located - was the most difficult for all three densities. The averagedifficulty to perform all tasks 1-5 is in the range between 1 and 2, with a smalldifference between the density of 230 and 415 trajectories.

28 CHAPTER 4. RESULTS

Figure 4.9: The average difficulty for all questions 1-5 tested on 50, 230 and415 trajectories. Difficulty was rated on a scale from 1 to 5, where 1 wasconsidered easy and 5 difficult.

Chapter 5

Discussion

Techniques from the fields of cartography and geographical information systemswere adopted in this project since they offered previous work on visualizationsfor trajectories and spatio-temporal data. However in this thesis an attemptwas made to utilize the techniques to visualize trajectories of crowds ratherthan that of GPS data from separate individuals. The visualization presentedhere does not rely on a traditional map, but rather focuses solely on humanmovement within a limited space - displaying characteristics typical of crowds.The chosen dataset separates our implementation from previous work, but hasa similarity in the fact that it utilizes a time filter and animation - for instancethe spatio-temporal visualizer [18], which also was built using D3.js.

The task rated as themost difficult by users was question number two as shown infigure 4.9. This question is asking the user to locate group behaviours in the data- something which occurs in crowds but might not be present in datasets withGPS tracking of separate individuals. It is therefore interesting to investigatefurther if there are any other features or visualization techniques which mightaid in the exploration of group behaviours in trajectory data. This could possiblystrengthen the animated map currently used in the implementation.

As for the user tests and creation of tasks, the framework suggested by Adrienkoet al. [16] has in this thesis been interpreted as in the previous work of Goncalveset al. [11, 13] such that the levels of elementary and general are directlyrelated to the number of elements involved. Our user test with six participantsis comparable in size to [13] where five participants tested a system still indevelopment. We think that despite there being a small number of participants

29

30 CHAPTER 5. DISCUSSION

used in this work - it was able to yield results that illustrated interesting problemsand possible improvements for the visualization. However at a later stage ofdevelopment we believe it would be desirable to increase the amount of testsubjects to gather more quantitative data to analyze. It is also important tomention that although each participant got time to familiarize themselves withthe tool it is still not possible to completely rule out learning effects, as userscould have felt more comfortable with the tool the longer they interacted withit.

For the effectiveness measure, all users were able to complete all tasks. This isa positive result, but for another iteration of user tests it would be of interestto go even further with this metric and test a level of accuracy. This couldbe done by measuring the accuracy of the answers provided by users for eachtask. As for the framework, we have been able to show that it is applicableto a visualization utilizing a dataset with crowds, despite its differences fromdatasets in previous works [18, 11, 13].

Since the average experienced difficulty for all five questions is in a rangebetween 1 and 2, as seen in 4.9, for the maximum amount of trajectoriesavailable in this dataset - there could still be room to test how the system scaleswith an even larger set of data.

As previously mentioned problems and suggested improvements were broughtto attention by the user test. One of these problems was that one of the colorsof the trajectories - a pale yellow, was difficult to distinguish from the rest. Thiscan easily be solved by using a darker color. It was also mentioned that theslider for time could be improved by complementing it with an input field forthe end points of an interval. By adding this feature one can keep track of theinterval’s size as well as the start and end of the interval with greater accuracy,compared to the drag and click option of the slider. We hypothesize that theissue with users not noticing that the number of trajectories was printed, couldbe due to the fact that the text size was small and placed beneath a static header.

Another issue to address is the fact that trajectory data could be sparse in theamount of captured points of each trajectory. Since the heatmap is built onthese captured points, this could result in sparse areas in the heatmap despite itbeing visited by pedestrians. We therefore advice that the data is interpolatedin order to avoid any potential problem.

CHAPTER 5. DISCUSSION 31

5.1 Future Work

Considering that the implementation does not support tasks of the categoryelementary ”when” and elementary ”what+where” this could be a natural nextstep in the development of the visualization. The feedback provided by theusers in the think aloud also offers insight into things which should be furtherimproved with the implementation, as mentioned in the previous section.

As for the user tests, the amount of participants could be made larger at a laterstage of development. It would also be interesting to introduce an aspect ofaccuracy to the effectiveness metric, as well as measuring efficiency.

Chapter 6

Conclusion

We have created a visualization consisting of an animated map, a heatmapand a slider for filtering the data. The evaluation shows that this approach isapplicable on small datasets of crowd trajectories - but it also implies that itcould be possible to test even larger datasets than what has been done withinthe scope of this thesis.

We can conclude that our visualization is a tool that can aid a user in analyzingand finding patterns in pedestrian trajectory data.

We have also been able contribute to the collection of works [18, 11, 13] thathave implemented the framework suggested by Adrienko et al. [16] to evaluatevisualizations of human trajectory data. Since the work in this thesis concernscrowds, this could provide a reference for future work attempting to evaluate asystem with data of this nature.

32

Bibliography

[1] ISO 924111:2018(E). Ergonomics of human-system interaction —Part11: Usability: Definitions and concepts. Standard. Geneva, CH: Interna-tional Organization for Standardization, Mar. 2018.

[2] Natalia Andrienko and Gennady Andrienko. “Visual analytics of move-ment: An overview ofmethods, tools and procedures”. In: Information Vi-sualization 12.1 (2013), pp. 3–24. doi:10.1177/1473871612457601.url: https://doi.org/10.1177/1473871612457601.

[3] P. Cairns B. Craft. “Beyond guidelines: what can we learn from thevisual information seeking mantra?” In: Information Visualisation, 2005.Proceedings. Ninth International Conference on (2005).

[4] Ann Blandford, Dominic Furniss, and Stephann Makri. “QualitativeHCI Research: Going Behind the Scenes”. In: Synthesis Lectures onHuman-Centered Informatics 9.1 (2016), pp. 1–115. doi: 10.2200/S00706ED1V01Y201602HCI034. eprint: https://doi.org/10.2200/S00706ED1V01Y201602HCI034. url: https://doi.org/10.2200/S00706ED1V01Y201602HCI034.

[5] Bootstrap. https://getbootstrap.com/. Accessed: 2018-05-12.

[6] Brush snapping.https://bl.ocks.org/mbostock/6232537.Accessed: 2018-05-13.

[7] Rose Challenger, Chris W. Clegg, and Mark A. Robinson. “EmergencyPlanning College Understanding Crowd Behaviours: Guidance andLessons Identified”. In: (June 2009).

[8] C. Chen. “Top 10 unsolved information visualization problems”. In:IEEE Computer Graphics and Applications 25.4 (July 2005), pp. 12–16.issn: 0272-1716. doi: 10.1109/MCG.2005.91.

33

34 BIBLIOGRAPHY

[9] D3.js. https://d3js.org/. Accessed: 2018-02-16.

[10] Niklas Elmqvist and Ji Soo Yi. “Patterns for visualization evaluation”. In:Information Visualization 14.3 (2015), pp. 250–269. doi: 10.1177/1473871613513228.

[11] Tiago Gonçalves, Ana Paula Afonso, and Bruno Martins. “Cartographicvisualization of human trajectory data: overview and analysis”. In: Jour-nal of Location Based Services 9.2 (2015), pp. 138–166. doi:10.1080/17489725.2015.1074736.

[12] Tiago Gonçalves, Ana Paula Afonso, and Bruno Martins. “Visualizationtechniques of trajectory data: Challenges and limitations”. In: CEURWorkshop Proceedings 1136 (2013).

[13] Tiago Gonçalves et al. “ST-TrajVis: Interacting with Trajectory Data”. In:Proceedings of the 27th International BCS Human Computer InteractionConference (HCI 2013) (2013).

[14] Introduction to the DOM. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction.Accessed: 2018-05-14.

[15] Krumm J. Lee WC. “Trajectory Preprocessing”. In: Computing withSpatial Trajectories. Springer, 2011. Chap. 1, pp. 3–33.

[16] P. Gatalsky N. Adrienko G. Adrienko. “Exploratory spatio-temporalvisualization: an analytical review”. In: Journal of Visual Languages &Computing 14 (2003), pp. 503–541.

[17] Donna J. Peuquet. “It’s about Time: A Conceptual Framework for theRepresentation of Temporal Dynamics in Geographic Information Sys-tems”. In: Annals of the Association of American Geographers 84.3(1994), pp. 441–461. issn: 00045608, 14678306. url: http://www.jstor.org/stable/2563777.

[18] Hugo Sequeira. “Spatio-Temporal Visualizer: Online tool to visualizespatiotemporal data with an interactive time-window slider, using D3.js,Leaflet.js and Crossfilter”. In: (July 2014).

[19] Anna-Katharina Lautenschütz Somayeh Dodge RobertWeibel. “Towardsa taxonomy of movement patterns”. In: Information Visualization 7.3-4(2008), pp. 240–252. doi: https://doi-org.focus.lib.kth.se/10.1057/PALGRAVE.IVS.9500182.

BIBLIOGRAPHY 35

[20] Chad A. Steed. “Interactive Data Visualization”. In: Data Analyticsfor Intelligent Transportation Systems. Ed. by Jan Fagerberg, DavidC. Mowery, and Richard R. Nelson. The Boulevard, Langford Lane,Kidlington, Oxford OX5 1GB, United Kingdom: Elsevier, 2017. Chap. 7,pp. 165–190.

[21] M. Tory T. Moller. “Human factors in visualization research”. In: IEEETransactions on Visualization and Computer Graphics 10 (2004), pp. 72–84. doi: 10.1109/TVCG.2004.1260759.

[22] UCY Computer Graphics Lab. https://graphics.cs.ucy.ac.cy/research/downloads/crowd-data. Accessed: 2018-02-16.

Appendix A

Results in Tables

Density: 50, avg. difficulty: 1.37Participant Question 1 Question 2 Question 3 Question 4 Question 51 1 1 1 1 12 1 1 1 1 13 1 1 1 1 14 4 2 1 1 15 1 2 2 3 16 1 3 1 1 2

Density: 230, avg. difficulty: 1.52Participant Question 1 Question 2 Question 3 Question 4 Question 51 1 1 2 1 12 1 1 1 1 13 2.5 3 2 1 14 4 2 1 1 15 1 3 2 3 16 1 2 1 1 1

36

APPENDIX A. RESULTS IN TABLES 37

Density: 415, avg. difficulty: 1.58Participant Question 1 Question 2 Question 3 Question 4 Question 51 1 1 2 1 12 1 1 2 2 13 1 4 2 1 14 4.5 2 1 1 15 1 2 1 4 16 1 2 2 1 1

www.kth.se