上微博热搜的蚂蚁金服《中国小店经济热力图》是如何制作的

239天前发布

原创文章 / 多领域 / 教程
好多多多 原创,如需商业用途或转载请与好多多多联系,谢谢配合。

地图可视化

2019 中国小店经济热力图点亮中国,掀起微博热搜,这金光点点的大数据背后是 AntV L7 空间地理数据可视化技术与设计的支持,下面来一探究竟如何快速制作多张经济热力图


微博新闻地址

https://s.weibo.com/weibo?q=%23%E4%B8%AD%E5%9B%BD%E5%B0%8F%E5%BA%97%E7%BB%8F%E6%B5%8E%E7%83%AD%E5%8A%9B%E5%9B%BE%23&from=default


热身知识

2019 中国小店经济热力图实际上是,在一对一映射地理信息位置数据的散点地图基础上,加入了色彩叠加以增强效果的亮点地图。


假设我们有一组这样的小店经济数据


我们先来看单纯用同样尺寸的圆点代表小店 A B C 等 ,并对应地理信息在地图上的分布,给圆点进行数据分层设色,因为这里的数据是定量的权重数值,我们选用连续色板,色相不变,仅进行明度饱和度推移,数据映射如图


大批量数据点进行上图数据映射后的散点图如下,图一,近视角观看散点数据时,可以清晰看到分布疏密,但当视角拉远时,如图二,就会看到堆叠在一起的数据聚集区都只是类似颜色,看不到聚集区里更多的数据分层分布细节,对比不够


图一 近视角


图二 远视角

会发现海量数据下点很小的时候,明度变化基本看不出来,连续色板在这种情况下的映射没有发挥到最大,基本是无效的


伊达千代的《色彩设计的原理》一书中也提到过,“使用相同色相作纯度和明度变化时,假使色彩面积太小,便很难看出其中的区别”


而亮点图正是为海量散点数据运用而生,亮点图的本质在于色彩叠加的增强效果,当视角拉远时,堆叠在一起的圆点会进行色彩的叠加,而叠加产生的结果色其实也是和数据一一映射的


虽然在远视角下,圆点很小其实色彩细节难以分辨,但在整体呈现下就会因色彩细节而呈现出分层效果,色彩叠加处呈现更亮的颜色,就能直观感受到疏密。亮点图区别于散点图的好处就在于,更适合海量空间数据的表达,更适合在远视角下,全局了解数据分布情况,热点情况的同时,感受数据之美,是不是很震撼很美丽


了解了上述的数据可视化过程,下面我们就来看 2019 小店经济热图具体是如何生成,使用了什么神器什么大脑?


神器清单

AntV 专业取色工具,可以直接取到单一连续色板或自定义连续色板  http://preview.alipay.net/color-lab/

Ant Design 取色工具则可以取到邻近色连续色板,让你的色彩更丰富 https://ant.design/docs/spec/colors-cn

L7 在线效果编辑器 https://l7.antv.vision/zh/examples/point/scatter


Step 1  了解你的数据

数据观察,发现什么,要表达什么观点?以网商小店经济数据举例,从表格可以得到这样的信息:每个小店的地理分布以及每个小店的权重,根据上面提到的,用点代表小店,可以看到小店的地图分布,用连续色板映射权重,就能看到土豪在哪里


Step 2  精心挑选一组合适的色板

图形映射通道有非常多,这里我们选用色彩,而色彩数据映射又分为三大类,分类色板、两极色板、连续色板,分类色板一般用于对定性事物的分类描述,两极色板一般是对比色,用在正负值数据,连续色板一般描述连续数值,相较于色相和纯度,人眼可以明显识别明度差异。


首先我们来理解一下色彩叠加,就如 ps、sketch 中的叠加模式一般,亮点图的叠加模式和 sketch 中的 plus lighter 比较接近,我们可以先通过 Sketch 模拟色彩叠加效果,来决定我们应该选取怎样的一组色值



一开始选出的色板出来的效果会发现,聚合数据大部分分布在低值区,高值区数据分布不明显


为了看到更多高值区的数据细节,可以通过色板对数据进行视觉上的过滤,将和地图色对比弱的深色映射数据最小值,和地图色对比强的亮色映射数据最大值


色彩叠加出来的结果色可以让本身看似很暗的颜色都更加亮丽,一番折腾后,发现在色板第四象限选择一个基础色,再取生成一组色板,基本能出来比较理想的效果


下面使用在线取色工具选取一组单色连续色板 http://preview.alipay.net/color-lab/


L7 在线效果编辑生成网址 https://l7.antv.vision/zh/examples/point/dot#normal2

在线代码编辑器中输入你的色值,想要什么色彩一键生成,再也不用熬夜画“星星”了 

像不一样的烟火


像蝴蝶


像蜂鸟


Step 3  分析与后处理

网商银行数据显示,如果把小店每一次有借有还、用于扩大生意的信用贷款,作为代表经营活力的光点,小店正在点亮中国。以广州为例,通过观察数据发现,我们可以得出这样的结论:广州站服饰及皮具批发商圈、上下九步行街美食商圈等商圈的经济热度比较高


为了用户能更清晰看到密集区域,我们增加了类似聚光灯效果,让用户能够更加直观看到热力最强的区域,当聚集的散点覆盖在地图上时,会把底部的地图地标遮挡,可以将比较重要的地标标示出来



当然在做 Step 3 处理的同时,也在思考这么一个问题:地图可视化可视化的是什么,传达精确数据还是只是一个观点或是一种感受即可,为了让信息场景式的高效传播,如果直接给你一份表格,你还会看到这里吗


Step 3 的后处理提供的只是一种思路,而亮点图本身就是这种思路的体现之一,如果后处理可以智能化、工具化,那更是一种福音,但同时也给到我的一个观点,不要过渡依赖工具,当工具无法完全达到我们想要的效果时,就是发挥人类大脑的智慧了~


L7 在线可视化地图编辑器,简直是设计师的福音,解放生产力,还有更多其他酷炫的可视化地图类型可以访问 L7 官网 ,如果你对源码感兴趣,L7 GitHub 欢迎 Star



63
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息