VisGumbo, VisMirrors, VisCut: Interactive Narrative ...web.cse.ohio-state.edu/~chen.8028/Publications... · ison, but instead searches for interesting patterns through comparison.

VisGumbo, VisMirrors, VisCut: Interactive Narrative Strategies forLarge Biological Pathway Comparisons

Alexander Garbarino, Zachary Garbarino, Liang Sun, Carl Schmidt, and Jian Chen, Member, IEEE

Abstract— We present three interactive strategies (VisGumbo, VisMirrors, and VisCut) and an interface design (VisNarrative) forcomparative studies of large pathway exploration. Our design relies on perceptual and cognitive design principles for optimal graphcomparison. Comparative studies among pathways is an important analysis task that has received widespread attention in the pastfew years. The major challenge in this context is to search for common and different graph entities and connections. We introduceseveral novel and advanced visual encodings and interaction methods to allow scalable comparison. We demonstrate their generalutility in design scenarios.

Index Terms—Biological pathways, graph interaction, graph visualization, narratives, exploration.

1 INTRODUCTION

Recent advances in high-throughput genomic technologies let biolo-gists capture pathway datasets containing tens of thousands of entitiesand relationship-forming structures. Mathematically, these pathwaysare compound graphs that contain hierarchical tree structures over net-works. For example, pathways contain sub-pathways, that includecellular locations (compartments) that further contain biomolecules asnodes and biological relationships as edges. In addition to structuralnetwork, nodes and edges in these compound graphs also carry numer-ous semantic attributes, such as gene expression levels and crosstalkattribute (genes which function in numerous pathways). Interpretingsuch complex relationships becomes one of the most challenging prob-lems in biological knowledge discovery [5].

Interpreting complex pathway relationships often requires not onlyvisualization but also interactivity in navigating through view opera-tions and breaking or combining pathways.

Graph communities have strongly emphasized layout algorithms topreserve mental maps, which refers to the structural cognitive infor-mation a user creates internally when observing a graph layout. Whenapplied to the gene pathway comparison, preserving mental map canhelp retaining entity locations so that correspondences can easily befound for node attributes comparisons [17] and generating more mem-orable graphs [2, 3]. However, the effectiveness of this approach hasbeen studied only in relatively small-scale graphs containing severaltens of nodes: the scalability of this mental map-preserving method isunclear for large pathway visualization that may contain graphs sev-eral orders of magnitude larger than those used in empirical studies.Others have suggested perceptual organization is important to graphlayout and users often make use of edges to represent groups and nodesproximity [7]. In our design, we attempt to balance mental maps andthe proximity comparability principle (i.e. that entities to be comparedshould be placed close to each other) [21], because a viewer must vi-sually scan equally distances for the same entities, increasing scanningtime when data sizes increase.

Recently, visualization researchers have developed many innova-tive techniques to represent pathway explorations. UpSet makes useof powerful automatic techniques to extract sets [12] and ConTours

• A. Garbarino, Z. Garbarino, and J. Chen are with the Computer Scienceand Electrical Engineering, University of Maryland, Baltimore County.E-mail: {garba1, zg1, jichen}@umbc.edu.

• L. Sun and C. Schmidt are with the Department of Animal and FoodSciences, University of Delaware. E-mail:{sunliang,schmidtc}@udel.edu.

Manuscript received 31 Mar. 2015; accepted 1 Aug. 2015; date ofpublication xx Aug. 2015; date of current version 25 Oct. 2015.For information on obtaining reprints of this article, please sende-mail to: [email protected].

extracts relationships in logic expressions [14]. Techniques as suchsupport relationship extraction; yet a biologist must still rememberthe biological contexts of each subset. One reason is the human lim-ited working memory storage. The data exploration process requiresbiologists to interpret many relationships of certain gene functions inorder to discover new information. Often, the exploration goes beyondseeking answers to specific questions or addressing a specific compar-ison, but instead searches for interesting patterns through comparison.Most interface design supports exploration to the extent that views canbe changed according to the current task at hand. Yet, for large graphexploration, the viewer still must remember exploration workflow andkeep huge amounts of information in mind. No existing approach sup-ports progressive exploration [15] and externalization [11] by turningcomplex cognitive memory tasks into perceptually effective ones.

