-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocumentation.html
More file actions
363 lines (322 loc) · 19.9 KB
/
Copy pathdocumentation.html
File metadata and controls
363 lines (322 loc) · 19.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目说明文档 - COVID-19 疫情数据可视化分析系统</title>
<link rel="stylesheet" href="https://XxiHee22.github.io/visualization2/css/navigation.css">
<link rel="stylesheet" href="https://XxiHee22.github.io/visualization2/css/documentation.css">
</head>
<body>
<div class="container-wrapper">
<!-- 左侧空白 -->
<div class="left-space"></div>
<!-- 左侧导航栏 -->
<nav class="sidebar">
<div class="sidebar-header">
<h2>COVID-19<br>可视化系统</h2>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="index.html" class="nav-link">
<span class="nav-icon">📊</span>
<span class="nav-text">可视化图表</span>
</a>
</li>
<li class="nav-item active">
<a href="documentation.html" class="nav-link">
<span class="nav-icon">📖</span>
<span class="nav-text">说明文档</span>
</a>
</li>
</ul>
</nav>
<!-- 主内容区域 -->
<main class="main-content">
<div class="doc-container">
<h1>COVID-19 疫情数据可视化分析系统</h1>
<section class="doc-section">
<h2>项目概述</h2>
<p>本项目是一个交互式COVID-19疫情数据可视化系统，旨在通过多维度的可视化图表帮助用户理解和分析全球及区域疫情态势。系统采用纯前端技术栈，部署在GitHub Pages上，提供流畅的交互体验和丰富的数据洞察。</p>
</section>
<section class="doc-section">
<h2>核心问题与目标</h2>
<h3>本可视化方案旨在解答的问题</h3>
<ol>
<li><strong>全球疫情地理分布</strong>: 哪些国家和地区的疫情最为严重？疫情在地理空间上的分布特征是什么？</li>
<li><strong>区域疫情对比</strong>: 美国各州、中国各省份之间的疫情差异有多大？哪些地区需要重点关注？</li>
<li><strong>疫情发展趋势</strong>: 中国各省份的疫情随时间如何演变？治愈率的变化趋势如何？</li>
<li><strong>数据排名分析</strong>: 在确诊、死亡、治愈等不同指标下，全球排名前列的国家有哪些？</li>
<li><strong>多维度数据探索</strong>: 如何快速切换不同的数据维度（确诊/死亡/治愈）和地理范围（全球/国家/省份）进行对比分析？</li>
</ol>
</section>
<section class="doc-section">
<h2>设计决策与依据</h2>
<h3>1. 可视化编码选择</h3>
<div class="subsection">
<h4>地图可视化（Choropleth Map）</h4>
<p><strong>选择依据</strong>:</p>
<ul>
<li><strong>地理空间特征</strong>: 疫情数据具有明显的地理属性，地图能够直观展示疫情的空间分布模式</li>
<li><strong>认知负担低</strong>: 用户对地理位置有天然的认知基础，无需额外学习成本</li>
<li><strong>颜色编码</strong>: 使用红色渐变表示确诊数量，符合"红色=危险"的文化认知</li>
</ul>
<p><strong>实现技术</strong>:</p>
<ul>
<li><strong>世界地图</strong>: 使用D3.js + TopoJSON渲染，采用Natural Earth投影保持视觉平衡</li>
<li><strong>美国地图</strong>: 使用D3.js + Albers USA投影，专门优化美国本土、阿拉斯加和夏威夷的显示</li>
<li><strong>中国地图</strong>: 使用ECharts + 阿里云DataV地图数据，提供更好的中文支持和交互体验</li>
</ul>
<p><strong>数据映射关系</strong>:</p>
<ul>
<li><strong>世界地图 ↔ 各国数据集</strong>: 世界地图的每个国家区域与COVID19_nations.xlsx中的国家数据一一对应，通过国家名称匹配实现数据绑定。系统支持70个主要国家的数据展示，包含中英文名称映射（如"美国"↔"United States of America"）</li>
<li><strong>美国地图 ↔ 各州数据集</strong>: 美国地图的每个州区域与COVID-19 Data.xlsx中的州数据对应，通过标准化的州名称（如"California"、"New York"）进行匹配。地图覆盖美国50个州及华盛顿特区</li>
<li><strong>中国地图 ↔ 各省数据集</strong>: 中国地图的每个省份区域与covid_data_China.xlsx中的省份数据对应，支持34个省级行政区（包括省、自治区、直辖市、特别行政区）的数据展示</li>
</ul>
<p><strong>中国地图交互细节</strong>:</p>
<ul>
<li><strong>颜色刻度线（Visual Map）</strong>: 中国地图右下角配备了动态颜色刻度线，实时显示当前数据的数值范围。刻度线采用从浅红到深红的渐变色，直观反映疫情严重程度</li>
<li><strong>交互式刻度</strong>: 用户可以通过鼠标悬停在刻度线上查看具体数值范围，刻度线会根据数据的最大值和最小值自动调整显示范围</li>
<li><strong>省份高亮</strong>: 鼠标悬停在省份上时，该省份会高亮显示，同时tooltip显示详细数据（省份名称、确诊数、死亡数、治愈数）</li>
<li><strong>空数据处理</strong>: 对于没有数据的省份，地图显示为浅灰色，避免误导用户</li>
</ul>
<p><strong>替代方案考虑</strong>:</p>
<ul>
<li>❌ <strong>气泡图（Bubble Map）</strong>: 虽然能表示数量级差异，但在数据密集区域会产生严重遮挡</li>
<li>❌ <strong>符号地图（Symbol Map）</strong>: 不如颜色填充直观，且难以表示连续数值范围</li>
</ul>
</div>
<div class="subsection">
<h4>柱状图（Bar Chart）</h4>
<p><strong>选择依据</strong>:</p>
<ul>
<li><strong>精确比较</strong>: 柱状图是比较不同类别数值大小的最有效方式</li>
<li><strong>排名可视化</strong>: 通过排序和截断（Top 6），突出重点国家</li>
<li><strong>动画过渡</strong>: 切换指标时的平滑过渡帮助用户理解数据变化</li>
</ul>
<p><strong>实现技术</strong>:</p>
<ul>
<li>使用D3.js的enter-update-exit模式实现数据驱动的动画</li>
<li>500ms过渡时间平衡了流畅性和响应速度</li>
</ul>
<p><strong>替代方案考虑</strong>:</p>
<ul>
<li>❌ <strong>饼图</strong>: 不适合比较多个类别，且难以表示绝对数值</li>
<li>❌ <strong>雷达图</strong>: 过于复杂，不适合单一指标的排名展示</li>
</ul>
</div>
<div class="subsection">
<h4>折线图（Line Chart）</h4>
<p><strong>选择依据</strong>:</p>
<ul>
<li><strong>时间序列</strong>: 折线图是展示时间趋势的标准选择</li>
<li><strong>多系列对比</strong>: 支持同时显示多个省份的趋势，便于横向对比</li>
<li><strong>连续性</strong>: 折线的连续性强调了疫情发展的时间连续性</li>
</ul>
<p><strong>实现技术</strong>:</p>
<ul>
<li>使用D3.js的line生成器和时间比例尺</li>
<li>颜色编码区分不同省份，配合图例和交互式筛选</li>
</ul>
<p><strong>纵坐标优化策略</strong>:</p>
<ul>
<li><strong>数据差异问题</strong>: 中国各省份的治愈病例数存在巨大差异，例如湖北省的数据可能是其他省份的数十倍甚至上百倍，如果使用统一的纵坐标范围，会导致数值较小的省份折线几乎贴近X轴，无法观察其变化趋势</li>
<li><strong>动态范围调整</strong>: 系统采用动态纵坐标范围策略，Y轴的最大值根据当前选中省份的数据自动调整。当用户通过多选框筛选不同省份时，Y轴会平滑过渡到新的数值范围</li>
<li><strong>留白设计</strong>: Y轴最大值设置为数据最大值的1.1倍（留10%空间），确保最高点的折线不会紧贴图表顶部，提高可读性</li>
<li><strong>刻度优化</strong>: Y轴刻度数量设置为8个，使用千分位分隔符格式化数值（如"1,234,567"），便于快速读取大数值</li>
<li><strong>用户反馈</strong>: 当用户选择包含湖北省的组合时，系统会自动扩大Y轴范围；取消选择湖北省后，Y轴会收缩以更好地展示其他省份的细节变化</li>
</ul>
<p><strong>替代方案考虑</strong>:</p>
<ul>
<li>❌ <strong>面积图（Area Chart）</strong>: 多系列叠加时会产生遮挡，降低可读性</li>
<li>❌ <strong>散点图（Scatter Plot）</strong>: 不能有效表达时间的连续性</li>
<li>❌ <strong>对数坐标</strong>: 虽然能解决数据差异问题，但普通用户对对数刻度的理解成本较高，不利于直观比较</li>
</ul>
</div>
<h3>2. 交互技术选择</h3>
<div class="subsection">
<h4>鼠标悬停提示（Tooltip）</h4>
<p><strong>选择依据</strong>:</p>
<ul>
<li><strong>按需显示</strong>: 避免界面过载，只在需要时显示详细数据</li>
<li><strong>上下文关联</strong>: 提示框跟随鼠标，明确指示当前关注的数据点</li>
<li><strong>多维信息</strong>: 同时显示确诊、死亡、治愈三个指标，提供完整信息</li>
</ul>
</div>
<div class="subsection">
<h4>下拉菜单（Dropdown Selector）</h4>
<p><strong>选择依据</strong>:</p>
<ul>
<li><strong>指标切换</strong>: 确诊/死亡/治愈三个互斥选项，下拉菜单是最简洁的选择</li>
<li><strong>节省空间</strong>: 相比单选按钮，下拉菜单占用更少的屏幕空间</li>
<li><strong>标准控件</strong>: 用户熟悉度高，无需学习成本</li>
</ul>
</div>
<div class="subsection">
<h4>多选框（Multi-Select）</h4>
<p><strong>选择依据</strong>:</p>
<ul>
<li><strong>省份筛选</strong>: 用户可能需要同时对比多个省份的趋势</li>
<li><strong>灵活性</strong>: 支持选择任意组合，满足不同分析需求</li>
<li><strong>可见性</strong>: 显示所有选项，便于快速浏览和选择</li>
</ul>
</div>
<div class="subsection">
<h4>地图钻取（Drill-down）</h4>
<p><strong>选择依据</strong>:</p>
<ul>
<li><strong>渐进式探索</strong>: 从全球→国家→省份，符合用户的认知层次</li>
<li><strong>减少认知负担</strong>: 避免在一个视图中展示过多细节</li>
<li><strong>上下文保持</strong>: 返回按钮确保用户不会迷失在导航中</li>
</ul>
</div>
</section>
<section class="doc-section">
<h2>外部资源引用</h2>
<h3>数据源</h3>
<ol>
<li><strong>COVID-19 Data.xlsx</strong> - 美国各州疫情数据</li>
<li><strong>COVID19_nations.xlsx</strong> - 全球各国疫情数据（70个主要国家）</li>
<li><strong>covid_19_data_2.csv</strong> - 全球时间序列数据</li>
<li><strong>covid_data_China.xlsx</strong> - 中国各省份疫情数据</li>
<li><strong>National_Obesity_By_State.geojson</strong> - 美国地图地理数据</li>
<li><strong>US Atlas TopoJSON</strong> - 来源: <a href="https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json" target="_blank">cdn.jsdelivr.net</a> (ISC License)</li>
<li><strong>World Atlas TopoJSON</strong> - 来源: <a href="https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json" target="_blank">cdn.jsdelivr.net</a> (ISC License)</li>
<li><strong>中国地图GeoJSON</strong> - 来源: <a href="https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json" target="_blank">阿里云DataV</a></li>
</ol>
<h3>第三方库</h3>
<ol>
<li><strong>D3.js v7</strong> - BSD 3-Clause License - 数据可视化核心库</li>
<li><strong>TopoJSON v3</strong> - BSD 3-Clause License - 地图数据格式转换</li>
<li><strong>SheetJS (xlsx.js)</strong> - Apache 2.0 License - Excel文件解析</li>
<li><strong>ECharts v5</strong> - Apache 2.0 License - 中国地图渲染</li>
</ol>
<h3>参考资源</h3>
<ul>
<li>D3.js官方示例 - 地图投影和动画过渡</li>
<li>Edward Tufte的《The Visual Display of Quantitative Information》</li>
<li>Stephen Few的《Information Dashboard Design》</li>
<li>Johns Hopkins University COVID-19 Dashboard</li>
<li>Our World in Data COVID-19 Visualizations</li>
</ul>
</section>
<section class="doc-section">
<h2>开发流程概述</h2>
<div class="highlight-box">
<h3>总开发时间：约60-70工时（分3周完成）</h3>
</div>
<h3>第1周：基础设施 + 数据层 + 地图组件（约25工时）</h3>
<ul>
<li><strong>项目初始化</strong>（3工时）- 目录结构、HTML/CSS框架、CDN配置</li>
<li><strong>数据加载器开发</strong>（8工时）- 多种数据格式解析、错误处理、数据验证
<br><em>耗时原因: Excel解析库学习曲线，数据格式不统一需要大量适配</em>
</li>
<li><strong>地图组件开发</strong>（12工时）- 世界地图、美国地图、中国地图、交互逻辑
<br><em>耗时原因: 地图投影调试、国家名称匹配、中国地图技术栈切换</em>
</li>
<li><strong>Tooltip组件</strong>（2工时）- 提示框定位算法、样式和动画</li>
</ul>
<h3>第2周：图表组件 + 交互功能（约22工时）</h3>
<ul>
<li><strong>国家排名柱状图</strong>（6工时）- 数据聚合、柱状图渲染、指标切换动画
<br><em>耗时原因: 数据聚合逻辑复杂，动画过渡调试</em>
</li>
<li><strong>中国时间序列折线图</strong>（8工时）- 时间序列处理、多条折线、省份筛选
<br><em>耗时原因: 多系列数据管理，颜色分配算法，性能优化</em>
</li>
<li><strong>事件总线和组件集成</strong>（4工时）- 发布-订阅模式、组件通信</li>
<li><strong>交互控件开发</strong>（4工时）- 下拉菜单、多选框、返回按钮</li>
</ul>
<h3>第3周：优化、测试、部署（约18工时）</h3>
<ul>
<li><strong>响应式布局</strong>（3工时）- 媒体查询、移动端适配</li>
<li><strong>性能优化</strong>（4工时）- 数据缓存、防抖节流、SVG渲染优化
<br><em>耗时原因: 性能瓶颈定位，大数据集渲染优化</em>
</li>
<li><strong>错误处理和用户反馈</strong>（3工时）- 错误UI、加载指示器</li>
<li><strong>测试和调试</strong>（5工时）- 跨浏览器测试、数据验证、交互流程测试
<br><em>耗时原因: 浏览器兼容性问题修复，边界情况处理</em>
</li>
<li><strong>文档编写</strong>（2工时）- 代码注释、README文档</li>
<li><strong>部署和发布</strong>（1工时）- GitHub Pages配置、最终验收</li>
</ul>
<h3>最耗时的环节</h3>
<div class="time-breakdown">
<div class="time-item">
<div class="time-bar" style="width: 17%;"></div>
<span class="time-label">地图组件开发 - 12工时（17%）</span>
</div>
<div class="time-item">
<div class="time-bar" style="width: 11%;"></div>
<span class="time-label">数据加载处理 - 8工时（11%）</span>
</div>
<div class="time-item">
<div class="time-bar" style="width: 11%;"></div>
<span class="time-label">中国时间序列折线图 - 8工时（11%）</span>
</div>
<div class="time-item">
<div class="time-bar" style="width: 9%;"></div>
<span class="time-label">国家排名柱状图 - 6工时（9%）</span>
</div>
</div>
<h3>开发过程中的挑战与解决方案</h3>
<div class="challenge-box">
<h4>挑战1：数据格式不统一</h4>
<p><strong>问题</strong>: Excel文件的列名有中英文混合，CSV文件的日期格式不一致</p>
<p><strong>解决方案</strong>: 实现灵活的字段映射逻辑，支持多种列名变体；编写健壮的日期和数值解析函数</p>
</div>
<div class="challenge-box">
<h4>挑战2：地图国家名称匹配</h4>
<p><strong>问题</strong>: TopoJSON中的国家名称与数据文件中的名称不一致</p>
<p><strong>解决方案</strong>: 创建详细的国家名称映射表（70+个映射规则），支持中英文双向映射</p>
</div>
<div class="challenge-box">
<h4>挑战3：中国地图技术选型</h4>
<p><strong>问题</strong>: D3.js渲染中国地图时，省份边界数据质量差，且中文支持不佳</p>
<p><strong>解决方案</strong>: 切换到ECharts + 阿里云DataV地图数据，重写ChinaMap组件</p>
</div>
<div class="challenge-box">
<h4>挑战4：性能优化</h4>
<p><strong>问题</strong>: 全球时间序列数据量大（5000+条），折线图渲染卡顿</p>
<p><strong>解决方案</strong>: 限制CSV解析行数、实现数据缓存、使用D3.js的enter-update-exit模式优化DOM操作</p>
</div>
</section>
<section class="doc-section">
<h2>技术栈</h2>
<ul>
<li><strong>前端框架</strong>: 原生JavaScript (ES6+)</li>
<li><strong>可视化库</strong>: D3.js v7, ECharts v5</li>
<li><strong>数据处理</strong>: SheetJS (xlsx.js), TopoJSON</li>
<li><strong>样式</strong>: CSS3 + 响应式设计</li>
<li><strong>部署</strong>: GitHub Pages</li>
</ul>
</section>
<section class="doc-section">
<h2>功能特性</h2>
<ul class="feature-list">
<li>✅ 世界地图：展示70个主要国家的疫情分布</li>
<li>✅ 美国地图：展示各州详细疫情数据</li>
<li>✅ 中国地图：展示各省份详细疫情数据</li>
<li>✅ 国家排名：Top 6国家的确诊/死亡/治愈数据对比</li>
<li>✅ 时间序列：中国各省份治愈病例趋势分析</li>
<li>✅ 交互式探索：鼠标悬停、地图钻取、指标切换、省份筛选</li>
<li>✅ 响应式设计：支持桌面端和移动端</li>
<li>✅ 错误处理：友好的错误提示和降级策略</li>
</ul>
</section>
<section class="doc-section">
<h2>浏览器兼容性</h2>
<ul>
<li>✅ Chrome 90+</li>
<li>✅ Firefox 88+</li>
<li>✅ Safari 14+</li>
<li>✅ Edge 90+</li>
</ul>
</section>
</div>
</main>
<!-- 右侧空白 -->
<div class="right-space"></div>
</div>
</body>
</html>