沙龙分享| 你知道阿里“狂霸酷炫”数据可视化的正确打开方式吗?

2016-07-14 18:07 来源:数邦客
浏览量: 收藏:0 分享

0000.png

数据可视化两大流派

001.png

作为阿里巴巴的阿里云datav团队可视化工程师,我所在团队从事数据产品(数据魔方、淘宝指数等)和数据可视化展示。大家对数据可视化的理解各有不同,我认为大致分为两个流派。


一个是使用工具,核心注重表现效果,或得到结果的速度;另一个看重开发,核心注重产品。前者相对应如新闻行业与设计师,他们更在意美化,以及数据分析师通过R、SPSS、Tableau、excel等得出结论。如果把数据可视化看成工具,目前它仍有巨大的优化空间。而注重产品的我们,往往聚焦项目针对场景优化,做该场景最合适的数据可视化,对产品定制开发。


整个数据产业从数据的埋点采集、海量的运算、机器学习、数据挖掘以及前端数据产品思维,再到数据可视化呈现有很长的链路要走,所以我们称数据可视化为“大数据的最后一公里”。而这“最后一公里”往往没有尽头,因为方便好用的开源类库后面是长达几年的迭代,并不是每个人都需要专研底层,也不是每个人都需要标新立异。


数据可视化未来的发展方向应该是数据分析,而不仅仅是酷炫。它应该切实解答企业在核心业务层中遇到的问题,驱动企业发展,从而让企业在图表中收获决策的思路。


因此我比较看好数据分析,作为一个可视化工程师可以考虑向后延伸,了解中间层,学些数据库。例如:MongoDB、MySQL、Postgres,选择性学习Hive、Hadoop、Spark,因为这些在云服务中都会有相应的体现,如Hadoop对标阿里云的MaxCompute。未来也许是云服务更加盛行的时代,美国不少上市或将上市企业,都将自己的数据存储和计算放在亚马逊云上,也许国内的企业也会加强这种信任。你可能是个低频用户,自己搭建又非常耗时,不如使用云服务。因此掌握云服务是门强有力的技能。

阿里可视化“牛”在哪儿

002.png

① “双十一”淘宝交易飞线路径                                 ② 北京三维物流交易模拟                                                                                                

去年天猫“双十一”媒体接待大厅,屏幕实时呈现淘宝一天交易量的数据变化。比如用精简的飞线代表全球正在进行的若干笔交易,不同颜色代表不同交易类型。去年我们做飞线比前年快了100倍,能保证6000条飞线顺畅飞行,这中间用WebGL绘图、合并,再做些错觉使其看起来像分开的。


为什么要使用WebGL?数据可视化有两个方向,分析型可视化以结论优先,它未必要漂亮但是需要有结论产生,之中会有一些需求,比如大量绘制点以观察分布的Pattern;另一种就是追求酷炫。而WebGL在这两点上都有优势,比如帮助海量数据可视化分析,又能做3D呈现酷炫效果。


003.png

004.png

大家喜欢看国际化的可视化场景,比如淘宝跟世界上200多个国家之间的交易。而技术人员最大挑战在于深入城市的细节,把握更实时、准确、精密的城市场景。所以往年的飞线图是以抛物线的方式在地球上进行飞行,而我们做了项实时交易的模拟:未来几天货品流向收货地的物流路径。怎么实现呢?通过海量数据统计,将地址合并在离线平台计算,也就是在MaxCompute(原名ODPS)里做函数。


随后我们做了些细节优化,比如外省地址合并到省会城市,把城市视野范围内以外的线切掉,把整个路径做简化,当相邻的三个点夹角接近180度的时候,把它打成一条直线。最终呈现的结果就是模拟四大城市在二维平面上进行的物流交易。


而北京市,我们做了三维城市的模拟,选择北京是因为这座城市有大量低矮的建筑适合做优化,我们把两三层以下的楼房拍平,这样就减少了70%到80%的webGL存储。


地理底图的选择之道

005.png

谈到地理可视化,大家通常会问呈现的可视化底图从哪来?数据可视化所用的地图与谷歌地图不同。谷歌地图起到导航作用,核心目标在于展现丰富多层次的地理数据。对数据可视化工程师而言,地理就像柱状图的坐标系那样起到辅助作用,它要呈现经济数据、人文数据在地理上的分布,所以地图得百搭、低调、美观、简单。


2014年阿里收购高德地图,团队与高德合作生成定制版底图,使用OpenStreetMap的地理数据下载到本地,用TileMill、CartoCSS等软件生成草图。地图和我们写网页很像,网页有ID 等要素,地理地图也有地面、河流、房屋、道路标志,针对不同要素在不同缩放等级下配边线颜色、填充颜色、边线的粗细、填充的材质等特性,再在TileMill里通过CartoCSS呈现,尤其是颜色函数。我们把每套颜色分成四个常用图层,并用9种颜色控制一套风格,降低工程难度。


热力图的两大Bug

006.png

再解答常被忽视的问题,我们都知道热力图,简而言之它把二维空间转化成颜色形式,数据变化决定颜色变化。热力图虽酷炫但有很多问题。


你看到颜色变化,但不知道相对应的颜色代表值,即便在右下角做Level 指明每个颜色代表的意思,依旧不能快速反应数据量。所以热力图可定性描述但不定量,不适合展现所有事情。


我们从基站采集手机信号的位置,或者从手机定位采集人所在的位置进行叠加时,热力图能展示人在城市中的分布。一个疑问:如果要做所有小区的房价可视化,热力图显示房子密集的地方亮度高,亮度高等于房价高吗?像房价、密度等量是无法用叠加去呈现,应该用加权平均去呈现。 


Q&A

Q:推荐一些数据可视化工具

:作为码农,我推荐D3、JS、Leaflet.js、three.js,直接使用的有ECharts、Highcharts。


Q:WebGL 和three.js 哪一个好?

周:个人观点是实用主义,什么好用就用什么。比如去实现一个系统你可以用C++去写,但是C++开发效率太低。任何我们开发的可视化内部用WebGL去写都实现,或者部分实现、类似实现了three.js的功能。除了three.js还有很多框架,Stack.gl和PhiloGL等更加原生态的库也不错。

007.png

合作媒体THANKS

数邦客镝次元数据实验室、大数据深度分析、灯塔大数据和数据客,再次表示感谢!

标签:

责任编辑:admin
在线客服