Our goal here is to present several novel interactive visualizationdesign strategies to reduce the burden biologists encounter in compar-ative relationship analysis. Our design lets biologists create custom vi-sualizations and interactive exploration workflows. We have designedthree techniques. First, VisGumbo allows mix-and-match pathwaysin which common and different entities can be overlaid for entity andrelationship comparison. Second, in contrast to VisGumbo, VisMir-rors uses a novel mirror metaphor, in which entities and their relation-ships are mirrored, thus reducing the visual scan distances for entitycomparisons between pathways, by following the proximity capabil-ity principle [21]. Third, VisCut makes use of information nuancesoverlaid on a treeRing compound graph visualization to point to in-teresting entities and thus provides a form of “informative scent” [16]to let biologists know about important entity attributes. Finally, thesetechniques live in a narrative environment in which the visualizationsare persistent and do not disappear, thus supporting fluid visual exter-nalization and sustainable visual knowledge discovery.

A major contribution in this research is addressing large graph com-parison exploration through the design of novel metaphors and interac-tive visualization techniques. Though these new interactive visualiza-tion methods are specialized to handling biological pathways, the un-derlying design metaphors and mechanisms are also suitable for manyother large-graph applications.

2 RELATED WORK

Pathway Data Structures and Tools. One way to visualize largegraphs is to combine clustering for community discovery and interac-tive exploration so that entities can be aggregated in a more compactform, as first suggested by Abello, van Ham and Krishnan [1]. In ex-ploratory studies such as ours, however, biologists often do not knowin advance what patterns to aggregate, so that interactive explorationof parameter space remains important in the context of entire path-ways. Another approach is, following the seminal work of Purchaseet al. [17], to use aesthetic criteria that include number of edge cross-

ings, number of edge bends, symmetry of the drawing, angular reso-lution, crossing angles, and vertex distributions. However, there arefew empirical studies on semantic information overlaid on these pow-erful structural presentation approaches for quantiative visualizationof relationship parameters.

Visual Comparison Methods. Gleicher et al. emphasize the im-portance of visual comparison and construct a general taxonomy ofvisual designs for comparison in three categories: juxtaposition (show-ing different objects separately), superposition (overlaying objects inthe same space) and explicit relationship encoding [6]. Our VisGumbofollows superposition but we must explicitly define how entities at-tributes should be encoded as well. VisMirrors is most similar to jux-taposition, yet is not really a side-by-side small multiples but uses amirroring metaphor to position nodes for node proximity. Therefore,Gleicher et al.s taxonomy only covers our viewing strategies.

3 USAGE SCENARIOS AND DESIGN RATIONALE

Below we show usage scenarios through four examples executed by abiologist named Lucy. We briefly introduce the concept of our designbefore describing Lucys actions. We then describe the design rationalefor certain design choices and the associated design considerations forthe three interaction techniques and a new visual interface.

3.1 VisGumbo

Fig. 1: VisGumbo: Two pathways, one colored in yellow and the otherin blue are superimposed. Edges and nodes are colored according tothe pathway to which they belong. The common crosstalk genes areplaced automatically to the center of the graph drawing.

Use scenario. Lucy has found some crosstalk genes between path-ways and wants to explore differences in gene expression in thesecrosstalk genes within different pathways. Addressing this questionis important because crosstalk genes are entities shared between path-ways and finding differences implies functional differences betweenthem in different pathways and hence biological functions.

Lucy begins her exploration right away. She first drags a pathwayout of the overview compound graph view. A new view pops up andshe first notices that each biomolecule is centered around a coloredhalo indicating cellular locations (Fig. 4). This “scent” quickly tellsher the number of cellular locations in that pathway, because differentcellular locations use different colors and nodes within these cellularlocations show background coloring.

When she drags the second pathway into the same view as the first,two graphs are aggregated so that common nodes are merged (Fig. 1),edges showing reactions are colored side-by-side depending on thepathway they belong to. For common genes that may or may not be

expressed differently, the up-or-down gene expressions are displayedin the nodes for comparison.

Lucy also finds it easy to visually locate those differently expressedgenes in shared crosstalk proteins because the visualization placesthese shared nodes near the center of the screen. Biological entitiesbelonging to a single pathway are displayed in two different colorsmatching the text label at the bottom of the view.

She also finds that she can drag and drop any numbers of pathwaysinto the same view and the program will automatically aggregate path-ways to update the shared gene list in crosstalk genes among pathways.

