FerryBox是一套自动、持续、多参数的海洋物理、化学、生物要素监测系统, 主要安装于渡轮、货船等固定航线的船只上, 可以对海洋、河流和湖泊等水域进行长期观测^[1]。该系统凭借其优势, 自提出之日起就得到了广泛的关注和应用。早在21世纪初欧洲就开始了FerryBox系统的研究与应用, Petersen等^[2-7]利用该系统在欧洲北海、波罗的海、地中海、大西洋等区域进行了长期水环境观测, 取得了诸多成果; 国内起步较晚, 但也正在不断地进行尝试^[8-9]。FerryBox系统具有采样频率高、可持续性好、覆盖范围广等特点, 因此采集的数据分辨率大, 时效性强, 但同时也导致了系统采集的数据量巨大。针对海量的FerryBox数据, 科研人员通常会将数据进行可视化, 以便直观地进行分析和研究。

利用数据可视化技术展示海洋数据以及更进一步地利用可视化分析技术挖掘时空数据规律, 是建立从感知到认知的关键技术桥梁。随着HTML、JavaScript等Web前端技术的发展, 基于B/S架构的数据可视化方案发展迅速, 涌现了一批优秀的基于JS(JavaScript)的可视化库, 如C3.js、Highcharts.js、Chart.js、ECharts.js等。Web端的数据可视化本质是由数据驱动, 利用JS语言操作HTML元素(Canvas、SVG)进行数据映射的过程。根据不同的数据特点和应用场景, Canvas和SVG元素分别具有不同的表现能力, 大多数基于JS的可视化库仅可操作其中一种HTML元素, 在应对不同需求时不能实现数据可视化的最优表现。而由国内百度前端团队开发的ECharts.js不仅能够同时支持以Canvas和SVG(4.0+)的形式渲染图表, 还可通过增量渲染技术, 配合细节的优化, 展现千万级数据量, 利用对流加载实现数据的渐进式渲染, 提高了可视化效率。同时ECharts.js提供了丰富的交互组件, 可以对数据进行多维度的交互操作, 此外其优秀的视觉映射组件能够将不同维度的数据映射到颜色、大小、透明度等不同的视觉通道, 从而直观地表现数据^[10]。

ECharts.js的诸多特性非常适合进行FerryBox数据的可视化, 本文以ECharts.js为基础, 利用Web前端技术设计并开发了FerryBox水文数据的可视化方案, 实现对FerryBox数据的多角度、多维度、可交互式的观察, 为FerryBox水文数据的可视化提供了新的思路。最后, 作者利用渤海海峡FerryBox水质观测项目数据进行实验并与历史观测数据进行了对比, 对本方案的可行性及有效性进行了验证。

1 FerryBox数据目前的可视化方案

在利用FerryBox数据进行研究的项目里, 研究人员对数据进行可视化, 可以有效地对数据进行分析, 更加直观地观察参数变化, 从而更快更好地把握变化规律、发现异常现象等^[11-12]。

由于FerryBox系统不断地随船移动, 导致系统记录的数据时间和空间同时变化, 这种情况下单独的二维(图 1中a和b)或三维图表(图 1中c和d)很难将数据的变化准确生动地表达清楚。目前常用的参数值随距离变化折线图(图 1a)是把该航次中所有观测值看作同一时间获取, 该方法不考虑时间变化, 对于研究环境要素在较大时间尺度上的变化基本可行, 但从严格意义上来说, 原始数据中并不存在同一时刻在整个航迹上的观测值, 因此该表示方法难以准确地反映真实情况; 参数值随时间变化折线图(图 1b)为以选定点为圆心的有效半径内船舶来回经过时所测得的参数值在该时间段内的变化, 船舶行驶虽有固定航线, 但每次航行都与既定航线有一定偏差, 若有效半径设定过大则不能反映实际情况, 半径太小则范围内的数据很少, 因此该方案具有一定的局限性; 利用颜色映射数值的大小, 表现参数在不同时间和距离变化的平面三维图(图 1c)可以在一定程度上反映实际情况, 但是将地理位置简化为航行距离还是无法准确表现参数在真实地理环境中的变化情况; 而用颜色映射数值大小的航迹图(图 1d)可以直观地表现所测参数在航迹不同位置处的数值大小, 但是其无法表示时间维度, 因此也具有一定的局限性。

虽然目前的FerryBox数据可视化方案基本满足了科研需求, 但是还存在一些不足: ①仅用单一图表无法反映所测参数值在时空中变化的真实情况; ②不同参数分别表示在不同的坐标系中, 不方便直观地观察其相互关系; ③多种可视化方案分别出图, 不能在同一界面联合观察; ④可视化界面无法交互, 不利于数据的多角度观察。

