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.

thanks

S2 Historical giants: Xiao Wei, Light sound, Guang Zhi, Juyun, Qi Tao, Oh Huo, MAO Song, bending, Yi Tian, Heguang, Curtain railing, Wan Bai, Gu Ping, Miao Yao

S2 Internal test mice: Yu Xi, Gu Ji, Long Zhu, Bu Ming

\

S2 Team

Products: Bilou, Berling, Yuan Yuan, Fang Xue, Jie Xi

Design: White string, clear awn

R & D: Tassel, Qingmo, Qingke, Tribulus, Supo, Zisang, Guangsheng, Yade, Hongyue

* In no particular order

The appendix

Details of AntV 2021 Brand Day launch

  • Gewu · Gewu – AntV released in 2021
  • F series: See the small, set sail
  • Bending to talk to you about AntV
  • Technical articles
    • S2 1.0: This table is “not easy”
    • F6 1.0: Small screen play map visualization
    • XFlow 1.0: Professional graph editing application solution
    • G2 stack: Deep study, statistical charts
    • G6 stack: New understanding of the grid
    • L7 stack: One-stop geographic analysis application solution
    • F2 4.0: Future-oriented, new upgrade
    • G 5.0: Professional because of focus
    • X6: Deep grinding, improving
    • Ant Design Charts: AntV’s React Charts library
    • AVA 2.0: Insights, a new beginning
  • The design feature
    • 2021 AntV Design
  • To learning
    • Visualization 101: Developing a Chart library from 0 to 1

\

AntV open source project link

Welcome to our GitHub project, light up star to learn about our real-time trends, looking forward to PR:

  • AntV official website: ANTv.vision /
  • G2:github.com/antvis/g2

    G2 is a set of graphics syntax based on visual coding, which is data-driven and highly easy to use and expandable. Users do not need to pay attention to all kinds of tedious implementation details, and can build a variety of interactive statistical charts with one statement.
  • G2Plot: Github.com/antvis/g2pl…

    G2Plot is positioned as an out-of-the-box, easy-to-configure, universal charting library with a good visual and interactive experience.
  • S2:github.com/antvis/s2

    S2 is a table solution in the field of multi-dimensional cross analysis. Data-driven view provides the underlying core library, basic component library and business scene library. It has the ability of free expansion, allowing developers to play freely not only out of the box but also based on their own scenes.
  • F2:github.com/antvis/f2F2 4.0 new official websitef2-next.antv.vision)

    F2 is a mobile focused, out-of-the-box visual solution that perfectly supports an H5 environment and is compatible with multiple environments (Node, applets, WEEX). Complete graph syntax theory, to meet all kinds of visualization needs. Professional mobile design guide to bring you the best mobile graphics experience.
  • F6：github.com/antvis/f6

F6 is a simple, easy to use, complete mobile graphics visualization engine. It provides a series of elegant design and easy to use graphics visualization solutions based on high customization capability. It can help developers build their own graph visualization, graph analysis, or graph editor applications.

  • F2Native:Github.com/antvis/F2Na…

    F 2Native is an out-of-the-box, high-performance visualization solution that focuses on the client side. Complete graphics syntax theory meets your various needs. Professional mobile design guidelines bring you the best mobile graphics experience.
  • G6:github.com/antvis/g6

    G6 is AntV’s image visualization and Figure analysis engine . G comes from Graphic and Graph, which means we need to make Graph visualization based on Graph analysis technology. 6 from the book Six degrees of separation “Expresses our awe and fascination with relational data and relational networks.
  • Graphin: Github.com/antvis/grap…

    Graphin is a G6-based package Relational visual analysis tool **, simple, efficient, out of the box, From Graph Insight, the analytical Insight of the Graph.
  • X6:github.com/antvis/X6

    X6 is AntV’s graph editing engine, which provides a series of out of the box interactive components and easy-to-use node customization capabilities, so that we can quickly build DAG, ER, flow chart and other applications.
  • XFlow:Github.com/antvis/XFlo…

    X6 is a professional graph editing application-level solution based on the X6 graph editing engine for React stack users, helping you to easily develop complex graph editing applications. At present, it has been deeply polished and verified in ant big data/artificial intelligence scenarios.
  • L7:github.com/antvis/l7

    L7 is open source based on WebGL Development framework for visual analysis of large-scale geospatial data. L in L7 stands for Location, and 7 stands for the seven continents of the world, implying the ability to provide visual analysis for global Location data.
  • L7Plot:Github.com/antvis/l7pl…

    L7Plot is an easy-to-use, graph-rich, customizable visualization of geospatial data based on THE L7 package.
  • G:github.com/antvis/gG 5.0 new official websiteg-next.antv.vision)

    G is the underlying 2D rendering engine common to several AntV products. It is efficient and easy to use, focusing on graphics rendering, pickup, events and animation mechanisms, and providing a unified rendering mechanism for G2, F2 and G6.
  • Ant Design Charts: Github.com/ant-design/…

Ant Design Charts is a chart class library of React version that integrates all AntV stacks, including statistical Charts, relational Charts and geographic visualization Charts.

  • AVA:github.com/antvis/AVA

    AVA is an intelligent visualization framework for easier visual analysis.
  • ChartCube:chartcube.alipay.com

    ChartCube is a quick online tool for creating high quality charts in just three steps.