Design rationale. VisGumbo follows superposition by overlayingthe same biological entities the same node and the edges in differentcolors [6]. VisGumbo computes the common and different entitiesand relationships in graphs and re-encodes the nodes in the gumbographs. When the gene expression data are loaded, the common nodesare overlaid with side-by-side gene expression data by splitting thecommon nodes into pie segments; the number of pieces of pie equalsthe numbers of pathways in the gumbo. The entire graph otherwise islaid out using force-directed approach.

3.2 VisMirrors

Fig. 2: VisMirrors: Two pathways are displayed side-by-side mirror-ing along the plane in the middle. The crosstalk genes are placed nearthe mirroring plane. The same edges and nodes are placed at the mir-roring locations in these two graphs

Use scenario. To perform the same task as above, VisMirrorspresents information in a side-by-side fashion yet pathways are mir-rored on each side of the mirror plane (Fig. 2). The same nodes willbe located at the same mirrored locations on each side of the mirror.Lucy sees that nodes related to crosstalk genes are closers to the mir-ror plane and panning a graph towards the plane moves the same nodescloser since they are symmetrical. In this way, the entities to be com-pared are always adjacent to each other.

She finds it easy to answer questions such as “which are the highlyexpressed crosstalk genes?” By tracing edges linking these crosstalkgenes, she could also quickly find relationships differences since oneach side of the mirror, she can toggle on and off those genes that arenot in the other side of the pathway by selecting “Not in pathway”.

Design rationale. Our design of visualization for large graph com-parisons in VisMirrors follow two design principles. The first relatesto Tuftes suggestion that “comparison must take place within the eye-span” [20] and the second to the proximity comparability principle ofWickens and Carswell [21] to reduce the visual scan distances betweenthe two entities to be compared.

3.3 VisCut

Use scenario. Lucy first loads the metabolic pathway. To decidewhich pathway to explore next, she notices immediately that some barsare overlaid on pathways and some are apparently higher than others,showing the numbers of crosstalk genes each pathway contains. Somechords show the connection between the high-levels. Green ones are

Fig. 3: VisCut.Chords support overview and lines supports detail. Lines shows the shared crosstalk genes and the bar chart on each pathwaysegment shows the number of crosstalk genes.

within the pathway and blue ones are between pathways and the sizeof the chord is also scaled to the number of crosstalk genes. Sinceshe is interested in the ones with higher numbers of shared genes, sheclicks on the high-level pathway, and it animates to expand to displaysub-pathways. The chord also becomes lines that connect all pathwaysthat shares the genes. She continues the exploration and finds that thebar clearly tells her which one to select next. The graphs are also notcrowded, so she can easily focus on important data. She also finds outthat pathways are always labeled so she knows the names at variouslevels.

Design rationale.VisCut first follows the information visualization design mantra

of Shneiderman: “overview first, zoom and filter, then detail on de-mand” [19]. At the overview levels, VisCut uses colored chords toencode the number of crosstalk genes between pathways as well aswithin pathways to quickly reveal how pathways functions relate toeach other. Traditional approaches to showing explicit edge links showthe edges directly. However, human eyes are not good at visual aggre-gation to find out the numbers of links from edges. Thus, we use arclength to show the numbers of links each high-level pathway contains.The size of the chord is scaled to the numbers of edge links: the widerthe chord base, the more links that pathway shares with neighboringpathways. At the detailed level, explicit links between pathway enti-ties are shown to reveal the crosstalk information.

VisCut supports “scents through the bar chart drawing to help bi-ologists determine important pathways for further exploration. Theheight of the bar is mapped to the total of crosstalk genes each spe-cific pathway contains. For the labeling algorithm, we adopted thatof Isenberg et al. [10] to use a hybrid-image visualization that blendsthe upper-level and lower-level pathway names so both can be seensimultaneously; the biologist can focus on one of them while the otherprovides the visual contextual display.

In each individual pathway, once expanded to the outer circle, weuse a bar-chart to summarize the numbers of links (crosstalk proteins)that specific pathway shares with the rest of the graph. In this way,users can quickly locate the pathways sharing the most crosstalk genes.We have also expanded the Holten edge-bundling drawing method [8]so that when pathways are expanded, edges avoid the graph entities.

4 RESULT AND DISCUSSION

