# interactive_visualization_end_project

**Repository Path**: nfuum074/interactive_visualization_end_project

## Basic Information

- **Project Name**: interactive_visualization_end_project
- **Description**: 通过中国的物价水平、消费价格指数（cpi）、人口受教育水平和收入水平相关的因素进行分析，尝试做出一个更具可视化的交互图表和界面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-12-15
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# interactive_visualization_end_project

## Python期末项目最终汇报与分工

## 一、项目合作者：17级苏衍中 18级苏健星 18级林立宇

### 项目介绍：
* 本项目通过调用和风天气预报api数据，爬取和风天气商业版的天气预报和空气质量的数据来进行清洗，实现375城空气质量预报的可视化图表，可以看出每个城市的近一周的天气状况、空气质量的分布状况、温度、风速、降水方面，来探讨不同城市的空气污染情况与天气状况相关性-关联度的高低。

### 项目分工
* 由17级苏衍中负责提供数据和对数据故事具有表现力的地图等，包含三份数据，五份实现交互的图表（全部放在了py文档和html里面来实现的），还提供了所有的py文档、以及Flask+dash的交互功能实现的全部代码 因为我不太明确老师的要求 所以直接使用Flask,render_template,request和**dash**来实现交互功能和页面，基本上所有的代码都是我写的，我并没有用到太多的HTML来做，由于我想尝试直接用flask+dash的结合来实现动态交互，望老师理解。

