takeaway

Table is one of the charts widely used in daily life and work. When it comes to its origin, it probably starts from the knots and barter transactions. In order to facilitate the calculation of transactions, people began to draw on the floor with a small stick, and gradually began to have the earliest form of statistical tables.

Figure 1: A knot chronicle

Records from a data statistics forms to the two dimensions (two variables), until the multidimensional variables (multiple) form, bearing the weight of the thinking of user multidimensional world gradually, they provide a basic frame of the relationship between multiple variables, to help people find the interaction between large data, and then to cross to explore in-depth analysis, The result is one of the most frequently used charts in business BI analytics today, the “Multidimensional Cross Analysis Table.”

Figure 2: Table dimension space mapping

There are a lot of open source tables on the market, most of which are presentation tables based on one-dimensional data, but there are very few easy-to-use and out-of-the-box multi-dimensional analysis tables. To implement a complex perspective table like the one below, not only requires a lot of code logic to customize the development, but also it is difficult to solve the performance bottleneck problem under the large amount of data.

Figure 3: KPI trend Table -Powered by S2

What is the S2

S2 is the data table visualization engine launched by AntV team, which aims to provide high performance, easy to expand, beautiful and easy to use multidimensional tables. Not only has the rich analysis table form, but also built-in rich interaction ability, to help users better look at the number and make decisions.

S is taken from the two S’s in the SpreadSheet, and 2 also represents the row and column dimensions in the PivotTable.

Figure 4: Table body structure

What can S2 do

Multidimensional table users are generally data analysts or operators, and the data type is mass point data. Multidimensional data analysis scenarios are as follows: first, through data details, the cause of abnormal movement is targeted; The second is aimless exploration of new insights and opportunities.

For example, 🌰, when the Internet operation is doing crowd operation, it is necessary to find the priority group in the early stage, that is, to subdivide the crowd and check the basic portrait. The ranks and columns were placed in the dimensions of population age, city, position and so on, and the data cells dyed the population size by color to facilitate the scale comparison under the cross of different dimensions.

Figure 5: Single population proportion table

And such a table, often will solve multiple scene appeals.

  • Scenario 1: Quickly find the crowd with a large proportion through dark heat, and view the user portraits of the large crowd through the row dimension
  • Scenario 2: Find the target group through cross analysis of different dimensions of the attributes of the ranks and crowds, check the portraits (what they look like and what they like), and carry out targeted operation and delivery strategies.

Figure 6: Analytical thinking

Based on target users and scenes, the design principle of S2 multidimensional table with high screen efficiency is determined, and a multidimensional table design system is built around user Behavior and Scene.

  • Effectiveness: Components are not exhaustive, but are designed based on user best practices of data Lookup > Data Analysis > Policy Recommendations
  • High density: Tables are often used to solve the demands of multiple scenarios and display massive data details, so they tend to appear in the form of high density
  • Low jump: The pursuit of “zero” interaction design, continuous layer of analysis ideas, to ensure the silky immersive experience of number analysis

Figure 7: Table design system

Table form

In terms of table form, S2 currently provides two basic table forms, detailed table and perspective table, which simultaneously meets the demands of detailed data viewing and multidimensional cross analysis.

In addition, S2 can change simple configuration items to enable the PivotTable to switch freely between tiled mode, tree mode, index in row head, index in column head, and list.

Figure 10: Table mode switch

Table interaction

In order to improve the experience of reading numbers, S2 has rich built-in interactive capabilities

Figure 11: Hover interaction

Figure 12: Click interaction

Figure 13: Circled interaction

Figure 14: Layout interaction

In addition, there are business custom interactions and “custom interactions” capabilities such as “cell merge”, “link jump”, “column header hide”, etc. See Table Interactions for details.

Table analysis

The field tag

Graphical syntax is commonly known in specialized data products as “field tagging”, marking the data that requires the user’s attention through different channels, whereas the data type in a table is usually a single point of data, with a number placed on each grid.

Figure 15: Mapping diagram of tables and charts

S2 provides “field marking” capability, which can add text, icon, bar chart and background color bar to your data table, making your data insight easy and straightforward.

Figure 16: Field markers

Analysis of the component

S2Developed a professional, generic analytical methodology and packaged it out of the box through internal business practicesreactAnalyze components. For example: table header component, export component, dimension drill down, row dimension switch, advanced sorting, etc., let table analysis play more tricks. (See more examplesForm components)

Table topics

There are many thematic customization requirements in real business scenarios. S2 has built-in default, colorful blue, simple gray three sets of default theme packages to choose from.

Users can also quickly register custom theme packages by custom palette or custom theme schema. See table topics for more information.

Performance of S2

S2Choose theCanvasAs a rendering carrier, it not only ensures interactive richness and cross-platform compatibility, but also provides a good performance foundation for big data viewing scenarios. At the same time, through on-demand rendering, virtual scrolling and other methods, to ensure the smooth experience of second-level rendering and scrolling under millions of data volume. Under limit test100wThe data can also render normally.

For details about performance decryption, see Performance Introduction.

S2 Service Application

In Ant Group and Ali Group, multidimensional table is one of the most frequently used charts in the field of business BI analysis. They provide a basic picture of the interrelationships between a single, two, or multiple variables that can help businesses cross-explore and analyze.

According to different analysis purposes, there are roughly the following tables of common scenarios:

  • Trend tables: Used to view progress data monitoring and analysis of core metrics over time, such as progress monitoring of team KPIs.
  • Proportion table: used to compare the comparison of different objects in the same dimension, such as analyzing the size proportion distribution of people under different age and position attributes, and finding the influencing factors and specific reasons of large or small crowd size.
  • Comparison table: used to compare different user groups or activities and other objects in the same dimension of the comparison and analysis of the scene, such as the comparison of people of different ages and positions; Price comparison of products under the same category on different platforms.

Figure 25: Scenario table classification

In the real business, how to meet the diverse demands of business without restriction? The built-in custom Hook of S2 provides enough space for developers to customize various business scenario tables at their will. For more information, see scenario examples.

Figure 26: Ant internal business table scenario

Publish content

  • Liverpoolfc.tv: s2. Antv. Vision /
  • Core layer: @ANTV /s2 V1.0.0
  • Component layer: @antv/s2-react V1.0.0

Afterword.

Thank you very much for your patience in reading. Like other AntV projects, S2 is not a KPI project that comes out of a sudden idea for three days and two nights. It is the result of continuous iteration and repeated polishing of DeepInsight, the most important BI product in Ant Group, for nearly three years. You are welcome to give us feedback on GitHub, and you are also welcome to contribute to make table analysis more professional and systematic.