DEV Community: Yanyan Wang

G6 4.0: More Progress for Easier Graph Visual Analysis

Yanyan Wang — Thu, 03 Dec 2020 06:20:00 +0000

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:

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

「A Simplified Demo」

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

「Node Combo Demo」
「BubbleSet Demo」

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/

G6 3.8 is Released

Yanyan Wang — Sun, 27 Sep 2020 03:38:53 +0000

The monthly release of AntV G6 comes as scheduled. Today, we released version 3.8.0. What's new? 「G6 Interactive Document GraphMaker」 and 「Playable TimeBar」 are definitely the biggest highlights. There are also 「edge filter lens」, 「configurable FishEye」, 「more powerful JSX routine definition scheme」, 「performance optimization」 and 「complete functions」.

Interactive Document GraphMaker

Just want to know how to use it, but don't want to read the documentation? With so many configuration items, can't find which one you want? The user's pain point is our pain point, and the user's trouble is our trouble. This time, we launched GraphMaker, an interactive document, which allows you to know how to configure without looking at the document.

If there is a slight movement, click GraphMarker to experience it.

Edge Filter Lens: Make Exploration more Focused

Please click here to experience.

When there are a large number of edges in the graph, the mutual occlusion and crossover between the edges makes it extremely difficult for us to see some of the attention edges clearly. To solve this problem, G6 provides edge filter lens plug-in. The usage of the edge filter plug-in is as simple as always, just configure the filter function or built-in filter options when instantiating.

const filterLens = new G6.EdgeFilterLens({
  // The way to move the lens
  trigger: 'drag',
  // Whether to show the label inside the lens
  showLabel: 'edge',
  // The filter option. 'one': only show the edges with one end node inside the lens;
  // 'both': show the edges with two end nodes inside the lens;
  // 'only-source': only show the edges with source node inside the lens;
  // 'only-target': only show the edges with target node inside the lens.
  type?: 'both';
  // Custom the filter function: e.g. only show the edges with 'size' larger than 3
  shouldShow: d => {
    if (d.size > 3) return true;
    return false;
  },
});

Various TimeBars that can be Played

Please click here to experience.

The TimeBar component is a preview version, and configuration items and APIs may change. If you use it in a production environment, please consider carefully, we will provide a stable version in the next version.
We provide three forms of TimeBar plug-ins:
• Trend Chart TimeBar
• Simple TimeBar
• Tick TimeBar
All of them support range/single time point playback, fast forward, rewind, speed adjustment and other functions. Among them, the trend chart time axis and the simple version time axis support single time and time range switching.

Trend Chart TimeBar

Is a single line chart or area chart difficult to meet the demand? You can consider using a mixed chart. We currently support histograms, line charts, and area charts. We don’t support multi-line charts.

Simple TimeBar

If you think the trend chart time axis is too complicated, you can choose the simple version of the time axis component.

Tick TimeBar

The scale type time axis is designed to display discrete time data. Each small square on the scale time axis represents a scale value. Click to select a specific scale; drag on the time axis to select the scale range.

FishEye Configuration is more Free

Please click here to experience.

In the last version of G6, we launched FishEye, a plug-in designed for the exploration of focus + context, which can ensure that while zooming in on the area of interest, the context and the relationship between the context and the focus area are not lost.
This time, we made FishEye even better! We have added more configurations to FishEye, allowing users to dynamically change FishEye's coverage and magnification while using FishEye. Users are able to explore whatever they want.

More Powerful Node Definition Scheme

Please click here to experience, and the document is stamped here.

In the last version of G6, in order to reduce the cost of getting started with user-defined nodes, we provided a JSX-like syntax to define nodes. At the same time of convenience, a lot of restrictions are added, and flexibility is greatly reduced.

We collected users’ opinions and made some upgrades. While reducing the cost of getting started, it also maintains a certain degree of flexibility and scalability. Now, the JSX-like pre-release custom node supports the following configurations:

• Update Support the definition of afterDraw, setState and other methods;
• The next attribute is added to style. When the value is 'inline', the next element will automatically be laid out to the right of the previous element.

G6.registerNode('jsx-node', {
    jsx: cfg => `<group>
        <rect style={{
      marginLeft: 10,
      marginTop: 3,
      width: ${cfg.width},
      height: ${cfg.height},
      fill: '#fff',
      stroke: '#1890ff'
    }} name="body" >
      <rect style={{
        marginLeft: 10,
        width: ${cfg.width / 100 * cfg.used},
        height: ${cfg.height},
        fill: '#1890ff',
        stroke: '#1890ff'
      }}/>
    </rect>
  </group>`,
  setState(name: string, value: string | boolean, item: Item) {},
  afterDraw(cfg: NodeConfig) {}
})

