基于JavaScript实现美国疫情可视化平台【100011733】

# 美国疫情可视化平台 ## 项目背景 2019年，新型冠状病毒席卷美国各地。截止 2020.3.17，美国的 50 个州全部沦陷，最后一块净土西弗吉尼亚州也检测出一例确诊。 在本次可视化项目中，我们小组选取了美国从 3 月 18 日到 4 月 30 日共 44 天中，各个州以及具体的县区的确诊和死亡人数数据进行可视化。我们希望能够以此来呈现出病毒在美国的传播规律，找出传染的关键州并预测其五月份的疫情趋势。 ## 设计需求 本次疫情可视化任务，我们选择了美国作为可视化的对象，我们想要探寻的数据规律有以下几点： 新冠疫情是如何在美国扩散开的？美国疫情扩散的关键州是是哪个州? 不同州之间的疫情变化有何差异？ 为了探寻疫情的扩散规律，就必须引入地理信息。我们选择了 Geo-Map，它可以很清晰地呈现出各个州的分布，从而也更容易发现疫情传播的地理特性（从严重地区向毗邻区域扩散）。 为了找到疫情扩散的关键州，我们选择用颜色对各州的确诊/死亡人数进行编码。较深的颜色代表该州受新冠感染的人数更多，这样用户将能轻易地从地图中看出重感染区。 为了对比不同州之间的差异，我们选择了折线图。相较于地图而言，通过将时间信息编码到折线图的一轴，我们可以看到一个或多个州在完整的时间线上的变化情况，并推测其未来的趋势。通过将不同州的信息同时呈现在一张图上，我们能清楚地看出不同州之间疫情变化的差异。 我们选择的数据集是由约翰霍普金斯大学提供的美国各州、市/县的每日确诊、死亡人数。由于数据涉及到了州的下级-市/县，我们决定选用矩形树图来呈现具体到市/县的疫情数据。 此外，各个视图之间不应该是完全独立的，我们希望为视图间增加交互功能，达到各可视化图表之间的联动，使用户能够更加自由地筛选自己感兴趣的数据、挖掘感兴趣的数据规律。 设计介绍 3.1 整体布局  我们的界面包含三个可视化视图： - 主视图：直观的地理视图，呈现出每天每个州的情况，由该视图发出总的交互请求。 - 辅助视图：折线图，呈现各州疫情在一个完整时间线上的变化，同时反映各个州疫情走势的不同。 - 辅助视图：矩形树图，用于表征美国的整体情况、各个州下设的县的情况 ## 一、主视图介绍 - 地图 地理地图（英文：geo map）是一种二维的空间信息可视化形式，其包含了经、纬度的位置信息、名称信息以及可扩展的数据信息。本实验中的地图以省（州）为单位，每个图元包含了名称信息以及与时间绑定的确诊人数、死亡人数、确诊人数占比和死亡人数占比。 视图元素  图表标题 (Title) 标题位置自适应整个图元的高度、宽度标题根据 Legend 切换自动更改 标题根据时间轴 timeline 自动更改显示日期 副标题 (Subtitle) 副标题位置自适应主标题位置 主地图 (Map) 可缩放大小可整体拖拽调整位置 颜色根据数据值（确诊人数/死亡人数/确诊人数比率/死亡人数比率）自动调节深浅 图例 (Legend) 图例位置自适应整个图元的高度、宽度图例设置为单选模式，每次只能选择一种数据进行展示（确诊人数/死亡人数/确诊人数比率/ 死亡人数比率） 视觉映射颜色条 (VisualMap-colorbar) 进行视觉编码，将 Map 中的数据映射到颜色深度上（视觉通道）根据确诊/死亡两大类自适应调整映射的颜色（蓝色系/红色系）位置自适应整个图元的高度、宽度 自适应显示映射数据的单位（个 / ‰ / ），最大值与最小值 时间轴 (Timeline) 特殊日期用特殊的 symbol 标注（起始点、终点、四月初） 为防止日期的 text 过多，每隔三天显示一次日期，同时显示出特殊日期 功能介绍 - hover 下面介绍不同元素对 hover 事件的响应： ```c++ Map ``` 用户能够将鼠标悬浮在地图中的某一个州上，触发三个 action： Map 中该州区域被高亮（采用相反色系进行强调） Map 中该州附近将显示一个 tooltip 展示其细节信息，位置跟随鼠标位置，显示信息包括：当前显示数据的类型（确诊人数/死亡人数/确诊人数比率/死亡人数比率）, 数据值（为了显示的美观，数据每隔三位数增设一个逗号，若为比率数据，则统一显示三位小数） 在 VisualMap-colorbar 上显示出一个浮动游标，标记出其具体数值以及在整个 colorbar 中的位置。   视觉映射颜色条 (VisualMap-colorbar) 用户能够将鼠标悬浮在 colorbar 中，触发两个 action： 在 VisualMap-colorbar 上显示出一个浮动游标，标记出鼠标所悬浮位置的估计数值。 Map 中与所选值接近的州区域（可以是一个，也可以是多个）被高亮（采用相反色系进行强调）  时间轴 (TimeLine) 用户能够将鼠标悬浮在 timeline 的各个圆点上，将会显示提示框和提示信息，提示信息包括：具体的日期，该日期的备注（特殊日期才有），如下图所示：  功能介绍 - 拖拽 下面介绍不同元素对拖拽事件的响应： 视觉映射颜色条 (VisualMap-colorbar) 用户能够在 colorbar 上选择感兴趣的数值区间，首先改变映射的数值区间，然后可以进行拖拽。此时左侧的 Map 仅对选中的数值区间内的州进行视觉编码（上色）如下图所示：  功能介绍 - click 下面介绍不同元素对 click 事件的响应： 图例 (legend) 用户能够通过点击 legend 切换显示的数据，进行切换后 Map 的颜色色系会相应改变，同时 VisualMap-Colorbar 的颜色以及单位、最大值最小值也会相应改变。总共有四种 mode 可以选择，且设置为单选。四种模式下的界面如下图所示：  时间轴 (Timeline) 用户能够通过点击 Timeline 上的不同时间点，切换当前显示的数据。具体效果见演示视频。用户能够通过点击 Timeline 左侧的播放/暂停键，开启/停止数据的播放功能。开启后 Map 中的数据将会随时间变化，时间间隔为 1s 一调转。具体效果见演示视频。 ## 二、子视图介绍 - 折线图 折线图用于显示选定州在 45 天内的总确诊人数（死亡人数、确诊率、死亡率）的变化情况。在折线图中，我们可以看到完整的时间线，也可以对比不同州之间疫情形势的差异。  悬浮窗跟随鼠标移动，在窗口中显示： - 鼠标悬浮点对应日期当前所选各州的名字 - 当前所选各州的具体确诊/死亡人数 axis pointer - 显示鼠标