Parameter Studies on an in- teractive tiled-panel display

(1)

Bachelor Informatica

Parameter Studies on an

in-teractive tiled-panel display

Hidde Hensel

June 16, 2015

Supervisor(s): Robert Belleman (UvA)

Inf

orma

tica

—

Universiteit

v

an

Ams

terd

am

(2)

(3)

Abstract

Scientific research often use simulators for their experiments and results. With today’s tech-nology becoming more advanced, simulators are getting increasingly complex. These complex simulators often use multi-parameter datasets to generate complex simulations. With the in-creasing complexity and size of these datasets, two major problems arise: The first problem is that the amount of data and the parameter space of these multi-parameter datasets are so large that finding a simulation with the desired result is extremely difficult. The second problem is that, due to the complexity of the data, analysing multiple simulations often pose a difficult task that cannot yet be solved by machine. To solve these problems, an application had to be made that could interactively visualize a collaborative exploration of a multi-parameter dataset on a tiled-panel display. The result of this thesis is a web application that accomplishes this by using an interactive star chart (with touch support) to explore the multi-parameter dataset of the Oncosimulator. The Oncosimulator is a complex simulator that can simulate an in vivo tumour response to therapeutic modalities within the clinical trial context. With the use of the explored or selected datasets from the Oncosimulator by the interactive star chart, multiple simulations can be visualized and shown in the application, and a collaborative analysis can be done by multiple users. Thus, the goal of this research project was accomplished, with the major conclusion that an interactive star chart is a unique way to explore the solution space spanned by a multi-parametric problem through visual comparative analysis.

(4)

(5)

Introduction

Scientific research is constantly evolving, and thus constantly generating new results. Results of-ten consist of observations of certain experiments. With the use of simulators, these experiments can be simulated easily and cheaply. As such, these simulators offer a great alternative way to generate results, especially when certain results could normally only be generated by doing experiments that are non-practical, dangerous or unethical in real life. With the performance of hardware and software increasing every year, more complex and more realistic simulators can be made to generate these results.

The results these simulators generate are also getting more and more complex. A result of a simulator can depend on a lot of different factors or parameter values. The data to generate these results are often datasets of a multivariate, multifaceted or multi-parameter data type. With the increasing complexity and size of these datasets, two major problems arise:

a. The first problem is that the amount of data and the parameter space of these multi-parameter datasets are so large that finding a simulation with the desired result is extremely difficult. Searching through the entire multi-parameter data often takes too long. To solve this problem, a way has to be found to do an interactive exploration of the parameter space so that (multiple) results can quickly be found.

b. The second problem is that, as mentioned before, the simulators generate data with in-creased size and complexity. Due to the complexity, analysing multiple simulations often pose a difficult task that cannot yet be solved by today’s algorithms. If this is the case, a comparative analysis by experts can be done in order to reach the wanted conclusions.

With these problems in mind, a possible solution or step in the right direction would be an application in which the user can interactively explore a complex multi-parameter dataset and do a comparative analysis on the simulations of these datasets accrued. These simulations have to be visualized in order to compare and analyse them with the help of experts of that particular field. The visualization preferably has to be done with a high level of interaction and a large screen size to compare as many simulations as needed.

1.1 Motivation

One example of a complex multi-parameter dataset is the dataset of the Oncosimulator [17]. The Oncosimulator is a simulator defined as an information technology system simulating in vivo tumour response to therapeutic modalities within the clinical trial context [17]. As one can imagine, a tumour response is heavily dependent on a lot of factors, such as the type of treatment or the amount of medicine given with such treatment. Other factors might be the health of the patient, the composition of neighbouring cells and so on.

(8)

The goal of the simulations generated by the Oncosimulator is to make a comparative analysis of a patient to select and give the best treatment possible. To accomplish this, having the two major problems with multi-parameter datasets discussed above in mind, the parameter space must be explored and the simulations have to be compared in order to reach the optimal result. As such, the data of the Oncosimulator will be perfect to use as test-data in this research’s goal: Designing, implementing and evaluating an application that can interactively visualize a collaborative exploration of a multi-parameter dataset on a tiled-panel display.