Performance & Function Optimization

The performance problem of interaction with large amount of data has always plagued the users of G6. Following the previous version that supports hiding non-critical graphics during canvas dragging, in this version, we have added automatic hiding of non-critical graphics during zooming. This small optimization can greatly improve the performance of zooming the canvas and the user's interactive experience.

In addition, when there are a large number of Combo in the graph, certain performance problems will also occur. Now, we have also optimized the performance of Combo.

On the basis of adding new features and optimizing performance, polishing existing features and fixing bugs are never stopped. From 3.7.0 to 3.8.0, we have optimized the polyline algorithm, fixing usability problems and functional defects in total 20+. For more detailed content, please refer to G6 ChangeLog.

Conclusion

In G6 3.8.0, we have made enhancements and optimizations in three aspects: ease of use, analysis capabilities, and performance.

In order to allow users to learn and get started faster and better, we released the G6 interactive document GraphMaker; in order to make it easier to explore complex relational data, we added the side filter plug-in, and we enhanced the existing FishEye plug-in; To explore the cornerstone of time series data, we provide three different types of timelines; in order to define nodes at low cost while maintaining flexibility and scalability, we optimized the solution of using JSX to define nodes...

G6 keeps moving on the field of graph visualization and graph analysis. We need your support and feedback very much, and thank you for your attention.

AntV G6 is an open source graph visualization engine, focusing on graph visualization and graph analysis.
Welcome to follow and star our GitHub: https://github.com/antvis/G6
Official website: https://g6.antv.vision/en/

Graph Vis: G6 3.4 is released!

Yanyan Wang — Wed, 11 Mar 2020 08:25:58 +0000

What is G6

AntV G6 is an open source engine for graph visualization and analysis, which focuses on relational data.
Our website: https://g6.antv.vision/en/
Welcome to star our GitHub: https://github.com/antvis/G6

With G6, you can create fantastic graph visualizations with your infinity imagination!

Checkout some excellent cases powered by G6:

Last month, we just published G6 3.3. To address some problems reported by users for a long time, we try our best to develop and iterate with light speed. Now, G6 3.4 is done and published! Don't be afraid, it is totally compatible with v3.3. We believe that there will be no best, but better G6.

SVG is Coming back!

To enhance the performance, the rendering engine for G6 3.3 has been fully upgraded. But v3.3 only supports Canvas rendering. Now, G6 3.4 fully supports SVG rendering. The interactions, animations, and layouts perform well with SVG too. When customizing a node or an edge type, not only the basic shapes as circle, rect, path, etc. are available, but also DOM shape! Let's have a glance at it now!

// Custom a node with DOM
G6.registerNode('dom-node', {
  draw: (cfg, group) => {
    return group.addShape('dom', {
      attrs: {
        width: cfg.size[0],
        height: cfg.size[1],
        html:
          `<div style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
            <div style="height: 100%; width: 33%; background-color: #CDDDFD">
              <img alt="image" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />  
            </div>
            <span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span>
          </div>`
      }
    });
  }
}, 'single-node');

New Chapter for State Mechanism

In G6, state for node/edge builds the relationships between「interactions / data changes」and「styles of node/edge」quickly.

e.g.: the 'hover' state of a node is activated when the mouse enters the node, and the style of the node is changed to response the interaction; 'hover' state is inactivated when the mouse leave the node, and the style of the node is resumed.

In the past

In actual scene, the states are complicate rather than simple 'hover' or 'select'. When you have lots of states, you might need to write the code with previous versions as below👇:

By default, states are only related to the styles of the keyShape of a node or an edge. However, some other sub shapes of node or edge need to be updated in some cases. So you need to write the code with previous version as👇:

Besides, the previous versions of G6 do not support a state with multiple values, and mutually exclusive states. E.g.: A node represents a person. He/she has four values for state 'bodyState': 'healthy', 'suspect', 'ill', and 'dead'. The four states are independent to each other and a person can not have two or more of them in the same time. In previous versions, G6 only supports binary states, which will lead to the situation that all the four states exist on a person in the same time with the following operations:

Let's Move on!

G6 3.4 helps you to resolve the problems above. With G6 3.4, you can:

