吉林省WRF模式数值预报可视化系统设计

摘要 该文利用D3.JS组件，设计了一款以实时数据为数据源，主要显示温度、湿度、气压和风场等气象要素的大数据可视化系统。此系统可以直观地反映东北区域的整个气象要素分布和历史气象情况，能指导当前的气象工作。该系统中D3通过TOPOJSON的地理信息数据绘制吉林省地图，通过编写的小程序将GRIDS数据解析为JSON格式的要素信息，将温度湿度数据解析为色斑图，将风的强度用色斑形式显示，根据风的方向数据绘制成风场动画图。When.js将系统任务分为地图绘制、GRIDS数据解析、公式计算和D3数据可视化4个部分。在大数据可视化当中最担心的交互速度问题，因为D3.JS优秀的封装性能使开发工作变得非常简洁。

关键词 D3.JS；大数据；可视化；气象；吉林省

中图分类号 S165 文献标识码 A 文章编号 1007-5739（2016）04-0345-02

近年来我国气象事业有了长足的进步和发展，吉林省建设了大量的常规、特种自动气象探测设备，其传输、处理和服务应用的信息量呈指数式增长。吉林省气象信息网络中心每天接收海量的数据，其中大部分数据都是非结构化的大数据，但目前对这些大数据仅能做到初步的实时业务应用，无法进行大数据的长时间序列存储及进一步的分析处理和决策分析应用，这就造成了极大的气象数据价值浪费。因此，气象行业迫切需要进行气象大数据的应用分析研究。

1 气象大数据可视化现状

数据的可视化，可以更直观地分析数据之间的关系和数据形成的规律，这些对于气象来说是非常重要的：一是便于研究存储数据的特点。二是便于分析气象数据的形成规律，为理论研究工作提供依据。

目前，美国的尼古拉斯・加西亚・贝尔蒙特（Nicolas Garcia Belmonte）根据美国国家气象局的气象数据开发的风场可视化系统，以圆圈和线条为基本图形元素，辅助以颜色变化来表现美国1 200多个气象站的实时风场情况。美国的马丁・瓦滕伯格（Martin Wattenberg）和费尔兰达・维埃加斯（Fernanda Viegas）合作研发的风场可视化系统WIND MAP，以线条为主要元素，顺着风的方向利用线条的动画绘制出风场，利用黑白明暗的变化表现风的强度。这2个系统都已经非常成熟，还有东京气象局研发的东京风场系统，都是非常成熟的B/S结构的风场可视化系统[1-3]。但是国内并没有成熟的B/S风场可视化系统，在预报资料的要素可视化领域，国外的气象同行已经远远的走在了我们的前面。

英国开发的英国气温史（UK TEMPERATURE HISTORY）网站，如图1所示。通过利用D3.JS，只需要1张图就可以直观看到1911―2012年的温度变化曲线，并且其中还标注了有特别气象灾害的时期。100年的历史仅仅用1张可交互的D3图形就清新明了地展现出来。还有东京气象局开发的风场网站，如图2所示，是将实时数据转化为风场，并以动画形式直观明了地显现出来，为预报员的预报提供参考。

2 吉林省WRF模式数值预报可视化系统总体设计

该文利用D3.JS设计的气象大数据显示系统是一个以东三省历史数据和实时数据为数据源，主要显示温度、湿度、气压和风场等气象要素的大数据可视化系统。此系统可以直观的通过东北区域的整个气象要素分布和历史气象情况来指导现在的工作。

D3通过TOPOJSON的地理信息数据绘制东北区域地图，通过编写的小程序将GRIDS数据解析为JSON格式的要素信息。将温度湿度数据解析为色斑图，将风的强度用色斑形式显示，根据风的方向数据绘制成风场动画图。When.js将系统任务分为地图绘制、GRIDS数据解析、公式计算和D3数据可视化4个部分。

3 D3.JS和SVG相关技术

D3.JS是数据驱动文档（Data-Driven-Documents），产生于htmL5之后新兴起的javascript组件，它集成了htmL5的功能，重新封装成了一个便于对大数据可视化进行处理的js组件。因为它的产生就是因为大数据，所以一经就在国外引起了非常多的大数据程序开发者的注意。

D3.JS是2009年斯坦福大学可视化研究组研发的项目，从一开始就是开源和友好的，它将数据处理成数据模型的形式，然后通过HTML中的超文本文档将数据转换到其中。并且由于HTML5的新特性，D3.JS是支持SVG技术的，也就是可缩放矢量图形，比前几代的HTML有了巨大进步。