2 基于ECharts.js的可视化方案

针对这些问题设计开发的基于ECharts.js的FerryBox数据可视化方案, 可以方便地选择所需数据, 在统一界面环境下进行可交互的数据多维度表达, 为FerryBox数据提供更加准确、直观的表示方法, 方便科研人员对FerryBox数据所反映的现象进行快速判断, 从而有的放矢地进行更加深入的研究, 其主要架构如图 2所示。

安装于船舶上的FerryBox系统随船自动进行数据采集, 数据经过质量控制后以单次航次为一个数据单元进行保存, 之后通过无线传输或者人工拷贝将数据上传至FTP服务器以供原始数据的下载或可视化前端的调用。用户在界面中选定航线以及单次的航次, 之后选择需要可视化的参数, JS函数索引载入所需数据, 自动进行渐进式渲染, 获得多参数随时间变化图、颜色映射的航迹图和颜色映射的参数时空变化图, 三部分可视化图表在同一界面展示并且相互联动, 用户通过界面操作与图表进行交互实现数据的多维度、多角度观察, 同时还可以通过控件进行图表类型转换、图表下载等操作或者进入数据视图, 将数据按单个或多个参数在整个航线或单个航次上的变化的数据按需导出。

2.1 FerryBox数据可视化界面

可视化界面(图 3)主要分为数据可视化区(红色框a—c)、数据选择区(红色框d)和控件区(红色框e)。其中可视化区中a为颜色映射的航迹图, b为多参数随时间变化图, c为颜色映射的参数时空变化图, 对图表的交互操作实现对数据多维度、多角度的观察; 数据选择区中的数据选择框, 由JS函数自动检索航线、航次和可选参数并生成数据选择框内容; 控件区中分别有数据视图控件、折线图转换控件、柱状图转换控件、初始化控件、图表下载控件。

2.2 颜色映射航迹图及多参数随时间变化图

颜色映射的航迹图和多参数随时间变化图的联动表现, 完全符合FerryBox数据中时间和空间同时变化的特点, 可以准确地再现数据真实变化的情况。由于时间和空间同时变化, 单独的二维或三维图表无法准确表达数据, 而颜色映射的航迹图用颜色映射数值大小, 同时呈现此次航行的真实航线(图 4a); 多参数随时间变化图则表现了各参数数值随采集时间的准确变化, 其中纵坐标代表数值大小, 横坐标代表时间(图 4b)。当鼠标在多参数随时间变化图上移动时, 颜色映射的航迹图上的船舶图标会同时移动代表采集数据时船舶所在的真实地理位置, 从而实现了时间和空间的同时变化。此外, 多参数随时间变化图还可以通过点击图例进行选择, 将多个参数在同坐标系中可视化, 以便于进行参数间相关性的观察。

2.3 颜色映射的时空变化图

大部分单程航线都可以投影在纬度或经度方向上, JS函数首先分别计算所选航线经度和纬度的重叠率, 然后按照重叠率小的方向进行投影。如图 5a, 该航线由于经度上有部分重叠, 经度方向重叠率大于纬度方向, 因此以纬度作为纵轴, 时间作为横轴进行投影, 以颜色映射参数数值大小实现图表渲染, 该图可以非常直观地表现数据在时间和空间中的变化。同时, 该图横纵坐标分别设有DataZoom控件, 可以放大、缩小时间和空间尺度, 从而通过不同的角度观察数据的变化。比如, 改变空间尺度, 可以观察航线上某点处参数随时间的变化; 改变时间尺度可以观察某时间段内参数在空间上的变化; 与颜色映射的航迹图一样, 该图的ColorBar也可以与数据进行联动, 可以在图中高亮显示等于某数值的数据, 也可以通过拖拽显示固定数值范围内的数据。如图 5b为盐度的时空变化图; c为某空间区域内盐度随时间的变化; d为某时间段内盐度在空间中的变化; e为利用ColorBar高亮显示所有盐度等于某数值的区域分布; f图为利用ColorBar筛选显示某盐度区间的分布。

3 实验与应用 3.1 数据与方法

