Skip to content

XxiHee22/visualization_project2

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
README.md
README.md
 
 
documentation.html
documentation.html
 
 
index.html
index.html
 
 
medical_image.jpg
medical_image.jpg
 
 
open-browser.bat
open-browser.bat
 
 
项目计划.md
项目计划.md
 
 

Repository files navigation

COVID-19 疫情数据可视化分析系统

项目概述

本项目是一个交互式COVID-19疫情数据可视化系统，旨在通过多维度的可视化图表帮助用户理解和分析全球及区域疫情态势。系统采用纯前端技术栈，部署在GitHub Pages上，提供流畅的交互体验和丰富的数据洞察。

在线演示: 点击访问

核心问题与目标

本可视化方案旨在解答的问题

  1. 全球疫情地理分布: 哪些国家和地区的疫情最为严重？疫情在地理空间上的分布特征是什么？

  2. 区域疫情对比: 美国各州、中国各省份之间的疫情差异有多大？哪些地区需要重点关注？

  3. 疫情发展趋势: 中国各省份的疫情随时间如何演变？治愈率的变化趋势如何？

  4. 数据排名分析: 在确诊、死亡、治愈等不同指标下，全球排名前列的国家有哪些？

  5. 多维度数据探索: 如何快速切换不同的数据维度（确诊/死亡/治愈）和地理范围（全球/国家/省份）进行对比分析？

设计决策与依据

1. 可视化编码选择

地图可视化（Choropleth Map）

选择依据:

  • 地理空间特征: 疫情数据具有明显的地理属性，地图能够直观展示疫情的空间分布模式
  • 认知负担低: 用户对地理位置有天然的认知基础，无需额外学习成本
  • 颜色编码: 使用红色渐变表示确诊数量，符合"红色=危险"的文化认知

实现技术:

  • 世界地图: 使用D3.js + TopoJSON渲染，采用Natural Earth投影保持视觉平衡
  • 美国地图: 使用D3.js + Albers USA投影，专门优化美国本土、阿拉斯加和夏威夷的显示
  • 中国地图: 使用ECharts + 阿里云DataV地图数据，提供更好的中文支持和交互体验

替代方案考虑:

  • ❌ 气泡图（Bubble Map）: 虽然能表示数量级差异，但在数据密集区域会产生严重遮挡
  • ❌ 符号地图（Symbol Map）: 不如颜色填充直观，且难以表示连续数值范围

柱状图（Bar Chart）

选择依据:

  • 精确比较: 柱状图是比较不同类别数值大小的最有效方式
  • 排名可视化: 通过排序和截断（Top 6），突出重点国家
  • 动画过渡: 切换指标时的平滑过渡帮助用户理解数据变化

实现技术:

  • 使用D3.js的enter-update-exit模式实现数据驱动的动画
  • 500ms过渡时间平衡了流畅性和响应速度

替代方案考虑:

  • ❌ 饼图: 不适合比较多个类别，且难以表示绝对数值
  • ❌ 雷达图: 过于复杂，不适合单一指标的排名展示

折线图（Line Chart）

选择依据:

  • 时间序列: 折线图是展示时间趋势的标准选择
  • 多系列对比: 支持同时显示多个省份的趋势，便于横向对比
  • 连续性: 折线的连续性强调了疫情发展的时间连续性

实现技术:

  • 使用D3.js的line生成器和时间比例尺
  • 颜色编码区分不同省份，配合图例和交互式筛选

替代方案考虑:

  • ❌ 面积图（Area Chart）: 多系列叠加时会产生遮挡，降低可读性
  • ❌ 散点图（Scatter Plot）: 不能有效表达时间的连续性

2. 交互技术选择

鼠标悬停提示（Tooltip）

选择依据:

  • 按需显示: 避免界面过载，只在需要时显示详细数据
  • 上下文关联: 提示框跟随鼠标，明确指示当前关注的数据点
  • 多维信息: 同时显示确诊、死亡、治愈三个指标，提供完整信息

