最近,我收到了麻省理工学院(MIT)的 Senseable City Lab 实验室发来的一个数据可视化职位的面试邀请。这让我感到有些意外,因为虽然我听说过数据可视化,但这个职位要求深入掌握地理信息系统(GIS)数据可视化技术,这是我几乎未曾涉足的领域。随着面试的临近,我越发感觉到我需要一个真正的数据可视化项目,才能让这 15 分钟以有意义的方式度过,至少在面试中能有话可聊。在距离面试不到 24 小时的时候,我决定挑战一下自己,开始快速学习并尝试做出一个简单的项目。

GIS 数据可视化项目最终成果的屏幕截图,通过多彩色编码在交互式数字地图上显示全球人口密度。
GIS 数据可视化项目的核心部分,展示了全球人口密度。

我最终做到了,并在面试中成功展示。面试官 Fábio Duarte 告诉我他非常喜欢这个项目。虽然他们仍希望寻找已经有丰富经验的专业候选人,但我认为这次突破自我的尝试过程对我来说本身就是一个巨大的收获。在职业发展甚至人生旅途中,一定还有无数个这样的时刻——在充满未知的领域做出迅速的反应,而这需要开放的学习心态,以及灵活性和创造力的结合。

学习之旅

由于缺乏相关的背景,我确实不知道从何开始。但我知道我可以通过搜索了解一些特定的知识点,如果连接其中的一些点,就可能形成一张有效的网络。因此,我的学习之旅从搜索开始,试图了解可以做些什么、需要怎么做。同时,我回顾了职位描述中提到的一些关键能力,例如使用 HTML、CSS 和 JavaScript、分析和解释数据、基于地理位置的多边形绘制等,这让我对需要包括的工作步骤有了基本的判断。也正是这些提示,帮助我缩小了选题范围,并提醒我多年前在 Nike AR Map 项目中接触过的 Mapbox,也许我可以以它为载体,来实现数据的可视化。

创建 GIS 数据可视化项目的逐步工作流程,包括研究、浏览数据、预处理和最终可视化。

于是,我勾勒出了最基本的框架,即在寻找数据后,将数据处理为 GeoJSON 格式(关键之处),从而通过将 GeoJSON 提供给 Mapbox GL JS 以呈现数据。但这个过程中一定还存在许多未知的难题,需要逐个解决。

技术实施过程

数据收集

虽然我有几个待定的选题,但我能做什么选题也取决于我是否能找到有效的数据。因此,我首先需要研究我能获取到哪些数据。我检查了 OpenStreetMapNASA EarthdataNOAA,以及 US Census Bureau 等站点,并下载了大量的数据文件(从几 MB 到几 GB 不等)。我发现这些原始数据可能以不同的格式储存,比较常见的就是 Raster 数据文件的 TIFF 格式,除此之外也可能有 Vector 数据文件等。而最终使用哪份数据还需要进一步的处理才能确定。

数据预处理和决策制定

当我直接打开 TIFF 数据文件时,由于文件过于庞大而总是要等很久。随后我意识到可能需要使用专用软件对数据进行处理,并导出为 GeoJSON。进一步的搜索证实了我的猜想,我选择了 QGIS app,因为它是免费的,适合本次探索过程。同时我了解到,在这一步要做的可能包括:

  • 数据清洗(Data cleaning)
  • 格式转换(Format conversion)
  • 裁剪(Cropping)
  • 数据验证(Data verification)

此时这些概念还比较抽象,但是当我尝试载入数据到查看器中并进行处理时,我逐渐能体会到它们的含义。上手实践会让概念变得更鲜活。我尝试对图像进行着色。当图片从黑白变为彩色时,我感觉我正走在对的路上,同时迅速意识到色彩编码的选择应该是有讲究的,颜色需要符合语义。例如,描述 PM2.5 的数据,应当令高值显得像是一种污染或展现出负面特征、令低值看起来是一种较为清新的感觉;而人口密度数据则应当令高值显得像是紧张的、令低值看起来毫无生命力。

QGIS 图层属性的屏幕截图,显示调整数据可视化的最小和最大值以及色带设置。
在 QGIS 中同时调整最小和最大值及色带,以使地理空间数据更具解释性和视觉吸引力。

同时,通过尝试,我发现设定 min/max 范围来排除极端数据,对于数据可视化呈现效果的重要性。

最后就是数据的多边形化(从光栅到矢量)。这是关键的一步,简单来说就是将数据转换为 GeoJSON 格式。在此过程中,唯一需要做的就是等待。

接着,我发现导出的 GeoJSON 文件可能并不小。考虑到我还在尝试,为了将 GeoJSON 控制在较小的范围,以降低后续需要消耗的计算资源,我决定采用 NASA Earthdata 的人口密度数据。这一决定平衡了数据的丰富性和文件的大小。

编码和可视化实施

在获取 Token 后,我编写 JavaScript 来与 MapBox GL JS 交互。为了方便验证 API 是否调用成功,我引入了一个非常简单的 GeoJSON (美国行政区域划分)导入,在成功调用之后替换为刚才生成的 GeoJSON 文件(超过 40 MB)。由于 GeoJSON 数据较为庞大,往往需要等待一段时间,我添加了等待指示器以引导等待。这时我发现,要让数据呈现出在 QGIS 中搭配好的色彩编码,可能需要做更多工作。例如计算数据区间分布、提取颜色组色值等。通过将起始值设为 1000,我可以实现在 QGIS 中排除极端数据的效果。在 Figma 中绘制等宽辅助图形,并用吸管提取分段位置准确的色彩值。

显示用于 GIS 数据可视化的 JavaScript 代码实现的截图,突出显示初始地图设置、加载指示器、数据文件声明和颜色渐变的部分。
突出显示的代码部分用于设置初始地图位置和缩放比例、管理加载指示器、声明 GeoJSON 数据文件和定义颜色渐变。

为了令最终效果更容易被理解,且有更具艺术性的视觉效果,我添加了其他视觉元素,如标题、描述、数据来源和图例。

全球人口密度互动地图中精心排版的标题、描述、数据来源和图例等附加元素。
通过增加标题、描述、数据来源和图例等元素,并采用高对比度的排版和响应式布局,增强背景信息的清晰度和视觉的吸引力。

最终作品

最终的呈现效果是一个静态网页。我不敢相信我成功地将复杂数据可视化地展现在了 Web 界面中。

全球人口密度互动地图在笔记本电脑、平板电脑和智能手机上的显示。

如果有更多的时间,我可能同时引入相关数据如贫困指数和 PM2.5 浓度等,并提供分段式切换按钮或自动播放,以帮助探究不同因素之间是如何互相影响的。

总结与反思

这个项目最终使我能够在网页上展示全球人口密度的分布情况(作为探究空气质量对于疾病影响的其中一项社会经济因素)。这不仅让我增加了基本的 GIS 技能,更重要的是,我学会了如何在极短的时间内踏入一个全新的领域。

在面对未知和挑战时,勇敢地迈出第一步是多么重要!虽然这个过程有着明确的初衷,但我对最终结果并无预期,而只是把它当作一个开放性的尝试。因此,从某种程度上来说,这仍然是一个无目的的尝试过程。我十分享受这样的过程。鼓励尝试、包容失败,对开放性探索来说至关重要。


参考资料

Center for International Earth Science Information Network – CIESIN – Columbia University. (2018). Gridded Population of the World, Version 4 (GPWv4): Population Count, Revision 11 (世界人口网格数据,第 4 版(GPWv4):人口数量,第 11 次修订). Palisades, New York: NASA Socioeconomic Data and Applications Center (SEDAC). 链接. Accessed 05 May 2024. (非官方翻译)

Exploratory. (2016). Estimates of the Resident Population for the US States (美国各州常住人口估算). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

Mapbox. (n.d.). API Reference | Mapbox GL JS | Mapbox (API 参考 | Mapbox GL JS | Mapbox). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

Mapbox. (n.d.). Working with large GeoJSON sources in Mapbox GL JS (在 Mapbox GL JS 中处理大型 GeoJSON 数据源). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

Mapbox. (n.d.). Upload data to Mapbox (上传数据到 Mapbox). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

Mapbox. (2017, December 15). Turn static images into interactive maps (将静态图片转换为互动地图). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

NASA Earthdata. (n.d.). GIS at NASA: Expanding the Understanding of Earth Science (NASA 的 GIS:扩展对地球科学的理解). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

NASA Earthdata. (n.d.). NASA Earthdata (NASA 地球数据). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

National Centers for Environmental Information (NCEI). (n.d.). Data Access | National Centers for Environmental Information (NCEI) (数据访问 | 国家环境信息中心 (NCEI)). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

OpenStreetMap. (n.d.). OpenStreetMap (开放街道地图). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

OpenGISLab. (2018, November 10). Adding and viewing GeoJSON in QGIS and ArcGIS (在 QGIS 和 ArcGIS 中添加和查看 GeoJSON). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

QGIS. (n.d.). Symbology properties (符号属性). In QGIS Documentation (QGIS 文档). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

QGIS. (n.d.). Raster to vector conversion (栅格到矢量转换). In QGIS Documentation (QGIS 文档). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

Sobolevsky, D. (2023, March 15). GeoJSON Tutorial for Beginners (GeoJSON 初学者教程). Medium. Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)

United States Census Bureau. (n.d.). Census Data (人口普查数据). Retrieved from 链接. Accessed 05 May 2024. (非官方翻译)