期末数据可视化报告关于PM25的可视化.docx
- 文档编号:10688638
- 上传时间:2023-05-27
- 格式:DOCX
- 页数:14
- 大小:2.28MB
期末数据可视化报告关于PM25的可视化.docx
《期末数据可视化报告关于PM25的可视化.docx》由会员分享,可在线阅读,更多相关《期末数据可视化报告关于PM25的可视化.docx(14页珍藏版)》请在冰点文库上搜索。
期末数据可视化报告关于PM25的可视化
浙江省各城市PM2.5数据可视化
这个学期数据可视化课程,我的课题是PM2.5的可视化。
原计划是做全国各省市的PM2.5数据可视化。
后来考虑到全国各地,监测站的分布比较分散,有部分地区拥有多个监测站,而很多地区没有监测站,导致无法收集到相应的PM2.5数据。
这样在全国方位内制作的PM2.5的地理可视化不方便,所以改成了浙江省各地区可视化的展示。
下面,我将介绍整个浙江省各个城市的PM2.5数据可视化的过程。
大致分为两个部分:
数据的获取与处理、可视化展示与交互。
一.数据的获取与处理
1.PM2.5数据获取:
数据来源于青青地图中国环保低碳互动开放平台,这个平台拥有全国3231个地区的空气质量监测数据,可以采用申请方式获取所需地方的点位信息。
获取的PM2.5数据如图1-1、1-2所示:
图1-1
图1-1为获取的点位信息,监测站每个小时整点捕捉一次空气质量数据
图1-2
图1-2为监测站获取的空气质量数据,数据内容如图所示,能够显示某个地区的”aqi”值,“co”值,“污染等级”,“主要污染物”等信息。
它以非UTF-8格式的json文件存放,这种格式的文件不能被brackets打开。
所以必须进行适当的处理才能使用。
2.PM2.5数据处理:
下载Notepad++可以进行文件转换,把aqi_ranking.json文件转化成UTF-8编码方式文件,然后安装jsonview插件,把文件转化成标准的json格式,如图1-3所示:
图1-3
选取json文件中浙江省各个城市的的数据,打包成新可操作的的json文件。
3.浙江地图数据:
数据可视化专题站()可以提供世界JSON文件、中国各省市级JSON文件等。
这个专题站的数据是别人处理好的,brackets可以直接打开。
浙江省地图数据如图1-4所示:
图1-4
图1-4所示的浙江省地图数据,包含了省内各个城市的ID、名称、中心坐标、边界坐标组成,它们的坐标由经纬度方式储存。
二.可视化展示与交互
可视化展示经历过多个阶段,每个阶段添加一个小功能,直至最后完成。
接下来我将从最原始的地图显示开始,逐步展示整个可视化过程。
1.展示浙江省地图:
图2-1
图2-1是浙江省行政区域图,根据浙江省地理数据绘制而成。
图中的颜色随机编码而成,没有任何具体含义。
d3js的代码如下:
图2-2
在图2-2中,设置地图的长宽、投影方式、显示位置、放大比例、平移坐标、随机颜色编码等。
图2-3
图2-3所示的是绘制浙江省地图的代码段,代码中设置了区域边界的颜色、宽度,并增加了鼠标操作,当鼠标移动到某个城市的时候,高亮为黄色,鼠标离开的时候则随机生成一种颜色。
2.添加PM2.5数据展示:
图2-4
图2-4是添加了PM2.5数据后的地图展示,图中颜色表示空气质量状况,颜色越偏向于绿色,表示空气质量越好;颜色越偏向于红色,表示空气质量越差。
图中的蓝色是高亮颜色,表示鼠标选中这个区域。
当鼠标选中这个区域的时候,会显示选中城市的污染指数。
d3js的代码如下:
图2-5
图2-5是colorbrewer.css样式,它定义了很多颜色的样式,用于d3js代码中进行颜色选择。
图2-6
在图2-6中,链接到了colorbrewer.css,同时也自定义了部分颜色,可以在.js文件中自由选择。
图2-7
图2-7所示代码,调用2014_10_101_00_00.json文件(2014年10月1日0点0分时采集的空气质量数据),定义aqiToColor将json文件中的aqi污染指数转换成对应的颜色。
这里表示的是将0-150平均分成15等分,每一等分设置为一种颜色。
由于json文件里空气污染指标很多,这里并不需要都用到,只是选取了“aqi”、“area”、“quality”、“level”四个数据。
cityColorData用来存放城市的名称(areaName)、aqi值(aqiVal)、aqi转换成的颜色(aqiColor)。
随后调用drawTheHeatMap(cityColorData);函数来绘制地图。
图2-8
如图2-8所示,drawTheHeatMap(data)函数的功能是绘制带颜色的地图,这里的data就是图2-7中所示的cityColorData。
在函数中,.attr("class",color);表示设置颜色。
图2-9
图2-9所示是绘制浙江地图函数,并实现鼠标选择到相应的城市时,能够提示污染指数。
.attr("class",function(d,i)对颜色类进行了设置,它的返回值data[d.properties["name"]]["aqiColor"]就是cityColorData里的aqiColor,这样就能实现地图根据不同aqi大小的值进行编码。
d3中.text(function(d)能够实现鼠标活动时显示text。
3.text显示设置:
图2-10
图2-10是在图2-4的基础上,修改文本显示的结果。
文本显示背景设置成黑色,透明度设置成0.8,在文本框字体显示为白色,城市名字体是14pxsans-serif;另外设置了城市边界的颜色为白色,宽度为1px,这样就更容易区分城市,视觉效果会更好。
图2-11
图2-11是自定义的一些样式,这些样式设置了文本框的背景颜色,边界,显示位置,文本显示,包括文本框的配置等。
图2-12
图2-12在Html里面定义了tooltipHtml(data,d)函数,函数参数如下:
data是指cityColorData,d指的是mapdata。
返回值为一个表格样式,在js文件中被调用。
图2-13
图2-13所示,是修改后的绘制浙江的函数,drawZJ(ds,toolTip)新增了一个参数toolTip,toolTip是前面定义的样式。
在函中,.attr("stroke","#FFFFFF")
.attr("stroke-width",1),表示设置城市便捷的颜色为#FFFFFF,即白色,宽度为1.
d3.select("#tooltip")都是对文本显示框的操作,html(tooltipHtml(data,d))值得是指在.JS引用html的函数。
后面的设置:
.style("left",(d3.event.pageX)+"px")
.style("top",(d3.event.pageY-28)+"px");表示对文本显示的位置操作,用event.pageX和event.pageY表示鼠标相对于文档的位置。
4.添加滑动条控件:
图2-14
图2-15
图2-14与图2-15所示是添加了滑动条控件后的最终效果,下方浙江省地图以不同颜色表示当地的aqi值的大小,文本框内显示相应的数值与等级。
上方的滑动条,最小值为1,最大值为10,步长step为1,因为为了简化工作,我这里只调用了10天的PM2.5数据,每滑动一个步长,则更新显示当天的数据。
当鼠标拖动滑块的时候,滑块上显示当天的日期。
图2-16
图2-17
图2-16与图2-17是滑动条控件的样式,滑动条控件来自于jQuery之家,是基于bootstrap的插件,可以自定义slider的颜色、形状、透明度和tooltip等属性
图2-18
图2-18所示,在此修改滑动条的名称,title,最大值,最小值,步长等。
在html中引入必要的css和js文件,这些文件是滑动条的源文件,不需要修改。
完成配置后,就可以开始调用bootstrapslider插件了。
图2-19
图2-19所示,是bootstrapslider嵌入html中的部分。
Function(value)函数是bootstrapslider的输出接口,Value值就是当下的日期。
对value值的操作即可展示不同日期的PM2.5状况。
代码段中使用switch(value){case};
语句对此进行操作。
然而这样还是不能达到预期的效果,每次拖动滑动条,地图不发生任何变化。
原因在于,地图在更新的时候,并没有将之间缓存中的地图数据删除,导致更新以后的地图数据不能正常显示。
解决这个问题需要在.js中的绘图函数进行修改:
varpaths=ZJG.selectAll("path").remove().data(ds.features),选中所有的path,在第二次绘制之前将它们全部清除即可。
由此浙江省各城市PM2.5数据可视化得以完成。
赋一张效果图,如下:
三.收获与感悟
这次制作浙江省各城市PM2.5数据可视化,对我有很大的提高。
首先,我对数据可视化有了更深的了解,我们可以收集数据,在可视化以后,可以使我们更方便的对数据进行研究,把握数据的规律,更好的利用数据;再者,我学习了从网上搜索资料的方法,也了解了从网上抓取数据的方法,同时也学习了d3的使用,能使用d3进行数据的可视化分析。
在这个过程中,自己的编程能力有一定的提高,提高了自己的自信心。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 期末 数据 可视化 报告 关于 PM25