实现细节:

  • 动态定位算法避免提示框超出视口
  • 200ms延迟隐藏，防止误触

下拉菜单（Dropdown Selector）

选择依据:

  • 指标切换: 确诊/死亡/治愈三个互斥选项，下拉菜单是最简洁的选择
  • 节省空间: 相比单选按钮，下拉菜单占用更少的屏幕空间
  • 标准控件: 用户熟悉度高，无需学习成本

多选框（Multi-Select）

选择依据:

  • 省份筛选: 用户可能需要同时对比多个省份的趋势
  • 灵活性: 支持选择任意组合，满足不同分析需求
  • 可见性: 显示所有选项，便于快速浏览和选择

替代方案考虑:

  • ❌ 复选框列表: 占用空间过大，不适合30+个省份
  • ❌ 搜索框: 增加交互步骤，不如直接选择高效

地图钻取（Drill-down）

选择依据:

  • 渐进式探索: 从全球→国家→省份，符合用户的认知层次
  • 减少认知负担: 避免在一个视图中展示过多细节
  • 上下文保持: 返回按钮确保用户不会迷失在导航中

3. 视觉设计决策

配色方案

  • 红色渐变: 用于地图的确诊数量编码，符合"热力图"的视觉隐喻
  • 蓝紫色: 用于按钮和强调元素，与红色形成对比
  • 灰色: 用于无数据区域，避免误导

布局设计

  • 垂直排列: 三个图表垂直堆叠，适合滚动浏览
  • 响应式: 移动端自动调整为单列布局
  • 留白: 充足的间距提高可读性

外部资源引用

数据源

  1. COVID-19 Data.xlsx

    • 来源: 项目提供的美国各州疫情数据
    • 包含字段: 州名称、累计确诊、死亡、治愈
    • 数据时间: 截至特定日期的累计数据

  2. COVID19_nations.xlsx

    • 来源: 项目提供的全球各国疫情数据
    • 包含字段: 国家名称、累计确诊、死亡、治愈
    • 覆盖范围: 70个主要国家

  3. covid_19_data_2.csv

    • 来源: 项目提供的全球时间序列数据
    • 包含字段: 日期、国家/地区、省份/州、确诊、死亡、治愈
    • 时间跨度: 2020年初至数据收集时点

  4. covid_data_China.xlsx

    • 来源: 项目提供的中国各省份疫情数据
    • 包含字段: 省份名称、累计确诊、死亡、治愈

  5. National_Obesity_By_State.geojson

    • 来源: 项目提供的美国地图地理数据
    • 用途: 渲染美国各州边界

  6. US Atlas TopoJSON

  7. World Atlas TopoJSON

  8. 中国地图GeoJSON

第三方库

  1. D3.js v7

  2. TopoJSON v3

  3. SheetJS (xlsx.js)

  4. ECharts v5

参考资源

本项目的设计和实现参考了以下资源：

  1. D3.js官方示例

开发流程概述

开发时间统计

总开发时间: 约60-70工时（分3周完成）

第1周：基础设施 + 数据层 + 地图组件（约25工时）

  • 项目初始化（3工时）

    • 目录结构搭建
    • HTML/CSS基础框架
    • CDN配置和依赖管理

  • 数据加载器开发（8工时）

    • 实现多种数据格式解析（Excel、CSV、JSON）
    • 错误处理和重试机制
    • 数据验证和转换逻辑
    • 耗时原因: Excel解析库的学习曲线，数据格式不统一需要大量适配

  • 地图组件开发（12工时）

    • 世界地图实现（D3.js + TopoJSON）
    • 美国地图实现（Albers投影）
    • 中国地图实现（ECharts重构）
    • 地图交互和钻取逻辑
    • 耗时原因: 地图投影调试、国家名称匹配、中国地图技术栈切换

  • Tooltip组件（2工时）

    • 提示框定位算法
    • 样式和动画效果

