Skip to content
/ G2 Public
forked from antvis/G2

📊 A highly interactive data-driven visualization grammar for statistical charts.

License

Notifications You must be signed in to change notification settings

MarkLyck/G2

This branch is 518 commits behind antvis/G2:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f8262a2 · May 22, 2020
May 22, 2020
Apr 16, 2020
May 20, 2020
Apr 21, 2020
Feb 28, 2020
May 22, 2020
May 22, 2020
Nov 27, 2019
Sep 3, 2019
Feb 13, 2020
Jan 13, 2020
Sep 3, 2019
May 18, 2020
Feb 25, 2020
Feb 25, 2020
Sep 3, 2019
Feb 28, 2020
Feb 28, 2020
Dec 27, 2019
Mar 18, 2020
May 22, 2020
Apr 22, 2020
Apr 9, 2020
Dec 24, 2019
Jan 13, 2020

Repository files navigation

English | 简体中文

G2

A highly interactive data-driven visualization grammar for statistical charts.

CI Coverage Status NPM Package NPM Downloads Dependencies Percentage of issues still open PRs Welcome

WebsiteTutorialAPI DocsBlog

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, you can describe the visual appearance and interactive behavior of a visualization just by one statement, and generate web-based views using Canvas or SVG.

📺 Live Demos

✨ Features

  • 💯Stable grammar of graphics: enable to draw all kinds of charts by mapping data to graphics.
  • 🤩New grammar of interaction: interaction behaviors combined with Trigger and Action mechanisms are used to exploring data.
  • 🦍Advanced View module: with the ability to develop customized multi-dimension data analysis graphics.
  • 👬Dual-engine rendering: with the ability to switch Canvas and SVG freely.
  • 💄Visual components: interaction-oriented, elegant experience.
  • 🛡Fully embrace Typescript: Complete type definition files are provided.

📦 Installation

$ npm install @antv/g2

🔨 Getting Started

Before drawing we need to prepare a DOM container for G2:

<div id="c1"></div>
import { Chart } from '@antv/g2';

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

// Step 1: Create a Chart instance.
const chart = new Chart({
  container: 'c1', // Specify chart container ID
  width: 600, // Specify chart width
  height: 300, // Specify chart height
});

// Step 2: Load the data.
chart.data(data);

// Step 3: Declare the grammar of graphics, draw column chart.
chart.interval().position('genre*sold');

// Step 4: Render chart.
chart.render();

⌨️ Development

# Install dependencies
$ npm install

# Run test cases
$ npm run test

# Open electron to run test cases and listen to file changes
$ npm run test-live

# Run CI
$ npm run ci

# Run website
$ npm start

🏷️ Releases

🤝 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.

About

📊 A highly interactive data-driven visualization grammar for statistical charts.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 99.3%
  • Other 0.7%