Configure the target state quickly: Assign a new state and clear all the existing states on a node;
State with multiple values: e.g. the 'bodyState' of a node representing a person has four values 'healthy', 'suspect', 'ill', and 'dead';
Mutually exclusive state: e.g. 'healthy', 'suspect', 'ill', and 'dead' for 'bodyState' are mutually exclusive to each other, any two of them will not exist on a person in the same time;
Update the styles for all the sub shapes on a node or an edge: e.g. a node consist of a rect, a text and an icon image. When the state of the node is changed, styles of all the shapes can be changed to response it;
Modify the state configurations: modify the style configurations for a state easily.

More detail about the new state mechanism can be found in: Take use of G6 state mechanism.

Preview

In this May, new node group mechanism with powerful ability will be available in G6 3.5!

Star the GitHub of G6, you will obtain an open source, free, and excellent graph visualization engine!

AntV G6 is an open source engine for graph visualization and analysis, which focuses on relational data.
Our website: https://g6.antv.vision/en/
Welcome to star our GitHub: https://github.com/antvis/G6

🎊New AntV Member

AntV will have a new member soon: a graph editing engine X6.

G6 3.3: Visualize a Graph with Excellent Performance!

Yanyan Wang — Tue, 18 Feb 2020 11:17:31 +0000

🌈G6 3.3 is released!

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/

A graph is a set of objects and their relationships, which usually has large amount of data. In most cases, a graph is visualized as a large number of elements, including nodes and edges. And each element may be composed of multiple shape items, such as the most commonly used nodes with text labels. The performance of graphs' rendering and interaction have always been one of the most difficult problems in relational data visualization. Especially in the case of visualizing large graph by front-end with limited computing resources. How to improve the performance has become a major problem for G6.

At the beginning of 2020, we have finally taken the first step towards this problem: G6 3.3 with excellent performance has been released. Let's explore the secret of it!

The Engine

The main contributor to the improvement of G6's performance is the the upgraded basic rendering engine. The user interactions usually focus on the local region or elements, e.g. updating the styles of a node, dragging a node. Frequent rendering leads to bad performance and worse interaction experiment. So, our basic rendering engine utilizes「Local Rendering」 instead of global rendering to improve the performance.

What is local rendering? As the figure shown, we wish to update the filling color of the star shape to be green in figure a:

Global rendering: re-render the whole canvas, which is in a rectangle with red border in figure b;
Local rendering: calculate the bounding box of the shape to be updated firstly, which is the rectangle with red border in figure c. And then, only re-render the region in the red rectangle..

Similarly, dragging a shape causes the frequent rendering too. As shown above, when user drag a star, the local rendering only re-render the star shape and the shape(s) covered by it.

We all know that the efficiency of the Canvas rendering in front-end is very low. The local rendering mechanism improves it greatly by reducing the area to be re-rendered. Especially for the case of frequently update the local area of a graph with large amount of shapes. But we should admit that the calculation of bounding boxes also takes some extra cost.

Exercises

After knowing the engine and theory, let's step into the practical exercises.

Exercise 1

The data Net-Science has 1589 nodes and 2742 edges, which describes the collaborative relationships between paper authors. A node represents an author. If two authors have collaborations, the two corresponding nodes will be connected by an edge.

Overview

We first use G6 to visualize this data. The result is shown below. The sizes of the nodes are mapped to their degree. It is easy to find that there are lots of discrete nodes, which might represent the 'geeks' who work alone. There are also some other interesting sub-strucutres, such as the node with high degree in green rectangle, which might be an author who has lots of collaborations with others. And some cliques like the one in the red rectangle, which is a group of fully connected nodes, means the authors in the clique have close working relationships.

Users wish to explore these local structures by interaction, such as dragging a node to observe the related connections, dragging a group to re-arrange the positions, tagging the name of the nodes to better show the details, etc.

Experiment

To better show the detail information of the nodes, labels are placed around each node. It is known that the texts consumes a lot, and a node's label might be very long. If each node on the graph has a label, there will be 1,589 * 2 + 2,742 = 4331 shape items in the graph.

Now, we test the performance of dragging a single node and a group of nodes in G6 with this data. The result is shown in the gif below. Since the amount of this data is not so big, we find that the experience of the interaction on the versions < G6 3.2 is acceptable. But with carefully observation, we can find the dragged node(s) do(es) not follow the mouse well, and the FPS stays with a low value. But with G6 3.3, the interactions are smooth with high value of FPS.

Exercise 2

Data Eva has 8,343 nodes and 6,726 edges, which describes the ownerships between some American companies. A node represents a company. If company A owns company B, an edge exists between them.

Overview