第2周：图表组件 + 交互功能（约22工时）

  • 国家排名柱状图（6工时）

    • 数据聚合逻辑（处理多省份国家）
    • 柱状图渲染和坐标轴
    • 指标切换动画
    • 耗时原因: 数据聚合逻辑复杂，动画过渡调试

  • 中国时间序列折线图（8工时）

    • 时间序列数据处理
    • 多条折线渲染
    • 省份筛选功能
    • 图例和交互
    • 耗时原因: 多系列数据管理，颜色分配算法，性能优化

  • 事件总线和组件集成（4工时）

    • 发布-订阅模式实现
    • 组件间通信协调
    • 全局状态管理

  • 交互控件开发（4工时）

    • 下拉菜单和多选框
    • 事件绑定和数据流
    • 返回按钮和视图切换

第3周：优化、测试、部署（约18工时）

  • 响应式布局（3工时）

    • 媒体查询和移动端适配
    • 图表尺寸自适应
    • 触摸交互优化

  • 性能优化（4工时）

    • 数据缓存机制
    • 防抖节流
    • SVG渲染优化
    • 耗时原因: 性能瓶颈定位，大数据集渲染优化

  • 错误处理和用户反馈（3工时）

    • 错误UI组件
    • 加载指示器
    • 浏览器兼容性检查

  • 测试和调试（5工时）

    • 跨浏览器测试（Chrome、Firefox、Safari、Edge）
    • 数据验证测试
    • 交互流程测试
    • 耗时原因: 浏览器兼容性问题修复，边界情况处理

  • 文档编写（2工时）

    • 代码注释
    • README文档
    • 用户指南

  • 部署和发布（1工时）

    • GitHub Pages配置
    • 相对路径调整
    • 最终验收测试

最耗时的环节

  1. 地图组件开发（12工时，占比17%）

    • 原因:
      • 地图投影和坐标系统复杂，需要反复调试
      • 国家/州名称匹配问题（中英文、缩写、变体）
      • 中国地图从D3.js切换到ECharts，需要重写代码
      • 地图交互细节多（悬停、点击、钻取、返回）

  2. 数据加载和处理（8工时，占比11%）

    • 原因:
      • 多种数据格式（Excel、CSV、JSON）需要不同的解析方法
      • 数据质量问题（缺失值、格式不一致、编码问题）
      • Excel解析库（SheetJS）的API学习
      • 错误处理和降级策略设计

  3. 中国时间序列折线图（8工时，占比11%）

    • 原因:
      • 时间序列数据量大（5000+条记录）
      • 多系列折线的性能优化
      • 省份筛选逻辑复杂（空选择、全选、部分选择）
      • 颜色分配和图例管理

  4. 国家排名柱状图（6工时，占比9%）

    • 原因:
      • 数据聚合逻辑（同一国家多个省份需要合并）
      • 动画过渡的流畅性调试
      • Top N排序和截断逻辑

开发过程中的挑战与解决方案

挑战1：数据格式不统一

问题: Excel文件的列名有中英文混合，CSV文件的日期格式不一致 解决方案:

  • 实现灵活的字段映射逻辑，支持多种列名变体
  • 编写健壮的日期和数值解析函数
  • 添加数据验证和警告机制

挑战2：地图国家名称匹配

问题: TopoJSON中的国家名称与数据文件中的名称不一致（如"US" vs "United States of America"） 解决方案:

  • 创建详细的国家名称映射表（70+个映射规则）
  • 支持中英文双向映射
  • 添加调试日志帮助定位匹配问题

挑战3：中国地图技术选型

问题: D3.js渲染中国地图时，省份边界数据质量差，且中文支持不佳 解决方案:

  • 切换到ECharts + 阿里云DataV地图数据
  • 重写ChinaMap组件，保持接口一致性
  • 利用ECharts的内置tooltip和交互功能

挑战4：性能优化

问题: 全球时间序列数据量大（5000+条），折线图渲染卡顿 解决方案:

  • 限制CSV解析行数（最多5000行）
  • 实现数据缓存，避免重复解析
  • 使用D3.js的enter-update-exit模式优化DOM操作

