Visual Informatics 5 (2021) 49–55

Contents lists available at ScienceDirect

Visual Informatics
journal homepage: www.elsevier.com/locate/visinf

G6: A web-based library for graph visualization✩

Yanyan Wang a , Zhanning Bai a , Zhifeng Lin a , Xiaoqing Dong b , Yingchaojie Feng c ,
∗
Jiacheng Pan c , Wei Chen c ,
a
Ant Group, China
b
Alibaba Group, China
c
State Key Lab of CAD&CG, Zhejiang University, Hangzhou, Zhejiang, China

article info a b s t r a c t

Article history: Authoring graph visualization poses great challenges to developers due to its high requirements
Received 24 October 2021 on both domain knowledge and development skills. Although existing libraries and tools reduce
Received in revised form 7 December 2021 the difficulty of generating graph visualization, there are still many challenges. We work closely
Accepted 7 December 2021
with developers and formulate several design goals, then design and implement G6, a web-based
Available online 11 December 2021
library for graph visualization. It combines template-based configuration for high usability and flexible
Keywords: customization for high expressiveness. To enhance development efficiency, G6 proposes a range of
Graph visualization optimizations, including state management and interaction modes. We demonstrate its capabilities
Node–link diagram through an extensive gallery, a quantitative performance evaluation, and an expert interview. G6 was
Web-based visualization first released in 2017 and has been iterated for 317 versions. It has served as a web-based library for
Visualization library
thousands of applications and received 8312 stars on GitHub.
© 2021 The Authors. Published by Elsevier B.V. on behalf of Zhejiang University and Zhejiang University
Press Co. Ltd. This is an open access article under the CC BY-NC-ND license
(http://creativecommons.org/licenses/by-nc-nd/4.0/).

1. Introduction some graph analysis scenarios. Specific graph visualization tools

(Dwyer et al., 2008; Han et al., 2021), such as Cytoscape.js (Franz
As a typical representation of relational data, graph data has et al., 2016) and Sigma.js1 , introduce more graph-oriented fea-
shown its significance in a wide range of application scenarios, tures to facilitate graph visualization construction.
such as community structures in social network analysis (Pin- To meet the requirements of graph visualization from the
aud et al., 2020) and financial transactions (Xie et al., 2019). industry, we work closely with developers and conduct regular
Among several types of graph visualization (Cui and Qu, 2007), interviews to investigate the authoring process, and identify sev-
node–link diagram is the most popular one because of its great eral opportunities to enhance the usability and the expressiveness
expressiveness. A series of visualization systems for node–link di- of graph visualization tools. It is found that they prefer to reuse
agrams has been proposed to facilitate efficient construction (Ro- the encapsulated code to accelerate the development of simple
mat et al., 2019) and exploration (Srinivasan and Stasko, 2017; node–link diagrams, while free customization is equally essential
Saktheeswaran et al., 2020; Chen et al., 2018). to cope with complex requirements. Unfortunately, existing tools
Despite the growing number of libraries and toolkits, building do not adequately cater for both simultaneously. As a result,
complex applications with graph visualizations remains challeng- experts sometimes have to make a choice, mostly choosing the
ing, requiring expertise in graph visualization and a significant former at the expense of customization.
amount of coding work. D3.js (Bostock et al., 2011) simplifies We design and implement a library for graph visualization.
the workflow by enabling declarative specification for visual en- We name it G6, with ‘‘G’’ taken from ‘‘graph’’ and ‘‘6’’ taken from
coding but provides limited graph support, hindering its use in the Six Degrees of Separation (Guare et al., 2000). G6 combines
template-based configuration for high usability and flexible cus-
tomization for high expressiveness. To enhance development
✩ Given his role as Editor in Chief of this journal, Wei Chen had no
efficiency, G6 proposes a suite of mechanisms, including state
involvement in the peer-review of this article and has no access to information
regarding its peer-review. Full responsibility for the peer-review process for this
management and interaction modes. The rich integration of lay-
article was delegated to Jiazhi Xia. outs, algorithms, and plugins drive G6 to a higher level of analysis
∗ Corresponding author. capabilities. We demonstrate the expressiveness and usability
E-mail addresses: [email protected] (Y. Wang), of G6 through an extensive gallery, a quantitative performance
[email protected] (Z. Bai), [email protected] (Z. Lin),
[email protected] (X. Dong), [email protected] (Y. Feng),
[email protected] (J. Pan), [email protected] (W. Chen). 1 http://sigmajs.org/.

https://doi.org/10.1016/j.visinf.2021.12.003
2468-502X/© 2021 The Authors. Published by Elsevier B.V. on behalf of Zhejiang University and Zhejiang University Press Co. Ltd. This is an open access article under the
CC BY-NC-ND license (http://creativecommons.org/licenses/by-nc-nd/4.0/).
Y. Wang, Z. Bai, Z. Lin et al. Visual Informatics 5 (2021) 49–55

evaluation, and an expert interview. After 317 iterations, G6 is They provide more graph-related options and optimizations. We-
widely used for graph visualization and receives 8312 stars on bGL is supported by Sigma.js1 and NetV.js (Han et al., 2021) to
GitHub. For more details about G6, please visit https://g6.antv. improve rendering performance and efficiently visualize large-
vision/en. scale graphs. However, it naturally increases the programming
complexity and limits the expressiveness. The aforementioned
2. Related work tools are usually accompanied by problems like low usability
or low efficiency. G6 differentiates itself from others in that G6
2.1. Node–link diagram exhibits significant improvement in usability and expressiveness
without sacrificing performance.
Node–link diagrams effectively exhibit the connectivity and
topology of networks (Ghoniem et al., 2004). Within a node– 3. Design goals and requirements
link diagram, nodes are interpreted as objects and edges are
interpreted as relations between objects, which is intuitive for We conduct a preliminary study with the developers from se-
end-users. A wide range of layout methods is available to present curity, financial, and biological fields. Most interviewees have the
different characteristics of the data. The force-directed Layout, experience with existing graph visualization tools, like Sigma.js1 ,
first proposed by Peter Eades (Eades, 1984), introduces the spring Cytoscape.js (Franz et al., 2016), NetV.js (Han et al., 2021), and
model into the layout computation. The position of each node Gephi (Bastian et al., 2009). We identify two design goals.
is affected by the elasticity from the neighboring nodes and DG1 Expressiveness. G6 should provide a free design space to
achieves a dynamic balance after multiple iterations. Many efforts create exquisite styles, layouts, and interactions to visu-
are made to improve performance (Hachul and Jünger, 2004; Ja- alize multivariate networks, enabling free stylization for
comy et al., 2014) and reduce clutter (Holten and Van Wijk, 2009). complex graph visualizations.
Alternatively, the multi-dimensional scale (MDS) layout (Kruskal, DG2 Usability. G6 aims to improve usability by lowering its
1964; Tenenbaum et al., 2000) projects high-dimensional data complexity in grammar design. Precisely, G6’s grammar
into a low-dimensional space by preserving the relative relation- should fit the way of front-end development, leveraging
ship of data. Several works are proposed to accelerate layout developers’ experience to lower the learning costs. Alter-
computing (Zhu et al., 2020, 2021). Besides, other graph lay- natively, G6 should encapsulate common functions for di-
outs, such as grid layout, radial layout (Brandes and Pich, 2011), rect use, making it easy to get started even for novice
and circular layout, provide various means to present specific developers.
structures and are suitable for distinctive scenarios and analysis Towards these two design goals, we collaborate with devel-
tasks. opers from the industry and conduct regular conversations to
capture their requirements in visual encoding, interaction, layout,
2.2. Graph visualization tools analysis algorithm, etc. Then we summarize the issues raised by
the developers and identify the following requirements.
To construct graph visualization, a natural way is purely us- R1 Element Customization. G6 should provide diverse tem-
ing programming language, such as C++, JavaScript, and Python, plate types and customization ability to support extensive
to perform the data conversion, layout computing, and render- attribute encoding of multivariate networks (DG1). Fur-
ing. However, this approach requires expertise in programming thermore, G6 should incorporate component-based nodes
and represents a significant expenditure of time in coding and and links, following the idea of declarative views in several
debugging. Although authoring systems with a graphical user most popular front-end frameworks such as React, Vue, and
interface (Romat et al., 2019) improve usability and accessibility, Angular. It leverages developers’ expertise and lowers their
their expressiveness is strongly limited to the templates provided learning costs (DG2).
by the systems. R2 State Management. From the viewpoint of the end-user
The Grammar of Graphics (Heer et al., 2005) builds a basis manipulation, elements of a graph need to undergo style
for solving the aforementioned problems. It nourishes the idea updates (DG1), like highlighting and redrawing color.
of providing a set of rules that enable developers to customize Specifying transitions between these states causes tedious
visualizations with a simple configuration. Subsequently, a series workload and style confusion in interaction-intensive sce-
of works on declarative grammar have been proposed (Li et al., narios. An efficient strategy for state management is re-
2020; Bostock et al., 2011; Heer and Bostock, 2010). Among quired to simplify this process (DG2).
these declarative grammars, low-level grammars, such as Pro- R3 Interaction Modes. Different scenarios require different
tovis (Bostock and Heer, 2009), D3.js (Bostock et al., 2011), and interaction modes, such as edit mode that enables free
Vega (Satyanarayan et al., 2015), allow fine-grained control over manipulations and display mode that supports limited
the visualization results. Li et al. propose a set of declarative interactions and prevents modifications to the graph. It is
grammars (Li and Ma, 2018) to reduce the difficulty of develop- expected to support a convenient switch between interac-
ing high-performance systems, then supports progressive anal- tion modes, so as to free developers from the tedium of
ysis (Li and Ma, 2019) and deep learning analysis methods (Li binding and unbinding interactions for different scenarios
and Ma, 2020). High-level grammars, such as Vega-Lite (Satya- (DG2).
narayan et al., 2016), ECharts (Li et al., 2018), and ggplot2 (Wick- R4 Graph Layout. In terms of layout types, G6 should en-
ham, 2011), emphasize the simplicity of the rules. By searching capsulate mainstream layout types to prevent developers
and inferring in the visualization space, they simplify the con- from implementing them from scratch (DG2). To visualize
figuration process, thus enabling efficient data exploration and distinct sub-graph structures, G6 should support specifying
analysis. However, all of the grammars above are designed for unique layouts for different sub-graphs (DG1). Layout per-
general visualization, lacking specialized design considerations formance is also necessary to ensure end-user experience,
for characteristics of graph data. especially for large graphs (DG2).
Many libraries (e.g., Cytoscape.js (Franz et al., 2016), the net- R5 Graph Analysis Algorithm. Graph analysis algorithms are
work of vis.js2 , and GoJs3 ) are designed for graph visualization. extensively used to perform analysis tasks for insight dis-
covery, hypothesis verification, and behavior prediction. G6
2 https://visjs.org/. must integrate common analysis algorithms to facilitate
3 https://gojs.net/latest/. their application (DG2).
50
Y. Wang, Z. Bai, Z. Lin et al. Visual Informatics 5 (2021) 49–55

Fig. 1. An example of graph instance with initialization and configuration in

terms of canvas, element, layout, etc.

R6 Graph Plugin. Plugins can extend the graph visualization

Fig. 2. Default styles and text labels of G6’s build-in node types: (a) triangle,
with new features (DG2). Developers can use integrated (b) rectangle, (c) ellipse, (d) circle, (e) star, (f) image, (g) card, (h) donut.
plugins or customize plugins for reuse and sharing, which
is vital for design iterations.
For local data update, graph.addItem, graph.removeItem,
4. Major modules of G6
and graph.updateItem support individual manipulation over a
single element. graph.refreshPositions updates node posi-
G6 is implemented with six modules to fulfill our design
tions during layout transition and node dragging. These interfaces
requirements:
for local update and rendering reduce the effort of comparing and
• Instance provides an entry to reach G6’s features. It is detecting data changes, significantly improving the visualization
the entity that carries all graph items, including elements, performance.
layouts, interactions, and functions;
• Element provides the accessibility for nodes and links with 4.2. Graph element
their attributes and functions;
• Layout supports a variety of graph rendering algorithms for Graph elements consist of nodes and edges, each of which is
different purposes; an individual unit equipped with various basic operations similar
• Interaction encompasses a range of listeners and events to existing graph visualization tools (e.g., Cytoscape.js, Sigma.js,
that bridge end-user manipulation and graph data; NetV.js):
• Algorithm integrates common graph algorithms to facilitate • Diverse template types. In addition to the basic geometry
graph analysis tasks; like rectangles and triangles, G6 also incorporates some
• Plugin enables developers to introduce customized func- irregular but common node types (Fig. 2) with rich options
tions, which provide end-users with more auxiliary tools. for style configuration (R1).
• Element listeners. G6 supports event listening on graph
4.1. Graph instance elements, including interaction events and timing events, as
detailed in Section 4.3.1.
Like Cytoscape.js, Sigma.js, and NetV.js, G6 uses the graph • Compound nodes. Some graphs are organized in a hier-
instance to represent the entity of graph visualization (node–link archical structure, in which a group of nodes can form a
diagram) and uses declarative options to simplify the creation compound node, named Combo. G6 enables the interaction
process. Fig. 1 shows a simplified case of graph instantiation with to open and close compound nodes.
global configuration in respect of canvas, elements, layout, data,
To meet the requirement R1 from interviewees, we extend
interactions, and state.
G6 with new features, making G6 more expressive and usable,
G6 provides interfaces to update the graph from the global
especially for creating complex graphs like flowcharts and mind
level (e.g., global pan and zoom, data update, and layout adjust-
maps. Flexible stylization enables developers to register their
ment) to the local level (e.g., element management, style update, customized types by defining element drawing modes, life-cycle
and event listening). functions, and state settings (R1). The extensive encoding of
multivariate networks can be implemented by specifying visual
4.1.1. Data flow mapping. Another contribution of G6 is the component-based
Data-driven frameworks, such as React, render visual compo- specification, which supports element styles definition using the
nents regardless of global or local updates. It may suffer from two popular JavaScript Syntax Extension (JSX) grammar. React com-
problems. First, data manipulation usually leaves a large portion ponents are supported. In a flowchart or a mind map, anchors of
of data unchanged, which causes an amount of unnecessary com- geometric nodes are usually vertices or midpoints of edges of the
putation to update their visual components. Although existing bounding box (Fig. 2). Accordingly, G6 provides precise anchor
frameworks compare and detect updates, their performance is control by assigning the percentages of the bounding box for
hindered by comparing the deep nested data properties in JSON direct use.
objects. Second, the original data in a data-driven framework is
treated as immutable data, and thus it must be updated by deep 4.3. Graph interaction
copy, leading to significant time consumption.
Therefore, instead of employing a fully data-driven mecha- The interaction module can be divided into three parts: Event
nism, G6 adopts a flexible strategy by leaving the control to Listening, State Style, and Interaction Mode. Event Listening pro-
the developers. G6 provides different interfaces for global and vides APIs for developers to respond to interaction events. State
local data updates. For global data updates, graph.changeData Style simplifies the style management by state registration. In-
employs the Diff algorithm to update the differential data, then teraction Mode allows for interaction switching between different
graph.layout is triggered automatically to refresh the layout. scenarios.
51
Y. Wang, Z. Bai, Z. Lin et al. Visual Informatics 5 (2021) 49–55

Fig. 3. An example of graph instance with configured state styles of default

state, hover state, and selected state.

Fig. 5. An example of configuring Interaction Modes and Behaviors on a graph

Fig. 4. Examples of updating the state of a graph instance. instance and then switching between Interaction Modes. Developers can also
register their customized Behaviors by registerBehavior.

4.3.1. Event listening

G6 supports Event Listening. We divide events into interac-
tion events and life-cycle events (named timing events in G6).
Interaction events refer to end-user manipulation, such as mouse
click and keyboard input. All the interaction events follow the
Mozilla Developer Network (MDN) criterion. Life-cycle events
occur automatically when some state changes, like adding a node
or stopping an animation. Developers specify the response of
events to provide appropriate interactive feedback (R2).

4.3.2. State style

To eliminate the tedious and repetitive workload of state
management in R2, G6 provides State Style to configure element
states with the corresponding styles. During the interaction, el-
ement styles will be automatically updated when the element
is converted to a preset state without additional code for state Fig. 6. An example of a graph instance with a sub-graph pipeline.

management.
As illustrated in Fig. 3, defaultNode configures the default
node style, and nodeStateStyles defines the style of the hover 4.4. Graph layout
and selected states. With the configured state style, developers
only need to update the element state by listening to events such Different scenarios require different layouts for specific pur-
as mouse enters, leaves, and clicks (Fig. 4). Styles of elements will poses. G6 has more than 20 built-in layouts (R4) with correspond-
be updated automatically. ing configuration parameters. Developers can use registerLay-
out to register layouts in G6 for deep customization.
4.3.3. Interaction mode In addition, G6 supports a sub-graph layout mechanism (R4)
To fulfill R3, G6 introduces the concept of Interaction Mode.
to depict sub-graphs with different layouts to highlight particular
As shown in Fig. 5, multiple Interaction Modes are simply con-
structures. The mechanism enables developers to configure mul-
figured via the modes field (e.g., the default mode and the
tiple sub-graph layouts in a flowing manner. Fig. 6 demonstrates a
edit mode) and can be switched via setMode. One Interaction
case with a sub-graph layout. G6 renders sub-graphs in the order
Mode (e.g., edit) contains one or more corresponding Behaviors.
Different Behaviors in G6 mean different interactions, which are of the pipes array, and each item in the array includes type and
usually made up of a series of atomic events. For example, canvas nodesFilter to specify the type and scope of the sub-graph.
dragging starts with a dragstart event, proceeds with drag Each sub-graph layout can be switched by a smooth transition
events, and ends with a dragend event. Several common Behav- process. G6 provides pre-defined transitions for some of the built-
iors have been integrated by G6 and provide rich configurations in layout algorithms and creates transitions for others through
for deep customization (Fig. 5). interpolation.
G6 enables developers to customize Interaction Modes with G6 also has some performance optimization strategies (R4)
an appropriate Behavior set according to their requirements. It to improve layout efficiency and end-user experience of graph
serves developers an elegant way to deal with different scenarios visualization. To avoid the process blocking caused by complex
without tiresome implementation details. layouts, G6 integrates Web-Worker technology for background
52
Y. Wang, Z. Bai, Z. Lin et al. Visual Informatics 5 (2021) 49–55

Fig. 7. A selection of representatives plugins built into G6.

computation. For force-directed layout and Fruchterman layout, 5. Evaluation

G6 accelerates the layout by utilizing GPU.
5.1. Visualization gallery
4.5. Graph analysis algorithm
We build a gallery of graph visualization to demonstrate
Graph analysis algorithms have been widely studied by re- the expressiveness of G6. Fig. 8 shows representatives from
searchers and have become essential in graph analysis tasks. the gallery. Some of them require style customization in nodes
G6 incorporates various graph analysis algorithms (R5), contain- (Fig. 8(a, b, h)) and edges (Fig. 8(b–d)). In contrast, others utilize
ing classical graph-theoretic algorithms (e.g., depth-first search, the integrated layouts (Fig. 8(e, h)) and compound nodes (Fig. 8(f,
minimum spanning tree, the shortest path algorithm) and some g)) to make the visualization more readable. The entire gallery is
advanced algorithms (e.g., label propagation, Louvain cluster- available on our website,4 where each example is presented with
ing, graph pattern matching algorithm). Developers can apply editable source code and an introduction for easy understanding.
them effortlessly with simple parameter configuration and thus Our website also provides a thorough introduction to the design,
get rid of suffering tedious implementation of algorithm details. development manual, and APIs to help developers get started
Implementing algorithms in the front-end can also save time quickly.
communicating with back-end servers. These algorithms can be
used in isolation from graph instances, driving G6 to a higher level
of openness. 5.2. Performance comparison

4.6. Graph plugin We compare G6 with Sigma.js and Cytoscape.js in terms of

layout performance. Experiments are performed on a 13-inch
G6 prepares a rich set of plugins (R6) to benefit end-users in MacBook Pro with an Apple M1 silicon, 16 GB of RAM, and macOS
the exploration process. Fig. 7 presents six representative plugins. Big Sur 11.5.2. We collect four graph datasets with scales (the
number of nodes plus the number of edges) of 4331, 10,664,
• Legend (Fig. 7(a)) shows the encoding scheme of the node–
13,744, and 35,000 and visualize these graphs using the force-
link diagram, facilitating the end-users’ understanding of the
directed layout integrated by each library. As illustrated in Fig. 9,
graph.
G6 achieves higher efficiency than Cytoscape.js at all scales. With
• SnapLine (Fig. 7(b)) hints at coordinates alignment, allowing
the GPU acceleration, G6 prevails even more. Sigma.js fails to
more precise movement operations.
visualize datasets at the sizes of 13,744 and 35,000.
• ToolBar (Fig. 7(c)) is an expandable container with a set of
auxiliary functions.
• Fisheye (Fig. 7(d)) and EdgeFilter (Fig. 7(e)) provide distinc- 5.3. Expert interview
tive perspectives, enabling end-users to focus on the local
details of the graph visualization.
We conduct interviews with six developers from the indus-
• Grid (Fig. 7(f)) draws horizontal and vertical lines in the
try. Four of them are interviewees for the preliminary study
background and can be helpful in some analysis tasks, such
mentioned in Section 3 and have over four years of project expe-
as comparing and aligning different elements.
rience in graph visualization. The others are primarily front-end
More plugins and detailed information are now available on developers with little expertise in graph visualization.
the website at https://g6.antv.vision/en/docs/manual/middle/plugins/
Plugins. Developers can also accumulate their design and code by
customizing plugins. 4 https://g6.antv.vision/en/examples/gallery

53
Y. Wang, Z. Bai, Z. Lin et al. Visual Informatics 5 (2021) 49–55

Fig. 8. A gallery of graph visualizations created by G6. (a) tree diagram of Australian fires, (b) transfer graph, (c) migration map of the USA using edge bundling,
(d) arc diagram, (e) Christmas bubbles, (f) decision bubbles, (g) large graph exploration, (h) layered graph.

While most interviewees prefer G6, one interviewee states, ‘‘I

might choose other libraries (e.g., Sigma.js) for scenarios without
complex stylization requirements.’’
In terms of usability (DG2), G6 is described by one interviewee
as a ‘‘masterpiece’’ of graph visualization tools due to its rich
integration of layouts (R4), analysis algorithms (R5), and plugins
(R6). ‘‘In contrast, when using other tools, I always need to seek
external support (e.g., layouts and analysis algorithms) before it
is completed.’’ G6’s abundant layouts have ‘‘strong appeal’’ and
‘‘solve developers’ problems with a set of distinct and usable
layout algorithms’’; graph analysis algorithms ‘‘raise the ceiling of
Fig. 9. Performance comparison with Sigma.js and Cytoscape.js.
the front-end, bringing powerful graph exploration and analysis
capabilities’’; graph plugins ‘‘allow developers to integrate their
ideas to this one-stop solution’’ and ‘‘further enrich the G6’s
5.3.1. Procedure
First, we introduce main features of G6 and demonstrate them ecosystem.’’ Interviewees also appreciate the various optimiza-
with some cases from the gallery (30 min). During this process, tion mechanisms provided by G6, including state management
the interviewees can interrupt our presentation and ask questions (R2) and interaction modes (R3), which ‘‘make the diagram styles
at any time, and we provide more detailed explanations until much more manageable.’’ One states ‘‘Compared to other tools
the interviewees’ doubts are cleared. Then, the interviewees can like Cytoscape.js, which require me to manually specify the exact
explore freely (30 min) by experimenting with the code on the process of interaction response, G6 provides a more concise and
case pages or viewing the tutorials for a complete introduction to intuitive declarative approach that significantly improve the de-
the programming interfaces. Thereafter, they take a week to apply velopment efficiency.’’ They also praise the bilingual tutorials as
G6 in real projects. Finally, we conduct an interview (30 min) ‘‘very informative’’ and ‘‘getting much better.’’
and collect their feedback (comments for features of G6 and When questioned about the future options for graph visualiza-
their preference over G6 and other graph visualization tools) for
tion tools, five interviewees express high expectations on using
further analysis.
G6 over other tools, such as Sigma.js, Cytoscape.js, and D3.js. One
reserves the possibility of turning to other WebGL-enabled tools,
5.3.2. Results
In terms of expressiveness (DG1), all interviewees praise the like Stardust and NetV.js, based on the consideration of extreme
customization capabilities. Some interviewees comment, ‘‘G6 sig- performance requirements.
nificantly reduces the difficulty of node customization (R1).
Component-based Specification and its React implementation are
5.3.3. Suggestions
probably the most important and useful features.’’ ‘‘G6 provides
the ability to customize layouts to meet specific requirements Interviewees also provide some valuable suggestions. They
of different scenarios (R1).’’ ‘‘G6 broadens the imagination and mention that G6 should support high performance computing
the originality of the business.’’ Some interviewees mention the with WebGL technology to reach higher usability. Novice users
compound node provided by G6 as well, calling it ‘‘the best may be confused about choosing graph layouts to present data
tool for hierarchical analysis.’’ ‘‘(G6) opens up more possibili- features, and intelligent layout recommendations may alleviate
ties for real business than other graph visualization solutions.’’ this problem.
54
Y. Wang, Z. Bai, Z. Lin et al. Visual Informatics 5 (2021) 49–55

6. Community feedback Dwyer, T., Marriott, K., Wybrow, M., 2008. Dunnart: A constraint-based network
diagram authoring tool. In: International Symposium on Graph Drawing.
Springer, pp. 420–431.
G6 has been iterated for 317 versions since 2017, and its open-
Eades, P., 1984. A heuristic for graph drawing. Congr. Numer. 42, 149–160.
source code on GitHub5 has received 8312 stars. Many excellent Franz, M., Lopes, C.T., Huck, G., Dong, Y., Sumer, O., Bader, G.D., 2016. Cytoscape.
suggestions from the community are collected, e.g., the pipeline js: a graph theory library for visualisation and analysis. Bioinformatics 32 (2),
for the sub-graph layout introduced in Section 4.4. About 65% of 309–311.
the 79 GitHub contributors are from the community. Ghoniem, M., Fekete, J.-D., Castagliola, P., 2004. A comparison of the readabil-
ity of graphs using node-link and matrix-based representations. In: IEEE
Symposium on Information Visualization. Ieee, pp. 17–24.
7. Conclusion Guare, J., Sandrich, J., Loewenberg, S.A., 2000. Six Degrees of Separation. LA
Theatre Works.
This paper contributes G6, a web-based graph visualization Hachul, S., Jünger, M., 2004. Drawing large graphs with a potential-field-
based multilevel algorithm. In: International Symposium on Graph Drawing.
library that provides comprehensive style customization, lay-
Springer, pp. 285–295.
out, interaction, algorithms, and plugins. It also incorporates a Han, D., Pan, J., Zhao, X., Chen, W., 2021. NetV. Js: A web-based library for
series of features, including state style, interaction mode, and high-efficiency visualization of large-scale graphs and networks. Vis. Inf. 5
behavior, to lower learning costs and simplify the development (1), 61–66.
process, enabling developers to construct graph visualizations Heer, J., Bostock, M., 2010. Declarative language design for interactive
visualization. IEEE Trans. Vis. Comput. Graphics 16 (6), 1149–1156.
efficiently. An extensive gallery, a quantitative performance eval- Heer, J., Card, S.K., Landay, J.A., 2005. Prefuse: a toolkit for interactive information
uation, and an expert interview demonstrate the expressiveness visualization. In: Proceedings of the SIGCHI Conference on Human Factors in
and the usability of G6. Computing Systems, pp. 421–430.
In the future, we will develop more features, including ad- Holten, D., Van Wijk, J.J., 2009. Force-directed edge bundling for graph visu-
alization. In: Computer Graphics Forum, vol. 28. Wiley Online Library, pp.
vanced graph layout algorithms, intelligent graph layout recom-
983–990.
mendations, and WebGL acceleration. Jacomy, M., Venturini, T., Heymann, S., Bastian, M., 2014. ForceAtlas2, a contin-
uous graph layout algorithm for handy network visualization designed for
CRediT authorship contribution statement the Gephi software. PLoS One 9 (6), e98679.
Kruskal, J.B., 1964. Multidimensional scaling by optimizing goodness of fit to a
nonmetric hypothesis. Psychometrika 29 (1), 1–27.
Yanyan Wang: Software, Writing – original draft. Zhanning Li, J.K., Ma, K.-L., 2018. P4: Portable parallel processing pipelines for inter-
Bai: Software. Zhifeng Lin: Conceptualization. Xiaoqing Dong: active information visualization. IEEE Trans. Vis. Comput. Graphics 26 (3),
Conceptualization. Yingchaojie Feng: Writing – original draft. 1548–1561.
Jiacheng Pan: Writing – reviewing and editing. Wei Chen: Su- Li, J.K., Ma, K.-L., 2019. P5: Portable progressive parallel processing pipelines for
interactive data analysis and visualization. IEEE Trans. Vis. Comput. Graphics
pervision.
26 (1), 1151–1160.
Li, J.K., Ma, K.-L., 2020. P6: A declarative language for integrating machine
Declaration of competing interest learning in visual analytics. IEEE Trans. Vis. Comput. Graphics 27 (2),
380–389.
The authors declare that they have no known competing finan- Li, D., Mei, H., Shen, Y., Su, S., Zhang, W., Wang, J., Zu, M., Chen, W., 2018.
ECharts: a declarative framework for rapid construction of web-based
cial interests or personal relationships that could have appeared
visualization. Vis. Inf. 2 (2), 136–146.
to influence the work reported in this paper. Li, G., Tian, M., Xu, Q., McGuffin, M.J., Yuan, X., 2020. Gotree: A grammar of
tree visualizations. In: Proceedings of the 2020 CHI Conference on Human
Acknowledgments Factors in Computing Systems, pp. 1–13.
Pinaud, B., Vallet, J., Melançon, G., 2020. On visualization techniques comparison
for large social networks overview: A user experiment. Vis. Inf. 4 (4), 23–34.
We would like to thank Tong Huang, Xuzhi Ming, Libo Zheng, Romat, H., Appert, C., Pietriga, E., 2019. Expressive authoring of node-link
Chenlu Li, Yilin Qiu, Huasi Chen, and Bo Pan for their kind help diagrams with graphies. IEEE Trans. Vis. Comput. Graphics.
on this paper. Wei Chen is supported by National Natural Science Saktheeswaran, A., Srinivasan, A., Stasko, J., 2020. Touch? Speech? or touch and
Foundation of China (61772456). speech? Investigating multimodal interaction for visual network exploration
and analysis. IEEE Trans. Vis. Comput. Graphics 26 (6), 2168–2179.
Satyanarayan, A., Moritz, D., Wongsuphasawat, K., Heer, J., 2016. Vega-lite: A
Ethical approval grammar of interactive graphics. IEEE Trans. Vis. Comput. Graphics 23 (1),
341–350.
This study does not contain any studies with human or animal Satyanarayan, A., Russell, R., Hoffswell, J., Heer, J., 2015. Reactive vega: A
subjects performed by any of the authors. streaming dataflow architecture for declarative interactive visualization. IEEE
Trans. Vis. Comput. Graphics 22 (1), 659–668.
Srinivasan, A., Stasko, J., 2017. Orko: Facilitating multimodal interaction for visual
References exploration and analysis of networks. IEEE Trans. Vis. Comput. Graphics 24
(1), 511–521.
Bastian, M., Heymann, S., Jacomy, M., 2009. Gephi: an open source software Tenenbaum, J.B., De Silva, V., Langford, J.C., 2000. A global geometric framework
for exploring and manipulating networks. In: Third International AAAI for nonlinear dimensionality reduction. Science 290 (5500), 2319–2323.
Conference on Weblogs and Social Media. Wickham, H., 2011. ggplot2. Wiley Interdiscip. Rev. Comput. Stat. 3 (2), 180–185.
Bostock, M., Heer, J., 2009. Protovis: A graphical toolkit for visualization. IEEE Xie, C., Zhong, W., Xu, W., Mueller, K., 2019. Visual analytics of heterogeneous
Trans. Vis. Comput. Graphics 15 (6), 1121–1128. data using hypergraph learning. ACM Trans. Intell. Syst. Technol. 10 (1),
Bostock, M., Ogievetsky, V., Heer, J., 2011. D3 data-driven documents. IEEE Trans. 4:1–4:26. http://dx.doi.org/10.1145/3200765.
Vis. Comput. Graphics 17 (12), 2301–2309. Zhu, M., Chen, W., Hu, Y., Hou, Y., Liu, L., Zhang, K., 2020. DRGraph: AN efficient
Brandes, U., Pich, C., 2011. More flexible radial layout. J. Graph Algorithms Appl. graph layout algorithm for large-scale graphs by dimensionality reduction.
15 (1), 157–173. IEEE Trans. Vis. Comput. Graphics 27 (2), 1666–1676.
Chen, W., Guo, F., Han, D., Pan, J., Nie, X., Xia, J., Zhang, X., 2018. Structure- Zhu, H., Zhu, M., Feng, Y., Cai, D., Hu, Y., Wu, S., Wu, X., Chen, W., 2021.
based suggestive exploration: a new approach for effective exploration of Visualizing large-scale high-dimensional data via hierarchical embedding of
large networks. IEEE Trans. Vis. Comput. Graphics 25 (1), 555–565. KNN graphs. Vis. Inf. 5 (2), 51–59.
Cui, W., Qu, H., 2007. A survey on graph visualization. Clear Water Bay, Kowloon,
Hong Kong 145.

5 https://github.com/antvis/g6/

55