Same as Exercise 1, we map the degree of each node to its size. The result is shown below. Except for the discrete nodes around the graph, there are lots of nodes with high degrees, whose neighbor nodes are laid around them radially. Users wish to drag some nodes to re-arrange the positions to get better observation with the structures.

Experiment

In this experiment, each node has a label. There are 8,343 * 2 + 6,726 = 23,412 shape items in this graph. Now, we try to drag a group of nodes to new positions. In previous versions, the responding time is too long to drag the group successfully. After several tries, the group finally moves slowly to the position where the mouse ended. This is an extremely bad interaction experiment for users. In contrast, G6 3.3 performs smoothly.

We compare the responding speed of mouse hovering. The node style will be changed to response the mouse entering and restored when mouse leaving. We find that G6 3.3 has higher responding speed and higher FPS value:

Exercise 3

The data in this exercise simulates a large scale system calling tree with 440 nodes and 439 edge. There are rich informations on each node representing a module in the system. Node A and node B is connected by an edge if there is a calling relationship between them.

Overview

As shown in the figure below, to better visualize the rich informations on the nodes and edges, each node is composed with 9 basic shape items, and each edge is composed with 3 basic shape items. That means there are 440 * 9 + 439 * 3 = 5277 shape items in this graph. 42% of them are texts which cost a lot. Besides, the edges are drawn as bezier curves, whose computations are more complex than straight lines. What's more, the bounding boxes of bezier curves are much larger, that is to say, the area to be locally rendered is larger.

From the gif below we find that the graph takes a large space that hardly contains by one screen. Users have to explored it by interactions. When mouse goes into an edge or a node, its style will be changed to response the interaction. The sub-trees can be expanded or collapsed.

Experiment

Firstly, we compare the FPS when the mouse enters/leaves the edges and nodes.

Hovering the edges: In previous versions, the speed of responding is very slow. The edges even did not response the hovering when the moving speed is too fast. The FPS is about 5.5～8.6fps; In G6 3.3, the responding speed is improved by local rendering and improvement of shapes' pickup algorithms. The FPS is about 12.9～22.6 fps.
Hovering the nodes: In previous versions, the FPS is about 7.1～10.3 fps. And users can feel the stuck; In G6 3.3, the interaction is very smooth with FPS 23.4～32.5fps.

Secondly, we also compared the performance of expanding and collapsing the sub tree on the graph. In previous versions, the animation with 6.2～9.4fps of expanding/collapsing interaction looks stutter. In G6 3.3, the animation with 20.1~34.4fps is smoother.

We will do Better

Although the performance of G6 has been improved a lot, there is still a large space to be better. Such as reducing the unnecessary deep clone, optimizing the re-calculation for complex shapes, etc. We will keep moving to build up a better graph visualization engine.

About G6 3.3

Besides the improved performance, G6 3.3 also has these new features:

Be refactored in TypeScript；
Handle the situation that drag out of the canvas;
More free configurations for elements and layouts;
Richer building products.

G6 3.3 has made the first attempt to solve the performance problem, and it is more friendly for TS developers. See more detail here.

In the same time, it resolves the complex interaction situation. On the other hand, the community of G6 is expanding now. G6 will be more open and free to welcome more contributors.

DEV Community: Yanyan Wang

G6 4.0: More Progress for Easier Graph Visual Analysis

What is G6

What did G6 do in 2020

Graph Vis Design System

AI Layout Prediction

GPU Parallel Computing for Layout

Visual Analysis of Large Scale Data

Interactive Document

Easy-to-use Analysis Components

Fisheye

Edge Filter Lens

TimeBar

TimeBar with Chart Background

Simple TimeBar

Scale TimeBar

Node Combo and BubbleSet

Graph Algorithms

Performance for Real-time Interaction

Polishing Detailed Experience

Conclusion

Acknowledgements

G6 3.8 is Released

Interactive Document GraphMaker

Edge Filter Lens: Make Exploration more Focused

Various TimeBars that can be Played

Trend Chart TimeBar

Simple TimeBar

Tick TimeBar

FishEye Configuration is more Free

More Powerful Node Definition Scheme

Performance & Function Optimization

Conclusion

Graph Vis: G6 3.4 is released!

What is G6

SVG is Coming back!

New Chapter for State Mechanism

In the past

Let's Move on!

Preview

🎊New AntV Member

G6 3.3: Visualize a Graph with Excellent Performance!

The Engine

Exercises

Exercise 1

Overview

Experiment

Exercise 2

Overview

Experiment

Exercise 3

Overview

Experiment

We will do Better

About G6 3.3

Related Links