可视化之Berkeley Earth

去年冬天雾霾严重的那几天,写了两篇关于空气质量的文章,《可视化之PM2.5》和《谈谈我对雾霾的认识》。坦白说,环境问题是一个无法逃避又无能为力的话题。最近因为工作中有一些数据可视化的内容,借这个机会研究了一下Berkeley Earth,下简称为BE,效果如下:

从 产品角度,有三个特点:第一,从可视化的效果来看,是点密度插值后的切片效果,而不是点值显示,这就需要服务端支持缓存切片,对客户端而言,直接加载即可;第二,提供了历史数据和小时,天,月三种模式,能够支持最近半年左右的数据访问,自然,不同模式下的切片url对应不同的format;第三,拖动鼠标时,能实时显影当前位置对应的AQI值,这个就比较厉害了,用到了utfgrid的思路,可以做到实时的本地查询属性的效果。

作为程序员,看到让自己心动的代码,脑海中的第一反映就是要征服她。不会F12的Web程序员等同于阳痿。查看url请求,用同一个XYZ看一下OSM对应的切片区域,确定是墨卡托投影的切片(如果不是,那就对比一下天地图WGS的);代码混淆都是家常便饭,个人认为阅(tou)读(kui)代码是最有意思的时候,首先,从函数和变量的命名上,基本可以判断他写代码的人品,我最讨厌两种命名风格:var a,b,c和拼音命名,前者是机器干的事,后者就不评价了。终于找到了切片url的format

可见,无论是历史数据和实时数据,设置对应的current(UTC时间)就可以获取对应的切片数据,因此,我基于Cesium.UrlTemplateImageryProvider实现了createAQIBerkeleyEarthProvider方法,终于能加载对应的影像服务了!

当你打开网页却发现,你拥抱的并不总是也拥抱你,浏览器报错了,原来BE进行了跨域限制,也是情理之中,养了这么多年的女儿,怎么也是Berkeley名门闺秀,和你约约就算了,你这个穷小子,连房(服务器)都没有,就想把女儿骗回家?

跨域是浏览器的限制,服务器请求则没有跨域限制。可见,对于一个男人而言,有房才是硬道理,请教谷大神,写了一个jsp代理,家小但也五脏俱全。终于可以在自己的网页中加载BE的切片服务了。

迎娶白富美固然是一件可喜可贺的事情,可生活不像诗,鼠标实时查询这个utfgrid功能还没实现呢,婆婆说,这叫中看不中用。当鼠标移动时,BE会请求一个bin文件,里面的数据结构如下:

这其实就是utfgrid属性切片的思路,对应的逻辑过程如下,分别在loadDataFile和displayConcentration两个函数中实现,其中bin文件是以arraybuffer形式,这也是大数据Web环境下高效传输的不二选择,其实就是二进制流的形式。

如上是对BE中具体的技术介绍,在非技术层面,个人主要有如下几点体会和收获:

首先,当你决定最一件事情后,难度一般比你想象的要小。最大的难点在于克服内心的恐惧和懒惰,心理障碍远大于实际难度。

第二,鼠标的实时属性查询,这个功能很实用,可视化效果能让用户直观感受,但有点外行看热闹的感觉,通过utfgrid技术,很好的提供了鼠标焦点的AQI数值,就相当于内行看门道了,两者很自然的融合在一起。

第三,作为一个高校组织,这些数据都是开放的,比如PM2.5一年内的数据,精确到天,格式是NetCDF,提供了Java版本的读取API。还有全球气温变化的详细数据,都是很好的可视化效果素材。

最后一点,从技术角度来看,该网站重服务端,大部分数据和业务都是在服务端预缓存和实时缓存的结合,比如utfgrid属性切片的生成,克吕金算法的点插值等,尽管目前克吕金插值有JS的实现,但如果无法借助GPU,个人认为无法做到实时性(我没验证),而且,网站的代码写的很规范,对程序员很友好,读起来也比较舒服。

本来还想说一下aqicn.org,earth.nullschool这些网站的技术实现,相同和不同之处,篇幅限制,放到下篇吧。同样都是环境题材,它们在数据结构,技术思路和最终的产品形态上有很多不一样的诠释,是一个有意思的对比。

有空再聊,端午节快乐~

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

原文发表时间:2017-05-28

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吉浦迅科技

如何利用Python在Jetson TX2上抓取和显示摄像头影像

本文转载自JK Jung的帖子:https://jkjung-avt.github.io/tx2-camera-with-python/如果有侵犯到贴主利益,请...

49112
来自专栏nimomeng的自我进阶

《2016中国移动开发者大会》参会笔记

总的来说,2016年的综合场(第一天上午)感觉讲的一般,身边的人吐槽也比较多。不过相比之下,iOS场干货就比较多了,演讲者基本都是圈内大V,包括喵神,Sunny...

892
来自专栏前端桃园

吐血推荐 Chrome 插件(一)

工欲善其事,必先利其器。chrome 作为我们前端开发,甚至说我们程序员最常用的开发工具,我们得把这把剑好好利用起来。

952
来自专栏帘卷西风的专栏

开源CEGUI编辑器之二(MFC重写的ImagesetEditor)

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

641
来自专栏Java学习网

Android自动化测试解决方案

Android自动化测试解决方案 桌面应用程序与浏览器端的自动化测试都已经历了十年的发展,无论是从工具上还是项目管理方 法论上都已经趋于成熟。而移动设备端应...

22910
来自专栏信安之路

入门 IOS 逆向从我的经历说起

在这里以讲故事的形式分享一下我踏入信息安全这条路的一些经历吧,希望能帮到一些人,正文开始:

894
来自专栏Python专栏

继万字谏言后,Python Web 怎么学,看这篇就够了!

之前那篇「万字谏言,给那些想学Python的人,建议收藏后细看!」得到很多后台读者的留言,表示想再来点,甚至说万字系?你知道万字有多少么?不要杠我根本没有万字!...

651
来自专栏知晓程序

微信可发送定时消息,朋友圈打通明星点赞功能? | 晓技巧

1432
来自专栏何俊林

Python再次爬取拉钩网职位信息,看看市场行情

记得在前一段时间由于需要并且是第一次接触爬虫,没有成功获取到数据,了解爬虫一段时间之后,再次爬取拉钩网职位信息,本此采用单线程爬虫,之后会发布scrapy写法。...

1103
来自专栏FreeBuf

一张GIF引发的微信崩溃

今早,朋友发了一个表情给我,看下面,就是这个。。 ? 这不是天线宝宝卖萌系列表情包么,正当我看着俩宝宝撞屁股的GIF图寻开心的时候,微信突然卡死闪退了。。然后我...

2679

扫码关注云+社区