Visit this article on Observable so you can read it interactively!
AntV is an technology brand for data visualization. It contains multiple open source JavaScript libraries to support visualization needs in various fields, including statistical charts, graph visualization, geospatial visualization and even automatic chart recommendation and generation.
Tested by huge data business in Ant Financial Services Group and Alibaba Group, it can guarantee various data analysis scenarios.
This notebook will introduce the capabilities of AntV in various aspects and show you related demos.
To follow the latest updates of AntV: ✩ Star the repos you are interested in on GitHub.
Statistical Charts
AntV supports basic statistical charts with the libraries named G2, G2Plot, F2, and AVA. Feel confused? Don’t worry! We can walk through them quickly.
G2 — 📊 Visualization Grammars for Statistical Charts
G2 is a JavaScript library that implements the Grammar of Graphics (Yes, this is the origin of the name “G2”). These grammars divide graphics into specifications with mappings between data and visual variables, such as color, shape or length.
Here is a very simple demo: A bar chart by G2.
For example, here is an advanced implementation:
To learn more about G2, visit its website to see more demos, or star its GitHub repo.
However, the grammars seem very hard to get started… if you are not a visualization expert. So, we have a “plan B” for wider users.
G2Plot — 📈 A Configurable Library Based on G2
For beginners, forget about the grammars, configs (or options) are more friendly.
With G2Plot,
- choose a chart type (Pie, Bar, Line, Rose, etc.)
- set the configs
then you are all done.
Take a look at this example: a basic rose chart.
To learn more about G2Plot, visit its website to see more demos and tutorials, or star its GitHub repo.
To use G2Plot, you don’t have to worry about the grammars, but you still have to learn some “taxonomy”. What chart type to use for a given dataset? What’s the difference between stacked and grouped bar charts?
To help you stay away from these problems in some cases, we have an “AI” for you!
Automatically Recommend & Generate Charts
What if… you just drop your dataset and tell what you want to know, and someone draws the graphics for you!
Try this: (import the function autoChart from AVA/ChartAdvisor first)
autoChart(container, data, options);
💍 ONE LINE TO RULE THEM ALL !!!
AVA — 🤖 A Framework for Automated Visual Analytics
AVA is a framework and a solution for more convenient visual analytics. It recommends visualization instances by understanding the given dataset and analysis needs.
Check the following dynamic chart:
AVA is still in the lab and there is a long todo list. Any contribution is welcome!
To learn more about AVA, visit and star its GitHub repo.
Statistical Charts on Mobile
Well, sometimes we develop charts on mobile devices. There is a library for optimized Fast and Flexible experience on mobile — F2.
F2 — 📱An Elegant Interactive Charting Library for Mobile
The following demo illustrates everything.
To learn more about F2, visit its website to see more demos, or star its GitHub repo.
Graphs
How about visualizing relations? Those nodes and links in the graph theory?
G6 — 🖇️ A Graph Visualization Library
If you have ever heard about 6 degrees of separation, that’s why this Graph library was named G6.
Let’s see a simple demo:
Nodes, links, layout, force, … Nailed it in one library!
Looking for more advanced and customized example? Here it is:
To learn more about G6, visit its website to see more demos and tutorials, or star its GitHub repo.
Graph Edit
Wait, maybe you want to DRAW a graph, not to represent one? The tool you are looking for is a graph editor.
X6 — 🛠️ A JavaScript Graph Editing Engine
Similarly with G6, but this one is for making graph editor.
Try this playground: (on Observable)
- Drag and Drop
- Select
- Pan and Zoom
- Keyboard Shortcuts:
- delete: ⌫
- undo: ^ctrl/⌘cmd + Z
- redo: ^ctrl/⌘cmd + ⇧shift + Z
X6 is still in the lab. Any contribution is welcome!
To learn more about X6, visit and star its GitHub repo.
Geographical Visualization
Maps! Of course there are.
L7 — 🌎 WebGL-powered Geospatial Visualization Framework
L7 relies on Mapbox GL or AMap to render basemaps. It supports the illustration of large-scale maps.
Check this:
To learn more about L7, visit its website to see more demos, or star its GitHub repo.
Products
In addition to libraries, AntV also have some out-of-the-box products.
ChartCube: Online Charting Tool for both Designers and Developers
ChartCube (chartcube.alipay.com) is an online tool for quick charting that anyone can use with a modern web browser.
Here is an article for the details.
Graphin: A React Toolkit for Graph analysis
and Graphin Studio for Comprehensive Graph Analysis
Graphin stands for Graph Insight. It’s a toolkit based on G6 and React, that focuses on relational visual analysis. It’s simple, efficient, out of the box.
The End
Again, if you are interested in anything of AntV, visit the official website (antv.vision) to learn more.
And also, to follow the latest updates of AntV: ✩ Star the repos on GitHub.
