title: Argo Lite: Open-Source Interactive Graph Exploration and Visualization in Browsers
authors: Siwei Li Zhiyan Zhou Anish Upadhayay Omar Shaikh Scott Freitas Haekyu Park Zijie J. Wang Susanta Routray Matthew Hull Duen Horng Chau
text: 
  
  
  
  
  
    Georgia Institute of Technology
    North Ave NW
    Atlanta
    Georgia
    United States
  robertsiweili, zzhou406, aupadhayay3, oshaikh, safreita, haekyu, jayw, sroutray3, matthewhull, polo@gatech.edu
  
  
  
  
  Graph data have become increasingly common. Visualizing them helps people better understand relations among entities.
  Unfortunately, existing graph visualization tools are primarily designed for single-person desktop use,
  offering limited support for interactive web-based exploration and online collaborative analysis.
  To address these issues, we have developed
  , a new in-browser interactive graph exploration and visualization tool.
   enables users to publish and share interactive graph visualizations as URLs and embedded web widgets.
  Users can explore graphs incrementally by adding more related nodes, such as highly cited papers cited by or citing a paper of interest in a citation network. 
   works across devices and platforms, leveraging WebGL for high-performance rendering.
   has been used by over 1,000 students at Georgia Tech's Data and Visual Analytics class.
   may serve as a valuable open-source tool for advancing multiple CIKM research areas, from data presentation, to interfaces for information systems and more.
  
  
  
  <ccs2012>
     <concept>
         <concept_id>10003120.10003145.10003151</concept_id>
         <concept_desc>Human-centered computing Visualization systems and tools</concept_desc>
         <concept_significance>500</concept_significance>
         </concept>
   </ccs2012>
  
  
  [500]Human-centered computing Visualization systems and tools
  
  
  
  
    
      < g r a p h i c s >
  
    
     visualizing a citation network of recent COVID-19 publications <cit.>.
     users can explore graphs incrementally by adding more related papers (e.g., highly cited papers cited by or citing a paper of interest) to the visualization <cit.>.
    Using WebGL for high-performance cross-platform graph rendering <cit.>,  runs in all modern web browsers without requiring any installation.
    
    A screenshot of Argo Lite visualizing a citation graph of COVID-19 publications.
    
  
  
  Argo Lite: Open-Source Interactive Graph Exploration and Visualization in Browsers
      Siwei Li, Zhiyan Zhou, Anish Upadhayay, Omar Shaikh, Scott Freitas, Haekyu Park, Zijie J. Wang, Susanta Routray, Matthew Hull, Duen Horng Chau
      Aug. 2020
  ==================================================================================================================================================
  
  
  
  
  
  § INTRODUCTION
  
  
  As network data become increasingly common, many software tools have been developed to help researchers better understand them and uncover insights. Tools such as Gephi <cit.> and Cytoscape <cit.> use visualizations to help reveal the relationship among entities. However, existing graph visualization and exploration tools face a variety of challenges that limit their availability, interactivity and collaboration productivity.
  
  
  
  
   §.§ Challenges of Existing Systems
  
  
  
  
  
    *  
  Availability
  Device, platform and OS constraints.
  Existing graph visualization tools are typically built for desktop use only <cit.>,
  making them difficult to access via the Web or on mobile devices, such as tablets and Chromebooks. They require heavyweight installation processes and are only available on certain operating systems.
  
  
  
    *  
  Interactivity
  Lack of fast interactive web visualization.
  While research has shown that interactive  visualizations can help users more easily and rapidly make sense of graph data <cit.>,
  it has been challenging to support interactive explorable graph visualizations on the Web. 
  Currently, people who wish to publish graph visualizations in digital formats—such as in online articles, blog posts, or via Jupyter Notebooks—are often limited to using static images.
  To provide interactivity, researchers often resort to writing custom JavaScript-based visualizations using libraries such as D3 <cit.>, which requires complex engineering efforts; furthermore, the resulting visualizations may not scale beyond 
  a few hundred nodes <cit.>.
  
  
    *  
  Collaboration Productivity
  Difficulty to share and collaborate.
  Graph visualization tools have traditionally been built as single-user software <cit.>.
  They lack modern collaboration features, such as saving progress “in the cloud,” or sharing via URL links and as embedded web widgets.
  Instead,  traditional tools rely on saving files onto local file systems; users would need to manually pass these files back and forth among collaborators.
  Furthermore, people who wish to publish their data and visualizations need to figure out where and how to host their files; and the recipients need to download all the required files and software before they can see the visualizations.
  Such user experience is a departure from what many people are now accustomed to when using   
  modern applications like Google Docs, where users can share their documents through URLs and no installation or file download is required for viewing.
  
  
  
  
  
   §.§ Argo Lite Novel Contributions
  
  
  We introduce  (<ref>), an open-source in-browser interactive graph visualization and exploration system developed using the latest web technologies. Our main contributions are:
  
  
  
  
    1.
  Easy-to-access platform-agnostic web application.
   is a web application that runs on all modern browsers (Chrome, Firefox, Safari, Edge, etc.). 
  Users can access  on a wide range of devices, from desktop computers, Chromebooks, to tablets, regardless of the operating system (<ref>).
   is freely accessible at <https://poloclub.github.io/argo-graph-lite>. 
  's code repository and documentation are available at <https://github.com/poloclub/argo-graph-lite>.
  
  
  
    2.
  Fast graph rendering via WebGL.
   takes advantage of the WebGL technology to drastically improve graph rendering performance in web browsers (<ref>).
  Prior systems such as Cytoscape Web <cit.> use Adobe Flash, now a deprecated technology for interactive content for the Web.
  Most web-based visualization libraries today use D3 <cit.> and render graph using either Scalable Vector Graphics (SVG) or HTML Canvas Elements. The rendering performance, measured by frame rate per second (FPS), starts to deteriorate significantly at a low hundreds of nodes and edges <cit.>. 
   uses WebGL to render graphs, which leverages hardware acceleration and is supported by all modern web browsers.
   smoothly renders hundreds of nodes and edges with interactive force-directed layout on commodity devices (e.g., laptops, tablets).
  
  
    3.
  Sharing interactive graph visualizations via links and embedded widgets.
   allows users to share interactive graph visualizations as a URL or embedded web widget based on iframe. Users can publish their interactive graph visualizations on their web articles, blog posts or even interactive notebooks (such as a Jupyter Notebook). Readers can explore the same interactive visualization directly through the embedded web widget, without the need to install any software or to download any file (<ref>, <ref>). Researchers can easily generate a link[<https://poloclub.github.io/argo-graph-lite/#6c0d8aaa-5320-4c81-9618-11ea5e0524f4>] for their new visualization or exploration “snapshot.” 
  Sharing the link
  with collaborators would allow them to access, modify, and continue their explorations on this graph data. 
  This greatly facilitates collaboration within teams and among graph and network researchers (<ref>).
  
  
    4.
  Broadening impact of graph analysis.
   provides an easy-to-use experience that helps  make the study of graph data more impactful. It is designed not just for experts, but brings interactive graph visualization to a wider audience.
  
   has been successfully used by over 1,000 students at Georgia Tech's Data and Visual Analytics class, where students have used the force-directed layout, sizing, coloring and labeling features to produce different visualizations and then shared them as URLs using the snapshot sharing feature.
  
  To help researchers get started, we have provided several sample graph datasets,
  including the real-world citation graph of recent
  COVID-19 publications (<ref>) derived from the CORD-19 Open Research Dataset <cit.>.
  Because the dataset includes papers from many disciplines (e.g., biomedical, mathematical modeling, machine learning), not all papers are strongly related to every user's research interest.
  To support more personalized use of the dataset,  allows users to easily hide papers less relevant to their interests, and enables them to incrementally add more related papers as they expand their exploration (e.g., add highly cited papers of a paper of interest).
  Users can also easily share the exploration subgraph results as a graph snapshot URL.
  
  We believe the impact of  will grow all the more, and empower more users to benefit from interactive graph visualization.
  
  
  
  
  
  § ARGO LITE: FEATURE HIGHLIGHT
  
  
  
   §.§ In-browser and Cross-platform
  
  
   is a web application that runs on modern browsers and operating systems.
  It runs on popular web browsers such as Chrome, Firefox, Safari, and Edge, which are available on Windows, Mac OSX, Linux, Android and iOS devices. Since it does not require OS-level installation, users can also run  on tablets and Chromebooks. Argo Lite has complete support for both mouse and touchscreen interactions, with optional keyboard shortcuts.
  
  
   §.§ Importing Graphs
  
  
   allows user to import graph data from CSV (comma-separated values) and TSV (tab-separated values) files,  as well as the popular GEXF format <cit.>. It provides a convenient dialog for users to specify import options and preview the imported data in a tabular format (Figure  <ref>). Users only need to import the data once. From then on, they can work on the data, save graph visualization results and share them as  graph snapshots (Section <ref>) without the need to re-import the data.
   provides the option for displaying the whole graph after the import, which is appropriate for smaller graphs. For larger graphs,  provides an option for showing the subgraph with the highest PageRank <cit.> scores; this serves as a good starting point, as the visual complexity created by the many overlapping edges may overwhelm users <cit.>.
  
  
  
  
  
  
  
   §.§ Visualization
  
  
  
   provides a variety of built-in helpful features for graph visualization, including force-directed graph layout <cit.>, sizing and coloring by PageRank <cit.>, degree and other user-specified properties (Figure  <ref>A). Users can also customize the visualization of any specific nodes they choose by overriding the nodes' size, color and labels (Figure  <ref>B).
  
  
  
  
  
   §.§ Incremental Exploration
  
  
  
  For larger graphs with more than a few thousands of nodes and edges, visualizing the full graph all at once can result in a massive “hair ball” with numerous edge crossings that would visually overwhelm the users and make it hard for them to begin their analysis <cit.>.
  To reduce such visual complexity,  
   allows users to incrementally explore the graph by starting with a small number of high-PageRank or high-degree nodes <cit.>.
  Users are able to use the Neighbor menu or right-click menu to incrementally add neighbor nodes to the graph.
  The Neighbor menu helps users to identify and add important neighbor nodes, either by PageRank scores or other node attributes (Figure  <ref>).
  
  
  
  In addition to the Neighbor menu,  also provides a Data Sheet (via Tools menu) that displays all the nodes in the imported data, giving users the options to inspect and sort them by node attributes, and to start their exploration from specific nodes of interest.
  
  
  
   §.§ Graph Statistics and Algorithms
  
   not only computes PageRank scores <cit.> and degrees for visualization, but also provides easy access to many other common graph algorithms that help summarize graphs <cit.>, including graph density, graph diameter, clustering coefficient and connected components (all available through the Tools menu).
  
  
  
   §.§ Saving graph visualization as snapshots
  
  
  Users can save their work as graph snapshots, which are JSON documents that store the  full original graph data (e.g., nodes, edges, attributes) along with the  visualization and exploration state (e.g., node visibility, positions, colors). 
  Users can save such graph snapshots as files locally, or use the sharing function to save the snapshot “on the cloud” which will be described next.
  
  
  
   §.§ Saving & sharing graph snapshots as URLs
  
  
  When using a web application, it is useful for users to store their data “on the cloud,” and to share them with collaborators as URL links, eliminating the need to download or upload files from local file systems, similar to what many users may be accustomed to when using modern collaboration tools like Google Docs.
   supports such convenient usage and sharing experiences.
  It allows users to save graph snapshots (as described in Section <ref>) containing both graph data and visualization states on a backend server and share them as URLs (<ref>). 
  Users can continue their exploration from a graph snapshot URL, without having to save the snapshot on local disk.
  We have set up a public server that everyone can use for free for public data.
  Users can also easily set up their own preferred backend server for sharing sensitive data and exploration results.
  As part of 's documentation, we have provided a guide for users to optionally set up their own sharing servers and configure access control mechanisms.
  
  
  
  
  
   §.§ Embedding into Web Pages
  
  
  When writing a blog post, sharing a graph dataset online, or working on an interactive notebook such as a Jupyter Notebook, it is useful to embed a graph in an interactive graph visualization viewer, such that the audience may easily engage in exploring the data themselves. 
   provides an embedded widget based on HTML iframe that allows users to easily embed any shared graph snapshots (<ref>) onto HTML-based documents. Users can view and interact with the shared graphs within a webpage or (Jupyter) notebook. 
  Users can expand the embedded widget into the full-featured  interface within the iframe, 
  or open the graph snapshot in a new browser window or tab.
  
  
  
  
  
  § SYSTEM DESIGN
  
  
  
  
  
   §.§ Web Client and User Interface
  
  
  The web UI of  is written completely in modern JavaScript (ES6+), using the mainstream React framework (<https://reactjs.org>) and the MobX state management library (<https://mobx.js.org>), making it easy to develop and maintain. On top of React, we use a combination of Blueprint.js and custom CSS to style and animate our UI, bringing a familiar interface that new users can quickly get used to and to ensure that our interface is reactive and mobile friendly.
  
  
  
   §.§ Efficient Rendering via WebGL
  
  
  Traditional browser rendering techniques using HTML canvas or SVG do not scale well with graphs larger than a few hundred nodes <cit.>. We use WebGL, a powerful rendering solution that can take advantage of hardware acceleration and many other optimizations.
  
   has a dedicated WebGL renderer written in vanilla JavaScript with minimal dependencies. It interacts with WebGL through the Three.js library. The renderer provides a complete set of APIs that work with the rest of the React application. It can be easily isolated and used within another application.
  
  
  
   §.§ Sharing Server
  
  
   provides and hosts a free sharing server on Heroku implemented using Node.js and the open source Strapi content management system. The free sharing server allows anyone to share their data and visualization to the public world.
  
  For researchers who may be working on sensitive or proprietary data,
   also works wth their own preferred backend servers.
  We have provided the documentation and source code for the users who need to
  deploy their servers and implement custom access control policies.
  
  
  
  § AVAILABILITY AND UTILITY
  
  
  
  
   §.§ Open Source Code and License
  
   is completely open source, with source code and documentation available at the Github repository <https://github.com/poloclub/argo-graph-lite>. The code is licensed under the permissive MIT license, freely available to everyone. 
  
  
  
   §.§ Documentation
  
  We have provided extensive documentation for using, developing and customizing the software. Documentation and tutorials are available at the GitHub repository <https://github.com/poloclub/argo-graph-lite>.
  
  
  
   §.§ Real-world Example Graph: Citation Graph of COVID-19 Research Publications
   
   comes with multiple example graphs available under the Graph menu.
  In addition to the classic example Les Misérables character graph <cit.>, which visualizes the interactions between major characters in the Les Misérables novel, 
   also provides the real-world citation graph of recent COVID-19 publications derived from the CORD-19 Open Research Dataset <cit.>. 
  In this citation graph (<ref>), each node represents a published paper related to COVID-19, and each edge represents a citation relationship between two papers.
  As our world is going through the COVID-19 health crisis, there is a surge of research publications on this matter, with researchers from diverse fields working to investigate it.
  Since the papers included in this dataset come from many different fields of study, researchers might be interested in finding publications more relevant to their interests.
   is capable of hiding irrelevant papers.
  Researchers are able to start exploration from highly cited papers in their specific fields of interest, and incrementally add neighbor nodes of these publications.
  This helps researchers build subgraphs of publications tailored to their own  research interests.
  
  
  
   §.§ In-class Usage at Georgia Tech
   
   may be used by people without prior experience or expertise in graph visualization.
  It has been successfully used by more than 1,000 students in Georgia Tech's Data and Visual Analytics class for learning graph visualizations. Students have learned to use force-directed layout and different sizing, coloring and labeling options to visualize their graphs. Additionally, students shared their graph visualizations as URLs using 's link sharing functionality. Thus, we expect  to be a resource not only useful for experienced researchers, but also valuable for students learning about graph analysis and visualization techniques.
  
  
  
  § PREDICTED IMPACT
  
  
  
  
   §.§ CIKM Research Activities Enabled and Enhanced
  
  
   has strong potential to help advance multiple CIKM research areas, as highlighted on https://cikm2020.org/call-for-papers-full-and-short-research-papersCIKM's website.
   is a 
  modern
  tool for data presentation, particularly for visualizing and exploring graphs.
   provides an easy-to-use user interface for interactive analysis, and could help users more easily explore knowledge graphs.
  As demonstrated through the example citation graph of COVID-19 publications in Section <ref>,
   may also help with data integration and aggregation, assisting researchers and practitioners who develop and share knowledge graphs.
  
  
  
   §.§ Advancing Graph Visualization and Exploration
  
  Graph visualization has been a well-established field growing in importance, and popular tools such as Gephi <cit.> and Cytoscape <cit.> have already existed for many years.  seeks to advance graph visualization and exploration by bringing the power of graph visualization into a modern in-browser web app available on both desktop and mobile devices, equipped with both the classic visualization features as well as new sharing and collaboration features.
   addresses the challenges of existing tools in terms of availability and interactivity, and offers a modern easy-to-use experience.
  It is a valuable addition not only to the graph visualization field, but also other research areas that benefit from graph visualizations.
  
  
  
   §.§ Timeline
  
  We expect  to be useful for a long time and remain updated as an evolving open source project. We will continuously maintain and improve  and will leverage GitHub's issue board to respond to user feedback. Meanwhile,  will also continue to be used in Georgia Tech's Data and Visual Analytics class, for use by over 2,000 students every year (1,000 per semester).
  
  As more and more graph data are collected and made available, there's a growing interest to visualize, explore and understand graph data. We anticipate that more researchers and students will be using  as a convenient graph visualization and exploration tool in the coming years.
  
  
  
  § CONCLUSION AND DISCUSSION
  
   is a novel open-source in-browser interactive graph exploration and visualization tool. It enables researchers to incrementally explore graph data in browser and conveniently share their interactive visualizations via URLs and embedded widgets.
  
  Since  is an in-browser tool, it does have limitations, since browser web apps have limited memory and cannot access file systems directly. In order for  to be useful for even larger graphs, such as those with millions of edges, we anticipate future development of backend web services responsible for storing and processing large graph files uploaded by users. These services may be paired with a dedicated frontend based on  for interactive visualization and exploration. It would also be useful to see  being used as a common frontend integrated into popular graph databases.
  
  We believe that  is a valuable tool for both researchers and students alike, and will continue to maintain and improve this open-source project.
  
  ACM-Reference-Format
  
  
  
  