《空气质量可视化作品文档》由会员分享，可在线阅读，更多相关《空气质量可视化作品文档（13页珍藏版）》请在金锄头文库上搜索。
1、山东大学计算机科学与技术学院考试试卷I注意：此半页由阅卷教师填写 姓名石成:5、草稿纸另发，考试结束后统一收回。数据篇1数据来源PM25.IN:天气指数实时监测平台是一个为国内用户提供空气质量监测数据的网站，数据采自于国家环境保护部，清新整洁的界面帮助用户更好的了解有关本地天气的最新动态。知识普及：细颗粒物又称细粒、细颗粒、PM2.5。细颗粒物指环境空气中空气动力学当量直径小于等于2.5微米的颗粒物。它能较长时间悬浮于空气中，其在空气中含量浓度越高，就代表空气污染越严重。虽然 PM2.5只是地球大气成分中含量很少的组分，但它对空气质量和能见度等有重要的影响。与较粗的大气颗粒物相比，PM2.5粒
2、径小，面积大，活性强，易附带有毒、有害物质（例如，重金属、微生物等），且在大气中的停留时间长、输送距离远，因而对人体健康和大气环境质量的影响更大。根据PM2.5检测网的空气质量新标准，24小时平均值标准值分布如下：空气质量等级24小时PM2.5平均值标准值035 口 g/m3良3575 口 g/m3轻度污染75115 口 g/m3中度污染115150 口 g/m3重度污染150250 口 g/m3严重污染大于250 口 g/m3及以上本367个城市的经纬度坐标和2014年11月到2015年11月的全国天气质量指数数据。2、数据的结构描述所有数据以Excle表格的形式给出。其中location-
3、new.xls文件包含了城市位置信息。具体包括了城市名称、经度和纬度三项数据。AC0EFl12 5A116.243 天津节 东经117 12纬度39.55UH3S 02题116.461172蝇度395239.1314石家庄市东经114-勿d饶戏0211440A0.035唐山市6奏皇舟韦东19.367SS114.238邢畲市京轻伯434tA39.36北 S 36.3 6 37.04fl 19.57r114.47114.46A9.63A7.059 35八115.3010 东经1 口 5了11 洽州市5A116.524tAB38.51北纬40主北舞 18115.48117.93116 83勺&85A
4、S.3312廊疔S13律j水市东经132北纬37 44r116.7A15 72勺9. H勺 r37 7214舐家口市东经120 32图1-1城市位置信息Excle表格天气数据按照月份给出，每 项包含城市名称、日期、r106 23AQI指数、%空气质量级别、首要污染物等。11A1 e | c | IE |日朋AQI指数空首姜污物122014-11-29 rmPM2,53 12014dV29 为 9皱亏梁PM2 54石家庄市2014d1-29 712重龛亏臬PM255唐山市2014-11-29 731垂虔污染PM2 5& 1秦皇岛韦2014八11-29 话PM2 572014-1V29 r127轻
5、度澡PM2.6邢台由2014-11-29 r163中虚污渠PM255 1保定市2014八11-29 嘟 3染PIV12 51020U-11 29 F134轻扈亏染PM10112014-11-29 169中度污染PM2512.12014-11-29 738 cm重龛与PM2S1rjMm图1-2天气质量数据Excle表格F1 3、数据的存储形式由于最终选择的可视化工具是通过web方式展现，在这种情况下Excle格式对于和数据交换和传输十分不便。于是考虑将Excle格式的数据转换成Json格式以便于在数据库中存取还有在浏览器中进行展示。JSON (JavaScript Object Notatio
6、n)是一种轻量级的数据交换格式，按照名称/值”成对的书写格式进行存储。json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。4、数据预处理方法和过程用Python语言编写了数据预处理脚本readData.py。读入Excle文件并转化成数组，逐行按照Json的语 法格式写入到地点信息.json和天气信息.json文件中。其中经过多次运行，修改发现：(1) AQI指数一项，后面有部分数据带有空格。| A
7、 B-城市日期 隔宙数2014-11-2 *2 天津十 2014d 1-2*239 石家庄市2014 11-2M22014-11-3入31 奏皇岛市2014-11-2人2051r图1-3 AQI指数字符串带有空格2 )还有些条目缺少数据。104105106107108 10Q邑市市市市市市.BC D2015-11-157 2015-11-1A 2015-良11A/60良2015-11-10 2015-111 2015-11-1 75良R.EPM2.5PM2.5PM2.5PM? 5图1-4部分条目缺少数据经过清洗之后得到的数据如下图所示。5 *i （：） ffiyiM三日日C匚 AAr6-9-i
8、= ont七Ln 1 L n- 。00 氐 r fopLUtL2非 却加沏却1-L-orcn.另口蜻/l.z ? TCTr Lr1乙r*-肓I L 111&d&sO3DT1JII 11i&1iIO r 3L1-1 7& 3 ? j 1H . d T_l32_l10J9431S995lQll10llMn_l.说11系味亍耒ft子畸瞬SK也回蛰沟1-他言乍网肓J iaAfA.pCT-_壬弓偿早-记事t刘田F-袖旧瓠亘看孑系可视化篇flts.q iecLo)ss-v)岸训卜.北京市d: L116. 4, 29.921 Ygt$FjL1P. 2, M. 13, 牢 土币让 I lt4t/0.3,JB
9、山市:US. . 39l迅 阡 昱岛里仕I何57,29. 35询 电椅市乜11A颂3八.6，护 台币 114. 4S, 37. 05J,nane：北厢市)令rr疵：天no：,方反氏这样我们就可以在下面的开发中使用 我们并没有实际架设数据库，而是从本地便1一、.Pl uTWTl 八tiw汽 014lr2H,律护啊Jj: 239, 田 旧 mom-朗辱如章 市一Flue：212,W : 2014-11-2*, k :嚼 唱虬i majiR 山 口 *士2014-11-29rJ,J rame :金壬由市二 登或8* ：206河1京*2014-11厂2八)，V nam& rn序:滋自市城“ 1 曲*1
10、 W2H3 ； pme. :pom 理扎/、二*褊 12 -“一丹卜1-5数据处理结果展示-h aAjax异步加载Json文件。由于这里数据量较小，Json文件读取，和远程获取并没有大的区别，也于以后进行扩展升级。1、可视化开发工具的选择1.1常见工具浏览我对常见的可视化工具在搜索引擎上搜索，逐一了解。(1) Plotly这个可视化工具很方便的一点是和R、Python、Excel等常见的数据处理软件/语言之间有API 接口。(2) Visme有个Blog非常好，表现形式看起来特别高级。其实内在的思路非常重要，这个工具可以帮助我们 正确看待数据、发现数据之间的内在联系。(3) 无需编程语言的工具
11、Tableau. Raw、In fogram(4) 基于JavaScript实现的工具EChart.js、D3.js、Fusi on Charts、JavaScript In foVis Toolkit、JQuery Visualize(5) 基于其他语言的工具#PHP： jpGraph#Python： NodeBox#JAVA : Processing(6) 地图数据可视化工具CartoDB、InstantAtlas、Kartograph(7) 金融(股票)数据可视化工具Dygraphs、Highcharts(8 )时间轴数据可视化工具Timeline、Dipity(9)函数与公式数据可视化
12、工具WolframAlpha、Tangle12工具选择最终经过考虑，我选择了易于实现而且有中文的文档示例的Echarts作为本次作品的可视化工具。它具有简单小巧、容易上手、功能强大等特点。2、可视化开发工具的选择2.1可视化功能构思在浏览了 Echarts的官方示例之后，我们选择了地图数据展示、区域全年AQI对比、城市月度数据对比等图表，进行了开发实现。在地图展示中，用不同的颜色代表不同的污染程度。后期考虑添加其他污染物的时 候，用原点大小表示污染程度，用颜色代表污染物。2.2可视化功能布局这里我们选择了 FreeHtml5作为网站的基本模版。作品的结构分为主页的内容展示：四个Slide对应不
13、同的功能，设置大图背景自动滑动；分页的功能：包含AQI动态数据展示、AQI数据查询、数据对比、联系作者4个模块。AQI动态数据展示、AQI数据查询分为左侧的展示版块和右侧的控制版块。并且为它们添加边距、内边框、圆角、 阴影等等一系列效果来对原始的图表进行美化。在数据对比图表中，添加了控制按钮，使得原本静态的图表，可以根据使用者的操作做出响应。最后利用Html5自带的音频播放功能控制图表变化与背景音乐的同步。使用Bootstrap的一些样式，按钮、图表、输入框等，进一步美化页面。3、可视化开发的功能实现3.1 AQI动态数据展示页面实现图2-1AQI动态数据页面结构整体布局：首先将整个页面划分成头部，躯干，尾部三部分。头部主要是导航栏，躯干部分用于展示和交互，尾部是一些附加信息。然后，在页面的主体部分加入左右两个大小接近的div。左侧部分用于展示图表，右侧部分再分为从上到下3块，分别用来显示当前日期、切换图表类型、控制播放与暂停。细节处理：左侧的页面内部再添加div设置不同的背景色，达到添加蓝色的外边框效果。并且为最外侧的div设 置圆角，在右方和下放设置了白色的阴影，达到浮出平面的效果。右侧的控制版块，为按钮添加鼠标滑过、点击时、点 击之后的