D3.JS起源于斯坦福大学在2009年的一个研发项目，2011年开始。从2011年至今，D3.JS组件一直在更新和完善。该文所使用的D3.JS版本是2012年的3.0版本。3.0版本在集成可视化方面有了更加长足的进步。无论是可视化表现还是框架的易用性都变得更加突出。

吉林省气象前端可视化系统作为一个区域性的WEB前端可视化系统，SVG的网络性和可伸缩的矢量图形是最好的选择。SVG本身的语言特性遵从于XML的语法，用文本格式的描述性语言来编写矢量图形的内容。不涉及标量图形的分辨率问题，也是现在使用比较广泛的图形模式。

D3核心功能就是处理矢量图形图，因为矢量图形是由数据方程定义，无论是图形放大还是缩小，都会重新确定点的相对坐标位置和线的位置，不会造成失真。D3是基于Javascript语言开发的，其代码在客户端（也就是用户浏览器）上执行，这使得数据必须发送到客户端才能进行D3可视化的转化生成。这就要求数据必须是用户共享的，而研讨可视化有一个目的就是实现研讨信息的共享。

3.1 异步处理

因为系统要显示风场、温度、湿度、气压等多个要素，所以需要引入任务调度机制保证系统的运行速度。本系统选择了速度快，体积小的when.js组件作为任务调度模块。

When.js是cujojs的轻量级的 Promises/A和when（）实现，从wire.js的异步核心和cujojs的IOC容器派生而来。包含很多其他有用的Promiss 相关概念，任务在when.js中存在3种状态即默认（pending）、完成（fulfilled）、失败（rejected）。默认状态可以单向转移到完成状态，这个过程叫resolve，对应的方法是deferred.resolve（promiseOrValue）；默认状态还可以单向转移到失败状态，这个过程叫reject，对应的方法是deferred.reject（reason）；默认状态时，还可以通过deferred.notify（update）来宣告任务执行信息，如执行进度；状态的转移是一次性的，一旦任务由初始的pending转为其他状态，就会进入到下一个任务的执行过程中。

when.js的异步处理机制大大的方便了D3.JS在处理大数据时的任务调度问题。

3.2 MVC

在WEB开发中框架的选择至关重要，因为框架决定着开发的难度和软件维护的成本。因为本身D3.JS就是开源的，该文选择了同样开源的backbone.js作为软件开发的MVC框架。Backbone.js是一个重量级javascript MVC 框架，主要组件是模型、视图、集合和路由器。作为前端显示的气象大数据可视化系统，MVC是一个便于开发和管理代码的选择。

Backbone.js依赖于Underscore.js，部分依赖于jquery，因此在熟悉Backbone.js之前必须对Underscore.js和jquery的语法特点完全了解。某种程度上来说必须有Underscore.js和jquery的开发经验才能更好的使用Backbone.js。它可以根据MVC当中模型中的数据更新，自动对超文本进行更新。这种特点无疑为程序开发和代码维护提供了方便。并且restful的代码风格也是现在使用最广泛的代码风格，更加方便了程序的开发。

3.3 后台搭建

后台使用JS开发的node.js开源平台，作为JS开发的平台，node.js在性能上非常强大。简单的说node.js就是运行在服务端的JavaScript，并有着有优秀的并发功能。

node.js是建立在Chrome的JavaScript运行时之上的平台，它用于构建快速、可扩展的网络应用程序[4]。node.js使用一种事件驱动、非阻塞的I/O模型，这也使得跨分布式设备的数据密集型实时应用更加轻量、高效和完美[5]。node.js良好的并发性能无疑是气象大数据可视化最好的选择。

4 结语

D3通过TOPOJSON的地理信息数据绘制吉林省区域地图，通过编写的小程序将GRIDS数据解析为JSON格式的要素信息。将温度湿度数据解析为色斑图，将风的强度用色斑形式显示，根据风的方向数据绘制成风场动画图。When.js将系统任务分为地图绘制，GRIDS数据解析，公式计算和D3数据可视化4个部分。作为D3绘制的可视化系统优点就是交互速度快，量化清晰，便于分析和研究。

5 参考文献

[1] DEWAR M.Getting Started with D3[M].England：O′Reilly Media，2012.

[2] 张运良，张兆锋，张晓丹，等.使用D3.js的知识组织系统Web动态交互可视化功能实现[J].现代图书情报技术，2013（增刊1）：127-131.

[3] 朱建军.基于D3的可视化组件开发及其在研讨系统中的应用[D].武汉：湖北工业大学，2015.

[4] 钟强.Node.JS平台下Web前端架构的研究[J].无线互联科技，2013（12）：124.

[5] 巴特尔.基于NodeJS的理财应用的设计与实现[D].长春：吉林大学，2014.