可视化之Berkeley Earth

转自fu*k原文 可视化之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这些网站的技术实现，相同和不一样之处，篇幅限制，放到下篇吧。一样都是环境题材，它们在数据结构，技术思路和最终的产品形态上有不少不同的诠释，是一个有意思的对比。

      有空再聊，端午节快乐~