This thesis continues in chapter 2 in which the dataset of the simulator and the simulator itself are explained. Also in chapter 2, other multi-parameter studies are discussed as well as a possible way to visualize multi-parameter data. In chapter 3, design choices and considerations are discussed. In chapter 4, The implementation of this application is explained, with all the different elements of the application described. In chapter 5, results of the evaluation of the final application are shown and discussed. In chapter 6, these results are discussed further and conclusions are drawn. Also possible limitations of the application are discussed and how these can be solved in future work.

(9)

CHAPTER 2

Related Work

2.1 Oncosimulator

The Oncosimulator is defined as an information technology system simulating in vivo tumour response to therapeutic modalities within the clinical trial context [17]. It generates output data (simulations) with the use of multiple (selected) parameters. There are two kinds of parameters used for this, namely cell and treatment parameters. Cell parameters describe the behaviour of tumour cells, and treatment parameters describe the characteristics of a treatment plan. These parameters together generate a tumour model. To show and select the parameters of specific simulations, the Oncosimulator uses the OncoRecipeSheet (ORS) as seen in in Figure 2.1 [17]. The ORS is a graphical user interface to select the parameters via a simple parameter selection menu that consist of a list of all the parameters. When a parameter is selected, a new window is added to the ORS with the variation of that parameter shown within the dataset, and the selected value of the simulation is highlighted.

The Oncosimulator has done numerous runs. The data of these runs have been collected and stored. The parameter data with the simulation’s parameters is stored in a simple relational database table. The output data of the Oncosimulator is stored on a storage server.

Figure 2.1: The OncoRecipeSheet, a visualization of the Oncosimulator’s dataset (from Sta-matakos et al, 2014).

(10)

2.2 Subjunctive Interfaces

Many applications require exploration of multiple datasets or alternative scenarios, but most support it poorly [14]. To handle viewing multiple simulations of multiple different parameter values at the same time, a subjunctive interface could be used. In a paper by Aran Lunzer and Kasper Hornbaek, use of subjunctive interfaces is proposed to provide mechanisms for the parallel setup, viewing and control of different scenarios [14], [13]. Subjunctive interfaces accomplish this by using a distinct colour per dataset visualised. An example of a subjunctive interface can be seen in Figure 2.2 [13]. In this figure, simulations of ants’ food foraging behavior and their corresponding parameters are shown. On the left side, a simple interface is shown. On the right side, a subjunctive-interface version of three scenarios or simulations is shown [13].

Figure 2.2: A comparison between a simple (left) and a subjunctive (right) graphical interface (from Jantke et al, 2005).

The use of subjunctive interfaces was also realised in the OncoRecipeSheet of the Oncosimu-lator, as seen in Figure 2.3 [17]. The parameter selection is done via that same menu, but accrued simulations now have a distinction of different colours, as is usual with subjunctive interfaces. As seen in this figure, a user can differentiate between the parameters of multiple datasets and their related simulations.

However, there is a possibility that not every parameter value is visible, as the visible parameters depend on the variation of that parameter in the entire dataset and the size of the window repre-senting that parameter. Also, the parameter values shown only represent the parameters of the specific simulations shown. Sometimes the user wants a visualization of the entire dataset, to see the most used parameter combinations or variation in the entire dataset. The OncoRecipeSheet currently has no way of visualizing this. The OncoRecipeSheet in Figure 2.3 [17] only shows eight different parameters, a way must be found to show every parameter that a simulation consists of.

(11)

Figure 2.3: A subjunctive interface used in conjunction with the Oncosimulator’s On-coRecipeSheet (from Stamatakos et al, 2014).

(12)

2.3 3D View RESTful application

To visualize the numerous amount of simulations already done, a 3D View RESTful web appli-cation was developed. REST stands for REpresentational State Transfer [9]. A RESTful web application lets one post, read and delete data with the use of HTTP requests [16]. This web application lets the user select the visualized output data of a simulation by its parameter id. There are also five selectable visualization parameters as seen in Figure 2.4.

With the time parameter, the simulation at a specific time can be selected. By using this pa-rameter, the user can see if the volume of the tumour grows or shrinks, an important part of the comparative analysis. The smooth surface parameter can be toggled to enable smoothing of the 3D plotted tumour. Tight axes lets one see the entirety of the tumour, when one clearly wants to visualize the shape of the volume of the tumour. Overlay real pre-treatment tumour can be turned on to see the overlay of the original tumour in order to quickly compare size. Camera viewpoint height sets the height of the view box of the 3D plot.

