React 和 D3：动态 COVID-19 可视化（第 1 部分：世界地图）

作为一名科学老师，我热爱数据可视化。我喜欢强大的可视化将艺术、科学、数学和人文学科融合在一起讲述故事，也喜欢可视化的互动性和探索性。然而，在很多可视化中，设计师会决定显示哪些数据以及如何显示数据，以便从特定视角讲述特定的故事。

但作为一名教师，我更喜欢那些允许用户自主选择、由他们自己的问题引导、寻求答案并进一步探究的可视化。因此，当我开始创建数据可视化时，我知道我需要制作一些能够根据用户输入呈现数据的东西，这激发了我目前正在进行的项目——“COVID-19 全球追踪器”的构思。

首先，查看快速视频演示并浏览README.md 文件以快速了解该项目。

设计和规划用户交互目标

我的设计选择围绕着这个指导性问题：

我如何显示数据和选项，让用户能够提出开放式问题并自由调查这些问题，以更好地了解 COVID-19 疫情？

我的目标是开发一个简单的平台，让用户能够轻松地探索和比较全球范围内的 COVID-19 疫情，使用实时全球数据以及查看疫情期间的历史数据。该应用程序的地图可视化部分可以快速分析当前病例数据，并允许用户探索病例数量、病例严重程度以及考虑总体人口后数据呈现方式之间的可能关联。该应用程序的条形图部分允许用户通过选择“一组”国家进行比较，比较每个国家自报告首例病例以来的疫情演变情况。应用程序的两部分协同运行——理想情况下，在探索了全球地图之后，用户会好奇地根据他们在地图上看到的内容深入挖掘并比较某些国家。

本文的剩余部分将解释我如何将 React.js 用户界面与 D3.js 结合起来以实现这一目标，让用户更好地掌控他们探索的数据、提出的问题以及最终的理解。本文将重点介绍地图可视化，而下一篇将重点介绍条形图。

使用世界地图可视化探索实时全球数据

可用数据

地图数据是从Novel COVID API获取的。我之所以选择这个 API，是因为它能从各种可靠的来源获取数据，并且包含每个国家/地区一致的当前数据。以下是阿富汗数据录入的示例：

根据可用数据创建选项

首先，使用 MapInput 组件（React.js）中的 useEffect() 钩子获取这些数据。

我使用每个数据点（病例、死亡人数、人口等）的键，在 MapInput 组件中组织了一系列用户输入按钮。该组件会渲染一系列按钮，点击这些按钮时，会调用 DisplayMapData() 函数 (D3.js)，并传入与用户希望在地图上显示的特定数据相关的参数。例如：

<button 
    onClick={event => DisplayMapData(event.target.value, event.target.innerText, countryResults)} 
    className="cases block" 
    value="cases">
        Total Cases
</button>

通过一些 css 按钮样式和 react-bootstrap Row-Col-Card 格式，我创建了左侧边栏选项菜单：

可视化用户选择的数据

从这里开始，DisplayMapData(caseType, caseTitle, data) 函数使用传递下来的参数来解析用户输入 (caseType) 的数据，并使用数据对象中 countryInfo 对象提供的每个国家/地区的地理坐标，在地图上仅绘制所选数据。此函数首先删除与上次选择相关的所有数据（国家/地区圆圈、图例和标题），然后为最近选择的 caseType 渲染该信息。

您可以在我的存储库中查看 DisplayMapData() 函数的代码

添加额外的交互功能

最后，我添加了额外的交互功能，以便用户进一步探索地图和数据。这些功能包括：

• 缩放和平移地图视图
• 突出显示国家边界并显示国家名称
• 将鼠标悬停在每个数据圈上时显示国家/地区数据

使用条形图可视化比较特定国家/地区的历史数据

请留意这篇文章的第 2 部分，其中描述了应用程序的条形图部分。

最后的想法

作为一名程序员新手，这个项目迫使我在过去两周里大幅提升了自己的技能。关于 D3.js，我还有很多东西要学。我计划继续练习使用复杂数据集制作不同类型的可视化，同时始终将用户体验和自主探究的机会放在我的设计首位。

这个项目远未完成，几周后我会分享一个正式上线的项目链接。在此期间，请关注我的每周更新，了解项目的进展。

如果您读到这里 - 谢谢您的阅读！

在下面留下评论并让我知道：

• 您希望在这样的可视化中看到什么样的用户体验？
• 应该添加哪些附加功能或交互？
• 您是否希望以这种方式探索其他 COVID-19 数据？