This section describes the interface design that supports the data ex-ploration using the afore-mentioned approaches. In this prototype en-vironment, VisMirrors and VisGumbo are supported.

4.1 VisNarrative: A Narrative Interface for Large PathwayExploration

The narrative interface, VisNarrative, supports persistent and uninter-rupted exploration of pathway relationships, where a narrative is a ca-pability to link dots in the exploration process [9]. Our interface is a

multi-view environment and each view is called a bubble and no twobubbles will overlap [13, 22].

We have incorporated the aforementioned interaction techniquesinto the a unified framework. The VisNarrative supports progressiveexploration: combining bubbles lets users compare many views atonce and progressive disclosure reveals data to the user on demand(Fig. 4). The exploration events are placed in an user-defined order. Abiologist can declare a new screen space to begin a new analysis andreturn to any earlier one. This approach supports creating explorationhistories which has at least three benefits. First, an exploration historylets users backtrack and explore multiple comparisons and explorationpaths. Second, it helps externalize what is conventionally stored inhuman memory to the graphical interface level, and thus could poten-tially reduce the mental workload. Third, once a user has concludedan analysis, these histories serve as raw material for narratives aboutthe analytical workflow [18].

Fig. 4 shows an example use where two parts of the continous cons-ders using. The datasets make use of the Reactome databases [4] andthe users can also upload their own empirical study results (e.g., fromgene expression) to explore their results interactively. Our collabora-tors (who are also co-authors on this paper) have found that designproduced using our methods is straightforward and easy to use. Theyhave been using these tools on a daily basis to interpret their data. l

4.2 Discussion

Our design is driven by several well-known perceptual and cognitivedesign principles to help biologists quickly discover interesting path-way patterns. One aim is to reduce the mental workload in complexbiological network studies. This method is not limited to biologicalpathway analysis but can handle any large graph comparisons, for ex-ample, in social networking, molecular sciences etc.

Several future directions to our design relate to its validation. Wecan carry out several empirical studies. An example experiment wehave planned is the comparison of mental-map-based design with ourproximity comparability design [21] to explore whether the secondprinciple is more important than the first one for large graph compar-ison tasks. We could potentially control data attributes by includingthe number of nodes in the graphs to find the benefits of each. TheIn addition, it would be valuable to examine the effectiveness of theentire workflow-pipeline approach via case studies.

Our informal observations include the following: (1) comparingnode-attributes is much easier with the VisMirrors approach comparedto side-by-side views; (2) VisGumbos may support more scalable dis-play compared to VisMirrors; (3) Nuances (e.g., bar charts and chords)could improve the confidence in the data exploration process and ourdesign reduces edge clutter; And finally, (4) VisNarrative may sup-port powerful visual comparisons and accelerate knowledge discoveryfrom large amount of graph data.

Fig. 4: VisNarratives. A continuous canvas showing the exploration process.

5 CONCLUSION

We have presented four strategies for novel comparative studies oflarge biological pathways through interactive visualization. Our per-ceptual principles-driven design can help biologists quickly discoverinteresting patterns. Our approach could potentially advance the bio-logical knowledge discovery process through effective design.

ACKNOWLEDGMENTS

This work was supported in part by NSF DBI-1260795, DBI-1147029,and EPS-0903234. The authors thank Katrina Avery for her editorialsupport. Any opinions, findings, and conclusions or recommendationsexpressed in this material are those of the authors and do not necessar-ily reflect the views of the National Science Foundation.

REFERENCES

[1] J. Abello, F. Van Ham, and N. Krishnan. Ask-graphview: A large scalegraph visualization system. IEEE Transactions on Visualization & Com-puter Graphics, 12(5):669–676, 2006.

[2] D. Archambault and H. C. Purchase. The mental map and memorabilityin dynamic graphs. In IEEE Pacific Visualization Symposium (PacificVis),pages 89–96, 2012.

[3] D. Archambault, H. C. Purchase, and B. Pinaud. Animation, small multi-ples, and the effect of mental map preservation in dynamic graphs. IEEETransactions on Visualization and Computer Graphics, 17(4):539–552,2011.

[4] D. Croft, G. OKelly, G. Wu, R. Haw, M. Gillespie, L. Matthews,M. Caudy, P. Garapati, G. Gopinath, B. Jassal, et al. Reactome: a databaseof reactions, pathways and biological processes. Nucleic acids research,pages D619–622, 2010.

