你的位置:首页 > Java教程

[Java教程]G2 DT时代的图形语法 正式发布


G2有一个高大上的名字叫做:The Grammar Of Graphics——图形语法。它是一个强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由定制图表,是为大数据时代而准备的强大可视化工具。

image

官方地址:(https://g2.alipay.com/)

试用G2

G2和传统的图表系统(HighCharts,ACharts等)不同,G2是一个基于统计分析的语义化数据可视化系统。它真正做到了让数据驱动图形,让你在使用它时候不用关心绘图细节,只需要知道你想通过它怎么展示你关心的数据。是蚂蚁金服推出的可视分析解决方案。

你手上可能有数据,但是不知道如何展示,不知道如何使用可视化的方法来分析数据。现在有了G2一切都可以解决了!

下面让我们看看它的威力,它的便捷程度简直是丧心病狂

为了能演示它的威力,我们特别做了这个试用页面,请大家打开这个页面http://antvis.github.io/exec.html,按照下面的gif演示过程试用下G2,任何一个人都可以使用它完成利用图形的力量分析处理数据的过程

介绍数据

首先我们已经给你们准备好了一份测试数据(R语言中常用的钻石数据),当然你也可以使用你自己的测试数据(载入方法和数据格式后面说)。这份数据是一份钻石数据,大约有1000颗钻石,每颗钻石都是一行数据,每行数据都有关于这颗钻石的参数比如4C参数(carat, cut, color, clarity), 外形参数(depth, width, x, y, z), 价格参数(price)。如图:

image

最初的需求

让我们先来一个最简单的需求,对于钻石大家肯定最关心的就是钻石的大小和其价格之间的关系。请跟着我们边打下面这行代码边默念接着的这句话:显示一个图表,使用点来表示每行数据,其中把carat(克拉)映射到位置信息(position)中的x轴,把price(价格)映射到位置信息(position)中的y轴。点击执行。哈! 我们称这个概念叫做映射,它可以帮助你把数据中你关心的字段映射到图形空间。

chart.point().position('carat*price');

image

更多的映射

让我们再加入更多的映射试试,我们把cut(切割工艺)映射为图形的颜色, 把clarity(纯净度)映射为图形的形状。

chart.point().position('carat*price').color('cut').shape('clarity');

image

我们数据的更多维度展示在了图形上。可以被映射的属性叫做视觉通道。

分面

但是刚才那个图中虽然展示了四维的信息,但是各个维度都叠加在一起,不利于观察,这个时候我们就可以使用一些特别的技巧了,其中一个技巧叫分面。它可以将原来的一个图形按照某种分类规则阵列成一个矩阵,或者一个圆环等。这样可以单独观察某种条件下的图形并形成对比。水平方向按照cut阵列,垂直方向按照clarity阵列。

chart.point().position('carat*price').color('cut').shape('clarity');chart.facet(['cut', 'clarity']);

image

下面这两个分别是仅仅水平阵列,仅仅垂直阵列。

chart.point().position('carat*price').color('cut').shape('clarity');chart.facet(['cut']);

image

chart.point().position('carat*price').color('cut').shape('clarity');chart.facet([, 'clarity']);

image

更换demo的数据

这个章节的内容不属于G2,仅仅是教大家怎么更换训练页中的测试数据。这个页面可以训练你使用G2。拿自己关心的数据进行测试才是开心的哈!

数据格式: G2假定的数据格式只有一种,就是一个数组,其中每个对象(简单对象)是一行数据,对象中的字段名就是列名,值就是当前行中对应列的值。下面是一份tokyo,newYork,berlin各个城市间不同月份气温的数据。

[  {"month":0,"tem":7,"city":"tokyo"},  {"month":1,"tem":6.9,"city":"tokyo"},  {"month":2,"tem":9.5,"city":"tokyo"},  {"month":3,"tem":14.5,"city":"tokyo"},  {"month":4,"tem":18.2,"city":"tokyo"},  {"month":5,"tem":21.5,"city":"tokyo"},  {"month":6,"tem":25.2,"city":"tokyo"},  {"month":7,"tem":26.5,"city":"tokyo"},  {"month":8,"tem":23.3,"city":"tokyo"},  {"month":9,"tem":18.3,"city":"tokyo"},  {"month":10,"tem":13.9,"city":"tokyo"},  {"month":11,"tem":9.6,"city":"tokyo"},  {"month":0,"tem":-0.2,"city":"newYork"},  {"month":1,"tem":0.8,"city":"newYork"},  {"month":2,"tem":5.7,"city":"newYork"},  {"month":3,"tem":11.3,"city":"newYork"},  {"month":4,"tem":17,"city":"newYork"},  {"month":5,"tem":22,"city":"newYork"},  {"month":6,"tem":24.8,"city":"newYork"},  {"month":7,"tem":24.1,"city":"newYork"},  {"month":8,"tem":20.1,"city":"newYork"},  {"month":9,"tem":14.1,"city":"newYork"},  {"month":10,"tem":8.6,"city":"newYork"},  {"month":11,"tem":2.5,"city":"newYork"},  {"month":0,"tem":-0.9,"city":"berlin"},  {"month":1,"tem":0.6,"city":"berlin"},  {"month":2,"tem":3.5,"city":"berlin"},  {"month":3,"tem":8.4,"city":"berlin"},  {"month":4,"tem":13.5,"city":"berlin"},  {"month":5,"tem":17,"city":"berlin"},  {"month":6,"tem":18.6,"city":"berlin"},  {"month":7,"tem":17.9,"city":"berlin"},  {"month":8,"tem":14.3,"city":"berlin"},  {"month":9,"tem":9,"city":"berlin"},  {"month":10,"tem":3.9,"city":"berlin"},  {"month":11,"tem":1,"city":"berlin"} ]

只要是这种类型的数据,G2都是可以接受的。

你只需要将这份数据拷入,训练页面中的数据框中,点载入按钮即可。如下图操作

image

超越点图

细心的读者可能发现,我们一直演示的都是点图。那我们能不能画其他图形呢?答案是肯定的。下面就使用刚刚载入的温度数据画线图。这句话是将月份映射为x,温度映射为y,不同city城市用不同的颜色,使用线来表示根据颜色分组出的数据。 见下图:

chart.line().position('month*tem').color('city');

image

这个时候你可能觉得下面显示的数字而不是一,二,三等中文数字,不符合视觉阅读习惯。你可以更改数据列的定义方式。

chart.col('month',{ // 定义列,指定月份对应的中文  type: 'cat',  values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] });chart.line().position('month*tem').color('city');

这样x显示的就是中文了。如图:

image

坐标系变换

除了上面的特性,还有一个很有意思的特性就是修改图形所在的坐标系。我们可以轻易的将一个图从二维直角空间转换为极坐标空间。见下图

chart.coord('polar');chart.col('month',{ // 定义列,指定月份对应的中文  type: 'cat',  values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] });chart.area().position('month*tem').color('city');

image

统计

G2还可以帮你做统计。可视化就是利用图形的力量对数据做处理进而分析。可视化和统计密不可分的。下面就是一个做统计的例子,更多例子欢迎这里观看文档。这个图意思是将cut映射为x,price映射为y,真对每种cut计算它对应的price最大值,使用区间(interval,你可以暂时理解为柱状图)来表示每个cut的最大值,为不同的cut使用不同的颜色。见下图:

chart.interval().position(Stat.summary.max('cut*price')).color('cut');

image

无穷多的图表

今天介绍了很多概念,例如映射,图形种类,视觉通道,分面,统计等。我们注意到每种概念都是一个范畴,它是可以扩展的。如果我们能在理解自己的数据的基础上,善用G2的概念,你就可以组合出无穷多种图表,总有一种适合你。

如有建议,请联系我们

欢迎各位使用 (https://g2.alipay.com/)。

如果有好的建议,请及时联系我们(蚂蚁金服——体验技术部——数据图形组)。反馈地址https://github.com/antvis/feedback/issues/new

同时我们也发布了一套专业的数据可视化规范,欢迎查看http://antv.alipay.net/。