Visual framework design-preface

Data Visualization with G2

Table of Contents

• Purpose
• What is data visualization
• Stage of data visualization
• G2’s positioning and planning

Purpose

I have been engaged in data visualization for 2 or 3 years, and I have found that most people’s understanding of data visualization is to draw charts. Therefore, I want to write some articles about visualization framework design. These articles provide a complete set of design ideas and implementation details of the visualization framework. I hope that everyone can have a better understanding of visualization and better use visualization in business.

What is data visualization

Data visualization uses data and graphics technology to map information from data space to visual space. It is an interdisciplinary subject that spans the fields of computer graphics, data science, natural science and human-computer interaction.

The above domain model is too complex. We pay more attention to data and graphics in data visualization work, thus simplifying the domain model of data visualization:

• Data: Focus on solving data collection, cleaning, preprocessing, analysis, and mining.
• Graphics: Focus on receiving, extracting information, processing and transformation, pattern recognition, storage and display of optical Visual framework design-prefaces.
• Visualization: Focus on converting data into graphics and performing interactive processing

Current knowledge and areas of knowledge a data visualization worker needs to master:

Data visualization stage

Judging from the data visualization tools on the market, data visualization is divided into several stages:

• Data statistics charting
• Display of data results
• Visualization of data analysis process
• Visualization of virtual reality at VR/AR stage

Data statistics charting

At this stage, traditional statistical charts are used to display data. The representative works are highcharts, echarts and other chart libraries. The advantages of these frameworks are:

• The most mature visualization tool, the charts included are common charts, easy for users to understand and developers to use
• Low development cost and low requirements on graphics technology and data knowledge

The disadvantages are equally obvious:

• Complex configuration items, poor scalability, and single chart performance
• Narrow scope of application, poor support for tree and network structures; display of data dimensions and data volume are limited

Data result display tool

As the data business has higher and higher requirements for visualization, the scope of visualization is no longer limited to statistical charts. The business needs to display more dimensions of data and more diverse graphic display data. This requires the business side to customize charts according to their own needs. The tools at this stage mainly include frameworks such as d3.js and rapheal. These frameworks provide more detailed graphics tools and more graphics algorithms. The advantages of this type of framework are:

• Powerful functions, strong interactivity, and wide application range
• Integrate a large number of graphics algorithms and visualization algorithms to reduce the cost of complex charts
• Strong community and lots of examples

There are also some common problems:

• Requires fine-grained operation graphics, high learning and development costs
• Many personalized requirements and poor reusability

Data analysis visualization tool

The previous tools are all based on a priori models and have been used to detect known patterns and laws. Automatic processing of complex, heterogeneous, and large-scale data often fails, so it is necessary to visualize the data analysis process and better explore Patterns and finding problems. The best visualization tools for data analysis currently on the market are tableau, ggplot2 in R language, etc. The advantages of these products:

• Closely related to data analysis, integrating a large number of data-related algorithms
• Can visually display the intermediate links of data analysis

Disadvantages:

• Highly professional, not suitable for beginners

Visualization of virtual reality at VR/AR stage

Exploring

G2

The characteristics of the current supporting business determine the content of our data visualization work:

• Basic statistical charts still account for a large proportion of visualization, but development suffers from the incompleteness of various chart libraries, inconsistent data input and output, and cumbersome syntax, resulting in poor experience and low development efficiency.
• More and more businesses are beginning to have more dimensional data display needs. Traditional statistical charts can no longer meet the needs, and there are more and more visual customization needs
• Online data analysis business has begun to rise, and traditional PC tools cannot meet the demand

We started the development of G2 2 years ago. The positioning of G2:

• Meet existing statistical chart needs, provide a set of extremely simple graphics syntax, and complete the mapping of data from data space to graphics space.
• Provides extended syntax for various graphics, supports heterogeneous and complex data types, and is a powerful set of visualization tools
• Explore the application of data technology in visualization, using online data analysis as the entrance to provide visualization capabilities for data analysis

G2 roadmap

G2 has completed the development of 1.0, 1.1, and 1.2. The first few versions have completed the following content:

Overall roadMap:

• antV is a set of our practice specifications in supporting visual business, which is used to help users use appropriate charts in appropriate scenarios
• G drawing library is the bottom layer of drawing for our data visualization and needs to be expanded in 3D, animation and interaction
• G2 1.x has been developed, implementing a set of simple and easy-to-use graphical syntax to meet the needs of statistical charts.
• G2 2.x is under development. It is hoped that the details of graphics drawing can be shielded using data and graphics mapping, so that users can customize personalized visualization needs. The graphics that D3 can draw should be able to be implemented using simple syntax.
• For the functions of G2 3.x, I have only tried simple regression, fitting and other data algorithms before. Later, I need to combine it with the data department to construct an online version of the data analysis tool.

Conclusion

Several website addresses:

• g2: https://g2.alipay.com/
• antV: https://antv.alipay.com/
• github: https://github.com/antvis

We will publish a series of articles on visual framework design in the future, describing the overall design ideas of G2 and the design details of various grammatical elements. Everyone is welcome to participate in our visualization work.