{"action":"created","issue":{"url":"https://api.github.com/repos/antvis/antvis.github.io/issues/1","repository_url":"https://api.github.com/repos/antvis/antvis.github.io","labels_url":"https://api.github.com/repos/antvis/antvis.github.io/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/antvis/antvis.github.io/issues/1/comments","events_url":"https://api.github.com/repos/antvis/antvis.github.io/issues/1/events","html_url":"https://github.com/antvis/antvis.github.io/issues/1","id":155429596,"number":1,"title":"蚂蚁金服发布新一代数据可视化引擎G2","user":{"login":"hi-caicai","id":1811819,"avatar_url":"https://avatars.githubusercontent.com/u/1811819?v=3","gravatar_id":"","url":"https://api.github.com/users/hi-caicai","html_url":"https://github.com/hi-caicai","followers_url":"https://api.github.com/users/hi-caicai/followers","following_url":"https://api.github.com/users/hi-caicai/following{/other_user}","gists_url":"https://api.github.com/users/hi-caicai/gists{/gist_id}","starred_url":"https://api.github.com/users/hi-caicai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hi-caicai/subscriptions","organizations_url":"https://api.github.com/users/hi-caicai/orgs","repos_url":"https://api.github.com/users/hi-caicai/repos","events_url":"https://api.github.com/users/hi-caicai/events{/privacy}","received_events_url":"https://api.github.com/users/hi-caicai/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2016-05-18T06:59:46Z","updated_at":"2016-05-18T09:56:56Z","closed_at":null,"body":"注: 用pc浏览器打开，效果更好（微信中打开会被屏蔽，建议用pc浏览器打开）\r\n\r\n\r\n# 蚂蚁金服发布新一代数据可视化引擎G2\r\n---\r\n\r\nG2有一个高大上的名字叫做：The Grammar Of Graphics——图形语法。它是一个强大的语义化图表生成工具，它提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由定制图表，是为大数据时代而准备的强大可视化工具。\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/pbJCKXIboKRJnAP.png)\r\n\r\n官方地址：(https://g2.alipay.com/)\r\n\r\n## 试用G2\r\n\r\nG2和传统的图表系统（HighCharts，ACharts等）不同，G2是一个基于统计分析的语义化数据可视化系统。它真正做到了`让数据驱动图形`，让你在使用它时候不用关心绘图细节，只需要知道你想通过它怎么展示你`关心的数据`。是蚂蚁金服推出的可视分析解决方案。\r\n\r\n你手上可能有数据，但是不知道如何展示，不知道如何使用可视化的方法来分析数据。现在有了G2一切都可以解决了！\r\n\r\n下面让我们看看它的威力，它的便捷程度简直是``丧心病狂``：\r\n\r\n为了能演示它的威力，我们特别做了这个试用页面，请大家打开这个页面[http://antvis.github.io/exec.html](http://antvis.github.io/exec.html)，按照下面的gif演示过程试用下G2，任何一个人都可以使用它完成``利用图形的力量分析处理数据的过程``。\r\n\r\n## 介绍数据\r\n\r\n首先我们已经给你们准备好了一份测试数据(R语言中常用的钻石数据)，当然你也可以使用你自己的测试数据（载入方法和数据格式后面说）。这份数据是一份钻石数据，大约有1000颗钻石，每颗钻石都是一行数据，每行数据都有关于这颗钻石的参数比如4C参数(carat, cut, color, clarity), 外形参数(depth, width, x, y, z), 价格参数(price)。如图：\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/LechVrJlgWxVsJD.png)\r\n\r\n\r\n## 最初的需求\r\n\r\n让我们先来一个最简单的需求，对于钻石大家肯定最关心的就是钻石的大小和其价格之间的关系。``请跟着我们边打下面这行代码边默念接着的这句话``: ``显示一个图表，使用点来表示每行数据，其中把carat(克拉)映射到位置信息(position)中的x轴，把price（价格）映射到位置信息(position)中的y轴。点击执行。哈！`` 我们称这个概念叫做``映射``，它可以帮助你把数据中你关心的字段映射到图形空间。\r\n\r\n```\r\nchart.point().position('carat*price');\r\n```\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/VYQCDKZvSxaqrTV.gif)\r\n\r\n\r\n## 更多的映射\r\n\r\n让我们再加入更多的映射试试，我们把cut(切割工艺)映射为图形的颜色, 把clarity(纯净度)映射为图形的形状。\r\n\r\n```\r\nchart.point().position('carat*price').color('cut').shape('clarity');\r\n```\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/GEPPQNQKgkbisCx.gif)\r\n\r\n我们数据的更多维度展示在了图形上。可以被映射的属性叫做[视觉通道](https://g2.alipay.com/tutorial/attr.html)。\r\n\r\n## 分面\r\n但是刚才那个图中虽然展示了四维的信息，但是各个维度都叠加在一起，不利于观察，这个时候我们就可以使用一些特别的技巧了，其中一个技巧叫[分面](https://g2.alipay.com/tutorial/facet.html)。它可以将原来的一个图形按照某种分类规则阵列成一个矩阵，或者一个圆环等。这样可以单独观察某种条件下的图形并形成对比。水平方向按照cut阵列，垂直方向按照clarity阵列。\r\n\r\n```\r\nchart.point().position('carat*price').color('cut').shape('clarity');\r\nchart.facet(['cut', 'clarity']);\r\n```\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/uQsSvXFrWQmLIwG.gif)\r\n\r\n下面这两个分别是仅仅水平阵列，仅仅垂直阵列。\r\n\r\n```\r\nchart.point().position('carat*price').color('cut').shape('clarity');\r\nchart.facet(['cut']);\r\n```\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/DYmxozQkyTpThvh.gif)\r\n\r\n```\r\nchart.point().position('carat*price').color('cut').shape('clarity');\r\nchart.facet([, 'clarity']);\r\n```\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/FuPGrOZMIdxQNAF.gif)\r\n\r\n## 更换demo的数据\r\n\r\n这个章节的内容不属于G2，仅仅是教大家怎么更换训练页中的测试数据。这个页面可以训练你使用G2。拿自己关心的数据进行测试才是开心的哈！\r\n\r\n数据格式： G2假定的数据格式只有一种，就是一个数组，其中每个对象（简单对象）是一行数据，对象中的字段名就是列名，值就是当前行中对应列的值。下面是一份tokyo，newYork，berlin各个城市间不同月份气温的数据。\r\n\r\n```\r\n[\r\n    {\"month\":0,\"tem\":7,\"city\":\"tokyo\"},\r\n    {\"month\":1,\"tem\":6.9,\"city\":\"tokyo\"},\r\n    {\"month\":2,\"tem\":9.5,\"city\":\"tokyo\"},\r\n    {\"month\":3,\"tem\":14.5,\"city\":\"tokyo\"},\r\n    {\"month\":4,\"tem\":18.2,\"city\":\"tokyo\"},\r\n    {\"month\":5,\"tem\":21.5,\"city\":\"tokyo\"},\r\n    {\"month\":6,\"tem\":25.2,\"city\":\"tokyo\"},\r\n    {\"month\":7,\"tem\":26.5,\"city\":\"tokyo\"},\r\n    {\"month\":8,\"tem\":23.3,\"city\":\"tokyo\"},\r\n    {\"month\":9,\"tem\":18.3,\"city\":\"tokyo\"},\r\n    {\"month\":10,\"tem\":13.9,\"city\":\"tokyo\"},\r\n    {\"month\":11,\"tem\":9.6,\"city\":\"tokyo\"},\r\n    {\"month\":0,\"tem\":-0.2,\"city\":\"newYork\"},\r\n    {\"month\":1,\"tem\":0.8,\"city\":\"newYork\"},\r\n    {\"month\":2,\"tem\":5.7,\"city\":\"newYork\"},\r\n    {\"month\":3,\"tem\":11.3,\"city\":\"newYork\"},\r\n    {\"month\":4,\"tem\":17,\"city\":\"newYork\"},\r\n    {\"month\":5,\"tem\":22,\"city\":\"newYork\"},\r\n    {\"month\":6,\"tem\":24.8,\"city\":\"newYork\"},\r\n    {\"month\":7,\"tem\":24.1,\"city\":\"newYork\"},\r\n    {\"month\":8,\"tem\":20.1,\"city\":\"newYork\"},\r\n    {\"month\":9,\"tem\":14.1,\"city\":\"newYork\"},\r\n    {\"month\":10,\"tem\":8.6,\"city\":\"newYork\"},\r\n    {\"month\":11,\"tem\":2.5,\"city\":\"newYork\"},\r\n    {\"month\":0,\"tem\":-0.9,\"city\":\"berlin\"},\r\n    {\"month\":1,\"tem\":0.6,\"city\":\"berlin\"},\r\n    {\"month\":2,\"tem\":3.5,\"city\":\"berlin\"},\r\n    {\"month\":3,\"tem\":8.4,\"city\":\"berlin\"},\r\n    {\"month\":4,\"tem\":13.5,\"city\":\"berlin\"},\r\n    {\"month\":5,\"tem\":17,\"city\":\"berlin\"},\r\n    {\"month\":6,\"tem\":18.6,\"city\":\"berlin\"},\r\n    {\"month\":7,\"tem\":17.9,\"city\":\"berlin\"},\r\n    {\"month\":8,\"tem\":14.3,\"city\":\"berlin\"},\r\n    {\"month\":9,\"tem\":9,\"city\":\"berlin\"},\r\n    {\"month\":10,\"tem\":3.9,\"city\":\"berlin\"},\r\n    {\"month\":11,\"tem\":1,\"city\":\"berlin\"}\r\n  ]\r\n```\r\n\r\n只要是这种类型的数据，G2都是可以接受的。\r\n\r\n你只需要将这份数据拷入，训练页面中的数据框中，点载入按钮即可。如下图操作\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/dEdjClGnlxnlZyn.png)\r\n\r\n## 超越点图\r\n\r\n细心的读者可能发现，我们一直演示的都是点图。那我们能不能画其他图形呢？答案是肯定的。下面就使用刚刚载入的温度数据画线图。这句话是将月份映射为x，温度映射为y，不同city城市用不同的颜色，使用线来表示根据颜色分组出的数据。 见下图：\r\n\r\n```\r\nchart.line().position('month*tem').color('city');\r\n```\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/rWKgtiiNgNOZZAf.gif)\r\n\r\n这个时候你可能觉得下面显示的数字而不是一，二，三等中文数字，不符合视觉阅读习惯。你可以更改数据列的定义方式。\r\n\r\n```\r\nchart.col('month',{ // 定义列，指定月份对应的中文\r\n    type: 'cat',\r\n    values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']\r\n  });\r\nchart.line().position('month*tem').color('city');\r\n```\r\n这样x显示的就是中文了。如图：\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/JWgYBqVwhjrWVKS.gif)\r\n\r\n## 坐标系变换\r\n\r\n除了上面的特性，还有一个很有意思的特性就是修改图形所在的坐标系。我们可以轻易的将一个图从二维直角空间转换为极坐标空间。见下图\r\n\r\n```\r\nchart.coord('polar');\r\nchart.col('month',{ // 定义列，指定月份对应的中文\r\n    type: 'cat',\r\n    values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']\r\n  });\r\nchart.area().position('month*tem').color('city');\r\n```\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/HLBSAosZbMUPHSq.gif)\r\n\r\n## 统计\r\n\r\nG2还可以帮你做统计。可视化就是利用图形的力量对数据做处理进而分析。可视化和统计密不可分的。下面就是一个做统计的例子，更多例子欢迎这里观看[文档](https://g2.alipay.com/tutorial/stat.html)。这个图意思是`将cut映射为x，price映射为y，真对每种cut计算它对应的price最大值，使用区间（interval，你可以暂时理解为柱状图）来表示每个cut的最大值，为不同的cut使用不同的颜色`。见下图：\r\n\r\n```\r\nchart.interval().position(Stat.summary.max('cut*price')).color('cut');\r\n```\r\n\r\n![image](https://os.alipayobjects.com/rmsportal/EhicxSxItTUixYL.png)\r\n\r\n## 无穷多的图表\r\n\r\n今天介绍了很多概念，例如映射，图形种类，视觉通道，分面，统计等。我们注意到每种概念都是一个范畴，它是可以扩展的。如果我们能在理解自己的数据的基础上，善用G2的概念，你就可以组合出无穷多种图表，总有一种适合你。\r\n\r\n\r\n\r\n\r\n# 如有建议，请联系我们\r\n\r\n欢迎各位使用[https://g2.alipay.com] (https://g2.alipay.com)。\r\n\r\n如果有好的建议，请及时联系我们（蚂蚁金服——体验技术部——数据图形组）。反馈地址[https://github.com/antvis/feedback/issues/new](https://github.com/antvis/feedback/issues/new)\r\n\r\n同时我们也发布了一套专业的数据可视化规范，欢迎查看[https://antv.alipay.com](https://antv.alipay.com/)。\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/antvis/antvis.github.io/issues/comments/219980505","html_url":"https://github.com/antvis/antvis.github.io/issues/1#issuecomment-219980505","issue_url":"https://api.github.com/repos/antvis/antvis.github.io/issues/1","id":219980505,"user":{"login":"sy-tang","id":1843681,"avatar_url":"https://avatars.githubusercontent.com/u/1843681?v=3","gravatar_id":"","url":"https://api.github.com/users/sy-tang","html_url":"https://github.com/sy-tang","followers_url":"https://api.github.com/users/sy-tang/followers","following_url":"https://api.github.com/users/sy-tang/following{/other_user}","gists_url":"https://api.github.com/users/sy-tang/gists{/gist_id}","starred_url":"https://api.github.com/users/sy-tang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sy-tang/subscriptions","organizations_url":"https://api.github.com/users/sy-tang/orgs","repos_url":"https://api.github.com/users/sy-tang/repos","events_url":"https://api.github.com/users/sy-tang/events{/privacy}","received_events_url":"https://api.github.com/users/sy-tang/received_events","type":"User","site_admin":false},"created_at":"2016-05-18T09:56:56Z","updated_at":"2016-05-18T09:56:56Z","body":"Well done!"}}