可视化之AQICN

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

可视化之AQICN

该网站在中国有一定的权威性,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

可视化之AQICN

这是bounds查询的url:

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

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

2AQI Forecast

可视化之AQICN

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

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

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

可视化之AQICN

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

可视化之AQICN

可视化之AQICN

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

可视化之AQICN

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

3AQI Current

可视化之AQICN

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

可视化之AQICN

对应的PM25属性如下:

可视化之AQICN

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

可视化之AQICN

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

4Forecast Map

可视化之AQICN

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

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

可视化之AQICN

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

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

其对应的json信息如下:

可视化之AQICN

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

可视化之AQICN

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

可视化之AQICN

代码中会给出一个色带"#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完整动态渲染的整个过程。

可视化之AQICN

5其他

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

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

今天就写到这,在公众号中回复“AQICN”,不区分大小写,可以获取本文的Demo。

上一篇:在项目中使用SQLite数据库小结


下一篇:MVC Bundle生成的css路径问题