G2 is a highly interactive data-driven visualization grammar for statistical charts.

After half a year of large-scale underlying refactoring and iterations, G2 4.0 is finally released. As the second major version release since the official open source release on November 22, 2017, this release still adheres to the original intention of creating a data-driven grammar of graphics. Moreover, it adds grammar of interactions based on grammar of graphics. It has been comprehensively enhanced in all aspects including features, experience, ease of use, and flexibility.

Brand New 4.0

Strictly speaking, this is not a refactoring, but a large-scale rewrite. We built a new G2 from the bottom up, from code to documentation.

TypeScript

We rewritten G2 and all its related modules using TypeScript and provided a complete type definition file.

Switchable Upgraded Graphics Engine

AntV/G is an easy-to-use, efficient and powerful 2D visual rendering engine. It provides implementations of various rendering methods such as Canvas, SVG.

With the release of AntV’s underlying rendering engine G 4.0, G2 4.0 has brought many benefits such as multiple rendering modes (Canvas, SVG) support, partial redraw, and enhanced animation experience.

New Mechanism of Update

In previous versions, the process of data initialization and data update is essentially the same. The only difference is that the latter needs to clean up the previous graphics. Therefore, the graphic elements are totally re-created after the data is updated. That severely limits the consistent experience of interaction and animation.

So we introduced an new mechanism of data updating in 4.0, including:

Data updates of Geometry, for which we introduced the concept of Element. Updates of visual components.

Example 1: After the data update of the chart, the graphic elements are not destroyed. We can still operate on the Element instances fetched before the update.

Example 2: The update mechanism refines the data processing pipeline and provides the basis of better animation. In the following racing bar chart, different chart elements, including the text of Axis, text of Label, Geometry, can have customized animation during the phase of data update.

Visualization System Upgrade

Based on the requirements of each product under AntV: G2, F2, G6, L7, we redesigned the chart components to make the visualization system more powerful, flexible and interactive. While compatible with G2 3.x, features such as animation, constraint layout and interaction have been added.

View Module

View is a container that has independent data sources and can draw multiple graphs. In G2 4.0, the responsibilities of Chart and View have changed: View is G2’s canvas container, responsible for the management of sub-views, geometric markers, and visual components, while Chart is an exposed convenient entry point that inherits View. In 4.0, users can use View to develop customized multi-dimensional data analysis graphics according to the needs of their business.

We also support View nesting and component automatic layout. Automatic layout covers various scenarios: data update, chart size change, coordinate system transformation, and chart component position update, etc.

Grammar of Interactions

Starting with G2 4.0, we refactored the implementation of events from the underlying G 4.0. The visual component layer unified interface and event mechanism. We split Element from Geometry to accommodate the new interaction mechanism. When all this is in place, a new chapter in Grammar of Interactions finally opens.

We divide an interactive behavior into individual steps. Each step consists of a trigger and an action. By assembling triggers and actions, we can build a variety of interaction behaviors, and these behaviors can also be superimposed.

Take the hover and highlight as an example. It has two interaction steps:

Step 1: mouse enter graphic element, highlighting graphic element.

Step 2: mouse leave graphic element, graphic element reset.

The triggers and actions for each step are as follows:

Then we can assemble using Grammar of Interactions:

Through this set of Grammar of Interactions, we have configured rich interactive behaviors for G2 assembly, which is convenient for users to get started quickly.