可视化之AQICN

上一篇和大家分享了《可视化之Berkeley Earth》,这次看一看下面这个网站---aqicn.org。先做一个提示:文末有惊喜~

该网站在中国有一定的权威性,PM2.5数据有一点敏感,它竟能提供全球级别,实时的,详尽的AQI数据,以及每个站点的经纬度(精度在十米内),它的口号“provide information as clean as the air one wish to have”——提供的每一份数据,如同每个人所期望的空气那样干净。

但该网站又有一点神秘感,没有过多的自我介绍,服务器IP来自美国,团队成员主要在北京,能够获取全球这么详细的数据,总感觉背后有很多不能说的秘密,网上只找到一篇《MY FAVORITE POLLUTION WEBSITE: AQICN.ORG》,感兴趣的可以读一下。

去年底抓取它的PM25实时数据,但觉得这是老外的良心网站,如果把URL和网站名称曝光,有被墙的隐患,所以没有透露。最近发现它竟然推出了json api的服务,生意越做越大,那今天老夫就“好事做到底”,揭底该网站四个未公开的,却是最重量级的服务。

1AQI Map

这是bounds查询的url:

https://api.waqi.info/mapq/bounds/?bounds={RECTANGLE}&inc=placeholders&k={KEY}&_={DATE}

官网API里仅开发了经纬度的点查询,但它自己使用是bounds面查询,另一个比较坑的是DATE参数,我自己验证是无效的,所以该API无法做到对历史数据的查询,当然,这也可以理解,毕竟每个站点数据更新时间不一,比如中亚可能好几个月才更新一次。因为之前的PM文章详细介绍过这部分,不再重复。

2AQI Forecast

如上是城市的天气预报服务,对应的数据url如下:

https://api.waqi.info/api/feed/@{cityid}/obs.en.json

其中@参数是City编码,比如北京对应的id是1451。返回JSON对象如下:

不难理解,简单说一下框选的内容,city是该城市的内容,nearest是该城市范围内的气象站点,都有geo属性,提供对应的经纬度,误差在百米内。Iaqi留到下面说,先说相对简单的—forecast属性。顾名思义,也就是气象预报的内容,包括aqi和wind两部分。

先看上图对应表格中的AQI数值,每一项对应该时间点AQI的最大最小值。再看下图wind属性:

这个就不那么直观了,大家能看出对应关系吗?我看了一个多小时,没看出来,只好调试源码:三小时(采用UTC时间)为一时间段,对应三组数据,如上图,c是气温,获取气温的最大值和最小值,w[0],w[1]对应当前时段风速的最小最大值,w[2]是以正南为起始点,顺时针方向的旋转角度,表示风向,蓝色是风速的柱状图效果。这样看上去就很明白了吧。事后让同事看对应关系,他竟然很快就“蒙“对了。

3AQI Current

实时天气数据和forecast都在一个json对象中,对应iaqi属性,如下图所示,正好有11项,分别对应PM25,PM10等十一个指标。

对应的PM25属性如下:

p标志该指标名称为pm2.5,v中保存的是最近48小时内的极值和当前值,i是该数据的提供方。iaqi[0].h[2]下面的一堆乱码是什么,猜测应该是每个小时的PM25数值,用于显示左侧柱状图,可肉眼看不出其中的数值映射关系,这时候就需要用心眼了---调试,原来Decode代码如下:

我很好奇这段代码的出处,因为之前看高德地图中矢量瓦片中也采用了类似的解密方式,有了解的请告诉我,再次感谢。最终该函数将乱码decode为48个PM值。

4Forecast Map

当你在网页上看到该动态图时,假设你要实现这个效果,所需要的数据格式,用Canvas 2D还是WebGL,以及流畅度和交互式操作?

首先,每一个城市有自己的配置文件,应该是JSP动态网页来获取的,比如New York的配置信息如下:

如上请求的是pm25数据,model是ncep-aqm。根据这些参数,我们能够获取如下的url

https://forecast.waqi.info/forecast/aqi/ncep-aqm/best/pm25/conf.json

其对应的json信息如下:

如上也比较容易理解,其中size指该区域的像素宽高,bounds为经纬度范围,其中在usepa字段下有8.png(图片)和jsmap(二进制)这两种形式,可以简单的认为是PM25的范围分段。两者思路相同,网站使用的是jsmap这种形式。

如上,从lut可知pm25值分为17份,范围是0~500。将lut的17个区间归类到domain中,domain[i]对应range[i]份。无论是jsmap还是png,规范都一致(png更精细一些)。不同的是files,png对应的是图片的相对路径,效果如下。而jsmap是二进制流形式

代码中会给出一个色带"#ffffff", "#5ec569", "#b2d744","#f2c500", "#fe8d00", "#fa0067"],等分为17份,形成渐变色,然后根据jsmap对应的lut构造出一个level-color的分段映射表。保存在this.stream.colors.lut属性中。

创建好了颜色表,接着就会请求对应时段的数据,url如下:

https://forecast.waqi.info/forecast/aqi/ncep-aqm/best/pm25/jsmap/stream.jsmap

对该数据进行解码后参与canvas的渲染,解码的算法和上面的decode相似,最终会解析为一个点串points,里面有v,x,y,n四个分量,分别是pm25值对应颜色表中的value值,xy是对应该区域的像素偏移量,n标识该值连续的次数。这样,建立了最终的value-level-color的完整映射关系,通过canvas 2d完整动态渲染的整个过程。

5其他

在技术角度,把AQICN分解的差不多了,不知道大家有什么收获,因为篇幅太长,所以本篇就到此结束吧。如果有不对的地方或疑问,不妨留言交流。

下一篇会介绍earth.nullschool这个可视化效果很棒的网站,然后会再来一篇个人对这三个网站的对比和分析,把一些个人的想法拿出来和大家分享。

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

水印第四版 ~ 非人水印(添加人脸识别)

说起这个人脸识别,还真有点缘分。记得逆天以前在学生时代参加创新大赛的时候,题目就是人脸识别打卡 解决别人替人打卡的问题,想想看,要是用微软的faceapi那还不...

2778
来自专栏前端布道

JavaScript设计模式与开发实践 - 策略模式

引言 本文摘自《JavaScript设计模式与开发实践》 在现实中,很多时候也有多种途径到达同一个目的地。比如我们要去某个地方旅游,可以根据具体的实际情况来选择...

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

利用d3.js对QQ群资料进行大数据可视化分析

对于前段时间流出的QQ群数据大家想必已经有所了解了,处理后大小将近100G,多达15亿条关系数据(QQ号,群内昵称,群号,群内权限,群内性别和年龄)和将近900...

5647
来自专栏存储

列式存储的另一面

列式存储的另一面 列存是常见的数据存储技术,在许多场景下也确实很有效,因而也被不少数据仓库类产品采用,在业内列存也常常就意味着高性能。 可是,列存真有这么好吗?...

22310
来自专栏程序人生

谈谈调度 - Linux O(1)

约莫十五年前,当我刚刚开始参加工作时,赶上 Linux 发布划时代的 2.6 内核。在这个大家都翘首期盼的内核版本中,最令人兴奋的便是 O(1) schedul...

2638
来自专栏CDA数据分析师

入门必学!在Python中利用Pandas库处理大数据

在数据分析领域,最热门的莫过于Python和R语言,此前有一篇文章《别老扯什么Hadoop了,你的数据根本不够大》指出:只有在超过5TB数据量的规模下,Had...

1889
来自专栏前端侠2.0

从左关联到数据维度的思考 原

在a 的结果集,用了group by ,其实相当于将表“降维”了。假如原来1000行,现在分组后结果集变为100行了。 在b 的结果集,没用group by ...

854
来自专栏linux驱动个人学习

内存的分类

一:SDRAM SDRAM(Synchronous Dynamic Random Access Memory),同步动态随机存储器,同步是指 Memory工作需...

2964
来自专栏Java技术栈

Google的面试题长啥样?看完被吊打!

作为一名Google的工程师和面试官,今天是我第二次发文分享科技公司面试建议了。这里先声明:本文仅代表我个人的观察、意见和建议。请勿当作来自Google或Alp...

784
来自专栏WOLFRAM

强大的 Wolfram 11.0(下)

1124

扫码关注云+社区