[5] N. Gehlenborg, S. I. O’Donoghue, N. S. Baliga, A. Goesmann, M. A.Hibbs, H. Kitano, O. Kohlbacher, H. Neuweger, R. Schneider, D. Tenen-baum, et al. Visualization of omics data for systems biology. Naturemethods, 7:S56–S68, 2010.

[6] M. Gleicher, D. Albers, R. Walker, I. Jusufi, C. D. Hansen, and J. C.Roberts. Visual comparison for information visualization. InformationVisualization, 10(4):289–309, 2011.

[7] F. V. Ham and B. E. Rogowitz. Perceptual organization in user-generatedgraph layouts. IEEE Transactions on Visualization and Computer Graph-ics, 14(6):1333–1339, 2008.

[8] D. Holten. Hierarchical edge bundles: Visualization of adjacency rela-tions in hierarchical data. IEEE Transactions on Visualization & Com-puter Graphics, 12(5):741–748, 2006.

[9] M. S. Hossain, P. Butler, A. P. Boedihardjo, and N. Ramakrishnan. Story-telling in entity networks to support intelligence analysts. In Proceedingsof the 18th ACM SIGKDD international conference on Knowledge dis-covery and data mining, pages 1375–1383, 2012.

[10] P. Isenberg, P. Dragicevic, W. Willett, A. Bezerianos, and J.-D. Fekete.Hybrid-image visualization for large viewing environments. IEEE Trans-actions on Visualization & Computer Graphics, (12):2346–2355, 2013.

[11] D. Kirsh. Thinking with external representations. In Cognition Beyondthe Brain, pages 171–194. Springer, 2013.

[12] A. Lex, N. Gehlenborg, H. Strobelt, R. Vuillemot, and H. Pfister. UpSet:visualization of intersecting sets. IEEE Transactions on Visualization andComputer Graphics, 20(12):1983–1992, 2014.

[13] G. Li, A. C. Bragdon, Z. Pan, M. Zhang, S. M. Swartz, D. H. Laidlaw,C. Zhang, H. Liu, and J. Chen. Visbubbles: a workflow-driven frameworkfor scientific data analysis of time-varying biological datasets (sap-0281).SIGGRAPH Asia Posters. Hong Kong, China: ACM, 2011.

[14] C. Partl, A. Lex, M. Streit, H. Strobelt, A.-M. Wassermann, H. Pfister, andD. Schmalstieg. ConTour: Data-driven exploration of multi-relationaldatasets for drug discovery. IEEE Transactions on Visualization andComputer Graphics, 20(12):1883–1892, 2014.

[15] D. Phan, A. Paepcke, and T. Winograd. Progressive multiples forcommunication-minded visualization. In Proceedings of Graphics In-terface, pages 225–232, 2007.

[16] P. Pirolli, S. K. Card, and M. M. Van Der Wege. The effects of informa-tion scent on visual search in the hyperbolic tree browser. ACM Transac-tions on Computer-Human Interaction (TOCHI), 10(1):20–53, 2003.

[17] H. C. Purchase, E. Hoggan, and C. Gorg. How important is the mentalmap?–an empirical investigation of a dynamic graph layout algorithm. InGraph drawing, pages 184–195. Springer, 2007.

[18] E. Ragan, A. Endert, J. Sanyal, and J. Chen. Characterizing provenance invisual analytics: An organizational framework of provenance types andpurposes. IEEE Transactions on Visualization & Computer Graphics,2016 (To appear).

[19] B. Shneiderman. The eyes have it: A task by data type taxonomy forinformation visualizations. In Proceedings of IEEE Symposium on VisualLanguages, pages 336–343, 1996.

[20] E. R. Tufte. Beautiful evidence. New York, 2006.[21] C. D. Wickens and C. M. Carswell. The proximity compatibility prin-

ciple: its psychological foundation and relevance to display design. Hu-man Factors: The Journal of the Human Factors and Ergonomics Society,37(3):473–494, 1995.

[22] Y. Zhu, L. Sun, A. Garbarino, C. Schmidt, J. Fang, and J. Chen.PathRings: a web-based tool for exploration of ortholog and expressiondata in biological pathways. BMC bioinformatics, 16(1):165, 2015.