The Grammar of Graphics in JavaScript
Permalink
Failed to load latest commit information.
.github Update issue templates Sep 19, 2018
bin add scripts for npm run pixel-test Sep 14, 2018
bundler chore(dev): add interaction modules to bundler May 17, 2018
demos chore(dev): update screenshots Oct 23, 2018
docs init Jun 5, 2017
src chore(dev): remove useless files in src/component/legend Oct 23, 2018
test fix(legend): determine container when use html to render a legend & a… Oct 19, 2018
.babelrc chore(dev): upgrade babel Sep 4, 2018
.editorconfig init Jun 5, 2017
.eslintignore chore(dev): provide ES5 version for npm pkg Jan 23, 2018
.eslintrc chore(dev): no console.log Mar 9, 2018
.gitignore chore(dev): ignore useless files for npm pkg Sep 28, 2018
.npmignore chore(dev): ignore useless files for npm pkg Sep 28, 2018
.torch.compile.opts.js fix(dev): upgrade babel preset env for torchjs Sep 6, 2018
.travis.yml tests: add Node.js 10 Oct 11, 2018
CHANGELOG.md fix(guide): region filter does not work on interval geom, etc. Closes #… Oct 17, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Sep 19, 2018
CONTRIBUTING.md docs: fix typos Dec 20, 2017
CONTRIBUTING.zh-CN.md chore: how to contribute. Nov 23, 2017
LICENSE update Nov 20, 2017
README.md chore(doc): replacing demos screenshot in README.md Dec 20, 2017
README.zh-CN.md chore(doc): replacing demos screenshot in README.md Dec 20, 2017
package.json chore(package): update package version to 3.3.2 & update dependencies Oct 23, 2018
tsconfig.json chore(util): Added tslint npm command that validates src/index.d.ts f… Jun 26, 2018
tslint.json chore(util): Added tslint npm command that validates src/index.d.ts f… Jun 26, 2018
webpack-dev.config.js packing Aug 1, 2017
webpack.config.js chore(dev): support svg version Jul 4, 2018

README.md

G2: The Grammar of Graphics in JavaScript

NPM Package NPM Downloads Percentage of issues still open

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

$ 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();

More examples

demos

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.