introduce
F6 is a graphics visualization engine that can run quickly and smoothly on mobile devices. With rich layout, components and analysis capabilities, it helps users to land cross-platform graphics visualization application solutions. In H5, small program and other mobile terminal platforms, there are higher requirements on packet volume and performance, and a set of appropriate interaction mode needs to be defined. To solve the above problems, we redesigned and built F6 on the basis of G6. F6 not only features basic association graph drawing, events and animation, but also built-in common mobile interaction modes, rich layout and analysis components, which can be used through simple configuration.
Core competence
Ability to layout
Diagram layout is the key to diagram visualization. It helps us efficiently organize the clutter of “points” and “lines”. F6 and G6 have the same layout capability, and we are also optimizing for small screen devices. Users can easily migrate existing G6 applications to mobile devices. F6 also provides the ability to customize layout, and users can realize their own layout algorithms in special scenarios.
 |
 |
 |
 |
 |
|---|
The UI ability
As a convenient and easy-to-use graphics visualization engine, we expect developers to develop applications quickly and with the lowest learning cost. In the implementation process of “Equity penetration” and other applications, it took us a lot of time to restore complex nodes, but such development costs are undoubtedly a huge challenge for developers who do not understand the graphics syntax. To solve this problem, we developed @ANTv/F6-UI, which allows you to quickly restore nodes in the application using your existing Web knowledge. The following takes “equity penetration” as an example. After using @ANTV/F6-UI, the overall development efficiency has been greatly improved.
 |
 |
|---|---|
| @antv/ f6-UI implementation (line 83)Github.com/antvis/F6/b… | Graphical syntax implementation (Line 170) |
| Github.com/antvis/F6/b… |
From the above two parts of code implementation, the overall complexity will be greatly reduced, which is convenient for users to achieve business quickly and iteratively.
Multiterminal support
F6 at the design stage, we will give full consideration to the different end compatible adapter, at present already support alipay applet, WeChat small programs, as well as standard HTML 5, more the adapter is also in the works, WeChat and pay treasure to small program, for example, we erased the rendering differences of different platforms, only a set of code, can quickly run on different platforms.
Many developers may use a variety of mid-tier frameworks to achieve cross-coding. In order to reduce the development difficulty, we also provide uniApp Demo and usage documentation for developers to use F6 drawing in non-native environments. Examples of other frameworks will be released in the future.
animation
In order to better demonstrate the relationship of the graph and process link, edge and node animation is essential, we support the most basic animation, more powerful animation ability is also in the planning and design, but also expect more users can participate in and put forward more constructive suggestions.
 |
 |
 |
 |
|---|
Analysis ability
One of the most important directions of visualization application is the analysis ability of graph, which combines the original complex basic data by finding its association and then provides it to the corresponding analysts for quick decision and judgment, so as to reduce various risks in the business. How to do a good job in analysis is very important. Analysts can obtain effective information in the shortest time through rapid screening configuration, and through these effective information, they can carry out more professional analysis. At the beginning of the design, I also conducted a lot of research on the analytical ability of F6. I communicated with students in different positions, such as designers, risk control, business and products, and then summarized the information collected. Analytics are more difficult on mobile than on PC, and the smaller screen will require additional customization of the overall presentation and experience.
 |
 |
 |
 |
 |
|---|
Want more?
Welcome to visit the f6. Antv. Vision/useful/docs/exa… See more examples
Business applications
F6 has been released and is open source (github.com/antvis/f6), we also did a lot in the internal business to explore and perfect, based on the existing enterprise risk control, the white paper and our experience in the design, development, on the mobile end we precipitated “risk control” visual component library, easy to support business, the future will gradually open source, For developers to use, quickly build their own risk control applications. Business development affects engine upgrading, and engine upgrading also drives business landing. This year, we have completed the requirements of “equity penetration”, “Association investigation phase 1 and 2” and “Related Party identification” on the mobile terminal. At the same time, we are constantly exploring the mode of business landing. How to better meet the business needs and better serve the community is the direction of our efforts.
 |
 |
 |
 |
|---|---|---|---|
| Query association 1 | Check association 2 | Equity through | Related Party identification |
Future exploration
Graph visualization has experienced the first few years of development, from all walks of life both from the demonstration to analysis the outbreak growth, more developers into visual development, we will constantly perfect F6 iteration, to help developers better visualization, landing on the mobile end to get more business profits on the graph visualization. At the same time, we will continue to explore the road of mobile graphics visualization. In the future, not only small programs and H5, but also all kinds of portable devices, we hope to have more landing, on more devices, to do better graphics visualization, see micro · Zhiji.
The attached
Details of AntV 2021 Brand Day launch
- F series: See the small, set sail
- Technical articles
- S2: This table is “not easy”
- F2 4.0 is a future-oriented upgrade
- F6: Small screen play map visualization
- G2 stack: Study with concentration · Statistical charts
- · Visual Components
- G6 stack: New understanding of the grid
- L7: One-stop geographic analysis application solution
- X6 depth grinding, improving day by day
- XFlow: Application level graph editing solution
- G: Visual rendering engine
- AVA 2.0: Insights, a new beginning
- The design feature
- Ge Wu, AntV design
- To learning
- Visualization 101: Developing a Chart library from 0 to 1
AntV 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/f2 (F2 4.0 new official website F2-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…
F2Native is a client focused, out-of-the-box, high-performance visualization solution, complete graph syntax theory, to meet your various needs, professional mobile design guide to bring you the best mobile graphics experience.
- G6：github.com/antvis/g6
G6 is AntV’s Graph visualization and analysis engine. G comes from Graphic and Graph, which means we need to do Graph visualization based on Graph analysis technology. 6 comes from The Six Degrees of Separation Theory, which expresses our awe and fascination for relational data and relational networks.
- Graphin:Github.com/antvis/grap…
Graphin is a simple, efficient, out-of-the-box relational visual analysis tool based on the G6 package, derived from Graph Insight, Graph analysis insights.
- 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 an open source development framework for visual analysis of large-scale geospatial data based on WebGL. 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.
- AVA：github.com/antvis/AVA
AVA is an intelligent visualization framework for easier visual analysis.
- G: github.com/antvis/g (G 5.0 new website g-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.
- ChartCube：chartcube.alipay.com
ChartCube is a quick online tool for creating high quality charts in just three steps.