What is G6
AntV G6 is an open source engine for graph visualization and analysis, which focuses on relational data.
Welcome to star our GitHub: https://github.com/antvis/G6
Our website: https://g6.antv.vision/en/
With G6, you can use your unlimited imagination to create cool graph visualizations. Outstanding cases:
- Interactive Decision Tree;
- Christmas Words;
- Fire & Population Graph of Australia Cities;
- American Airlines with Edge Bundling;
- Animated Metro Map.
What did G6 do in 2020
G6 4.0, in addition to the continued enhancement of functions and the continuous polishing of detailed experience, it also provides a graph visualization design system, intelligent layout prediction, and a visual analysis solution for large scale graph data.
Graph Vis Design System
Visit「Here」for Detail
A graph visual analysis application with a good experience must be carefully designed. From the framework of a product or an application, to the user's interacting process, interface layout, and to the visual presentation of the graph, every detail needs to be carefully considered and designed. Based on a large number of business practices in different scenarios, the AntV design team meticulously summarized design guidelines suitable for the field of graph visualization. This guide organizes the content with the classic ETCG design framework, systematically introduces graph visualization design, best practices and thinking behind it. Hope to bring more in-depth thinking to the majority of graph visualization designers.
From the perspective of graph analysis, an application usually goes through the following stages in order to transform the data source into valuable information for users.
Quoted from "Graph Analysis and Visualization"
Have explored the characteristics of the analysis scene according to the graph applications, we divide the analysis mode of the graph analysis product or application into three types: with clear purpose, no clear purpose, and special scenario. The interfaces for different analysis modes will not be the same. As well as the user's using process. It is true that for a full-featured graph analysis product three analysis modes may be available at the same time, resulting in an exponential increase in interface complexity.
In terms of visual style, we provide two themes: default (light) and dark, to meet different scenarios.
AI Layout Prediction
For more info about the prediction engine @antv/vis-predict-engine , please visit「 G6 AI Layout Prediction Docs」.
In most graph visual analysis applications, data is obtained from dynamic queries. For developers, it is a big challenge to choose a proper layout for the dataset without known features. Some applications leave the layout configuration problem to the end user, that is to say, allow the end users to choose the layout and adjust the parameters by themself. But it is obviously inefficient, and more difficult for end users without prior knowledge to choose a reasonable layout. For these cases, intelligent layout prediction helps. As shown below, on a medical and health dataset, the intelligent layout prediction engine shows that the "Force" layout is the best. And the comparison experiments also meets expectations.
GPU Parallel Computing for Layout
「Demo」
As the scale of data increases, algorithm computing has become a major bottleneck for front-end applications, where the layouts are frequently used algorithms. A long calculation process may cause page blockage or a long time blank screen if the layout on large graph is calculated by the front-end. G6 4.0 launched GPU accelerated graph layouts, which enhance the performance of layout computing by tens or even hundreds of times. The following table shows the two GPU-supported layouts currently implemented in G6:
- GForce: implements the classic force-oriented layout, supports nodes' masses and central forces, etc.「Demo」;
- Fruchterman: another force-directed layout, which is more compact than GForce layout.「Demo」. As shown in the table below, on small-scale datasets, the GPU layout has no advantage, and may even be inferior to the CPU layout. However, it is very significant on the acceleration effect is very significant on medium or large-scale datasets.
Visual Analysis of Large Scale Data
When a query returns a large scale data such as one hundred thousand or one million, developers will face two problems: how to render the massive data and how to obtain insights from it.
Canvas rendering has a certain limit on the number of primitives. The maximum number of primitives that G6 can render currently is about 60,000-70,000. If smooth interaction is required, it is recommended to control the number of primitives below 30,000. For large scale data, AntV Graph Visualization Team provides a set of large graph visualization solution that can process large-scale graph data through rendering optimization, interface conventions, data aggregation, and node clustering.
In order to gain insights from large scale data, the first important thing is visual clutter reducton, and ensure the effective transmission of visual information meanwhile; secondly, providing a good layout (with GPU acceleration) also helps a lot. In addition, cooperating with the visual analysis components, user could do more in-depth exploration and analysis.
Interactive Document
「Link」
With the continuous improvement of G6 functions, the number of G6 documents is also increasing. It is too difficult for users who are not familiar with G6 to find what they need in the vast docs. In order to help the users get familiar with G6 quickly, the interactive document GraphMaker came into being.
Easy-to-use Analysis Components
In graph visual analysis applications, the queried data's scale might be very large. Even after node aggregation, edge aggregation, and node grouping, which may lead to a messy "hair ball", making the graph unreadable, incomprehensible, and non-interactive. The original intention of visualization is lost: to deliver information to users intuitively and efficiently. In this case, analysis components such as Fisheye Lens and Edge Filter Lens can be useful.
Fisheye
「Demo」
Fisheye is a plug-in designed for the exploration with Focus + Context, which ensures that the context and the relationship between the context and the focus area are not lost while magnifying the area of interest compares to pan. Now, G6 makes Fisheye even better! We have added more configurations to Fisheye, allowing end users to dynamically change Fisheye's coverage and magnification during the process of using Fisheye, truly allowing users to explore whatever they want.
Edge Filter Lens
「Demo」
When there are a large number of edges in the graph, the edge overlappings and crossings make it extremely difficult for users to observe. To alleviate such problems, G6 provides edge filter plug-ins. Through a simple configuration, the edges that the user pays attention to can be filtered locally from the complex tangled edges.
TimeBar
「Demo」
The main purpose of graph visual analysis applications is to assist users in exploring, analyzing, and discovering potential graph features. In order to make some patterns sufficiently convincing, it is necessary for a the visualization applications that have the ability to retrospectively explore the discovering process, which means allows any user to reproduce the patterns in accordance with a specific process. The backtracking of graph patterns is a kind of time series analysis of graphs, where the time axis (TimeBar) is a very important component. To facilitate developers to quickly build graph time series analysis applications, G6 provides the TimeBar component.
There are three types of TimeBar in G6:
- TimeBar with Chart Background;
- Simple TimeBar;
- Scale TimeBar.
All the three TimeBars above support basic functions such as range/single time point play and playback, fast forward, rewind, and speed adjustment. Among the three timebars, the trend chart TimeBar and the simple TimeBar support switching between single time point and a range of time.
TimeBar with Chart Background
In addition to the basic functions of TimeBar selection, playback, fast forward, and rewind, the background of the TimeBar can be configured with a bar chart, line chart, and area chart to indicate the trend of data changes.
In more complex scenarios, mixed charts in the background is considerable. G6's TimeBar with mixed charts background is coming soon.
Simple TimeBar
In the case of limited screen space, you can choose the simple version of the TimeBar component:
Scale TimeBar
The Scale TimeBar is designed for discrete time points. Each small square on the Scale TimeBar represents a time point. Users could click to select a specific point, or drag to select a range.
Node Combo and BubbleSet
In the process of exploratory analysis of graph visual analysis applications, for a group of nodes that are found to be suspicious and worthy of attention, they are often grouped together for subsequent analysis. For example, closely connected groups in a capital trading network are likely to be suspected of crimes. The node Combo in G6 can be used to meet these demand. Combo manages a group of nodes of the same cluster, allowing users to analyze from a higher dimension. And with user interactions, the node distribution and the hierarchy structure of combos can be adjusted in real time. Creating and dissolving Combos are also available. That is a good way to assist data analysts to divide and classify suspicious node clusters.
In graph visual analysis applications, when users need to quickly mark groups and communities, they can use the BubbleSet provided by G6. Sometimes, the nodes of the same group may be distributed in different areas on the screen. In this case, BubbleSet could automatically "bypass" other nodes for precise marking.
Combo and BubbleSet are similar to a certain extent. The main difference is that the purpose of the BubbleSet is node marking, which does not change the actual hierarchy of data structure. But the Combo and nodes are some kind similar to a file system where the Combos are dictionary and the nodes are the fils. So the Combo could has multi-layer nesting structure which is not supported by the BubbleSet.
Graph Algorithms
「Shortest Path Demo」
「LP Clustering Demo」
「LOUVAIN Clustering Demo」
「Color Palette Demo」
The basic operations of a graph visual analysis application include visualization settings, layout switching, and data filtering. What can really bring insights to users is a variety of analysis algorithms. In actual business scenarios, algorithms provide users with powerful data insight abilities.
- Traversal algorithm: Depth-first traversal calculates all attack links from hacker nodes to user asset nodes;
- Loop detection: Help the users to find loops from a large number of nodes. This structure is often very worthy of attention in graph analysis scenarios, and its existence may mean the existence of risks;
- The shortest path: Help the user to find the path between two nodes. For example, in a supply chain graph or a trading graph, the path between risk nodes or blacklisted users can be explored, and in-depth analysis can be conducted to find the source of risk and avoid risks in time;
- Automatic clustering/community discovery: In the domain detection scenario, a node represent a domain name. And the edges indicate the relationships between the domain names. The relevance of the domain names is used as the weight of the edge. The LOUVAIN algorithm can be used to classify the DGA family.
In G6, we have supported algorithms such as depth-first DFS, breadth-first BFS, loop detection, shortest path, obtaining node degree, minimum spanning tree, automatic clustering/community discovery, etc. In the future, we will continue to enrich the graph algorithms in G6.
Performance for Real-time Interaction
「Demo」
With the upgrade and blessing of the underlying rendering engine, the rendering performance of G6 has been greatly improved:
- Automatically crop the external graphics of the viewport to improve the global rendering performance;
- In the normal mode, the efficiency of primitive picking (for example, hovering a node and highlighting it, clicking a node, etc.) is increased by 2 to 3 times;
- In the quickHit mode, text does not participate in the picking. For large-scale graphs, the efficiency of picking is improved even more. We have also made many optimizations to improve the performance of interaction:
- The focused text size, stroke thickness, and node size of the selected element can be fixed when the canvas is zoomed;
- Hiding non-key graphic shapes during canvas dragging and canvas zooming to make the interaction more smooth.
Polishing Detailed Experience
「Statistical Chart Node Demo」
「Custom Node with JSX-like Syntax Demo」
「Parallel Edges Demo」
「Multiple Selecting Modes Demo」
「Built-in Arrow Demo」
As a graph visualization and rendering engine, its completeness of functions and development experience are crucial to developers. Whether the types of nodes are rich enough, whether the definition of nodes is easy to use, whether the parallel edges can be displayed elegantly, whether a batch of nodes can be easily selected, etc. Fortunately, all these G6 have built-in support.
Compared to other graph visualization libraries, G6 has very rich nodes. In addition to basic built-in nodes such as circle and rectangle, G6 also supports custom nodes. What's more, G6 support custom a node with any the statistical chart of AnV G2.
As one of the important parts of the graph, the node has always been the most important element in G6. From G6 1.0 to G6 3.x, custom nodes need to be defined based on the underlying Canvas API, which requires developers to have a certain Canvas technical prior knowledge. In order to reduce the difficulty of custom nodes, G6 brings a mechanism to define nodes by JSX-like syntax. Users can customize nodes by codes similar to HTML tags. As long as they can write HTML, they can customize nodes. The basic syntax is as follows:
<[group|shape] [key]="value" style={{ [key]: value }}>
<[more tag] /> ...
<text>value</text>
</[group|shape]>
If you are troubled with visualizing the parallel between two nodes, please try G6.Util.processParallelEdges, which generates elegant parallel edge control points automatically. It supports two interactive methods: clicking on two endpoints, dragging from one endpoint to another endpoint. And it also supports triggering the interaction with keyboard assist keys.
G6 is committed to bringing a friendly development experience for developers and the most convenient interactive experience for end users. Even if it is a simple selection operation, G6 has worked hard to polish it into three modes: click 「Demo」, box select「Demo」, and drag the lasso to select 「Demo」.
Regarding the edge arrows of all styles, we have built them in for you:
Conclusion
G6 4.0 Indicates that we have decided to go depth into the field of graph visual analysis, and we will focus on the visualization of large graphs, graph intelligence and time-series graph analysis. G6 has attracted a group of contributors who truly love and believe in the broad prospects of the field of graph visualization. We eagerly hope that more friends to participate.
Acknowledgements
Thanks to all the friends who have been supporting, using, and following G6. At the same time, thanks to all the developers and contributors of G6 (in no particular order):
- Designers: #Wanbai, #Erling, #Buguo, #Liuyi, #Yuanzi, #Gele;
- Internal contributors: #Jingxi, #Qianzhu, #Fodu, #Xuanyu, #Yifeng, #Qianchen, #Kangkui, #Shanguo, #Yuran, #Shiwu, #Juze;
- External contributors: all friends who have created PR or Issues to G6. External contributors on GitHub in the past six months: ttys026，Volankey，zuiidea，xrkffgg，rainrcn，r3tard3dd，phoenix110，liuwei1025，liuhuidi，konstantinjdobler，jiaoguanwen，crystalwm，claudewowo，ZXHHHH123，Yohox，NirvanaChow。
AntV G6 is an open source engine for graph visualization and analysis, which focuses on relational data.
Welcome to star our GitHub: https://github.com/antvis/G6
Our website: https://g6.antv.vision/en/
Top comments (0)