可视化是啥

有人说，数据可视化这名太装逼。

不过广义上，可视化无处不在, 打开浏览器, 网站就是个数据可视化, 背后是数据库密密麻麻的数据表, 到了你的浏览器就是浅显易懂的页面。

淘宝是商品的可视化, 上面有价格、发货地种种过滤器, 微信是实时数据的可视化, 围起了你的社交网络, 让你一眼看到最新的消息流。

舆论有时候会制造一些新的名词 大数据、 o2o、云计算, 也包括数据可视化, 但看起来日新月异的变化背后, 是我们的认识稳定而缓慢的变化, 真正改变三观的创新其实不多。

小学的教科书里就有折线图, 后来有了excel可以在电脑里画, 这几年你打开某某大数据产品, 长得还是差不多, 只是点一下会有交互存在。

狭义上的数据可视化, 更多是纯图形去代表数据, 也有很多分类, 不过也许你也懒得了解了。

功能与形式

有时, 数据可视化给人的感受是『 我操 真tm牛逼 』

然后, 然后就没有然后了…

也有人说, 『你丫就一美工, 有啥用类』

虽然我们（阿里云数据可视化组datav）工作也经常做show为主的可视化, 但长期而言, 可视化最好是一种有用的东西。

快速的解读

天下武功, 唯快不破, 可视化让人一眼发现趋势。

心理学家说, 人脑70%的神经信号来自视觉, 我们的视觉系统最完善, 而不同的感官之间, 多少是可以转化的, 而且是每个人的天性。

这是道德经的一段(深度装逼)：

『 有无相生, 难易相成, 长短相形, 高下相倾 』

这句话朗朗上口, 背后多少是个感官的映射：

很多感官是强绑定的, 有、长、高都是正向的, 无、短、下都是负向的, 想想平时说的话, 内心强大、 影响深远、信念坚定、强和大, 深和远, 坚固(硬度高)和稳定(质量大), 都是我们不经意之间对通感进行了绑定。

而不同的感官获取的速度和效率是不一样的, 面对一张密密麻麻的数据表, 你可能很难判断最大的数字在哪里, 但你给加个颜色就一目了然:

哪里最大, 哪里最小, 趋势怎样。

如果我们把数据信号转化成感觉, 你看上面的表格的时候, 你先认知了表格的数字, 再转化成数字信号, 远不如看颜色一目了然。

这点很像GPU和CPU的关系, GPU处理图形超快, 但处理逻辑多的任务就歇菜了, CPU可以处理复杂的任务, 但复杂的画图就累瘫了, 存在意味着合理, 合理意味着该用啥就用啥。

人脑就是有些奇怪的特性, 比如一句话三四个逻辑可能就把你考倒了, 一篇很长的文章你也背不下来, 凭这两点, 你轻松地就被电脑秒杀了, 但有时候你的反应能力比电脑都强, 比如视觉, 你一眼就认出了隔壁家老王就是老王, 电脑却很难。

人的视觉能力强大, 导致了我们通过视觉去感觉数据比直接看数据更快速, 一眼看到趋势。

不觉得你宝贵的生命, 不该浪费在看数字上么？

世界的切片（语言/摄影/数据可视化）

映射只是个细节, 摆在你面前一个很大的数据集, 我们如何去设计可视化？

人的思维有穷有尽, 你很难想象四维空间的方体如何旋转, 也很难理解月球绕着地球的同时地球又绕着太阳转最终留下了怎样的曲线, 你同样难于理解一句逻辑很长的句子, 比如, 上海徐汇区20年房龄以上的房子在去年3月的房价增长率比上海平均房价增长率快了多少。你也许很快理解了这句话, 但再增加几个维度理解就难了。

大脑就像管道, 当信息管涌的时候, 入口就会堵上, 因此我们理解的能力, 在维度和逻辑的增加里变得迟钝。

拿语言对比数据可视化。我们说话或者写文章, 都有停顿, 每个句子都不长, 整个文章按照章节段落句子在时间上拆成长长的流水线, 每次只讲一点点,  按照程序界的黑话就是『以时间换空间』, 大脑这个CPU反应慢, 不过没关系, 任务排队, 花点时间多反应一会也能想明白问题。

比如 你不会这样介绍自己, 而是用逗号切成小短句：

『  我是一个来自于有上有天堂下有苏杭美誉的杭州市辖区内唯一民用飞机场的萧山市市中心的因为北宋隐士而得名的萧然山下一家有五十年历史的国有企业的厂办小学毕业的后来去了上海读书然后工作然后转行的数据可视化工程师。』

因为每个事物都有很多特点, 也就是数据维度多, 反映到数据库就是字段非常多, 而且你一句话说不清楚, 你必须把他们切成片段。

多少, 今天我们不缺数据, 但如何通过海量的数据, 描述你的观点和解读, 解答你的问题和疑惑, 指导你的行动和决策？

