@antv/g2

Version:

the Grammar of Graphics in Javascript

g2.antv.vision

93 lines (62 loc) • 7.29 kB

Markdown

# G2: The Grammar of Graphics in JavaScript [![](https://img.shields.io/travis/antvis/g2.svg)](https://travis-ci.org/antvis/g2) ![](https://img.shields.io/badge/language-javascript-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg) [![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2) [![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 "Percentage of issues still open") [中文 README](./README.zh-CN.md) 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](https://en.wikipedia.org/wiki/Leland_Wilkinson), the author of [*The Grammar Of Graphics*](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html), whose book served as the foundation for G2.** <a href="https://g2.antv.vision/zh/examples/gallery/line"><img src="https://user-images.githubusercontent.com/6628666/68994104-1061b700-08ba-11ea-8017-3534fc85bc2f.jpeg" /></a> ## Installation ```bash $ npm install @antv/g2 ``` ### Usage <img src="https://gw.alipayobjects.com/zos/rmsportal/aHvVgFiBnGzzKCEjdVtL.png" width="450"> ```html <div id="c1"></div> ``` ```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](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html) ## 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](https://github.com/antvis/g2/issues) for bug reports or suggestions first. To become a contributor, please follow our [contributing guide](https://github.com/antvis/g2/blob/master/CONTRIBUTING.md).  ## Contributors |[<img src="https://avatars1.githubusercontent.com/u/1655789?v=4" width="100px;"/> leungwensen](https://github.com/leungwensen) |[<img src="https://avatars3.githubusercontent.com/u/6628666?v=4" width="100px;"/> simaQ](https://github.com/simaQ) |[<img src="https://avatars1.githubusercontent.com/u/1264678?v=4" width="100px;"/> dxq613](https://github.com/dxq613) |[<img src="https://avatars3.githubusercontent.com/u/8325822?v=4" width="100px;"/> elaine1234](https://github.com/elaine1234) |[<img src="https://avatars0.githubusercontent.com/u/7098619?v=4" width="100px;"/> guisturdy](https://github.com/guisturdy) |[<img src="https://avatars3.githubusercontent.com/u/5888974?v=4" width="100px;"/> paleface001](https://github.com/paleface001) | | :---: | :---: | :---: | :---: | :---: | :---: | |[<img src="https://avatars0.githubusercontent.com/u/8186664?v=4" width="100px;"/> chenshuai2144](https://github.com/chenshuai2144) |[<img src="https://avatars3.githubusercontent.com/u/6111424?v=4" width="100px;"/> xile611](https://github.com/xile611) |[<img src="https://avatars3.githubusercontent.com/u/5591805?v=4" width="100px;"/> maplor](https://github.com/maplor) |[<img src="https://avatars3.githubusercontent.com/u/6560377?v=4" width="100px;"/> zhfanrui](https://github.com/zhfanrui) |[<img src="https://avatars2.githubusercontent.com/u/6942296?v=4" width="100px;"/> Frezc](https://github.com/Frezc) |[<img src="https://avatars1.githubusercontent.com/u/6812138?v=4" width="100px;"/> Leannechn](https://github.com/Leannechn) | |[<img src="https://avatars2.githubusercontent.com/u/1451480?v=4" width="100px;"/> janjakubnanista](https://github.com/janjakubnanista) |[<img src="https://avatars1.githubusercontent.com/u/11624840?v=4" width="100px;"/> ParryQiu](https://github.com/ParryQiu) |[<img src="https://avatars3.githubusercontent.com/u/22516098?v=4" width="100px;"/> Sai0514](https://github.com/Sai0514) |[<img src="https://avatars0.githubusercontent.com/u/9816225?v=4" width="100px;"/> liximomo](https://github.com/liximomo) |[<img src="https://avatars1.githubusercontent.com/u/9054130?v=4" width="100px;"/> wensen-lws](https://github.com/wensen-lws) |[<img src="https://avatars1.githubusercontent.com/u/1011681?v=4" width="100px;"/> xudafeng](https://github.com/xudafeng) | |[<img src="https://avatars1.githubusercontent.com/u/2370929?v=4" width="100px;"/> wangyu-kelly](https://github.com/wangyu-kelly) |[<img src="https://avatars0.githubusercontent.com/u/9314735?v=4" width="100px;"/> BlackGanglion](https://github.com/BlackGanglion) |[<img src="https://avatars3.githubusercontent.com/u/210810?v=4" width="100px;"/> illumen](https://github.com/illumen) |[<img src="https://avatars1.githubusercontent.com/u/827205?v=4" width="100px;"/> DanielRuf](https://github.com/DanielRuf) |[<img src="https://avatars2.githubusercontent.com/u/5518?v=4" width="100px;"/> huacnlee](https://github.com/huacnlee) |[<img src="https://avatars2.githubusercontent.com/u/13056641?v=4" width="100px;"/> 0nza1101](https://github.com/0nza1101) | [<img src="https://avatars2.githubusercontent.com/u/566097?v=4" width="100px;"/> RaoHai](https://github.com/RaoHai) |[<img src="https://avatars0.githubusercontent.com/u/8731922?v=4" width="100px;"/> tbroadley](https://github.com/tbroadley) |[<img src="https://avatars2.githubusercontent.com/u/1860329?v=4" width="100px;"/> charleyw](https://github.com/charleyw) |[<img src="https://avatars0.githubusercontent.com/u/21355783?v=4" width="100px;"/> Hazyzh](https://github.com/Hazyzh) |[<img src="https://avatars0.githubusercontent.com/u/6947976?v=4" width="100px;"/> forbreak](https://github.com/forbreak) |[<img src="https://avatars0.githubusercontent.com/u/4783781?v=4" width="100px;"/> nekocode](https://github.com/nekocode) This project follows the git-contributor [spec](https://github.com/xudafeng/git-contributor), auto updated at `Sat Jul 27 2019 14:06:08 GMT+0800`.