渴望一个新项目来磨练你的 JS 技能?试试这个使用 JavaScript 创建 COVID-19 跟踪器的教程。
正在寻找一个快速项目来练习您的 Web 开发技能?在整个新冠大流行期间,您可能已经看到了许多不同的 COVID 追踪器和图表——以下是如何以最少的努力制作自己的追踪器。
您将学习 JavaScript 中的一些有用技术,包括如何从 API 获取远程数据以及如何使用图表库来显示它。让我们开始吧。你将要建造什么
本指南将帮助演示使用 JavaScript 使用 API 的基础知识。您将学习如何从远程源获取数据。您还将看到如何使用图表库来显示获取的数据。
本文中使用的所有代码都可以在Github存储库中找到。
探索数据源
为了获得与 COVID 相关的最新数据,我们将使用disease.sh,它自称为“开放疾病数据 API”。
这个 API 非常棒,因为:
- 它有许多不同的数据源,每一个都提供略有不同的格式
- 它有据可查,没有示例,但有很多关于每个disease.sh端点如何工作的详细信息
- 它返回 JSON,这很容易在 JavaScript 中使用
- 它完全开放且免费使用,无需身份验证
最后一点特别重要:许多 API 要求您通过复杂的 OpenAuth 过程,或者根本不适用于在浏览器中运行的 JavaScript。
在本教程中,我们将使用来自 disease.sh 的美国纽约时报数据。该端点包括大流行期间(自 2020 年 1 月 21 日起)的数据,格式易于使用。看看我们将使用的disease.sh 平台的一些数据:
如果您习惯于处理 JSON,则可以毫无问题地阅读它。这是更易读的布局中的一小段摘录:
[{
"date":"2020-01-21",
"cases":1,
"deaths":0,
"updated":1643386814538
},{
"date":"2020-01-22",
"cases":1,
"deaths":0,
"updated":1643386814538
}]
API 返回一个简单的对象数组,每个对象代表一个带有日期、案例等的数据点。
设置 HTML
现在,我们将设置一些非常简单的骨架 HTML。最终,您需要包含一些外部资源,但这足以开始:
<!DOCTYPE html>
<html>
<head>
<title>Covid Tracker</title>
</head>
<body>
<h2>Covid cases, US</h2>
<div class="chart" id="covid-all-us-cases"></div>
<script src="covid.js"></script>
</body>
</html>
使用 JavaScript 获取数据
首先从 API 获取数据并将其显示在浏览器控制台中。这将帮助您验证您是否可以从远程服务器获取并处理响应。将以下代码添加到您的covid.js文件中:
var api = 'https://disease.sh/v3/covid-19/nyt/usa';
fetch(api)
.then(response => response.json())
.then(data => {
console.log(data);
});
Fetch JavaScript API 是 XMLHttpRequest 的更新替代品(在MDN上详细了解它)。它使用了一个 Promise,这使得带有回调的异步编程更容易一些。使用此范例,您可以将多个异步步骤链接在一起。
获取到所需的 URL 后,使用 Promise 的then方法处理成功案例。通过json()方法将响应的正文解析为 JSON 。
因为then()总是返回一个 Promise,你可以继续链接来处理每一步。现在,在第二步中,只需将数据记录到控制台,以便您可以检查它:
您将能够与控制台中显示的对象进行交互,以检查来自 API 的数据。你已经取得了很大的进步,所以当你准备好后继续下一步。
使用 billboard.js 显示数据
让我们使用 JavaScript 库来绘制数据,而不是记录数据。通过将之前的代码更新为如下所示为此做好准备:
fetch(api)
.then(response => response.json())
.then(data => {
plotData(data);
});
function plotData(data) {
}
我们将使用billboard.js库为我们提供一个简单的交互式图表。billboard.js 是基本的,但它支持几种不同的图表类型,并允许您自定义轴、标签和图表的所有标准成分。
您需要包含三个外部文件,因此将它们添加到 html 的 HEAD 中:
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/3.3.0/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/3.3.0/billboard.min.css" />
用最基本的图表试试 billboard.js。将以下内容添加到plotData():
bb.generate({
bindto: "#covid-all-us-cases",
data: {
type: "line",
columns: [
[ "data", 10, 40, 20 ]
]
}
});
bindto属性定义了一个选择器,它标识要在其中生成图表的目标 HTML 元素。data 用于折线图,只有一列。注意,data 列是一个由四个值组成的数组,第一个值是一个字符串,作为该数据的名称(“data”)。
你应该会看到一个类似这样的图表,序列中有三个值,并有一个图例将其标记为“data”:
剩下要做的就是使用API 中已经传递给plotData()的实际数据。这需要更多的工作,因为您需要将其转换为适当的格式并指示 billboard.js 正确显示所有内容。
我们将绘制一个显示完整案例历史的图表。首先构建两列,一列用于包含日期的 x 轴,另一列用于我们将在图表上绘制的实际数据系列:
var keys = data.map(a => a.date),
cases = data.map(a => a.cases);
keys.unshift("dates");
cases.unshift("cases");
剩下的工作需要调整广告牌对象。
bb.generate({
bindto: "#covid-all-us-cases",
data: {
<strong> x: "dates",strong>
type: "line",
<strong> columns: [
keys,
cases
]strong>
}
});
还要添加以下轴属性:
axis: {
x: {
type: "category",
tick: {
count: 10
}
}
}
这可确保 x 轴仅显示 10 个日期,因此它们的间距很好。请注意,最终结果是交互式的。当您将光标移到图表上时,广告牌会在弹出窗口中显示数据:
在 GitHub中查看此跟踪器的源代码。
变化
看看如何以不同的方式使用源数据来更改使用 billboard.js 绘制的内容。
仅查看一年的数据
整个图表非常繁忙,因为它包含大量数据。减少噪音的一种简单方法是将时间段限制为一年,例如(GitHub)。你只需要改变一行就可以做到这一点,你根本不需要接触plotData函数;它通常足以处理一组减少的数据。
在第二个.then()调用中,替换:
plotData(data);
和:
plotData(data.filter(a => a.date > '2022'));
filter()方法通过对数组中的每个值调用函数来减少数组。当该函数返回true时,它会保留该值。否则,它会丢弃它。
如果值的日期属性大于“2022” ,上述函数将返回 true 。这是一个简单的字符串比较,但它适用于该数据的格式,即年-月-日,一种非常方便的格式。
以较低粒度查看数据
与其将数据限制在一年内,另一种减少噪音的方法是丢弃大部分数据,但保留固定时间间隔内的数据(GitHub)。然后数据将涵盖整个原始时期,但会少得多。一个明显的方法是每周只保留一个值——换句话说,每七个值。
执行此操作的标准技术是使用%(模数)运算符。通过过滤每个数组索引的模 7 等于 0,我们将保留每 7 个值:
plotData(data.filter((a, index) => index % 7 == 0));
请注意,这一次,您需要使用另一种形式的filter(),它使用两个参数,第二个参数表示索引。结果如下:
在一个图表中查看病例和死亡人数
最后,尝试在一张图表 ( GitHub ) 上同时显示病例和死亡人数。这次您需要更改plotData()方法,但方法基本相同。关键变化是添加了新数据:
deaths = data.map(a => a.deaths)
...
columns = [ keys, cases, deaths ]
并进行调整以确保 billboard.js 正确格式化轴。请特别注意,属于传递给bb.generate的对象的数据结构的更改:
ata: {
x: "dates",
columns: columns,
axes: { "cases": "y", "deaths": "y2" },
types: {
cases: "bar"
}
}
现在,定义要绘制的多个轴以及特定于案例系列的新类型。
使用 JavaScript 绘制 API 结果
本教程演示了如何使用简单的 API 和图表库在 JavaScript 中构建基本的 COVID-19 跟踪器。API 支持您可以在不同国家/地区使用的许多其他数据,还包括有关疫苗覆盖率的数据。
您也可以选择使用多种 billboard.js 图表类型来显示它,或者完全使用不同的图表库。