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.
Installation
$ npm install @antv/g2
Usage
<div id="c1"></div>
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();
Development
$ 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.
Contributors, leungwensen, simaQ, dxq613, elaine1234, guisturdy, paleface001, :---:, :---:, :---:, :---:, :---:, :---:, chenshuai2144, xile611, maplor, zhfanrui, Frezc, Leannechn, janjakubnanista, ParryQiu, Sai0514, liximomo, wensen-lws, xudafeng, wangyu-kelly, BlackGanglion, illumen, DanielRuf, huacnlee, 0nza1101, RaoHai, tbroadley, charleyw, Hazyzh, forbreak, nekocode
This project follows the git-contributor spec, auto updated at Sat Jul 27 2019 14:06:08 GMT+0800.