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
AArgo Lite: Open-Source Interactive Graph Exploration andVisualization in Browsers
Siwei Li, Zhiyan Zhou, Anish Upadhayay, Omar Shaikh, Scott Freitas, Haekyu Park, Zijie J. Wang,Susanta Routray, Matthew Hull, Duen Horng Chau
Georgia Institute of TechnologyAtlanta, Georgia, United States{robertsiweili,zzhou406,aupadhayay3,oshaikh,safreita,haekyu,jayw,sroutray3,matthewhull,polo}@gatech.edu
Figure 1: Argo Lite visualizing a citation network of recent COVID-19 publications [12]. Argo Lite users can explore graphsincrementally by adding more related papers (e.g., highly cited papers cited by or citing a paper of interest) to the visualization[3]. Using WebGL for high-performance cross-platform graph rendering [4], Argo Lite runs in all modern web browserswithout requiring any installation.
Permission to make digital or hard copies of all or part of this work for personal orclassroom use is granted without fee provided that copies are not made or distributedfor profit or commercial advantage and that copies bear this notice and the full citationon the first page. Copyrights for components of this work owned by others than ACMmust be honored. Abstracting with credit is permitted. To copy otherwise, or republish,to post on servers or to redistribute to lists, requires prior specific permission and/or afee. Request permissions from [email protected].
CIKM ’20, October 19–23, 2020, Virtual Event, Ireland © 2020 Association for Computing Machinery.ACM ISBN 978-1-4503-6859-9/20/10...$15.00https://doi.org/10.1145/3340531.3412877
ABSTRACT
Graph data have become increasingly common. Visualizing themhelps people better understand relations among entities. Unfortu-nately, existing graph visualization tools are primarily designed forsingle-person desktop use, offering limited support for interactiveweb-based exploration and online collaborative analysis. To ad-dress these issues, we have developed Argo Lite, a new in-browserinteractive graph exploration and visualization tool. Argo Liteenables users to publish and share interactive graph visualizationsas URLs and embedded web widgets. Users can explore graphsincrementally by adding more related nodes, such as highly citedpapers cited by or citing a paper of interest in a citation network. a r X i v : . [ c s . H C ] A ug rgo Lite works across devices and platforms, leveraging WebGLfor high-performance rendering. Argo Lite has been used by over1,000 students at Georgia Tech’s Data and Visual Analytics class.Argo Lite may serve as a valuable open-source tool for advancingmultiple CIKM research areas, from data presentation , to interfacesfor information systems and more.
CCS CONCEPTS • Human-centered computing → Visualization systems andtools . KEYWORDS
Interactive graph visualization; user interface design; network anal-ysis
ACM Reference Format:
Siwei Li, Zhiyan Zhou, Anish Upadhayay, Omar Shaikh, Scott Freitas,Haekyu Park, Zijie J. Wang, Susanta Routray, Matthew Hull, Duen HorngChau. 2020. Argo Lite: Open-Source Interactive Graph Exploration andVisualization in Browsers. In
Proceedings of the 29th ACM InternationalConference on Information and Knowledge Management (CIKM ’20), Octo-ber 19–23, 2020, Virtual Event, Ireland.
ACM, New York, NY, USA, 6 pages.https://doi.org/10.1145/3340531.3412877
As network data become increasingly common, many softwaretools have been developed to help researchers better understandthem and uncover insights. Tools such as Gephi [1] and Cytoscape[11] use visualizations to help reveal the relationship among entities.However, existing graph visualization and exploration tools face avariety of challenges that limit their availability, interactivity andcollaboration productivity.
C1.
Availability
Device, platform and OS constraints.
Existinggraph visualization tools are typically built for desktop useonly [1, 3, 11], making them difficult to access via the Web or onmobile devices, such as tablets and Chromebooks. They requireheavyweight installation processes and are only available oncertain operating systems.
C2.
Interactivity
Lack of fast interactive web visualization.
While research has shown that interactive visualizations canhelp users more easily and rapidly make sense of graph data [3],it has been challenging to support interactive explorable graphvisualizations on the Web. Currently, people who wish to pub-lish graph visualizations in digital formats—such as in onlinearticles, blog posts, or via Jupyter Notebooks—are often limitedto using static images. To provide interactivity, researchersoften resort to writing custom JavaScript-based visualizationsusing libraries such as D3 [2], which requires complex engi-neering efforts; furthermore, the resulting visualizations maynot scale beyond a few hundred nodes [4].
C3.
Collaboration Productivity
Difficulty to share and collab-orate.
Graph visualization tools have traditionally been builtas single-user software [10]. They lack modern collaborationfeatures, such as saving progress “in the cloud,” or sharing via URL links and as embedded web widgets. Instead, traditionaltools rely on saving files onto local file systems; users wouldneed to manually pass these files back and forth among collab-orators. Furthermore, people who wish to publish their dataand visualizations need to figure out where and how to hosttheir files; and the recipients need to download all the requiredfiles and software before they can see the visualizations. Suchuser experience is a departure from what many people are nowaccustomed to when using modern applications like GoogleDocs, where users can share their documents through URLsand no installation or file download is required for viewing.
We introduce Argo Lite (Figure 1), an open-source in-browserinteractive graph visualization and exploration system developedusing the latest web technologies. Our main contributions are:
1. Easy-to-access platform-agnostic web application.
ArgoLite is a web application that runs on all modern browsers(Chrome, Firefox, Safari, Edge, etc.). Users can access Argo Liteon a wide range of devices, from desktop computers, Chrome-books, to tablets, regardless of the operating system ( C1 ). ArgoLite is freely accessible at https://poloclub.github.io/argo-graph-lite. Argo Lite’s code repository and documentation are avail-able at https://github.com/poloclub/argo-graph-lite.
2. Fast graph rendering via WebGL.
Argo Lite takes advan-tage of the WebGL technology to drastically improve graphrendering performance in web browsers ( C2 ). Prior systemssuch as Cytoscape Web [8] use Adobe Flash, now a deprecatedtechnology for interactive content for the Web. Most web-basedvisualization libraries today use D3 [2] and render graph usingeither 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 ofnodes and edges [4]. Argo Lite uses WebGL to render graphs,which leverages hardware acceleration and is supported by allmodern web browsers. Argo Lite smoothly renders hundredsof nodes and edges with interactive force-directed layout oncommodity devices (e.g., laptops, tablets).
3. Sharing interactive graph visualizations via links and em-bedded widgets.
Argo Lite allows users to share interactivegraph visualizations as a URL or embedded web widget based oniframe. Users can publish their interactive graph visualizationson their web articles, blog posts or even interactive notebooks(such as a Jupyter Notebook). Readers can explore the sameinteractive visualization directly through the embedded webwidget, without the need to install any software or to downloadany file ( C1 , C3 ). Researchers can easily generate a link fortheir new visualization or exploration “snapshot.” Sharing thelink with collaborators would allow them to access, modify, andcontinue their explorations on this graph data. This greatly facil-itates collaboration within teams and among graph and networkresearchers ( C3 ). https://poloclub.github.io/argo-graph-lite/ . Broadening impact of graph analysis. Argo Lite providesan easy-to-use experience that helps make the study of graphdata more impactful. It is designed not just for experts, but bringsinteractive graph visualization to a wider audience.Argo Lite has been successfully used by over 1,000 students atGeorgia Tech’s
Data and Visual Analytics class, where studentshave used the force-directed layout, sizing, coloring and labelingfeatures to produce different visualizations and then shared themas URLs using the snapshot sharing feature.To help researchers get started, we have provided several samplegraph datasets, including the real-world citation graph of recentCOVID-19 publications (Figure 1) derived from the CORD-19Open Research Dataset [12]. Because the dataset includes papersfrom many disciplines (e.g., biomedical, mathematical modeling,machine learning), not all papers are strongly related to everyuser’s research interest. To support more personalized use ofthe dataset, Argo Lite allows users to easily hide papers lessrelevant to their interests, and enables them to incrementallyadd more related papers as they expand their exploration (e.g.,add highly cited papers of a paper of interest). Users can alsoeasily share the exploration subgraph results as a graph snapshotURL. We believe the impact of Argo Lite will grow all themore, and empower more users to benefit from interactive graphvisualization.
Argo Lite is a web application that runs on modern browsersand operating systems. It runs on popular web browsers such asChrome, Firefox, Safari, and Edge, which are available on Windows,Mac OSX, Linux, Android and iOS devices. Since it does not requireOS-level installation, users can also run Argo Lite on tablets andChromebooks. Argo Lite has complete support for both mouse andtouchscreen interactions, with optional keyboard shortcuts.
Argo Lite allows user to import graph data from CSV (comma-separated values) and TSV (tab-separated values) files, as well as thepopular GEXF format [1]. It provides a convenient dialog for usersto specify import options and preview the imported data in a tabularformat (Figure 2). Users only need to import the data once. Fromthen on, they can work on the data, save graph visualization resultsand share them as Argo Lite graph snapshots (Section 2.6) withoutthe need to re-import the data. Argo Lite provides the option fordisplaying the whole graph after the import, which is appropriatefor smaller graphs. For larger graphs, Argo Lite provides an optionfor showing the subgraph with the highest PageRank [9] scores;this serves as a good starting point, as the visual complexity createdby the many overlapping edges may overwhelm users [3].
Argo Lite provides a variety of built-in helpful features for graphvisualization, including force-directed graph layout [5], sizing andcoloring by PageRank [9], degree and other user-specified proper-ties (Figure 3A). Users can also customize the visualization of any
Figure 2: Argo Lite helps user import graph from CSV/TSVand GEXF formats. Users can upload and preview the con-tents of CSV/TSV files in tabular format, select columns toimport (e.g., as node IDs) and set additional import options,making it easy to work on graph data from different sources. specific nodes they choose by overriding the nodes’ size, color andlabels (Figure 3B).
For larger graphs with more than a few thousands of nodes andedges, visualizing the full graph all at once can result in a mas-sive “hair ball” with numerous edge crossings that would visuallyoverwhelm the users and make it hard for them to begin their analy-sis [3]. To reduce such visual complexity, Argo Lite allows users toincrementally explore the graph by starting with a small number ofhigh-PageRank or high-degree nodes [3]. Users are able to use the
Neighbor menu or right-click menu to incrementally add neighbornodes to the graph. The
Neighbor menu helps users to identify andadd important neighbor nodes, either by PageRank scores or othernode attributes (Figure 4).In addition to the
Neighbor menu, Argo Lite also provides a
DataSheet (via
Tools menu) that displays all the nodes in the importeddata, giving users the options to inspect and sort them by nodeattributes, and to start their exploration from specific nodes ofinterest.
Argo Lite not only computes PageRank scores [9] and degreesfor visualization, but also provides easy access to many other com-mon graph algorithms that help summarize graphs [7], including igure 3: Users have full control over node colors, sizes,shapes and labels. Users can use the global settings to colorand size all the nodes by their attributes such as degree andPageRank, or use individual settings to override the style ofa node. The diverse options help users more easily createmeaningful and informative visualizations. graph density, graph diameter, clustering coefficient and connectedcomponents (all available through the
Tools menu).
Users can save their work as graph snapshots , which are JSONdocuments that store the full original graph data (e.g., nodes, edges,attributes) along with the Argo Lite visualization and explorationstate (e.g., node visibility, positions, colors). Users can save such graph snapshots as files locally, or use the sharing function to savethe snapshot “on the cloud” which will be described next.
When using a web application, it is useful for users to store theirdata “on the cloud,” and to share them with collaborators as URLlinks, eliminating the need to download or upload files from localfile systems, similar to what many users may be accustomed towhen using modern collaboration tools like Google Docs. ArgoLite supports such convenient usage and sharing experiences. Itallows users to save graph snapshots (as described in Section 2.6)containing both graph data and visualization states on a backendserver and share them as URLs (Figure 5). Users can continue theirexploration from a graph snapshot URL, without having to savethe snapshot on local disk. We have set up a public server thateveryone can use for free for public data. Users can also easily set
Figure 4: The Neighbor Menu helps user to identify impor-tant neighboring nodes of any node selected by the user,and incrementally add them to the visualization. Users canchoose to add a set number of neighboring nodes with topPageRank or degree values to quickly navigate the graph, orthey can browse the sortable neighbor table to individuallypick nodes of interest. up their own preferred backend server for sharing sensitive dataand exploration results. As part of Argo Lite’s documentation,we have provided a guide for users to optionally set up their ownsharing servers and configure access control mechanisms.
When writing a blog post, sharing a graph dataset online, or work-ing on an interactive notebook such as a Jupyter Notebook, it isuseful to embed a graph in an interactive graph visualization viewer,such that the audience may easily engage in exploring the datathemselves. Argo Lite provides an embedded widget based onHTML iframe that allows users to easily embed any shared graphsnapshots (Figure 6) onto HTML-based documents. Users can viewand interact with the shared graphs within a webpage or (Jupyter)
Figure 5: Argo Lite allows user to save and share graphsnapshots via URL links, simplifying collaboration.igure 6: A Jupyter Notebook embedding an Argo Lite wid-get. Argo Lite makes publishing interactive graph visual-ization on the web much easier by offering an embeddableweb widget based on iframe. notebook. Users can expand the embedded widget into the full-featured Argo Lite interface within the iframe, or open the graphsnapshot in a new browser window or tab.
The web UI of Argo Lite 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), mak-ing it easy to develop and maintain. On top of React, we use acombination of Blueprint.js and custom CSS to style and animateour UI, bringing a familiar interface that new users can quicklyget used to and to ensure that our interface is reactive and mobilefriendly.
Traditional browser rendering techniques using HTML canvas orSVG do not scale well with graphs larger than a few hundred nodes[4]. We use WebGL, a powerful rendering solution that can takeadvantage of hardware acceleration and many other optimizations.Argo Lite has a dedicated WebGL renderer written in vanillaJavaScript with minimal dependencies. It interacts with WebGLthrough the Three.js library. The renderer provides a complete setof APIs that work with the rest of the React application. It can beeasily isolated and used within another application.
Argo Lite provides and hosts a free sharing server on Herokuimplemented using Node.js and the open source Strapi contentmanagement system. The free sharing server allows anyone toshare their data and visualization to the public world.For researchers who may be working on sensitive or propri-etary data, Argo Lite also works wth their own preferred backendservers. We have provided the documentation and source code for the users who need to deploy their servers and implement customaccess control policies.
Argo Lite is completely open source, with source code and docu-mentation available at the Github repository https://github.com/poloclub/argo-graph-lite. The code is licensed under the permissiveMIT license, freely available to everyone.
We have provided extensive documentation for using, developingand customizing the software. Documentation and tutorials areavailable at the GitHub repository https://github.com/poloclub/argo-graph-lite.
Argo Lite comes with multiple example graphs available under the
Graph menu. In addition to the classic example
Les MisÃľrables char-acter graph [6], which visualizes the interactions between majorcharacters in the Les MisÃľrables novel, Argo Lite also providesthe real-world citation graph of recent COVID-19 publications de-rived from the CORD-19 Open Research Dataset [12]. In this citationgraph (Figure 1), each node represents a published paper related toCOVID-19, and each edge represents a citation relationship betweentwo papers. As our world is going through the COVID-19 healthcrisis, there is a surge of research publications on this matter, withresearchers from diverse fields working to investigate it. Since thepapers included in this dataset come from many different fields ofstudy, researchers might be interested in finding publications morerelevant to their interests. Argo Lite is capable of hiding irrelevantpapers. Researchers are able to start exploration from highly citedpapers in their specific fields of interest, and incrementally addneighbor nodes of these publications. This helps researchers buildsubgraphs of publications tailored to their own research interests.
Argo Lite may be used by people without prior experience or ex-pertise in graph visualization. It has been successfully used by morethan 1,000 students in Georgia Tech’s
Data and Visual Analytics class for learning graph visualizations. Students have learned touse force-directed layout and different sizing, coloring and label-ing options to visualize their graphs. Additionally, students sharedtheir graph visualizations as URLs using Argo Lite’s link sharingfunctionality. Thus, we expect Argo Lite to be a resource not onlyuseful for experienced researchers, but also valuable for studentslearning about graph analysis and visualization techniques.
Argo Lite has strong potential to help advance multiple CIKMresearch areas, as highlighted on CIKM’s website. Argo Lite is aodern tool for data presentation , particularly for visualizing andexploring graphs. Argo Lite provides an easy-to-use user interfacefor interactive analysis , and could help users more easily exploreknowledge graphs. As demonstrated through the example citationgraph of COVID-19 publications in Section 4.3, Argo Lite may alsohelp with data integration and aggregation , assisting researchersand practitioners who develop and share knowledge graphs.
Graph visualization has been a well-established field growing inimportance, and popular tools such as Gephi [1] and Cytoscape[11] have already existed for many years. Argo Lite seeks to ad-vance graph visualization and exploration by bringing the powerof graph visualization into a modern in-browser web app availableon both desktop and mobile devices, equipped with both the clas-sic visualization features as well as new sharing and collaborationfeatures. Argo Lite addresses the challenges of existing tools interms of availability and interactivity, and offers a modern easy-to-use experience. It is a valuable addition not only to the graphvisualization field, but also other research areas that benefit fromgraph visualizations.
We expect Argo Lite to be useful for a long time and remainupdated as an evolving open source project. We will continuouslymaintain and improve Argo Lite and will leverage GitHub’s issueboard to respond to user feedback. Meanwhile, Argo Lite will alsocontinue to be used in Georgia Tech’s Data and Visual Analyticsclass, 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 understandgraph data. We anticipate that more researchers and students willbe using Argo Lite as a convenient graph visualization and explo-ration tool in the coming years.
Argo Lite is a novel open-source in-browser interactive graphexploration and visualization tool. It enables researchers to incre-mentally explore graph data in browser and conveniently sharetheir interactive visualizations via URLs and embedded widgets.Since Argo Lite is an in-browser tool, it does have limitations,since browser web apps have limited memory and cannot accessfile systems directly. In order for Argo Lite to be useful for evenlarger graphs, such as those with millions of edges, we anticipatefuture development of backend web services responsible for storingand processing large graph files uploaded by users. These servicesmay be paired with a dedicated frontend based on Argo Lite forinteractive visualization and exploration. It would also be useful tosee Argo Lite being used as a common frontend integrated intopopular graph databases.We believe that Argo Lite is a valuable tool for both researchersand students alike, and will continue to maintain and improve thisopen-source project.
REFERENCES [1] Mathieu Bastian, Sebastien Heymann, and Mathieu Jacomy. 2009. Gephi: an opensource software for exploring and manipulating networks. In
Third internationalAAAI conference on weblogs and social media .[2] Michael Bostock, Vadim Ogievetsky, and Jeffrey Heer. 2011. D3 Data-DrivenDocuments.
IEEE Transactions on Visualization and Computer Graphics
17, 12(Dec. 2011), 2301âĂŞ2309. https://doi.org/10.1109/TVCG.2011.185[3] Duen Horng Chau, Aniket Kittur, Jason I Hong, and Christos Faloutsos. 2011.Apolo: making sense of large network data by combining rich user interactionand machine learning. In
Proceedings of the SIGCHI conference on human factorsin computing systems . 167–176.[4] Dezhi Fang, Matthew Keezer, Jacob Williams, Kshitij Kulkarni, Robert Pienta, andDuen Horng Chau. 2017. Carina: Interactive Million-Node Graph VisualizationUsing Web Browser Technologies. In
Proceedings of the 26th International Confer-ence on World Wide Web Companion (Perth, Australia) (WWW âĂŹ17 Companion) .International World Wide Web Conferences Steering Committee, Republic andCanton of Geneva, CHE, 775âĂŞ776. https://doi.org/10.1145/3041021.3054234[5] Thomas MJ Fruchterman and Edward M Reingold. 1991. Graph drawing by force-directed placement.
Software: Practice and experience
21, 11 (1991), 1129–1164.[6] Donald Ervin Knuth. 1993.
The Stanford GraphBase: A Platform for CombinatorialComputing . Vol. 37. Addison-Wesley Reading.[7] Jure Leskovec and Rok Sosič. 2016. Snap: A general-purpose network analysis andgraph-mining library.
ACM Transactions on Intelligent Systems and Technology(TIST)
8, 1 (2016), 1–20.[8] Christian T Lopes, Max Franz, Farzana Kazi, Sylva L Donaldson, Quaid Morris,and Gary D Bader. 2010. Cytoscape Web: an interactive web-based networkbrowser.
Bioinformatics
26, 18 (2010), 2347–2348.[9] Lawrence Page, Sergey Brin, Rajeev Motwani, and Terry Winograd. 1999.
Thepagerank citation ranking: Bringing order to the web.
Technical Report. StanfordInfoLab.[10] Robert Pienta, James Abello, Minsuk Kahng, and Duen Horng Chau. 2015. Scalablegraph exploration and visualization: Sensemaking challenges and opportunities.In .IEEE, 271–278.[11] Paul Shannon, Andrew Markiel, Owen Ozier, Nitin S Baliga, Jonathan T Wang,Daniel Ramage, Nada Amin, Benno Schwikowski, and Trey Ideker. 2003. Cy-toscape: a software environment for integrated models of biomolecular interac-tion networks.
Genome research
13, 11 (2003), 2498–2504.[12] Lucy Lu Wang, Kyle Lo, Yoganand Chandrasekhar, Russell Reas, Jiangjiang Yang,Darrin Eide, Kathryn Funk, Rodney Michael Kinney, Ziyang Liu, William. Merrill,Paul Mooney, Dewey A. Murdick, Devvret Rishi, Jerry Sheehan, Zhihong Shen,Brandon Stilson, Alex D. Wade, Kuansan Wang, Christopher Wilhelm, Boya Xie,Douglas M. Raymond, Daniel S. Weld, Oren Etzioni, and Sebastian Kohlmeier.2020. CORD-19: The Covid-19 Open Research Dataset.