* [代码下载](https://gitee.com/nfuum074/interactive_visualization_end_project/tree/master/codes)

* 由18级林立宇和苏健星共同部署网页，他们通过添加了一些样式优化了页面，他们主要负责将我写的py文档和csv数据部署到pythonanywhere上，其中调试过程出现问题，我协助他们完成。（Pythonanywhere部署已可以了，可以成功获得post请求并实现交互）

* [Pythonanywhere URL](http://linlyu01.pythonanywhere.com)

---

## 二、数据来源及清洗介绍：

- 数据来源：和风天气的[天气_api接口](https://dev.heweather.com/docs/api/ && [空气质量_api接口](https://dev.heweather.com/docs/api/air) ,通过这两个api接口获得7天内的天气预报（包括城市的近期最高气温、最低气温和紫外线情况；能见度，风速，相对湿度；一周内空气污染程度比例；以及aqi指数、首要污染物和空气质量情况）
* [数据csv档下载](https://gitee.com/nfuum074/interactive_visualization_end_project/tree/master/codes)

- 数据清洗部分：爬虫爬取的同样信息不在 json 的一个层级，利用 try catch语句准确获取并保存到 csv 文件中；利用 pandas 读取城市列表信息和爬取的天气信息，merge 城市经纬度信息和天气信息，数据集的丰富性不言而喻了吧，可以看看csv里的内容，经过一定时间才能清洗完毕的。

---

## 三、图表使用情况：（请从部署好的网址来看成果）
[Pythonanywhere URL](http://linlyu01.pythonanywhere.com)

#### 地图使用的部分：
* 本人直接将自己画的中国地图+散点图结合，实现“地图的创新+”，既可以实现有效地表达我们的项目-空气质量的总体情况，也可以通过框选来实现细化地图的某城市。

#### 非地图的部分：
* 本人通过折现图则展现了当地城市的近期最高气温、最低气温和紫外线情况；饼状图显示近一周该城市的空气质量占比情况；条形图下呈现以不同的颜色柱状来表示分类，其实可以看出相对湿度与能见度的相关性不大，风速、能见度和相对湿度基本上保持一个稳定值，直观地反映了该城市的天气状况；

#### 总结：通过对不同城市的可视化图表展现，让浏览者可以直观地看到自己所在的城市最近一周的天气预报情况和空气质量情况，尤其在京津冀地区，可以用一些城市的降水数据、空气质量情况和能见度来探讨雾霾和降水之间的关联性，为浏览者提供一个简易而美观的可视乎图表，其中在折线图上同样可以细化看到几个小时内的天气预报情况，为用户不同的需求提供便捷的服务。

---

## 四、交互界面的实现 
使用了使用Flask,render_template,request和**dash**来实现交互功能和页面
制作交互图表来呈现是使用了plotly、echart&pandas与global的结合。充分展现了交互图表，可以欣赏部署好的网址里面的内容。
![code1](https://gitee.com/nfuum074/interactive_visualization_end_project/blob/master/code1.png)
![code2](https://gitee.com/nfuum074/interactive_visualization_end_project/blob/master/code2.png)


## 五、加分项：
* 我把dash的app嵌入到了flask app中，启动 app，首先是从 csv 文件中读取数据通过 jinjia2 模板渲染到 app 的首页 index.html；点击首页中的某个城市，就进入到了dash 可视化界面，并获取点击的城市分析该城市近一周的天气状况和空气质量情况。

---

## 六、数据故事与介绍
* 页面内分别有2个url

1.空气质量报告：该页面主要展示国内375个城市空气质量预报，包括api指数、首要污染物、空气质量 如：[首页，点击各城市可以跳转交互图](http://linlyu0.pythonanywhere.com/)

2.天气数据可视化：该页面可以呈现某城市的最高和最低温度、紫外线强度、相对湿度、能见度、风速随时间变化而变化和对应时间的空气质量情况 如：[flask+dash实现的交互图](http://linlyu0.pythonanywhere.com/dash/)


### 空气质量报告（页面介绍以及故事）
* 首页地图、表格和点击城市交互图表数据、交互功能的大部分代码由本人提供，通过点击所选的城市，实现跳转，清晰地展现饼状图显示近一周该城市的空气质量情况；散点图则根据空气质量数据来可视化的呈现近一周的空气状况是否良好；折现图则展现了当地城市的近期最高气温、最低气温和紫外线情况，充分地体现了近期的温差情况，由此看出近期某城市的天气状况。

* 其中选择城市后的选框的删除键，可以返回到首页的空气质量预报情况表，当浏览者希望重新选择城市可视化的看其天气预报情况，便可通过此实现，既方便也省时。

* 首页点击跳转后，上面的四个按钮可以实现页面跳转交互，跳转到相对应的页面呈现不同的类型图表。


### 天气数据可视化（页面介绍以及故事）
折现图则展现了当地城市的近期最高气温、最低气温和紫外线情况，充分地体现了近期的温差情况，并且可视化地呈现当天的昼夜温差情况，为浏览者提供当天的衣着多少为适合的便利，并且以框选时间的交互来实现当天实时的气温预计情况，在此页面还可实现对当天或近期某时的气温的总览；条形图下呈现以不同的颜色柱状来表示分类，其实可以看出相对湿度与能见度的相关性不大，风速、能见度和相对湿度基本上保持一个稳定值，直观地反映了该城市的天气状况；

* 同时散点图（地图）的页面中也实现了移动到某地城市时，可以可视化的看到当地的api指数、首要污染物、空气质量，以及近期的空气状况，动态地显示全国某城市的空气质量情况预报，为浏览者提供有效并可观的信息反馈和图表。

### 数据故事的洞见：
    可视化图表为375座城市的近一周内的天气预报情况和空气质量状况，从交互图表中可以看出每个城市的近一周的天气状况、空气质量的分布状况、温度、风速、降水方面，其中可以通过降水量和能见度的结合分析来与空气污染情况作一个关联性对比，得出自己所在的城市天气与空气污染的相关程度。其中交互的五种图表可以很好地呈现不同城市的在近一周內的不同时期的气温、降水、空气以及空气污染情况等等，能够引导用户对可视化的图表产生自己独特的思考，创新地交互方式可以帮助用户理解自己城市的天气预报的实在情况。



## 评分要求组成：

*   [x] 根据项目需求自己提供数据（已完成）

*   HTML5界面设计包含CSS样式（已完成）

*   必需在[ pythonanywhere.com ]布署可用（已完成）

*   17级《交互》评分点：

*   [x] 数据清洗和收集难度，数据集丰富程度（已完成）

*   [x] 交互功能对于强化数据产品或者数据故事表现力的程度（已完成）

*   [x] 交互界面是否美观、得体（用plotly、pyecharts、网页CSS样式等渠道实现的都包含在内）（已完成）

*   [x] 整体数据产品/数据故事是否有洞见，給用戶交互生洞見的引導及可能性（已完成）

* 我没很能理解我们和18级合作的部分，所以直接我也把18做的大部分也做了，直接结合图表来做数据可视化，希望能有所加分，感谢！

## 谢谢您抽出宝贵的时间来浏览本项目，由衷地感谢