这是我参与「第五届青训营 」伴学笔记创作活动的第17天，下面简单谈谈这次青训营和一些我的感想~
最开始了解到青训营其实是同学的介绍，说字节跳动有个寒假的青训营，里面涉及前后端知识的学习，由于之前有过前端的一些经历因而报了名参加选拔。很惊喜自己能够通过选拔测试，虽然自己只是报名前端基础班，但是我依然很珍惜有这样的一个机会能够学习相关知识。
我们小组的选题是疫情可视化的展示工具。对于第一个仿掘金网站，由于自己之前做过类似的项目，因而没有选择。对于第二个组件库的项目，由于不清楚具体实现多少组件才算完备，所以也没有选择。于是我们选择了小组成员都完全没有基础的疫情可视化展示，虽然看起来简单，但是实际执行起来遇到了很多问题。第一个就是数据源的问题，我们应该从哪里获取数据？数据应该选哪些？如何对脏的数据进行清洗？如何建模评估疫情带来的影响？如何选择图形工具来创造可视化图标...等等都是摆在我们小组眼前的问题。
在一起协商讨论之后，我们决定学习canvas进行可视化创作，同时大家集思广益给出了原始的划分区域并对每个区域具体做什么给出了方案，接着进行任务分配，并且每隔一段时间进行进度的交流。我负责的是“开发全球疫情对比分析统计图，并做总结报表。”这一模块。
我一共使用canvas画了两个图，一张图对比中国与其他国家受疫情的影响程度，一张图绘制中国经济对照疫情前的恢复程度。思路如下：
1）对于第一个水平进度条的绘制（中国经济恢复程度）过程：
对于经济恢复指数，我们综合参考了GDP、就业率、消费支出、出口、财政政策和货币政策等指标进行衡量。
-
获取了一个 ID 为 progress 的 Canvas 元素，并通过 getContext('2d') 方法获取了绘制上下文。
-
绘制了一个底部灰色矩形，其颜色为 '#0c6886'。
-
绘制了一个进度条，颜色为 '#00c5df'。具体绘制方式是先计算出进度条的宽度，然后使用 fillRect() 方法绘制一个矩形。
-
绘制了进度文字，其颜色为 '#fff'。具体绘制方式是先设置好字体、对齐方式等样式，然后使用 fillText() 方法将文字绘制在 Canvas 上。
2）各国受疫情影响程度
对于各国的疫情影响程度，由于受疫情影响指数的计算涉及多个因素，包括确诊病例数、死亡人数、新病例数、人口密度等等，因此需要建立一个综合考虑这些因素的模型。我们构建了一个简单的模型，以“total_cases”、“new_cases”、“new_cases_smoothed”、“total_deaths”、“new_deaths”、“new_deaths_smoothed”、“total_cases_per_million”、“new_cases_per_million”、“new_cases_smoothed_per_million”这些指标为输入，输出一个综合指数，代表该国受疫情影响的程度。首先，我们需要对输入指标进行归一化处理，以避免不同指标的取值范围不同造成的影响。具体地，我们将每个指标的取值范围映射到[0, 1]区间，然后，我们需要对每个归一化后的指标赋予一个权重，以反映它对受疫情影响指数的贡献程度。接着我们先使用PCA进行降维，然后对剩下的特征采用特定的权重分配方案，最后，我们将每个归一化后的指标乘以对应的权重，然后相加得到综合指数。
对于第二个柱状图（中国和其他国家受到疫情影响程度）的绘制过程：
- 获取了一个 ID 为 myCanvas 的 Canvas 元素，并通过 getContext('2d') 方法获取了绘制上下文。
- 绘制了一个背景，其颜色为 '#101129'。
- 绘制了柱状图。具体绘制方式是使用 for 循环遍历每一个数据项，然后根据数据项的值计算出柱体的高度、宽度、坐标等参数，最后使用 fillRect() 方法绘制柱体。同时，在柱体上方绘制了数据和标签。
- 在柱体的顶部绘制了标签，其颜色为 '#FFF'。具体绘制方式是先设置好字体、对齐方式等样式，然后使用 fillText() 方法将标签绘制在 Canvas 上。
- 在柱体的上方绘制了数据，其颜色为 '#F8F8FF'。具体绘制方式与标签类似。
最终我们也是在ddl之前完成了任务，虽然过程中遇到了很多问题，但是小组成员之间相互协商沟通，大家一起想解决办法。在这次青训营中我也交了很多不同学校的新的朋友，大家相互讨论交流，氛围良好。
总而言之，很感谢能获得这次宝贵的机会和志同道合的朋友一起学习前端的相关知识。
