可视化之Earth NullSchool

上两篇我们分别介绍了《Berkeley Earth》和《AQICN》两个网站,今天来看一下Earth NullSchool。

这个网站的特色是风向图,之前有一篇可视化之风向图,曾经提到过这个网站,也详细介绍了风向图的技术实现原理。今天针对这个网站,再详细的介绍一下。同样,在公众号中回复“worldwind”,会提供该网站的源码Demo。

如上是该网站的一个动图效果,有兴趣的可以访问网站了解一个大概。作者在github上公布了自己的源码(和网站代码略有不同),气象数据来自NCEP,记得上周介绍的AQICN美国数据也是来自该网站,查了一下,该组织应该算是美国的国家气象局:National Centers for Environmental Prediction。

吸取上一篇的教训,直入主题。当然,想要了解风图原理的,可以看看之前写的可视化之风向图,需要对风图的数据和思路有一定了解,不然本文在理解上可能会有点吃力。

如上是具体数据列表,Mode里显示支持Air(风图),Ocean(洋流),Chem(化学物),Particulates(颗粒物),Height指向不同高度,Overlay表示叠加图层,比如风图+温度,洋流+浪高等,Control为时间轴控件,比如历史数据。点击查看不同的数据效果,不难找到对应数据的url的规范。

气象数据采用的是epak格式,二进制流,代码中提供了数据规范。如下是数据规范和对应的JSON属性:

从converter属性,该数据来自netcdf,而这个格式在之前的Berkeley Earth中也提到过,而原始数据是grib形式,以我的理解,里面应该有一个grib2netcdf2epak的过程,都提供了对应的转换工具。至于为何绕圈,我搜索了一下大概,知道一个大概优劣,但貌似都不绝对,在此就不妄论了。

对我个人而言,花时间最久的是如何以localhost方式获取该数据,因为它是HTTPS服务,做了Referer限制,对于我这个Java小白,绝对算得上是一个难题,不过反过来想,这不就是上天给我一个机会,让我学JavaWeb吗。花了不少时间,也请教了研发两位牛人,终于在Jetty+Servlet下实现了一个Java版的Proxy,是本次最有收获的地方,代码一并奉上,见笑。

有了本地代理服务,对源码进行简单的修改,让其走代理,就实现了localhost的部署,两个参数:url和type。

在地图初始化的时候,先构建了全球格网,是一个2:1的矩形,下面是经过投影后的球状格网效果,主要用于后续获取任意点在地球上的位置,进而获取对应的风速(X,Y),该方法提供了临近插值和双线性插值两种方式,该过程封装在rectangularGrid函数中。

接着,开始请求气象数据数据,解析过程封装在decodeEpak函数中:获取对应的JSON属性,全球风图是720*360大小,精度为0.5℃,每个点有X和Y两个分量,在X和Y方向的向量,米单位。

万事俱备只欠东风——起风。这里有两点,第一,平移缩放时没有任何效果的,这是因为当bounds变化时,需要根据更新后的区域重新插值,计算量比较大,而插值的价值是精度上有保证,清晰,所以这是一个取舍。第二,不仅有一个风图,还有一个栅格底图,下图蓝绿色效果图,仔细看,和风的走势是吻合的,同时鼠标点击时,能获取对应位置的属性值。

对风场向量的插值过程是在interpolateField方式中实现的,这里逻辑如下:1:创建当前窗口对应的掩膜,如上图,全部区域都是黑色(0,0,0,0),只有地球对应的区域颜色为(255, 0, 0, 1) ;2随机生成风粒子,每一个粒子有五个属性,位置(XY),风速(UV)和生命周期(t);3类似一条扫描线,遍历可视区域的每一像素点,通过掩膜判断是否在有效范围内,如果该点有效,则获取其对应的经纬度;4以全球网格为索引,获取该点对应的风场Field,保存到对应的向量场wind field,用于后面的风图效果;5根据风场的强度,对应颜色表设置当前点的颜色强度,保存到mask掩膜中,这样mask在更新时用来判断区域是否可见,更新后则用于显示地图效果,也算是一图两用。如上是初始化的核心部分,里面有很多小的细节,比如风向,在平面上,XY两个向量是直线,而在球面上,要调整为对应的经纬度,是曲线(distortion函数)。

接着,每一帧根据风图的原理,实时更新:风粒子的当前位置,根据当前位置的风速获取下一帧的位置,数据更新(createField::field.move)后则开始渲染(animate.draw),这部分在风向图原理里面有很清楚的介绍,思路完全一致,这里只是把关键点和对应函数实现对应起来,关键还是要思路,如果有意愿不妨自己调试,便一目了然。

至于鼠标点击显示当前状态,代码我没有看,不过上述过程中已经提供了位置转换,数据存储,很容易获取映射关系。

技术内容介绍完毕。

下一篇会抛开技术,从产品,数据,以及可视化效果等非技术层面上,和大家分享一下我对这三个网站的对比和想法。

原文发布于微信公众号 - LET(LET0-0)

原文发表时间:2017-06-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WeTest质量开放平台团队的专栏

UPA性能分析工具使用详解

自从WeTest宣布与Unity官方共同推出Unity性能分析工具UPA(Unity Performance Analysis)以来(Hi,我们和Unity合作...

622
来自专栏Crossin的编程教室

【每周一坑】双色球选号器

说到做到,每周一坑 没有跳票,今天又来了! 我反复说,学会语法只是编程的开始,不断地写代码才是提升技能的必经之路。所以这个栏目我们肯定是要做下去的,哪怕它的阅读...

3035
来自专栏数据小魔方

精美炫酷数据分析地图——简单几步轻松学会

本篇文章开始教大家如何使用矢量素材在Excel、PPT中自定义精美的数据分析图表。 使用矢量素材制作数据分析报告其实并不难,最常见的就是形式就是使用矢量地图制作...

3395
来自专栏Fish

CUDA C最佳实践-CUDA Best Practices(一)

这文档堪称CUDA官方手册里最有用TOP3了。 ps:全文翻译会累死猿哒,意译意译,各位看官凑合一下啦 前言 文档的作用 这文档能干嘛,是用来帮助开发者从N...

2646
来自专栏惨绿少年

计算机专用英语词汇1695个词汇表

特别感谢: 不愿意透露姓名的小虾同学提供的音标部分 1.单词说明:   command n. 命令,指令 [kə'mɑ:nd]   单词拼写 名词 单词含...

2260
来自专栏即时通讯技术

腾讯技术分享:GIF动图技术详解及手机QQ动态表情压缩技术实践

本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦。”

671
来自专栏IT派

算法应用实践:如何用Python写一个贪吃蛇AI

这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过。但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了。 问题的关键在...

1160
来自专栏Crossin的编程教室

【每周一坑】统计英文小说词频

Thank God It’s Friday! 又到周五啦!眼看就要忙完一周的学习和工作,又可以出去浪咯。 然而,只有我们依旧无趣地在此刻发干货文,提醒着你有没有...

2878
来自专栏java一日一条

如何用Python写一个贪吃蛇AI

这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过。但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了。 问题的关键在...

542
来自专栏大数据挖掘DT机器学习

《小美好》短评文本情感分析+生成词云

因为最近看了一下《致我们单纯的小美好》,虽然情节是有点“二”吧,但是看了觉得真的很怀念初高中的日子,一时玩心大发,于是就想搞点有意思的东西。。。首先去爬了豆瓣...

3499

扫码关注云+社区