This application is great for viewing the results of a treatment simulation by the OncoSimulator. However, a problem with this application is that knowledge of the parameter database is needed to request other simulations with specific id’s. As a result, the 3D View web application can only be used when the id of a specific dataset or simulation is known. It is also only possible to see one simulation at a time. Visualising multiple of these 3D plots can help when doing a comparative analysis of multiple simulations.

(13)

2.4 Multi-Parameter Studies

A study similar to this research project has already been done previously by Victor Milewski and Alex Khawalid [15]. The study also tried to find the solution to visualizing multi-parameter simulator results by developing an application that could interactively visualize a collaborative exploration of a multi-parameter dataset. The resulting web application, as seen in Figure 2.5, was made with two users in mind. On both sides of the application a simulation is shown, with below that simulation all the parameters of the current visualized dataset with sliders at the current dataset’s value. By moving the sliders, the values are adjusted and a new simulation is requested. Simulations can be dragged and dropped in the red dropzones. By using these, users can quickly change simulations and modify the selected simulation’s parameters. The row in the middle lets one store the simulation, so simulations of parameter combinations can be compared or dragged to the other user for further adjustments. This functionality provides a way for multiple experts to collaboratively work on the same problem.

A problem with this solution is that it has not been tested on the data of the Oncosimulator, but on another dataset with a maximum of nine different parameters. While a dataset with nine different parameters is still considered a multi-parameter dataset, the aim for this thesis is to support many more. The modifying of different parameters by sliders also does not scale well with added parameters on a screen, as (for example) more than twenty sliders simply do not fit on a normal display.

Also, only two parameter combinations can be seen of the entire dataset. As a result, only a small part of the entire multi-parameter dataset can be explored.

Figure 2.5: A possible solution to a comparative, interactive, multi-parameter exploration (from Victor Milewski and Alex Khawalid, 2015).

(14)

(15)

CHAPTER 3

Design Choices

3.1 Framework

At the start of this project, the choice was made to create a web application. A web application has multiple advantages over a native application. A major boon for web applications is the fact that it can theoretically work on almost every device with an Internet connection. A user could run the application from anywhere, with as many kinds of different devices as possible. This would be advantageous to the collaborative aspect of the application.

A web application uses a web page with the programming language Javascript. Javascript is a lightweight, interpreted programming language with object-orientated capabilities [10]. Web pages can include Javascript programs that interact with the user, control the browser, and dynamically create HTML content [10]. Javascript is the ninth most used programming language in the world [8]. Because of this popularity, a lot of Javascript libraries have been developed for a lot of different features. For instance, the 3D View RESTful web application could be reused in this application.

Another reason to use a web application instead of a native application is because of the amount of web pages or web applications that use multi-parameter datasets and/or relational databases. The application can possibly be reused to explore these other datasets.

3.2 Interactive Star Charts

There are several ways to visualize multi-parameter datasets. A spider, radar, web or star chart is also a method of displaying multi-parameter data in a star-shaped figure [11]. In this thesis, the term star chart will be used to describe these kinds of visualization methods. The star chart provides a better view for human understanding of multi-parameter data other than machine learning [18]. Therefore, it is common to be used for manual feature selection or outlier detec-tion [18]. Often several star charts or star plots are shown in order to do a comparative analysis of the multivariate data. These star charts are sometimes plotted inside the same star chart, and sometimes displayed separately. An example can be seen in Figure 2.6 [11]. Each star plot shows the parameter values of a specific dataset or parameter combination. Thus each star plot represents a single dataset, simulation or observation.

In the example shown in Figure 3.1, multi-parameter datasets of several mental disabilities are visualized. For each type of disability, a star plot is drawn. The resulting star chart is a clear visualization of the corresponding parameter values or factors that influence a particular disabil-ity. Therefore a clear distinction can be made between the role of certain parameters and the related observation. Each star plot can be seen as a specific parameter combination. This clear distinction between parameter values is the exact thing needed when exploring a dataset: seeing which certain parameter values and combinations are related to each other or what the variation is of parameter combinations in the entire parametric solution space. But star charts are not yet used for exploring datasets, at least not interactively. Star charts used interactively may be able

(16)

to explore multi-parameter datasets.

