Introduction to AntV
By: Neo Wang
Tags: Github, Charts, JavaScript, Front End Development, Data Visualization

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: