我国空气污染问题日趋严重, 对资源、环境、人民生活以及社会经济带来巨大的冲击。有报告显示, 中国最大的500个城市中, 只有不到1%的城市达到世界卫生组织推荐的空气质量标准; 与此同时, 世界上污染最严重的10个城市有7个在中国。因此, 搜集、统计我国各个城市的历史和实时空气质量数据, 分析、对比各个地区的空气质量, 认识各个地区的空气污染特征和分布规律, 已经成为非常紧迫的任务。
空气污染已成为人们最关注问题, 虽然可通过网络实时查询某些空气质量信息, 或查询一个月内的空气质量参数随时间的变化, 但是缺乏将历年的空气污染数据以及今年的空气污染数据进行对比可视化展示, 无法全面掌握各地区空气污染治理情况; 缺乏将排名信息可视化展示, 无法提供更好的服务; 缺乏将一段时间内影响空气质量的各参数信息在同一图表中可视化展示, 无法对比分析各参数对空气质量的贡献变化关系, 从而无法将我国空气污染分布规律进行可视化展示。
本文利用大数据可视化技术, 实现了我国空气质量信息的实时查询、各城市空气污染情况的对比、各城市空气污染状况排名、一段时间内各参数对空气质量的贡献变化关系, 以及各城市空气污染随时间的变化趋势。
1 相关工作现有的网站平台可实时查询空气信息, 但其信息基本上都是以数据列表的形式呈现, 缺乏动态、立体、可交互的可视化展示。例如,
1) AirNow是美国一家专门提供空气质量索引(AQI)的知名网站[1]。它提供空气质量数据和其对人体健康的影响, 并且帮助人们根据不同的空气质量, 做出有益于健康的行为;
2) UK Air Quality Archive[2]和AirParif[3]分别是英国和法国的权威空气质量查询展示平台。
3) PM25.in是一个提供空气质量监测数据的网站, 数据来源于我国国家环境保护部[4];
4) 中国天气网是中国气象局以公益性为基础的气象服务门户网站[5], 由中国气象局公共气象服务中心主办, 并进行具体开发、运行及维护, 在发布气象信息、服务防灾减灾等方面始终保持国内业界的领先地位;
屈华民等人对香港空气污染问题进行分析和可视化[6]。目前研究成果缺乏空气质量的多元化可视化展示, 为满足我国普通人群、环境部门专业人士、城市建设决策部门对空气污染特征和分布规律的深刻认识, 在现有研究成果的基础上[6-12], 论文结合大量空气质量信息的数据, 以交互、多元化方式实现我国各个时间段、各个城市的空气质量和分布规律的可视化。
2 空气污染特征和分布规律的可视 2.1 数据信息论文从互联网收集的数据信息包括空气污染数据参数和城市相关参数。
2.1.1 空气污染数据参数为确定空气污染数据来源, 对比分析多个空气质量数据网站, 论文选择www.pm25.in(空气质量发布网站[4], 该网站提供各污染物含量数据信息, 网页上的原始数据来源于国家环境保护部, 每两小时更新一次, 数据较新且准确。)网站获取相关空气质量信息, 选择webservice接口获取城市相关风力风向数据。论文获取的空气污染数据的具体参数信息及示例数据如表 1所示。
| 参数名 | 单位 | 示例数据 |
| 风力 | 方位 | 东南风 |
| 风向 | —— | 3级 |
| AQI | —— | 201 |
| 空气质量指数 | —— | 重度污染 |
| 首要污染物 | —— | PM2.5 |
| PM2.5 | ug/m3 | 151 |
| PM10 | ug/m3 | 200 |
| CO | mg/m3 | 3.6 |
| NO2 | ug/m3 | 117 |
| O3/1h | ug/m3 | 46 |
| O3/8h | ug/m3 | 17 |
| SO2 | ug/m3 | 122 |
空气污染可能受到城市所处的地理位置、人口密集程度以及人口数量的影响, 论文还收集了城市相关数据信息, 如表 2所示。
基于Eclipse开发环境与HBase分布式数据库, 结合Java开发语言与网络爬虫技术, 设计并实现城市空气污染数据定时抓取的辅助工具, 每两小时从www.pm25.in抓取空气质量数据信息, 并保持数据抓取更新与网站更新一致。
辅助工具实现的具体功能包括获取所需监测城市链接、获取对应城市页面数据、解析页面数据信息以及将解析得到的数据信息存入项目数据库。GetPage向服务器发送每个城市对应的链接, 获取相应城市页面数据, 数据流向Parse解析页面信息, 通过HBaseDAO将解析得到的数据信息存入数据库中。抓取空气数据的具体数据流程如图 1所示。
|
| 图 1 数据获取辅助工具数据流程图 |
图 1中各个图形标示的具体含义描述如下:
1) Internet服务器:接收工具发送的请求并将反馈数据返回给工具;
2) GetCityUrl类:发送获取城市链接请求、接收服务器返回的消息并将获取城市链接的结果存到File文件中;
3) File文件:存储监测城市相应的链接信息;
4) GetPage类:发送页面请求信息、接收服务器返回数据信息并将返回信息传递到Parse页面解析类中;
5) Parse类:接收城市页面信息、将解析后的数据信息传递到HBaseDAO类中;
6) HBaseDAO类:将解析后的信息存储到数据库中;
7) HBase数据库:存储项目所需的数据信息。
2.2.2 城市相关信息参数论文将城市信息通过互联网查询、搜集、归纳处理并存储在本地文件中, 相关文件的示例存储信息如表 3所示。
| 城市 | 省份 | 经度 | 纬度 | 人口 |
| 北京 | 北京 | 116.353 81 | 39.942 789 | 2 151.6万 |
| 西安 | 陕西 | 108.939 77 | 34.341 575 | 846.78万 |
| 重庆 | 重庆 | 106.551 55 | 29.563 009 | 2 991.4万 |
结合Html5、JavaScript编程语言和D3编程接口, 将各空气污染参数的城市排名进行可视化, 能够让用户迅速地捕捉到个城市的排名信息, 并允许用户基于空气质量参数选择最优排名与最差排名方式; 实现交互式优化与视觉反馈, 如图 2所示。
|
| 图 2 城市空气污染的排名 |
图 2中一共有9列数据项, 分别为:
1) Rank表示所在城市的空气排名数;
2) city表示所在城市的名称;
3) AQI表示该城市的空气质量指数AQI值;
4) PM2.5表示该城市空气细颗粒物;
5) PM10表示该城市的可吸入颗粒物;
6) SO2表示该城市的SO2值;
7) CO表示该城市的CO值;
8) NO2表示该城市的NO2值;
9) O3表示该城市的臭氧值。
3)~9)每个数据项中条形占整个大条形的比例是该空气质量参数实际占该参数最大值的比例。
2.3.2 各城市空气污染各参数信息可视化1) 城市各参数信息随时间的变化
可视化城市各参数信息随时间对比变化, 包括城市一天内各空气质量信息可视化及交互、城市一个月内所有空气质量参数随时间变化可视化以及城市一年内所有空气质量参数可视化。
图 3展示了该城市一天内或者一个月内空气质量信息随时间变化趋势。该图共有9行, 除第一行属于信息栏以外, 其他每一行都分别展示了该城市一天内各空气质量参数信息。条形图的水平轴为时间轴, 表示一天的24 h或一个月的30 d。竖直轴为参数值的轴, 图中的条形图所占竖直方向上的比例越大, 该参数就越大。
|
| 图 3 某城市一天或一月中各参数的变化 |
该类可视化设计方案可以进一步通过颜色对比条, 对不同参数取值范围和大小进行区分, 随着颜色的渐变, 相应参数的取值依次变大。
图 4展示了一年内各空气污染参数的可视化信息。其中, 每一条竖线代表一个空气质量参数的轴; 每一条折线与各个数轴相交的值代表该城市某时刻的空气质量参数值。
|
| 图 4 某城市一年中各参数的变化 |
该类可视化设计方案可以进一步通过颜色对比条, 对不同参数取值范围和大小进行区分, 随着颜色的渐变, 相应参数的取值依次变大, 例如, AQI下限值为0, 线条颜色设置为蓝色, AQI值为上限值为500, 线条颜色设置为红色。
2) 城市各监测点的参数信息随时间的变化
可视化展示城市每个空气质量参数随时间的变化趋势, 包括将城市一天内某个特定空气质量参数在各个城市监测点可视化、城市一个月内某空气质量参数在各个监测点随时间变化的可视化以及城市一年内某空气质量参数在各个监测点随时间变化的可视化。
城市某空气质量参数在各个监测点随时间变化趋势的可视化方法:水平轴以h/d为单位作为时间轴; 竖直轴以数字为单位作为数值轴; 图中的每一个线条代表该监测城市的某一个监测点。
该类设计方案中可以进一步采用线条的颜色区分不同的监测点, 以便于用户区分查看。
2.3.3 城市之间空气污染信息对比显示1) 多个城市实时空气质量指数AQI地图对比可视化展示
位于不同地理位置城市的实时AQI数据对比结果图能够为地理位置是否是影响空气质量的参数提供一定的参考依据。
图 5实时展示了国内不同地区的AQI信息。该图形通过采用各个省市或直辖市的实时AQI值对地图进行染色。
|
| 图 5 AQI数值地图对比实现结果 |
在该类可视化设计方案中, 每一个省或者直辖市可以用一种彩色图形代表, 颜色从蓝色到红色分别对应AQI值的范围0~500, 实现实时AQI数值地图的对比显示。
2) 多个城市实时空气质量指数AQI竖直条形图对比可视化展示
图 6将AQI实时数据用另一种可视化方式展示出来, 与地图形成互补、对比, 为用户提供多样化的展示方式, 便于对比并发现城市之间的空气质量指数AQI的差异。其中, 竖直的线段代表 32个监测省会城市的序数轴, 每一个水平条形图代表一个AQI值, 条形图长度所占水平方向的比例代表实际的AQI值占AQI值的上限值500的比例。
|
| 图 6 AQI数值竖直条形图对比 |
在该类可视化设计方案中, 每一个水平条形图可以用彩色表示, 颜色从蓝色到红色分别对应AQI值的范围0~500, 实现实时AQI数值的对比显示。
3) 多个城市实时空气质量指数AQI与城市人口数量对比可视化展示
图 7通过条形图展示了AQI与人口数量的对比信息, 使用户能够从可视化图形对比并发现城市人口数量与空气质量指数AQI之间的潜在联系。横轴为展示城市的无序数轴; 竖轴条形图的高度代表AQI值的大小, 条形图的颜色从蓝色到红色分别对应城市人口数量从0到最大值。当鼠标悬停在条形图上时, 弹出提示框, 显示具体城市人口数量信息与城市信息。
|
| 图 7 AQI与人口数量的关系示意图1 |
图 8通过散点图对比展示城市人口数量与AQI数值的关系。其中, 横轴为展示城市的无序数轴, 竖轴为展示AQI大小的数值轴。每个圆代表各城市实时AQI值与城市人口数量的对比关系。圆的大小表示城市AQI数值的高低。圆越大, AQI值越高, 当鼠标悬停在圆上, 弹出提示框, 显示具体城市人口数量信息与城市信息。
|
| 图 8 AQI与人口数量对比示意图2 |
在该类可视化设计方案中, 可以用圆的不同颜色对人口的数量大小以及圆的大小对城市AQI值大小进行进一步区分, 可视化AQI数值与人口的关系, 例如, 从蓝色到红色代表城市人口数量从0~3 000万; 从0~5像素的圆半径代表城市AQI值从0~500。
4) 多个城市一天内或一个月内空气质量指数AQI随时间对比可视化
该类可视化使用户能够掌握该天或月内各个城市的空气质量情况, 并且能够使用户通过对比图形发现在同一天各个城市间空气质量的差异。图 9中, 水平的有向直线代表城市序数轴, 竖直的有向直线代表时间轴, 时间轴的长度为一天(一个月)。每一个小方块代表某城市某时刻下的AQI值。
|
| 图 9 当天(一个月)城市对比展示 |
在该类可视化设计方案中, 可以用小方块的不同颜色对AQI值进行区分, 例如, 从蓝色到红色, 分别对应AQI值的范围0~500。
2.4 可视化平台的开发论文开发的可视化平台VisibleAir的功能如图 10所示, 分为界面、可视化、数据等3个模块。其中, 界面模块包含了首页、排名情况、数据分析、地图定位、联系我们共5个子模块。可视化模块包含城市空气污染排名可视化、城市内空气质量信息可视化、城市间空气质量对比可视化等3个子模块。数据模块包含了数据库构建和辅助工具开发等2个子模块。数据库构建主要用于确认数据源并设计该数据在数据库中的逻辑存储形式, 辅助工具获取数据信息并存储到相应的数据库中。
|
| 图 10 可视化平台的功能示意图 |
论文成果可以实现城市空气污染排名、各城市空气污染实时显示各参数信息以及城市之间空气污染信息对比的可视化展示, 对城市污染控制、规划与建设有一定的参考价值。后续可以从下述2个方面开展进一步的研究工作:
1) 存储:研究并采用云存储的方式, 将数据部署到云上, 从而保证数据信息的完整性。
2) 空气质量预测方面:借鉴先进的预测模型, 研究空气质量预测模型, 实现空气质量在一段时间内预测, 从而向用户提供未来空气质量预测服务。
| [1] | Office of Air Quality Planning and Standards. AirNow[EB/OL]. (2014-10-17)[2017-10-01]. www.airnow.gov |
| [2] | Ricardo Energy & Environment. UK-Air[EB/OL]. (2012-03-10)[2017-10-01]. https://uk-air.defra.gov.uk/ |
| [3] | AirParif Organization. AirParif[EB/OL]. (1996-12-30)[2017-10-01]. https://www.airparif.asso.fr/en/ |
| [4] | BestApp工作室. 城市可入肺颗粒物实时监测网站[EB/OL]. (2012-03-01)[2017-10-01]. http://pm25.in/ |
| [5] | 中国气象局公共气象服务中心. 中国天气网[EB/OL]. (2008-06-10)[2017-10-01]. http://www.weather.com.cn/ |
| [6] | Qu Huamin, Chan Wingyi, Xu Anbang, et al. Visual Analysis of The Air Pollution Problem in Hong Kong[J]. IEEE Trans on Visualization and Computer Graphics, 2007, 13(6): 1408-1415. DOI:10.1109/TVCG.2007.70523 |
| [7] | Samuel Gratzl, Alexander Lex, Nils Gehlenborg, et al. LineUp:Visual Analysis of Multi-Attribute Rankings[J]. IEEE Trans on Visualization and Computer Graphics, 2013, 19(12): 2277-2286. DOI:10.1109/TVCG.2013.173 |
| [8] | Wu Yanhong, Pitipornvivat Naveen, Zhao Jian, et al. egoSlider:Visual Analysis of Egocentric Network Evolution[J]. IEEE Trans on Visualization & Computer Graphics, 2015, 22(1): 260-9. |
| [9] | Shi Conglei, Cui Weiwei, Liu Shixia, et al. RankExplorer:Visualization of Ranking Changes in Large Time Series Data[J]. IEEE Trans on Vis Comput Graph, 2012, 18(12): 2669-2678. DOI:10.1109/TVCG.2012.253 |
| [10] |
张运良, 张兆锋, 张晓丹, 等. 使用D3.js的知识组织系统Web动态交互可视化功能实现[J]. 现代图书情报技术, 2013, 29(7): 127-131.
Zhang Yunliang, Zhang Zhaofeng, Zhang Xiaodan, et al. Web Dynamic Interactive Visualization of Knowledge Organization Systems with D3. js[J]. New Technology of Library and Information Service, 2013, 29(7): 127-131. DOI:10.11925/infotech.1003-3513.2013.07-08.19 (in Chinese) |
| [11] | Zhou Hong, Xu Panpan, Ming Zhong, et al. Parallel Coordinates with Data Labels[C]//International Symposium on Visual Information Communication and Interaction, 2014:49-57 |
| [12] | Xu Panpan, Du Fan, Cao Nan, et al. Visual Analysis of Set Relations in a Graph[J]. Computer Graphics Forum, 2013, 32: 61-70. |
