Real-Time Interactive Visualization of Large Graphs on the Web Tobias Höllerer, John O’Donovan, Brynjar Gretarsson, Alex Bostandjiev, Peterson Trethewey Four Eyes Laboratory Imaging, Interaction, Innovative Interfaces University of California, Santa Barbara

2 Motivation Dynamic Graph Visualization Insights: Real-time Interaction and dynamic probing very powerful Very helpful tool for analysts Our approach: – Make interaction feasible for large-scale data – Use interaction to predictably explore the data set – Make these technologies available to every web user

3 Previous Achievements Dynamic Graph Visualization Methods “Subdivision Graphs”: Hierarch. Mass-Spring Model: – About 7K nodes interactively on a laptop

4 Previous Achievements Dynamic Graph Visualization Methods “Subdivision Graphs”: Hierarch. Mass-Spring Model: – About 7K nodes interactively on a laptop Mesh Deformation: Transferring Fast CG Methods – A Multigrid Solver for Graph Laplacians: About 50K nodes interactively

5 Previous Achievements Dynamic Graph Visualization Methods “Subdivision Graphs”: Hierarch. Mass-Spring Model: – About 7K nodes interactively on a laptop Mesh Deformation: Transferring Fast CG Methods – A Multigrid Solver for Graph Laplacians: About 50K nodes interactively A New Graph Interpolation Scheme: – About 500K nodes interactively (All these have been demonstrated as thick clients)

Problem definition Visualize large graphs  Hundreds of thousands of nodes and edges On the web  Regardless of host resources  No applets, no plugins, native in the browser  Cross browser, cross platform Real-time  30 fps refresh rate  Interaction

Web Graphics Scalable Web User Interfaces  Large (potentially distributed) data sources  Distributed teams Examples  Google Maps (Google Earth)  Social Networking (Facebook: now 100M+ users)  KDD Blackbook

Rich Client vs. Thin Client Can use different resources simultaneously: Client – user's computer Potentially slow processing (i.e. Javascript)  Javascript is getting faster (e.g. Ajax in Google Chrome) CPU intensive Server – powerful backend computer Fast processing (Virtualization, Storage) Need to send results to client -> bandwidth, JSF Where to do what?

Client-side Visualization Applets, Rich Internet Application frameworks  Live in browser (virtual machine)  Require plugins, can have significant start-up time  Not fully cross browser/platform  Security, Privacy  Hesitant adoption as a hindrance (browser extensions to prevent Flash/AIR/Silverlight/... )

Client-side Visualization Javascript + HTML tags  Javascript real-time interaction  Every node/edge is an image Node Edge  Relatively fast  Visually unappealing edges Demo

Client-side Visualization Other Tried Approaches Javascript with a tag for each pixel Slow Edge rendering is the bottleneck of graph vis Use dotted edges to obtain faster performance Still fairly slow

Client-side Visualization SVG (Scalable Vector Graphics)  Graphics standard on the Web Currently still need plugin for IE VML is the IE equivalent of SVG  Store image in XML  Visually appealing (Vector graphics)  Fastest (client-side)

Server-side Visualization Inherent limitation of client-side methods: not fast enough for smooth interaction for more than a few hundred nodes/edges over a large diverse set of client architectures. Server-side (Prime App example: Google Maps) Method  Generate image on server (i.e. in Java)  Transfer image (compressed format) to client (using AJAX) and display it  Send client-side Javascript interactions to server, re-render, and send back the image Drawbacks  Need fast client-server connection  Bandwidth demanding  Time to transfer image precludes some real-time interactive manipulations

Our Visualization Approach Switch seamlessly between two modes: Client-side Visualize small graphs (or a small part of a big graph) Render graph on the client (using SVG) Javascript interactions on client Server-side Visualize big graphs Generate image on server Transfer image to client and display it Send client-side interactions to server to re-render the image

Server-side and Client-side Rendering Our Visualization Approach

LiveDemos Live Demos

Remote Graph Server Asynchronous Requests (e.g. Mouse interaction Data) Response Image Data And Coordinate Data (JSON) Remote Graph Server Server Graph Model Client-side Web Browser Client Graph Model

Conclusions, Future Work We demonstrated the beginnings of a truly scalable general web visualization toolkit Future features:  Smart labels with overlap avoidance  Curved edges  Group selection and operations  Multiple edge types, node semantics  More advanced clustering ... Next big topic: Analysis and Collaboration Tools

19 Acknowledgments Collaborators, Students, Sponsors Co-PI Matthew Turk, Post-Doc John O’Donovan PhD Students: Brynjar Gretarsson (PhD cand. in CS) Alex Bostandjiev (PhD student in CS) Panuakdet Suwannatat (PhD student in CS) Peterson Trethewey (PhD Math, MS in CS) Special thanks to KDD Program Monitors: Scott Streit, Danko Nebesh Buster Fields and the whole KDD Blackbook Team Funding: IARPA KDD (2008) through NSF grant #IIS