1 / 17

Real-Time Interactive Visualization of Large Graphs on the Web

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 http://ilab.cs.ucsb.edu.

dominy
Download Presentation

Real-Time Interactive Visualization of Large Graphs on the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Real-Time Interactive Visualizationof Large Graphs on the Web Tobias Höllerer, John O’Donovan, BrynjarGretarsson, Alex Bostandjiev, Peterson Trethewey Four Eyes Laboratory Imaging, Interaction, Innovative Interfaces University of California, Santa Barbara http://ilab.cs.ucsb.edu

  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 2

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

  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 4

  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) 5

  6. 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

  7. 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?

  8. 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/... )

  9. Client-side Visualization • Javascript + HTML <img> tags • Javascript real-time interaction • Every node/edge is an image • Node • Edge • Relatively fast • Visually unappealing edges • Demo

  10. Client-side VisualizationOther Tried Approaches • Javascript with a <div> tag for each pixel • Slow • Edge rendering is the bottleneck of graph vis • Use dotted edges to obtain faster performance • Still fairly slow

  11. 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)

  12. 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

  13. 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

  14. LiveDemos

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

  16. 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

  17. AcknowledgmentsCollaborators, Students, Sponsors • Co-PI Matthew Turk, Post-Doc John O’Donovan • PhD Students: • BrynjarGretarsson(PhD cand. in CS) • Alex Bostandjiev(PhD student in CS) • PanuakdetSuwannatat(PhD student in CS) • Peterson Trethewey(PhD Math, MS in CS) • Special thanks to KDD Program Monitors: Scott Streit, DankoNebeshBuster Fields and the whole KDD Blackbook Team • Funding: IARPA KDD (2008) through NSF grant #IIS-0635492 19

More Related