Figure 3.1: An example of visualizing multi-parameter datasets of visualizing mental disabilities with the use of a star chart (from Funabiki et al, 2011).

However, star charts have not yet been made interactive, so the decision was made to explore the multi-parameter dataset with a custom interactive star chart. Because of the large amount of parameters in a multi-parameter dataset, the decision was made to start the Star Chart with zero parameters. The design would let a user add a parameter to the star chart and thus create a star chart with only the most important parameters.

3.3 Multiple simulations

To distinguish the multiple simulations and to quickly see which parameter combinations belong to which simulations, the choice was made to use the colouring aspect of subjunctive interfaces. As already mentioned in section 2.2, a subjunctive interface uses a specific colour to see the connection between a simulation and its parameter values. The specific colour is used in this application on the lines and on the simulation window.

The choice was made to create as many as possible simulations, but to only have enough room to show a maximum of 9 simulations on one screen initially, with the possibility to resize the re-maining simulations or drag them across/to other screens for better comparison. All simulations are created and shown on the right side of the application, next to the star chart.

(17)

3.4 Libraries

Because there are a lot of Javascript libraries, the choice was made to use a combination of these libraries in order to quickly fulfill as many features of the web application as possible. Libraries were searched for two specific features: Making the web application interactable (by touch) and drawing custom-made elements on the graphical user interface of the web application. Perfect would be if these libraries could be combined. Also, because not every library works on every browser, a design consideration had to be made about browser support.

3.4.1 Interactjs

There are numerous ways to make a web application interactive, one way of doing this is adding touch or click events to the application. For this research project, the choice was made to use a Javascript library for the handling of these types of events: Interactjs [2]. Interactjs is a Javascript module or library developed by Taye Adeyemi for drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers [2]. It supports many different kind of browsers, depending on the gestures or touch interactions one would use in the appli-cation. It has cross-browser capabilities, supporting both the desktop and the mobile version of Google Chrome, Firefox and Opera as well as Internet Explorer 8+ [2]. This is shown in Table 3.1. As seen in this table, Chrome has the most working gestures, so this was taken into consideration while choosing different types of browser support. Because Interactjs has all of the gestures needed for this application, other interaction libraries were not investigated. Interactjs is released under the MIT license.

Chrome Firefox Internet Explorer

swipe + + + drag + + + drag multi-touch + - -dropzone + + + snapping + + + resizing + + + SVG + + + pinch + - -tap + + + double tap + + -hold + + -touch move + - -multi-touch rotate + -

-Table 3.1: Interactjs support of different types of touch gestures on different types of browsers.

3.4.2 Snap.SVG

There are several ways to draw elements in a web application, the most used ways are via HTML5 Canvas or via Scaled Vector Graphics (SVG). Because the drawn elements have to be interactive, and canvas does not support binding events to parts or elements of a drawing, the choice was made to use SVG. With SVG, there are already several libraries that support and draw star charts, except that none of those draw interactable star charts. Due to the fact that the design in this thesis is rather unique, the choice was made to draw everything by SVG and not use a common graph visualization tool such as D3 [1]. To make the drawing of SVG a little less work, the usage the Snap.svg library has been chosen. Snap SVG is a Javascript SVG library to create interactive, resolution-independent vector graphics for the modern web [5]. Snap.svg is released under an Apache 2 license.

(18)

3.4.3 jQuery

To simplify javascript usage, jQuery was used. jQuery is a JavaScript library that makes things like HTML document traversal and manipulation, event handling, animation, and AJAX much simpler with an easy-to-use API that works across a multitude of browsers [3].

3.4.4 Browser support

When creating a web application, caution must be exercised with the choice of browsers. Different browsers react differently to many libraries or native functions. This can result in many cross-browser bugs. To focus on the implementation instead of debugging, the choice was made to primarily develop for one browser: Google Chrome. Google Chrome is the most used browser in the world. From May 2014 to May 2015, 47.25% of internet users worldwide used Chrome to browse web pages [6]. Due to Google Chrome being the most used browser in the world, a lot of Javascript libraries work well with this browser. The libraries used all work well with Google Chrome. As a result, this application is optimized for use with the Google Chrome browser. However, one feature that browsers, Google Chrome included, do not (yet) fully support is the detection of multiple screens. A multiple screen setup is seen as one large screen. So in order to use a web application on multiple screens, a setup of variables related to screen sizes might be needed in order to divide all the different elements of the application among multiple screens.

