npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

g2

v2.3.13

Published

An implementation of the Grammar of Graphics in javascript

Downloads

1,307

Readme

G2: The Grammar of Graphics

G2

G2 是一个由纯 JavaScript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由地定制图表,是为大数据时代而准备的强大的可视化工具。

G2 is a JavaScript library for visualizing data based on the Grammar of Graphics. G2 helps you bring data to life using Canvas and HTML. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms.

Want to learn more? See the guide,API,tutorial.

For examples, see the demo gallery.

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

Install

npm install g2

Usage

var G2 = require('g2');

Example

image

var G2 = require('g2');
var data = [
  {action: '访问', visitor: 500},
  {action: '浏览', visitor: 400},
  {action: '交互', visitor: 300},
  {action: '下单', visitor: 200},
  {action: '付款', visitor: 100}
];
var chart = new G2.Chart({
  id: 'c1',
  width : 800,
  height : 400
}); // create the chart object
chart.source(data); // load the data source
chart.interval().position('action*visitor').color('action'); // create the detail chart
chart.render();

More details at G2 site.

体验改进计划说明

为了更好服务用户,G2 在 2.1.4 版本后第一次加载时,会将 URL 等信息发送回 G2 服务器:

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

除了 URL 与 G2 版本信息外,不会收集任何其他信息,一切为了能对 G2 的运行情况有更多了解,以更好服务于用户。如有担心,可以通过下面的代码关闭:

// 关闭 G2 的体验改进计划打点请求
G2.track(false)