数据可视化两大流派
作为阿里巴巴的阿里云datav团队可视化工程师,我所在团队从事数据产品(数据魔方、淘宝指数等)和数据可视化展示。大家对数据可视化的理解各有不同,我认为大致分为两个流派。
一个是使用工具,核心注重表现效果,或得到结果的速度;另一个看重开发,核心注重产品。前者相对应如新闻行业与设计师,他们更在意美化,以及数据分析师通过R、SPSS、Tableau、excel等得出结论。如果把数据可视化看成工具,目前它仍有巨大的优化空间。而注重产品的我们,往往聚焦项目针对场景优化,做该场景最合适的数据可视化,对产品定制开发。
整个数据产业从数据的埋点采集、海量的运算、机器学习、数据挖掘以及前端数据产品思维,再到数据可视化呈现有很长的链路要走,所以我们称数据可视化为“大数据的最后一公里”。而这“最后一公里”往往没有尽头,因为方便好用的开源类库后面是长达几年的迭代,并不是每个人都需要专研底层,也不是每个人都需要标新立异。
数据可视化未来的发展方向应该是数据分析,而不仅仅是酷炫。它应该切实解答企业在核心业务层中遇到的问题,驱动企业发展,从而让企业在图表中收获决策的思路。
因此我比较看好数据分析,作为一个可视化工程师可以考虑向后延伸,了解中间层,学些数据库。例如:MongoDB、MySQL、Postgres,选择性学习Hive、Hadoop、Spark,因为这些在云服务中都会有相应的体现,如Hadoop对标阿里云的MaxCompute。未来也许是云服务更加盛行的时代,美国不少上市或将上市企业,都将自己的数据存储和计算放在亚马逊云上,也许国内的企业也会加强这种信任。你可能是个低频用户,自己搭建又非常耗时,不如使用云服务。因此掌握云服务是门强有力的技能。
阿里可视化“牛”在哪儿
① “双十一”淘宝交易飞线路径 ② 北京三维物流交易模拟
去年天猫“双十一”媒体接待大厅,屏幕实时呈现淘宝一天交易量的数据变化。比如用精简的飞线代表全球正在进行的若干笔交易,不同颜色代表不同交易类型。去年我们做飞线比前年快了100倍,能保证6000条飞线顺畅飞行,这中间用WebGL绘图、合并,再做些错觉使其看起来像分开的。
为什么要使用WebGL?数据可视化有两个方向,分析型可视化以结论优先,它未必要漂亮但是需要有结论产生,之中会有一些需求,比如大量绘制点以观察分布的Pattern;另一种就是追求酷炫。而WebGL在这两点上都有优势,比如帮助海量数据可视化分析,又能做3D呈现酷炫效果。
大家喜欢看国际化的可视化场景,比如淘宝跟世界上200多个国家之间的交易。而技术人员最大挑战在于深入城市的细节,把握更实时、准确、精密的城市场景。所以往年的飞线图是以抛物线的方式在地球上进行飞行,而我们做了项实时交易的模拟:未来几天货品流向收货地的物流路径。怎么实现呢?通过海量数据统计,将地址合并在离线平台计算,也就是在MaxCompute(原名ODPS)里做函数。
随后我们做了些细节优化,比如外省地址合并到省会城市,把城市视野范围内以外的线切掉,把整个路径做简化,当相邻的三个点夹角接近180度的时候,把它打成一条直线。最终呈现的结果就是模拟四大城市在二维平面上进行的物流交易。
而北京市,我们做了三维城市的模拟,选择北京是因为这座城市有大量低矮的建筑适合做优化,我们把两三层以下的楼房拍平,这样就减少了70%到80%的webGL存储。
地理底图的选择之道
谈到地理可视化,大家通常会问呈现的可视化底图从哪来?数据可视化所用的地图与谷歌地图不同。谷歌地图起到导航作用,核心目标在于展现丰富多层次的地理数据。对数据可视化工程师而言,地理就像柱状图的坐标系那样起到辅助作用,它要呈现经济数据、人文数据在地理上的分布,所以地图得百搭、低调、美观、简单。
2014年阿里收购高德地图,团队与高德合作生成定制版底图,使用OpenStreetMap的地理数据下载到本地,用TileMill、CartoCSS等软件生成草图。地图和我们写网页很像,网页有ID 等要素,地理地图也有地面、河流、房屋、道路标志,针对不同要素在不同缩放等级下配边线颜色、填充颜色、边线的粗细、填充的材质等特性,再在TileMill里通过CartoCSS呈现,尤其是颜色函数。我们把每套颜色分成四个常用图层,并用9种颜色控制一套风格,降低工程难度。
热力图的两大Bug
再解答常被忽视的问题,我们都知道热力图,简而言之它把二维空间转化成颜色形式,数据变化决定颜色变化。热力图虽酷炫但有很多问题。
你看到颜色变化,但不知道相对应的颜色代表值,即便在右下角做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等更加原生态的库也不错。
合作媒体THANKS
数邦客、镝次元数据实验室、大数据深度分析、灯塔大数据和数据客,再次表示感谢!