3.5 Flowchart of the Application

With these design considerations in mind, a flowchart of the application was made, with a focus on the interactive star chart. This flowchart can be seen in Figure 3.2 and demonstrates the interaction level of the interactive star chart.

The application starts with a parameter selection button and a patient selection menu. The patient selection menu can be used to change the current parameter dataset to the dataset of that specific patient. The parameter selection button generates the parameter selection menu on tap. This shows a list of parameters. A parameter can be selected by tapping on that parameter. Thus, on tap, it creates a parameter group in the interactive star chart. Holding this parameter group removes it from the interactive star chart. When there are more than two parameter groups in the interactive star chart, star charts are drawn. These star charts have two main components: Star points and star lines. Star points are the interactive part of the star charts, representing a certain parameter value. On tap, star points can be selected and the star chart will be redrawn with parameter combinations of selected star points. On hold, all star points will be deselected, and the star charts will be redrawn.

When the parameter selection button is held and there are star charts drawn, simulations and tools to modify these simulations are created. The explanation of these elements are noted in the next chapter.

(19)

(20)

(21)

CHAPTER 4

Implementation

4.1 Front end

Because the main objective of this research project is visualization, a large part of the implemen-tation consist of creating the graphical user interface or front end. The application starts with a patient selection drop down menu and a parameter selection button. These can be seen by looking at A and K in Figure 4.1. By tapping or clicking the circle button, a parameter selection menu will appear, as seen in Figure 4.3. With the help of this menu, a user can add a parameter to the circle button and thus create star charts with the circle button as the origin.

Figure 4.1: Possible end situation of the interactive star chart application using the Oncosim-ulator dataset and three different parameters selected. On the left the interactive star chart is shown. On the right the simulation output is visualized. Further details can be seen in Figures 4.2 to 4.5.

(22)

4.1.1 The Interactive Star Chart

The elements of the interactive star chart mostly use two types of interactions: A tap interaction and a hold interaction. A tap interaction is done by either clicking the element with a mouse or tapping it with a finger when a touchscreen is used. A hold interaction is done by clicking and holding the left mouse button or holding a finger on the element for around 600 ms.

Figure 4.2: Possible interactive star chart of the Oncosimulator dataset with three parameters selected.

A. The Parameter Selection Button

The parameter selection button is the main component of the application and the only element visible at the start of the application. It has two functions. The first is the ability to add pa-rameters and thus start the creation of the interactive star chart. This can be done by using the tap gesture. On tap it generates a parameter selection menu, as seen in Figure 4.3. This menu is a list of all the column or parameter names in the database. When swiping through this list and tapping a certain parameter, the related parameter group will form. This parameter group will be attached to the parameter selection button in order to form the interactive star chart. A minimum of three parameters must be selected to form a star chart.

When star charts have been drawn, a hold interaction on this button will visualize the associated simulations with added tools as seen in Figure 4.4 and Figure 4.5.

(23)

Figure 4.3: The (scrollable) Parameter Selection Menu.

B. The Parameter Group

The parameter group represents the parameter selected for that specific patient. It shows a text-box with the parameter name and a line with a representation of the variation of the parameter values in the database. A new parameter group will always be shown on the left side of the parameter selection menu, all the other parameter groups will be rotated clockwise (with an animation) around the parameter selection button in order to create a visual distinction between parameter groups.

On hold, the parameter group is removed and the remaining parameter groups in the interactive star chart are rotated counterclockwise accordingly.

C - E. The Parameter Value Point

The parameter value point is part of the star charts drawn. These star charts are automatically generated when three or more parameters have been added to the application. Tapping this small coloured value point leads to selecting that specific value of that specific parameter. A selected value point can be seen as E. in Figure 4.2. Selected parameter values show as circles with a white fill. On hold, all the selected value points are deselected and all the star charts are drawn again.

D. The Star Chart Line

The coloured star chart lines represent the relation between specific parameter combinations. The width of this line represents the amount of entries in the database with that specific parameter combination. The colour will also be used later in the application when simulations are being visualized as part of the subjunctive interface.

4.1.2 The Simulations

The simulations use two types of interaction: A tap and a drag interaction. As mentioned earlier, a simple left mouse click or tap with a finger results in a tap interaction. A drag interaction involves clicking, holding and moving the mouse or holding and moving a finger on screen.

