可视化之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这些网站的技术实现,相同和不同之处,篇幅限制,放到下篇吧。同样都是环境题材,它们在数据结构,技术思路和最终的产品形态上有很多不一样的诠释,是一个有意思的对比。
有空再聊,端午节快乐~
可视化之Berkeley Earth的更多相关文章
- 可视化之AQICN
上一篇和大家分享了<可视化之Berkeley Earth>,这次看一看下面这个网站---aqicn.org.先做一个提示:文末有惊喜~ 该网站在中国有一定的权威性,PM2.5数据有一点敏感 ...
- 可视化之Earth NullSchool
上两篇我们分别介绍了<Berkeley Earth>和<AQICN>两个网站,今天来看一下Earth NullSchool. 这个网站的特色是风向图,之前有一篇可视化之风向图, ...
- 全球PM25实时可视化
星期一的早上,我在办公区鸟瞰窗外,目光所到之处,用顾城的那首"你看天时很近,看我时很远"倒是格外的应景.作为一名父亲,看着工位上3M的口罩,想想此刻还在熟睡的孩子,多少有些无奈-- ...
- Google earth
装了Google earth之后,需要联网,才能放缩看不同精细程度的场景,除非你之前看过,在你自己的缓存中有存储. Google earth有自己的server,我们交互化的时候,server传数据给 ...
- 10个TWaver 网页3D可视化精彩案例
以下网页3D案例均为TWaver原创出品,推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行.案例排名不分先后,如需Demo,可直接申请试用. 1. 化学元素 ...
- osgearth介绍(转载)-feature_labels.earth
初识osg OSG的诞生 在 1997 年时,Don Burns 由于喜欢滑翔机运动且对计算机图形学非常熟悉,在 LINUX 上写了一个控制滑翔机的小引擎,这便是 OSG 的最初雏形.后来在 1998 ...
- dns 安全可视化
dns 安全 可视化 === 明确目标: 1,什么是dns安全可视化. 什么是dns 2,怎么做到dns安全可视化. 3,什么是BI 4,dns安全 是什么, 有哪些数据需要展示. 明确方法: 1,先 ...
- matlab矢量场数值可视化(动态数值模拟)
https://blog.csdn.net/eric_e/article/details/81294092 D3.js实现数据可视化 三维可视化 风场可视化(数据插值):风场是动态变化的,实时刷新的, ...
- PoPo数据可视化周刊第6期
PoPo数据可视化 聚焦于Web数据可视化与可视化交互领域,发现可视化领域有意思的内容.不想错过可视化领域的精彩内容, 就快快关注我们吧 :) 本期可视化精彩视频请关注公众号浏览 全天智能获Pre-A ...
随机推荐
- [洛谷P2580]于是他错误的点名开始了
洛谷P2580的一个水题,用啥都能过,不过为了练习一下刚刚学会的字典树,还是认真做一下吧. #include <cstdio> #include <cstring> using ...
- jQuery使用小结
$(document).ready( function(){} ); 选择器 $("p:first") 第一个元素 $("p.intro" ...
- socket编程之 select、poll、kqueue、epoll
原生API select int select(int numfds, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct tim ...
- .net core 利用中间件处理常见的网站功能 包括 session、routers、重定向、重写和文件下载
在.net core中所有的请求都会被请求中间件所处理,所以我们可以通过在中间件里边添加对应的功能然后在服务中添加注入来实现对应的功能 文件位置:Startup.cs=>Configure方法, ...
- 设备像素,设备独立像素,CSS像素
之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...
- 使用webpack打包css和js
1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loa ...
- .net之抽象工厂模式
//抽象工厂 //抽象食物 namespace abstractFactory{ public abstract class food { public abstract void Food(); } ...
- 接上一篇中记录Echarts进度环使用【不同状态不同进度环颜色及圈内文字】--采用单实例业务进行说明
接上一篇中记录Echarts进度环使用 此处处理不同状态下不同进度环颜色及圈内文字等的相关处理,采用实际案例源码说明 -----------------偶是华丽丽分割线---------------- ...
- springboot(十二):springboot如何测试打包部署
有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发.调试.打包到最后的投产上线. 开发阶段 单元 ...
- Oracle清除数据库中长时间占用资源的非活动的会话
1.启动资源计划 alter system set resource_limit=true scope=spfile; 2.设置非活动回话十五分钟断开,释放资源 alter profile defau ...