挑战5：响应式设计

问题: 地图和图表在移动端显示效果差 解决方案:

  • 使用容器宽度动态计算图表尺寸
  • 添加媒体查询，移动端切换为单列布局
  • 调整字体大小和交互元素尺寸

开发工具和环境

  • 代码编辑器: Visual Studio Code
  • 版本控制: Git + GitHub
  • 浏览器开发工具: Chrome DevTools
  • 本地服务器: Python http.server / Node.js http-server
  • 调试工具: Console.log + Chrome Performance Profiler

经验总结

  1. 模块化设计的重要性: 将数据层、组件层、应用层分离，大大提高了代码的可维护性和可测试性

  2. 数据质量是关键: 数据清洗和验证占据了大量时间，但这是保证可视化准确性的基础

  3. 渐进式开发: 先实现核心功能（地图渲染），再添加交互（tooltip、钻取），最后优化（性能、响应式），这种方式降低了风险

  4. 用户反馈很重要: 加载指示器、错误提示、返回按钮等细节大大提升了用户体验

  5. 技术选型需灵活: 中国地图从D3.js切换到ECharts的决策，虽然增加了工作量，但最终效果更好

技术栈

  • 前端框架: 原生JavaScript (ES6+)
  • 可视化库: D3.js v7, ECharts v5
  • 数据处理: SheetJS (xlsx.js), TopoJSON
  • 样式: CSS3 + 响应式设计
  • 部署: GitHub Pages

功能特性

  • ✅ 世界地图：展示70个主要国家的疫情分布
  • ✅ 美国地图：展示各州详细疫情数据
  • ✅ 中国地图：展示各省份详细疫情数据
  • ✅ 国家排名：Top 6国家的确诊/死亡/治愈数据对比
  • ✅ 时间序列：中国各省份治愈病例趋势分析
  • ✅ 交互式探索：鼠标悬停、地图钻取、指标切换、省份筛选
  • ✅ 响应式设计：支持桌面端和移动端
  • ✅ 错误处理：友好的错误提示和降级策略

使用方法

在线访问

直接访问GitHub Pages链接即可使用。

本地运行

  1. 克隆仓库
git clone https://github.com/your-username/covid-19-visualization.git
cd covid-19-visualization
  1. 启动本地服务器
# 使用Python
python -m http.server 8000

# 或使用Node.js
npx http-server -p 8000
  1. 在浏览器中访问
http://localhost:8000

注意: 不要直接用file://协议打开HTML文件，会有CORS限制。

项目结构

/
├── index.html                    # 主页面
├── css/
│   └── style.css                # 全局样式
├── js/
│   ├── main.js                  # 应用入口
│   ├── dataLoader.js            # 数据加载模块
│   ├── dataCache.js             # 数据缓存
│   ├── eventBus.js              # 事件总线
│   ├── worldMap.js              # 世界地图组件
│   ├── usMap.js                 # 美国地图组件
│   ├── chinaMap.js              # 中国地图组件
│   ├── countryRanking.js        # 国家排名组件
│   ├── chinaTimeline.js         # 中国时间序列组件
│   └── tooltip.js               # 提示框组件
├── visualization_dataset/        # 数据文件
│   ├── COVID-19 Data.xlsx
│   ├── COVID19_nations.xlsx
│   ├── covid_19_data_2.csv
│   ├── covid_data_China.xlsx
│   └── National_Obesity_By_State.geojson
└── README.md                    # 本文档

浏览器兼容性

  • ✅ Chrome 90+
  • ✅ Firefox 88+
  • ✅ Safari 14+
  • ✅ Edge 90+

许可证

本项目仅用于教育和研究目的。数据来源和第三方库的许可证请参见"外部资源引用"部分。

致谢

感谢所有开源项目和数据提供者，特别是：

  • D3.js社区
  • ECharts团队
  • 阿里云DataV
  • COVID-19数据收集者和整理者

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages