在处理数据的过程中,如何“优雅”的展示这些数据一直是一个重要的技巧。而为基于地理坐标为数据打点更是一个重要的技能。在过去,我们的常见的做法是通过诸如 Stata、R、或者是 Python 这些工具来进行这一步的。而这些方法无一例外,都需要对一定的编程技巧。此次我们介绍的数据可视化工具,可以让你不需要任何编程基础,即可实现数据地图的可视化!
一、简介
Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.
Kepler.gl 是一个图形化的数据可视化工具,基于 Uber 的大数据可视化开源项目 deck.gl 创建的 demo app。
Github项目地址:https://github.com/keplergl/kepler.gl/
Kepler支持的数据格式
Kepler.gl 支持 3 种数据格式,分别是:CSV、JSON、GeoJSON 。部分地图种类只支持 GeoJSON 格式的数据。
1. 关于 CSV 文件
CSV 是常见的数据格式。它通过分隔符的形式,以存文本的储存数据。我们常用的 Excel 默认保存的是 xlsx 格式或者 xlsxs 格式,可以通过另存为的方式保存为 CSV 文件。
![fe8b28b870e50c826d663405480e6ed1.png](https://i-blog.csdnimg.cn/blog_migrate/7d2a392e38f769bdb76e0dd217fe72f0.png)
关于在 Kepler.gl 中使用 CSV 文件,这里还需要说明一下:
Kepler.gl 目前对中文支持并不那么好,所以变量名称最好用英文,不然在显示时会乱码。导致自己都不知道这组数据是哪个变量。
Kepler.gl 的地理信息即经纬度信息需要经度一个组,纬度一个组。并且,Kepler.gl 能够自动识别经纬度信息,不过需要你在给经纬度命名时采用:_lat 和 _lng 或者 _latitude 和 _longitude,或者 _lat and _lon。其中是自选的变量名称。
关于 CSV 文件的更多说明,可参加官方文档的内容:https://github.com/keplergl/kepler.gl/blob/master/docs/user-guides/b-kepler-gl-workflow/a-add-data-to-the-map.md
2. 关于 JSON 文件
JSON 格式是常见的用于数据传输的文件格式。语言描述容易显得太过复杂,我们举一个简单的例子(一看就会的那种):
一份 JSON 格式文件内的内容是这样的:
{
"people": [
{
"firstName": "王",
"lastName": "小明"
},
{
"firstName": "陈",
"lastName": "小红"
}
]
}
那么它其实可以分为:
![5ce50f6fe5bb291c8be91439753a5523.png](https://i-blog.csdnimg.cn/blog_migrate/076f6f40b7c68a77f569f67fad88ef35.png)
这么看,大概有些人已经猜到了,其实这个数据列成表格就是这样的:
![836adb3bd5a885ab92a0070f8b64641b.png](https://i-blog.csdnimg.cn/blog_migrate/96fb55dab9322b715177858dca5573eb.png)
这就是JSON 格式文件所实现的功能。可以简单的理解为将“一个表格的数据,用文字表述”。在一些情况下,你也可用使用 JSON 格式数据。但其实更多情况下,需要使用的是 CSV 或者 GeoJSON,这里介绍了 JSON 那么下文中 GeoJSON 的内容就更容易理解。
2. 关于 GeoJSON 文件
而 GeoJSON 是常见的一种地理信息的文件格式,在原有的 JSON 格式基础上,添加了地理信息相关的内容。如何添加的呢?就是基于大家约定俗成的规范,然后声明地理位置信息。其实 GeoJSON 是 JSON 的一个子集。基本的语法结构上,两者其实是一样的,都是一个 Key 对应一个 Value 。但是不同点在于,GeoJSON 通过特定的 key 来确定特定类型、特点功能的 Value。
为了理解 GeoJSON ,我们来看一个实例:
"type": "Feature",
"properties": {
"adcode": 110000,
"name": "北京市",
"center": [
116.405285,
39.904989
],
"centroid": [
116.41989,
40.189913
],
"childrenNum": 16,
"level": "province",
"subFeatureIndex": 0,
"acroutes": [
100000
],
"parent": {
"adcode": 100000
}
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [...(篇幅限制,省略)...
]
}
}
这是一份记录北京市信息的GeoJSON文件。首先,我们能够看到,最外层是三个Key:
「type」:type确定的是其下 key 的类型;
「properties」:包含的各种「变量」和「值」。例如案例中:“adcode”,表示邮编,北京为110000;“na me”,表示名称,北京市;“center”为地理中心,经纬度坐标需用\[]包裹住,这样才是完整的一组数据。其他信息也是类似的,这里不再赘述;
「geometry」:则是表示几何信息。几何信息有多种类型,“type”标注了这些信息的种类,具体的主要有以下几种:
- Point 即点图。相当于在地图上画一个点。
- Multipoint 即多点图,用于地图打点,可以包含多个点的集合。
- LineString 即线。相当于在地图上画一条线。
- MultiLineString 同理,多线。
- Polygon 多边形。在地图上用一个多边形围住一个范围。
- MultiPolygon 多组多边形。
- GeometryCollection 几何集合。(相当于多层嵌套)
其中type确定的是其下 key 的类型。 “Feature” 表示 其对象为“特征对象”。“特征对象”必须包含 “properties”和“geometry”两个类型的成员,两者之间并没有顺序的差异。
更多信息可参考:https://zh.wikipedia.org/wiki/GeoJSON
二、上手使用
说了那么多关于数据格式的内容,终于可以一起上手了。如果没有现成的数据需要分析,那么可以先使用 Kapler.gl 提供的 Sample Data 学习一下这款软件如何操作:
![7c4f0146b3d539802095dbaae819646d.png](https://i-blog.csdnimg.cn/blog_migrate/7bd01577b56cd7c4253b18fa12f058c9.png)
网站很贴心的提供了一些数据集,供大家学习上手。其中有诸如加利福尼亚地震数据、2017年美国失业率数据等内容,这些数据都提供下载。其中部分数据采用的是 GeoJSON 格式的数据,可供大家下载学习(就是想做啥图,就把样例中的 GeoJSON 数据下载下来,参考格式在替换上自己的数据?)。
1. 呈现效果
我们选择一了地震数据集来做演示。首先简单介绍一下这个数据:
![5046891e89f4885f3928a99929e10f81.png](https://i-blog.csdnimg.cn/blog_migrate/b9a62fc2b33f7310961ef56aef1b73f3.png)
这个数据集主要包括了时间信息(DataTime)、地理位置信息(Latitude 和 Longitude)、以及其他描述地震的信息(震级、震源深度等)。
所以,这些数据在数据地图中他是如何展示的呢?
Kepler.gl 根据地理位置信息和地震信息标注点的位置和大小颜色。然后更加下方的时间轴范围展示一张图里显示的数量。并且可以根据时间轴“动起来”,效果如下:
![a09bb04334b55f91d839971a7d1152fa.gif](https://i-blog.csdnimg.cn/blog_migrate/e15ae8025ef5bf4217ca65b962941370.gif)
看完了效果,我们大致能够了解 Kepler.gl 能够将数据可视化实现到怎么样的程度(其实每一个案例的呈现都非常优秀)。接着让我看看更为具体的编辑界面吧,这才是我们需要学习的内容。
2.工具栏
Kepler.gl 设置项分为4个工具栏,左其分别是 Layers (图层)、Filters (过滤)、Interaction(交互)、Base map (底层地图)。
![e93a751770c88e78824f77d7c4637087.png](https://i-blog.csdnimg.cn/blog_migrate/d84416702945e663704bb6883f7d85bb.png)
四者的作用可以概括为:
Layers (图层):数据展示的图层, 位于底层地图上面。就是我们导入的数据后,控制样式的图层。
Filters (过滤器):用以过滤数据。例如,上图中时间轴就是一个过滤器,用以过滤时间段,显示相同时间段的数据。
Interaction(交互):即鼠标移动时显示的数据信息。
Base map (底层地图):就是最底层地图样式。有4种样式可选。
1.1 Layers 的设置
首先来看图层的具体设置。图层的概念与常见的图片编辑软件是一样的,例如你可以在底层添加显示地图颜色的图层,在上层添加显示一个光束的图层。分别展示数据大小、流向等信息。
具体来说:
![a61b73de02b4b4f6cf13a05685be8265.png](https://i-blog.csdnimg.cn/blog_migrate/bf6e55349003ec007fb22c5c128278e0.png)
通过添加按钮可以添加多个图层,上面的图层会遮盖下面的图层。可以通过左边的眼睛按钮选择显示或者隐藏图层。
![ff2a5e198676111532055054a5a9751c.png](https://i-blog.csdnimg.cn/blog_migrate/3556fb8ba3c1855987d84aedafbda9e6.png)
鼠标移动到图层横条后可以对其进行排序(按住左边几个小方格点阵,拖拽即可)、重命名或者删除等操作。
点击向下的箭头,可以展开一个图层的具体设置。
![27dafc4b250d2c18628120de79e84dd3.png](https://i-blog.csdnimg.cn/blog_migrate/f22f200f5c3a7c1e185b9bcacde122ac.png)
这里最基本的,选择需要的地图类型(Layer Type / Type):
![568df6e19a3ce27fb5cbbfa9628a709c.png](https://i-blog.csdnimg.cn/blog_migrate/7e00554ac18906b81acfa2f2710ae92f.png)
一共有9+2(H3和3D图)种。每一种地图的类型对于数据要求也不同。例如 Arc 和 Line 图,就需要有两组经纬度坐标,即起止地的坐标。Polygon 就要求使用 geojson 格式的文件。数据格式可以参照前文提到的方法,下载 Sample 数据做参考。本文就以最基础的 Point 点图为例,介绍一下具体的设置项,抛砖引玉方便读者入门。
选择了 Point 后,如果没有自动匹配经纬度,那么需要手动选择经纬度变量:
![1c14c8677ee711e08874c19e9d292186.png](https://i-blog.csdnimg.cn/blog_migrate/4aedb8281d576c60b5793d9c39432141.png)
- lat:纬度 (加\* 为必填项目)
- lng: 经度
- altitude :海拔 (选填项)
接下来是颜色设置,Kepler.gl 提供了丰富的色彩设置选项。首先是有多种组合完成的配色方案可供选择。我们还能够选择最高20种颜色的搭配。
![09c54a5a05ec161adbfa0e4df95e5029.png](https://i-blog.csdnimg.cn/blog_migrate/ba5ce266e49b72a0c8f2fe3c2b4cdc41.png)
- color based on 的选项是决定色彩的变量。例如地震案例中选择 magnitude (级数)来确定颜色。
- color scale 选择颜色的分布形式。有 quantize 和 quantile 两组分布方法。
- opacity 透明度。控制点的透明度。
接着是着色半径,就是控制具体点的大小。太小了容易看不见,太大了容易互相遮挡,所以还是需要适当调整的。
![243e9bbcfba643a15213d96f110a6546.png](https://i-blog.csdnimg.cn/blog_migrate/ba3bfb57ee510fb3f57688cbed866412.png)
- radius range 设置半径范围
- radius based on 半径依据。案例中依然是按照震级来的
- fixed radius to meter 确定到地图实际的米数。就是将点标记到实际地理位置上按比例设置半径。
- draw outline 描边:打开这个按钮会将实色圈变为空心的圈
![02bbd0eca72936d0222cdd90a05cc76b.png](https://i-blog.csdnimg.cn/blog_migrate/769f34b550739640bc8ddd1af8ff957a.png)
- High Precision Rendering 高精度绘图:打开按钮会使得绘图精度更高,也会消耗更多资源。
- enable height 展示高度:部分种类的地图还提供高度选项,这样就能绘制出3D的数据地图了,如图:
![d961db2dfddb61283b800805ed89fe52.png](https://i-blog.csdnimg.cn/blog_migrate/0424284a6f15dac3aab8f8a22e450dce.png)
这是用震源深度最为作为高度的数据地图
1.2 Filters 过滤器的设置
Filters 除了为地图增加时间轴外,更为主要功能还是针对某一变量进行数据的过滤,例如过滤掉浅源的地震:
![9af48abfc3a54e03bcae83dd4eb20287.png](https://i-blog.csdnimg.cn/blog_migrate/0343b26a296a4c27b30180461ba6ef1b.png)
当然,最常见的还是用时间轴过滤器来制作动图效果。
1.3 Interactions 设置交互时显示的信息
![03d6ef83c05e37ce26beab3c94d6c129.png](https://i-blog.csdnimg.cn/blog_migrate/c79f48af7c5fa33174c98976d45e3525.png)
Interactions 其实就是设置鼠标点击时,显示的样式。通过 dataset 中的变量,选择添加显示的内容。
1.4 base map 底层地图样式的设置
最后的 Base map 其实也很简单,选择深色或者浅色主题的底层地图,以及在地图上呈现的内容多少:
![10c226b112a318a97e56a1494dcd36ac.png](https://i-blog.csdnimg.cn/blog_migrate/e2d003fe336aa8a5d2165ece7f67d4e1.png)
最后,如果还有其他问题,可以参考 Kepler.gl 的官方说明文档:https://github.com/uber/kepler.gl/blob/master/docs/a-introduction.md
https://github.com/keplergl/kepler.gl/wiki/Kepler.gl-2019-Roadmap