G2: The Grammar of Graphics in JavaScript



G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, users can describe the visual appearance of a visualization just by one statement.

Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for G2.

More details about G2.

Installation

``bash
$ npm install @antv/g2
`

$3

`html

`

`js
import G2 from '@antv/g2';

const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 1150 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];

const chart = new G2.Chart({
container: 'c1',
width: 500,
height: 500
});

chart.source(data);
chart.interval().position('genre*sold').color('genre');
chart.render();
`

More examples

!demos

Development

`bash
$ npm install

run test case

$ npm run test-live

build watching file changes and run demos

$ npm run dev

run demos

$ npm run demos
`

How to Contribute

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

To become a contributor, please follow our contributing guide.

~~Experience Improvement Program Description~~

~~In order to serve the users better, G2 will send the URL and version information back to the AntV server:~~

~~https://kcart.alipay.com/web/bi.do~~

~~Except for URL and G2 version information, no other information will be collected. You can also turn it off with the following code:~~

`js
// disable tracking
G2.track(false)
`

update:

We decided to terminate the "Experience Improvement Program". In verson @antv/g2@3.4.7` and above, all tracking code is removed, no unexpected remote request will be sent while you are using G2.