(24)

Figure 4.4: Several visualized simulation windows. F. The Interactable Simulation Handle

This handle of the simulation window lets the user drag the simulation across the screen. A simulation window can be dragged by using a drag gesture on the coloured simulation handle. Multi-touch is supported while dragging, so multiple simulations can be dragged at the same time. The information in the handle represent the id value of current simulation and how many more simulations there are with the specific parameter combination of that colour.

G. The Alternative Simulation Buttons

The Alternative Simulation Buttons are two buttons, named Prev and Next. These two buttons let the user explore through the alternative simulations with the specific parameter combination of that window and colour. When another alternative simulation is requested, a new image of that simulation is requested and the image is shown.

H. The Visualized Simulation

The visualization of the simulations of the tumours are realised by the use of the 3D View RESTful web application. Depending on the selected parameters, the image is generated by building the URL to that specific image with a certain id and visualization parameters and requesting that specific image to the rest client. The image of the simulation can be rotated by a drag gesture to show a 3D view of the simulation. Because the original 3D view code is used for this, it had to be modified to support touch interactions. The native touch events are used for this and the interaction library is not. The result is that touch is supported but multi-touch is not. The simulation windows are also resizable by holding and dragging a corner to the desired size.

(25)

4.1.3 Tools to modify the simulations

As with the interactive star chart, only the tap and hold interactions are used.

Figure 4.5: The tools to modify the simulations. I. The Trashcan

The trashcan lets the user remove simulations from view. Holding the trashcan results in remov-ing all of the simulations and the tools to modify these simulations, excludremov-ing the patient selection menu but including the trashcan itself. Dragging a simulation to the trashcan and dropping the simulation on top of the trashcan results in the deletion of that particular simulation.

J. REST interface integration

This represents several visualization parameters as used in the 3D View RESTful application. By tapping one of the options, it updates all of the simulations with the according variable. For an explanation of the visualization parameters, see the documentation of the 3D view implemen-tation as described in related work.

K. The Patient Selection Menu

Because the goal of the Oncosimulator is to analyse all simulations performed for one patient, a patient selection menu was made. When selecting another patient, the whole star chart including the parameter groups are deleted. The simulations and tools to modify the simulations are not removed, as one may want to compare the resulting simulations with multiple different patients.

4.2 Back end

The back end of this application uses two different types of simulation data: The parameter data and the output data. The simulation parameter data was used by the Oncosimulator to create the simulation output data and is used in this web application to create the interactive star chart. The simulation output data is used by this web application, with the help of the 3D View REST service, to visualize the simulations. An overview of how the (back end of this) application deals with these different kinds of data can be seen in Figure 4.6.

The interactive star chart is more focused on the simulation’s parameter datasets. The simula-tion’s parameter datasets can be seen on the left side of the figure. The database where these

(26)

datasets are stored is a relational database managed by MySQL. All of the parameter data used in this application is kept in one table and can be accessed by doing SQL queries. These SQL queries are done via PHP scripts on the web server of the web application [4].

In order improve the responsiveness and general usability of the web application, all of the calls to the server from the site are done via AJAX. AJAX stands for Asynchronous Javascript and XML and is a technique for creating dynamic web pages [12]. With the use of AJAX, web pages can be updated asynchronously by calling server-side PHP scripts. Thus a reload of the entire page is not necessary when updating a web page. Because this application has a lot of interaction with the relational database, multiple of these AJAX calls will be done.

What happens with the simulation output data can be seen on the right side of Figure 4.6. The output data of the Oncosimulator is stored on a storage server. The web application uses a previously developed 3D View REST service to visualize the output data of this storage server. The web application requests images by building an URL with the id of the simulations selected by the interactive star chart and sending that URL to the 3D View REST service.

Figure 4.6: Overview of back end components. The left side consists of the back end of the simulation parameter data. The right side consists of the back end of the output simulation data and visualization of this output data.

(27)

CHAPTER 5

Results

The result of this research project would be an application that had to support several different features with two major goals in mind: It had to support some type of interactive multi-parameter data exploration, and it had to be possible to do a collaborative analysis of this data with the application on a large or tiled-panel display. The resulting web application achieves this. Touch gestures make the application interactive, and the interactive multi-parameter data exploration is realised by using an interactive star chart. As seen in Figure 5.1, the application works on a tiled-panel display and by using multiple browsers with multiple instances of interactive star charts multiple users can do a collaborative analysis of (part of) the Oncosimulator’s dataset.

