Graph visualization efficiency of popular web-based libraries

  • 1School of Computer Science and Engineering, Central South University, Changsha, 410083, Hunan, China.
  • 2QAX Security Center, Qi An Xin Technology Group Inc., Beijing, 100044, China.
  • 3School of Computer Science and Engineering, Central South University, Changsha, 410083, Hunan, China. zhaoying@csu.edu.cn.

Abstract

Web-based libraries, such as D3.js, ECharts.js, and G6.js, are widely used to generate node-link graph visualizations. These libraries allow users to call application programming interfaces (APIs) without identifying the details of the encapsulated techniques such as graph layout algorithms and graph rendering methods. Efficiency requirements, such as visualizing a graph with 3k nodes and 4k edges within 1 min at a frame rate of 30 fps, are crucial for selecting a proper library because libraries generally present different characteristics owing to the diversity of encapsulated techniques. However, existing studies have mainly focused on verifying the advantages of a new layout algorithm or rendering method from a theoretical viewpoint independent of specific web-based libraries. Their conclusions are difficult for end users to understand and utilize. Therefore, a trial-and-error selection process is required. This study addresses this gap by conducting an empirical experiment to evaluate the performance of web-based libraries. The experiment involves popular libraries and hundreds of graph datasets covering node scales from 100 to 200k and edge-to-node ratios from 1 to 10 (including complete graphs). The experimental results are the time costs and frame rates recorded using the libraries to visualize the datasets. The authors analyze the performance characteristics of each library in depth based on the results and organize the results and findings into application-oriented guidelines. Additionally, they present three usage cases to illustrate how the guidelines can be applied in practice. These guidelines offer user-friendly and reliable recommendations, aiding users in quickly selecting the desired web-based libraries based on their specific efficiency requirements for node-link graph visualizations.

Related Concept Videos

Multiple Bar Graph 01:07

5.0K

As the name suggests, a multiple bar graph is the same as a bar graph but has multiple bars to depict relationships between different data values. One can include as many parameters as possible. However, each parameter must have the same unit of measurement.
Each bar or column in the multiple bar graph represents a data value. These graphs are used primarily in interrelating two or more sets of data. The categories of different kinds of data are listed along the horizontal or x-axis, whereas...

Bar Graph 01:07

15.9K

A bar graph is also called a bar chart and consists of bars that are separated from each other. It either uses horizontal or vertical bars to show comparisons among categories. The bars can be rectangles, or they can be rectangular boxes (used in three-dimensional plots). One axis of the graph represents the specific categories being compared, and the other axis shows a discrete value. In this graph, the length of the bar for each category is proportional to the number or percent of individuals...

Interpreting R Charts 01:22

39

R chart, or range chart, is a fundamental tool in statistical process control used to monitor the variability within a process. It complements the X-bar (x̄) chart by focusing on the range of the data, rather than individual values, providing a clear picture of the process dispersion over time.
An R chart plots the range of subsets of measurements collected from a process. Each point on the chart represents the range—defined as the difference between the maximum and minimum...

Pie Chart 01:04

13.6K

A pie chart (or a pie graph) is a circular graphical chart or a pictorial representation of categorical data. It is divided into slices of pie each indicating numerical proportions. It is also used to show the relative sizes of data in a single chart.
In a pie chart, the central angle, the arc length of each slice, and the area are directly proportional to the quantity or percentage it represents. Some real-world examples that can be depicted using pie charts include marks obtained by students...

Ogive Graph 01:07

5.5K

An ogive graph is sometimes called a cumulative frequency polygon. It is one type of frequency polygon that shows cumulative frequency. In other words, the cumulative percentages are added to the graph from left to right. An ogive graph plots cumulative frequency on the vertical y-axis and class boundaries along the horizontal x-axis. It’s very similar to a histogram; only instead of rectangles, an ogive displays a single point where the top right of the rectangle would be. Creating this...

The R Chart 01:02

45

In statistical process control, control charts, particularly R charts, are instrumental in monitoring process variations and identifying non-random patterns that run charts might miss. R charts track the variability within process subgroups, which is crucial when standard deviation use is impractical or unknown process variations exist.
R charts are pivotal for pinpointing shifts in process variability. Stability is indicated when all data points remain within the defined upper and lower...