弱水三千, 只取一瓢, 做一个可视化和说一句话, 拍一张照片一样, 选择几个维度, 表达一个观点, 寻找一个角度, 捕捉一个瞬间。

然而可视化和说话一样, 有角度的可视化就是不全面的, 面面俱到就是什么都没说, 并不存在一种解决所有问题的数据可视化, 不同的角度就有不同的答案, 千人千面。

这让我想起了《巴赫, 哥德尔, 埃舍尔 集异璧之大成》的封面, 光通过了一个三维物体, 投影在三面墙上, 每一个切片里都是不一样的字母：

低维度的思维注定我们只能理解三个平面字母, 却无法一次性理解那个高维度的整体。

一个小例子

你买房了, 目的是投资有回报, 你问：

『  去年上海房价哪里涨幅最大  』

这句话包含4个维度（时间, 地点, 板块, 涨幅）。

我以图作答, 把去年的增长率做个计算, 画在图上就一目了然, 可是去年上海房价普涨, 上海上下一片红。

我也知道整个上海涨的快, 这个图有什么软用？

不要紧, 我们改一改, 那就把20% 作为分界, 增长超过20%的标红色, 超过越多则越大, 不足的标记成蓝色, 不足越多则越大。

涨的快的, 跌的凶的, 图里就看的清楚。

交互上还可以优化一下, 比如点击一下我就看得到详情, 点下详情我进的到原始链接, 看看这数据tm是不是假的, 非常满足本人的好奇心。

回到现状, 你看大部分房产网站都有地图找房的功能, 但我并不在意每个区在卖多少房子, 我的问题是我要买的房子在哪里, 我还希望上能查看房价趋势变化, 然后找到我要看的区域放大, 然后查看明细信息, 比如单个小区的容积率、绿化率、建设年代等等。

精确性

可视化也出来很多年了, 有时候我问自己, 做来做去那么点东西, 你tm有进步么…

不过, 进步还是有点的, 更高的渲染性能, 更丰富的交互特性, 但更重要的是, 更精确了,  我觉得这很重要。

说一个小case,  许多人都喜欢这样的热力图, 据说看着特别大数据：

此刻, 我脸上写满了懵逼般的茫然, 五颜六色真的能把分析包装的高大上吗?

我的理由, 并不是因为5年前这种展现就很流行, 太老太过时, 而是有切实存在的2个问题:

1、 我要的是定量分析, 而不是定性分析。

这种热力图, 可以定性的分布情况, 但确实不能确定红橙黄绿青蓝紫到底代表多少的数值, 我鼠标所在的某个区域, 究竟有多少热度, 我也不知道我鼠标100米范围内具体有哪些明细的数据。

2、 有很多图, 用热力图画是完全不准确的。

有兴趣的同学, 可以翻翻这种热力图的代表, heatmap.js的源码, 

https://github.com/pa7/heatmap.js/tree/master

大致的意思是, 如果有一个数据点, 就在地图上画上一个从周边到中心透明度增加的圆点, 数据遍历完了, 生成一张透明度不一的图, 最后统一按照透明度进行着色。

所以, 点密集的地方会非常高亮, 因为很多点互相叠加, 不算怎么说, 你用这种图去表现人流、gps定位数大致是合适的, 每个点大小一致, 大家就pk一下数量。

但很多场景是不合适的, 比如你用热力图表现世界各国的交易, 用点的大小表现交易量, 美国就要吃亏, 因为欧洲国家小而密集, 汇聚在一起非常亮眼, 美国、俄罗斯、中国都是泱泱大国, 一个国家只有一个点。

更不合理的是房价, 我看到有人用这种热力图去做房价分析, 这个结果是错误的, 和欧洲和美国道理一样, 小区密集的地方显得很亮, 并不仅仅是因为数值大就发亮。

解决

如要判断一个城市各个区域的房价, 不如用这种方式去展现 (剧透下我大帝都的房价哈哈哈)

我把地图切分成小块, 计算里面的房屋均价, 然后去着色, 那我们看的比较清楚。

再细一步, 我的可视化组件可以自由地定义怎么为数据取平均, 为什么？

我六边形的格子里有2个小区, 一个卖10w, 一个卖1w, 当你考察六边形地块的价值的话, 是5.5w/平吗？

显然, 这个地块的房屋均价是接近10w的, 你应该为面积进行加权：

地块均价 = (小区1面积 小区1均价 +  小区2面积 小区2均价)  /  (小区1面积 + 小区2面积)

组件应该考虑到这一点。

毕竟,  做数据分析

美观是锦上添花的, 准确是雪中送炭的。

作为一家高端IT人才在线实训平台，大讲台提供全方位的大数据培训服务，不仅包括Hadoop培训、Spark培训，还包括大数据分析、大数据可视化就业特训营，让数据分析工作不仅准确而且美观！

作者：周宁奕