Figure 5.1: Example of a comparative analysis done by two users on a tiled-panel display with data from the Oncosimulator.

However, because the visualization of the parameter exploration is rather unique, it is dif-ficult to do an evaluation of this application. It can not easily be compared to other similar implementations, as there are very few. No application could be found that has the same fea-tures and that could easily be used on the Oncosimulator’s dataset. Because there is still a need for evaluation, other means had to be found. To still have some form of evaluation, the application was shown to visualization experts at SURFsara. SURFsara is an operating company that supports scientific research in the Netherlands and works closely with the academic and the business community [7]. The application was presented and the reactions and feedback of the

(28)

visualization experts at SURFsara were written down.

The first thing they noticed was that the interactive star chart indeed results in a new sort of visual representation of a parameter dataset of a simulator. However, the interpretation of the data visualized with the interactive star chart takes some time to get used to: it is an unusual type of visualisation of a dataset. Also, they remarked that the application was quite intuitive, if some explanation was given about the use and function of the touch gestures. Another thing they remarked was that the animations of the SVG, such as the rotating parameter groups, make the application enjoyable to use. The app is responsive and the feedback from an interaction is fast and pleasant. The draggable 3D simulation windows are also helpful and useful.

They had a few more remarks specifically about the interactive star chart. The relation between line width and amount of datasets with that star plot parameter combination was not clear. There should be looked into a solution where the user can instantly and clearly see the amount of parameter combinations in a dataset. Also, they felt that the application still missed an im-portant feature. When the data is explored and a wanted simulation has been selected, there is no way to convert this simulation to a star chart or to see the parameters of this simulation. To close the exploration loop, a method must be found to revert a simulation to a star chart. Also, they drew the conclusion that the larger the screen, the better the application can visualize (even more) parameters and (even more) 3D simulation windows. The application is dependent on screen size and the application is best used with a multi-touch display, so one or more users can work simultaneously.

(29)

CHAPTER 6

Conclusions

With the development of increasingly complex simulators, increasingly complex multi-parametric solution spaces are generated. The goal of this research project was to find a solution to a prob-lem in scientific research that occurs with relation to these multi-parametric solution spaces generated: To find a way to explore the solution space spanned by a multi-parametric problem through visual comparative analysis. To accomplish this, an application has to be designed, implemented and evaluated that can be sued to interactively explore a multi-parameter problem through visualization on a tiled-panel display. As a test problem, data of the Oncosimulator was used.

The result of this thesis is an application that achieves these required features, with some limi-tations. The interactive part of the application is achieved by using touch gestures, and it can still be used with a mouse when a touch display is not available. The (interactive) visualization of multi-parameter exploration of the Oncosimulator is done with the use of an interactive star chart. This results in a unique way of representing and exploring simulator parameter data, one that has not been done before. The collaborative aspect of the application is realised by using multiple browsers on (multiple) screen(s), as can be seen in Figure 5.1. As a result, researchers can do a comparative analysis with the visualized output of the explored datasets. Distinctions between simulations and parameter combinations are realised with the use of subjunctive inter-faces.

Other conclusions as seen in the results section are that the application works better on a tiled-panel display or a display of a large size, as the screen size and improved resolution result in more room for multiple parameters and multiple simulations. Also, because the interactive star chart works with a simple MySQL database table, the application could be used for a range of other types of multi-parameter data.

However, there are also some limitations with this application. Visibility of all the parameter values in a parameter group can not be guaranteed for every dataset. When the variation of a parameter reaches a certain threshold, values could overlap and those values can not be read. As already mentioned, the application is better used with a large screen size and so this could be solved somewhat by using a large screen resolution or a multi-monitor setup. Another limitation is that, when above 9 simulations are requested, not every simulation will fit on the same screen. So unless multiple screens are used and simulations are resized/dragged, this must be taken into consideration. A last limitation is the visualization REST service that generates the images of the Oncosimulator. When doing multiple requests for visualized tumours it has the possibility to crash. If the data of the Oncosimulator will continue to be used, the developers of this REST service must be contacted, as the visualization REST client must be updated and/or improved.

