In this blog we will discuss making graphs with an interactive graph visualization system called Argo Lite.
Visualization is a very integral part of data analysis. The world today is driven by data and
hence it becomes important to visualize it in order to gain meaningful insights at a glance. The better the visualization the better it helps understand the data and the relation between its entities. The visualization of the data can be in many forms : line plots, scatter plots, bar charts, histograms, graphs etc.
A graph is essentially a network diagram that represents the relationship or interconnections between the entities in a set of data. Each entity is represented by a Node (also called vertex (plural: vertices). Connections between nodes are represented through links (also called edges). These kind of graphs are also known as a link chart, a node-link diagram or a network map.
Challenges of Existing systems
As the data is getting more complex, the tech realm is striving to make visualization easier. The existing graph visualization and exploration tools face a variety of challenges that limit their availability, interactivity and collaboration productivity.
The following are the challenges of existing system:
Availability: Existing graph visualization tools are typically built for desktop use only 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.
Interaction: It is very challenging to support interactive graph visualization on the web. People are limited to use static visualization on the web. To provide interactivity, researchers often resort to writing custom JavaScript-based visualizations using libraries such as D3 which requires complex engineering efforts; furthermore, the resulting visualizations may not scale beyond a few hundred nodes.
Collaboration: Most of the existing traditional systems rely on saving files onto local file systems. As a result, 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.
Argo Lite
Argo Lite is an effective open-source system which can build and share interactive graphs and is pretty easy to use. The best part is that you don't even need to install it as it runs in your web browser. Voila! You don't need to install any software or dependencies to use it.
This graph visualization and exploration system is developed using the latest web technologies by the researchers at Georgia Tech University and it overcomes the above-mentioned challenges of existing systems.
Highlights of Argo Lite:
This application can run on almost all modern browsers (Chrome, Firefox, Safari, Edge, etc.).
Users can access this application on a wide range of devices, from desktop computers, Chromebook, tablets etc. regardless of the operating system.
It takes advantage of the WebGL technology to drastically improve graph rendering performance in web browsers which leverages hardware acceleration and is supported by all modern web browsers. It smoothly renders hundreds of nodes and edges with interactive force-directed layout on commodity devices (e.g., laptops, tablets).
It 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.
Researchers can easily generate a link 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.
It 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.
Argo Lite 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.
It is available at this GitHub Repository: https://github.com/poloclub/argo-graph-lite
Launching Argo Lite
In order to start working with Argo Lite we need to first open it in our browser. It is just a click away as it can be launched using the following link: https://poloclub.github.io/argo-graph-lite/
On launching Argo Lite by clicking the link above we are taken to this page as shown in the figure below:
We can see that the above page displays a graph with default settings.
Argo Lite Interface
The interface consists of Menu bar, Graph options, View area, and the Status bar.
Menu bar:
The menu bar consists of the following tabs:
Graph: It provides us with options related to loading, saving and sharing a graph and its snapshot.
Tools: It provides us with the option to view the datasheet and statistics. It also consists of a filtering option that allows the user to filter nodes from the graph based on their degree and PageRank score.
Pause Layout: This option allows us to pause and resume the graph layout algorithm as it is not static.
Graph name: It shows the name of the graph. This is where we can rename a graph.
Settings: It helps you set your viewing preferences.
Help: It provides help with basic operations.
Hide: It hides the menu bar, status bar and the graph options and color scale to help expand the view area.
Graph Options:
It provides customization options for nodes, edges and labels.
Node attributes panel: This panel displays all the attributes of a selected node.
View Area:
This area displays the graph.
Status bar:
Color scale: This scale shows the value range of different colored nodes in the graph.
Graph info: This tab shows the general graph info i.e. total nodes, total edges and no. of hidden nodes.
Making Graph with Argo Lite
There are multiple ways to create a graph using Argo Lite. We can make graphs using information about either nodes or edges or both. Also we can access a previously built and shared graph using the URL of graph snapshot or by just using the graph snapshot.
Here, we will build a co-actor graph by extracting data from two csv files:
nodes.csv: This file contains the node data (id and name of actors).
edges.csv: This file contains the edge data (pair of co-actors).
Creating a graph
Go to the menu bar and then click on ‘Graph’. From the drop down menu click on ‘Import CSV’.
In the dialogue box that appears select ‘I have both nodes and edges file'. Upload the nodes and edges files. Select the delimiter as ','.
At the bottom of the dialogue, verify that ‘After import, show’ is set to ‘All Nodes’ and then click on 'Import'.
This will create our required graph as shown in the image below.
We can see the total number of nodes and edges in the status bar. and the node attributes of a selected node in the node attribute panel on the top right corner of the view area.
Also, we can customize the graph using the graph options tab by changing the size, shape and color of nodes based on various parameters such as degree, PageRank value or any other attribute.
We just saw how easy it is to create a complex interactive graph with Argo Lite. You should try to customize a graph using Argo Lite, that way you will be able to explore all the features that it offers.
Moreover, this platform is still developing and will come up with more useful features in the future.
If you need implementation for any of the topics mentioned above or assignment help on any of its variants, feel free contact us.
