其他 > 日常积累
桃子湖生态数据可视化系统设计

Project
数据可视化课程、个人兴趣
Position
Web前端工程师/网页设计师
Department
小组作业团队/个人
Duration
2 Month
Tools
Figma/HTML/CSS/JS
数字孪生背景调研
数字孪生是数字化的形式对某一物理实体 过去和目前 的 行为或流程 进行动态呈现。
生产流程数字孪生模型
用户对搜索链路评分,然后被引导描述第三者的行为和态度。

内容来源:中国电子技术标准化研究院-2020版数字孪生应用白皮书-201120
数字孪生行业应用
用户对搜索链路评分,然后被引导描述第三者的行为和态度。

内容来源:中国电子技术标准化研究院-2020版数字孪生应用白皮书-201120
数字孪生组成要素
传感器
生产流程中配置的传感器可发出信号,数字孪生可通过信号获取实际流程相关的运营和环境数据。
数据
传感器提供的运营和环境数据将在聚合后与其他数据合并。
集成
传感器通过集成技术(包括边缘、通信接口和安全)达成物理世界与数字世界之间的数据传输。
分析
数字孪生利用分析技术开展算法模拟和可视化程序,进而分析数据,提供洞见。
数字孪生
图中的“数字化”层面是指数字孪生本身。该应用程序综合以上所有要素,建立物理实体和流程的准实时数字化模型。数字孪生旨在识别不同层面偏离理想状态的异常情况。
数字孪生特征
01 互操作性
数字孪生中的物理对象和数字空间能够双向映射、动态交互和实时连接,因此数字孪生具备以多样的数字模型映射物理实体的能力,具有能够在不同数字模型之间转换、合并和建立“表达”的等同性。
02 可扩展性
数字孪生技术具备集成、添加和替换数字模型的能力,能够针对多尺度、多物理、多层级的模型内容进行扩展。
03 实时性
数字孪生技术要求数字化,即以一种计算机可识别和处理的方式管理数据以对随时间轴变化的物理实体进行表征。表征的对象包括外观、状态、属性、内在机理,形成物理实体实时状态的数字虚体映射。
04 保真性
数字孪生的保真性指描述数字虚体模型和物理实体的接近性。要求虚体和实体不仅要保持几何结构的高度仿真,在状态、相态和时态上也要仿真。值得一提的是在不同的数字孪生场景下,同一数字虚体的仿真程度可能不同。例如工况场景中可能只要求描述虚体的物理性质,并不需要关注化学结构细节。
05 闭环性
数字孪生中的数字虚体,用于描述物理实体的可视化模型和内在机理,以便于对物理实体的状态数据进行监视、分析推理、优化工艺参数和运行参数,实现决策功能,即赋予数字虚体和物理实体一个大脑。因此数字孪生具有闭环性。
数字孪生搭建流程
用户对搜索链路评分,然后被引导描述第三者的行为和态度。

内容来源:中国电子技术标准化研究院-2020版数字孪生应用白皮书-201120
生产流程数字孪生模型
用户对搜索链路评分,然后被引导描述第三者的行为和态度。

内容来源:中国电子技术标准化研究院-2020版数字孪生应用白皮书-201120
数字孪生方案框架
数字孪生是数字化的形式对某一物理实体 过去和目前 的 行为或流程 进行动态呈现。




01 建立虚拟模型
用户对搜索链路评分,然后被引导描述第三者的行为和态度。
02 寻找特征位置
桃子湖教学区域、桃子湖景区区域
03 搭建传感器
环境温度、湿度、噪音检测——室内、户外、湖边
空气质量检测——生态、非生态
实时人流检测
04 数据采集分析
单片机STM32
传输数据NB-IOT
05 数据可视化
生态与非生态的环境实时数据对比
虚拟模型搭建实施流程
数字孪生是数字化的形式对某一物理实体 过去和目前 的 行为或流程 进行动态呈现。
虚拟模型扫描
用户对搜索链路评分,然后被引导描述第三者的行为和态度。





扫描模型迭代
用户对搜索链路评分,然后被引导描述第三者的行为和态度。


传感器位置特征确定
用户对搜索链路评分,然后被引导描述第三者的行为和态度。




非自然环境区域
通过实地勘测与地图测量,将非生态特征点分别定位D4教学楼、B2工作室、桃子湖报告厅。
自然环境区域
生态特征点定位于桃子湖左下角处、同B2平行对应位置以及报告厅对应位置,形成点对点的相对位置点。
数据采集
用户对搜索链路评分,然后被引导描述第三者的行为和态度。
01 温湿度计采集
通过实地勘测与地图测量,将非生态特征点分别定位D4教学楼、B2工作室、桃子湖报告厅。
02 传感器采集




传感器数据采集
用户对搜索链路评分,然后被引导描述第三者的行为和态度。





桃子湖数据可视化设计方案
第一版设计方案由Adobe Illustrator原型实现,包括实景地图、温湿度数据和热力地图。(由其他同学完成)

温度热力图

温度数据可视化图表

迭代:桃子湖数据可视化设计方案2.0
逐步使用Html\CSS实现设计稿,并依据技术实现能力进行微调。(我的主要工作)

热力图变化实现。

最终代码方案:桃子湖数据可视化设计方案3.0
和团队一起,使用HTML、CSS、Javascript代码完全实现设计稿。


实景地图部分


湿度数据部分


温度热力图部分