6.1 Future Work

As discussed above and as seen in the results, there are several limitations with the current application. Because of the uniqueness of the interactive star char, a lot of things could be done

(30)

to improve this first concept. An example would be to extend the collaborative part of the appli-cation. Currently the collaborative part comes from a multi-screen and multi-browser setup in which users can discuss their own findings with each other. Either cross browser interaction or multiple instances of users on one screen should be realised. With in-app collaborative support, the application can be improved by adding several additional features. For instance, it should be possible to give a selection of certain parameter values to another user for further investigation. Another added feature should be to copy or drag a selected simulation to another user.

Also, an important feature that is still missing is the ability to form a star chart of a specific simulation. It is currently not possible to see the exact parameter values of a specific visualized simulation, only the id of this simulation is shown. It may be useful to show a specific interactive star chart of a simulation, or just a list of parameter values of that simulation.

Interactivity overall could be improved by adding various new and different kinds of multi-touch gestures .Because the interactive star chart is based a lot on screen size and resolution, these aspects are very important for the visibility of all the sections of the application. With a lot of parameter groups and/or simulations, parts of the application could become clogged and difficult to view. A possible way to solve this would be to add a (new) touch gesture that zooms in on certain parts of the application.

The interactive star chart part of the application could also be improved by doing a couple of other things. One improvement would be to change the colour of the star points that have multiple parameter combinations or star charts crossing it to those multiple colours. Also, the thickness of the star lines should be changed. There should be experimented with the thickness of the lines of the star chart to distinguish the amount of those specific parameter combinations in the parameter dataset. Furthermore, when a lot of different star plots are drawn, it might be difficult for the user to distinguish the parameter combinations with their related star plot. Therefore, an improvement might be to create a 3D interactive star chart, with the third dimen-sion to attempt to differentiate all the star plots drawn.

(31)

Bibliography

[1] Data-driven documents (d3) homepage. d3js.org. [2] Interactjs homepage. interactjs.io.

[3] Jquery homepage. jquery.com. [4] Php homepage. php.net.

[5] Snap.svg homepage. snapsvg.io.

[6] Statcounter homepage. gs.statcounter.com. [7] Surfsara homepage. surfsara.nl.

[8] Tiobe homepage. www.tiobe.com.

[9] Roy Fielding. Representational state transfer. Architectural Styles and the Design of Netowork-based Software Architecture, pages 76–85, 2000.

[10] David Flanagan. JavaScript: the definitive guide. ” O’Reilly Media, Inc.”, 2006.

[11] Yasuko Funabiki, Hisaya Kawagishi, Teruhisa Uwatoko, Sayaka Yoshimura, and Toshiya Murai. Development of a multi-dimensional scale for pdd and adhd. Research in develop-mental disabilities, 32(3):995–1003, 2011.

[12] Jesse James Garrett et al. Ajax: A new approach to web applications. 2005.

[13] Klaus P Jantke, Aran Lunzer, and Jun Fujima. Subjunctive interfaces in exploratory e-learning. In Professional Knowledge Management, pages 176–188. Springer, 2005.

[14] Aran Lunzer and Kasper Hornbæk. Subjunctive interfaces: Extending applications to sup-port parallel setup, viewing and control of alternative scenarios. ACM Transactions on Computer-Human Interaction (TOCHI), 14(4):17, 2008.

[15] Victor Milewski and Alex Khawalid. Multi-parameter studies, 2015.

[16] Leonard Richardson and Sam Ruby. RESTful web services. ” O’Reilly Media, Inc.”, 2008. [17] Georgios Stamatakos, Dimitra Dionysiou, Aran Lunzer, Robert Belleman, Eleni

Kolokotroni, Eleni Georgiadi, Marius Erdt, Juliusz Pukacki, Stefan Rueping, Stavroula Giatili, et al. The technologically integrated oncosimulator: combining multiscale cancer modeling with information technology in the in silico oncology context. Biomedical and Health Informatics, IEEE Journal of, 18(3):840–854, 2014.

[18] Yudong Zhang, Zhengchao Dong, Genlin Ji, and Shuihua Wang. Effect of spider-web-plot in mr brain image classification. Pattern Recognition Letters, 62:14–16, 2015.

Parameter Studies on an in- teractive tiled-panel display

Bachelor Informatica