实验数据为2015年10月渤海海峡FerryBox水质观测项目数据, 所用设备为FerryBox-PocketBox (4H-Jena, 德国), 该系统安装于货船“锦川9号”机舱内, 货船往返于烟台芝罘岛和大连湾之间, 货船在烟台-大连航线上平均单程航行时间为10 h, 平均4天1个航次。该项目利用FerryBox实现了渤海海峡水质的低成本自动长期监测, 监测时间为2015年10月— 2016年10月, 监测项目为表层海水(水下2.5~4.5 m)的温度、盐度、pH、叶绿素、浊度、溶解氧及饱和度7项(传感器型号见表 1)。截止到项目结束, 共获得有效单程监测数据90组, 数据记录6万余条。

3.2 数据验证 3.2.1 测量参数准确性验证

为验证FerryBox观测数据的准确性, 2016年12月2日到3日利用科考船进行了渤海海峡航次, 该项目沿既定航线往返两次, 设置10个(BS1-BS10)CTD测量点(图 6), 每点分别在不同时间进行3次CTD测量共获得30组有效数据, 同时随船进行FerryBox系统的同期采样, 最终获得了一系列观测数据。由于FerryBox系统测量水下2.5~4 m处海水参数, 故选择水下3 m处CTD数据与同时刻FerryBox数据进行相关性分析, 由图 7可以看出FerryBox与CTD所测海表面温度、盐度与溶解氧的相关系数均能达到0.98以上, 斜率均接近于1, 因此FerryBox所测数据与CTD所测数据具有很好的相关性, 对比观测得出利用FerryBox观测水环境参数准确度较高。

3.2.2 长期观测有效性验证

为验证FerryBox数据对水域进行长期观测的有效性, 选择渤海海峡浮标观测数据与FerryBox所测参数进行总体变化趋势的对比。浮标位于坐标(37.48232°N, 121.7991°E)处, 观测区域与FerryBox航线临近, 浮标观测时间为2015年6月到2016年9月, 基本覆盖渤海海峡FerryBox观测项目运行时间。选取38.0°N以下的FerryBox的水温数据与同期浮标观测数据进行对比, 同时利用可视化方案中颜色映射的温度时空变化图的DataZoom控件将纬度缩放至37.6°N至38.0°N附近进行温度在该时空范围内的可视化渲染。对比可以看出FerryBox所测海表面温度与同期浮标观测数据所测的海表面温度变化趋势基本一致(图 8a), 同时也与可视化方案中颜色映射的温度变化趋势相同(图 8b), 因此利用FerryBox进行固定水域的长期观测具有很好的实际意义。

3.3 参数相关性观察

利用参数空间变化图的多参数对比分析可以直观地观察到不同参数之间变化的相关性。通过渤海海峡表面水温和溶解氧时空关系图对比分析可以看出温度和溶解氧都有很强的季节性差异, 而且有一定的相关性。大体表现为秋、冬季节水温降低时溶解氧浓度升高, 春、夏季节水温升高时溶解氧浓度降低。通过2015年11月12日、2016年2月25日、2016年5月26日以及2016年9月20日的多参随时间变化图的水温与溶解氧对比分析基本能够看出水温与溶解氧浓度呈负相关(图 9)。

3.4 参数的时空分布

在方案中通过温度的颜色映射时空变化图可以看到观测期间温度的季节性差异非常明显, 基本表现为秋季开始温度逐渐降低, 冬季二月份温度达到最低, 春季开始温度上升, 夏季八月份温度达到最高。同时在空间上还可以看出冬季海峡中部的温度明显高于海峡两侧, 利用不同时间的断面参数变化图及对应的颜色映射航迹图进行联合观察可以更加清楚地看到该现象^[13](图 10)。

4 结论

FerryBox系统可以做到低成本、低维护、高频率、高分辨率、高覆盖率地对水环境进行长期观测, 在环境监测、污染预警等方面能够发挥非常大的作用。本文介绍的基于ECharts.js的FerryBox数据交互式可视化方案可以方便快捷地对数据进行可视化, 更加合理、灵活地表达FerryBox数据, 让科研人员能够快速地观察数据规律, 发现特殊现象。该方案的优势在于能够进行数据的交互操作, 使用户可以从不同的维度和角度对数据进行观察, 从而挖掘潜在信息。

在验证了FerryBox数据有效性的基础上, 我们以渤海海峡FerryBox水文观测数据为可视化实例, 利用多参数随时间变化图及颜色映射的参数时空变化图分析了观测期间内海表面温度与溶解氧浓度的相关性; 综合利用3种可视化图表发现了观测期间渤海海峡冬季水温海峡中部明显高于海峡两侧的特殊现象, 结果表明该方案可以对FerryBox数据做到直观、准确、灵活的表达, 提高了数据分析的效率, 为利用FerryBox系统进行水环境长期、低成本的观测提供了高效的可视化方案。