数据可视化实验项目

西电数据可视化 2024 秋季课程实验代码仓库

⚠️ 重要声明：此仓库仅用于学习交流技术目的，请勿直接抄袭代码用于提交作业。如有违规行为，后果自负。

注：实验 1 为环境搭建，本仓库中未包含

目录

• 项目结构
• 实验说明
• 环境要求
• 快速开始
• 项目展示

项目结构

data-visualization-lab/
├── lab2/                    # 实验 2：统计图数据可视化
│   ├── src/                 # 问题描述图片
│   ├── code.py              # 实验代码
│   ├── data.csv             # 实验数据（可选）
│   ├── problem.md           # 问题描述
│   └── *.html               # 生成的 HTML 结果文件
│
├── lab3/                    # 实验 3：空间数据可视化
│   ├── src/                 # 问题描述图片
│   ├── code*.py             # 实验代码（可能有多个）
│   ├── problem.md           # 问题描述
│   └── *.html               # 生成的 HTML 结果文件
│
├── lab4/                    # 实验 4：地图数据可视化
│   ├── src/                 # 问题描述图片
│   ├── code.py              # 实验代码
│   ├── CityData.xlsx        # 实验数据
│   ├── problem.md           # 问题描述
│   └── *.html               # 生成的 HTML 结果文件
│
├── lab5/                    # 实验 5：高维非空间数据可视化
│   ├── backend/             # Flask 后端
│   │   ├── app.py           # Flask 应用入口
│   │   ├── routes.py        # 路由定义
│   │   ├── utils.py         # 工具函数
│   │   └── models/          # 数据库处理模块
│   ├── frontend/            # Vue.js 前端
│   │   ├── src/             # 源代码
│   │   ├── dist/            # 生产环境打包文件
│   │   ├── public/          # 静态资源
│   │   └── package.json     # 依赖配置
│   ├── data/                # 数据文件夹（需从 ChinaVis 官网下载）
│   ├── src/                 # 问题描述图片
│   └── problem.md           # 问题描述
│
├── lab6/                    # 实验 6：层次和网络可视化、文本可视化
│   ├── backend/             # Flask 后端
│   │   ├── app.py           # Flask 应用入口
│   │   ├── routes.py        # 路由定义
│   │   └── utils.py         # 工具函数
│   ├── frontend/            # Vue.js 前端
│   │   ├── src/             # 源代码
│   │   ├── dist/            # 生产环境打包文件
│   │   └── package.json     # 依赖配置
│   ├── data/                # 实验数据
│   ├── src/                 # 问题描述图片
│   └── problem.md           # 问题描述
│
├── lab-additional/          # 附加实验：时序多变量数据可视化
│   ├── src/                 # 问题描述图片
│   ├── *.xlsx               # 实验数据
│   └── problem.md           # 问题描述
│
├── src/                     # 项目资源
│   └── README/              # README 图片资源
│
├── requirements.txt         # Python 依赖
└── README.md                # 本文件

实验说明

实验编号	实验主题	说明
Lab 2	统计图数据可视化	使用 Python 和 PyECharts 进行统计图表可视化
Lab 3	空间数据可视化	三维空间数据可视化，包括曲面、曲线等
Lab 4	地图数据可视化	基于地理信息的数据可视化
Lab 5	高维非空间数据可视化	ChinaVis 2022 竞赛题目：交通数据可视化（Flask + Vue.js 全栈项目）
Lab 6	层次和网络可视化、文本可视化	ChinaVis 2024 竞赛题目 I：培训机构数据分析（Flask + Vue.js 全栈项目）
Lab Additional	时序多变量数据可视化	ChinaVis 2024 竞赛题目 II：数据分析公司（暂未完成）

环境要求

Python 环境

• Python 3.8+
• 依赖包见 requirements.txt

Node.js 环境（Lab 5/6 需要）

• Node.js 16+
• npm 或 yarn

快速开始

克隆仓库

git clone <repository-url>
cd data-visualization-lab

安装 Python 依赖

pip install -r requirements.txt

运行 Lab 2/3/4（纯 Python 项目）

1. 进入对应的实验文件夹：

cd lab2  # 或 lab3, lab4

2. 运行 Python 代码：

python code.py

3. 在浏览器中打开生成的 HTML 文件查看结果。

运行 Lab 5/6（全栈项目）

1. 后端启动（Flask）

# 进入对应实验的 backend 文件夹
cd lab5/backend  # 或 lab6/backend

# 运行 Flask 应用
python app.py

后端默认运行在 http://localhost:5000

2. 前端启动（Vue.js）

方式一：开发模式

# 进入对应实验的 frontend 文件夹
cd lab5/frontend  # 或 lab6/frontend

# 安装依赖（首次运行）
npm install

# 启动开发服务器
npm run serve

前端默认运行在 http://localhost:8080

方式二：使用打包文件（生产模式）

# 如果已存在 dist 文件夹，可以使用任意静态服务器
cd lab5/frontend/dist  # 或 lab6/frontend/dist

# 使用 Python 启动简单 HTTP 服务器
python -m http.server 8000

# 或使用 Node.js http-server
npx http-server -p 8000

然后在浏览器访问 http://localhost:8000

注意事项

• Lab 5 数据下载：Lab 5 的 data/ 文件夹未包含在仓库中（体积过大），需要从 ChinaVis 官网 下载对应数据集
• Lab 6：数据已包含在 data/ 文件夹中
• 确保后端和前端同时运行，前端需要通过 API 与后端通信

项目展示

Lab 5：交通数据可视化

动态联动效果演示：

Lab 6：培训机构数据分析

动态样式演示 1：

动态样式演示 2：

说明

• 每个实验文件夹中的 problem.md 文件包含详细的实验要求和问题描述
• 实验结果文件通常以 .html 格式保存
• Lab 5/6 的前端项目使用 Vue 3 + ECharts/D3.js 构建
• 所有实验均基于 Python 进行数据处理和可视化

许可证

详见 LICENSE 文件