如何在 JavaScript 中构建 COVID-19 跟踪器

开发 前端
本指南将帮助演示使用 JavaScript 使用 API 的基础知识。您将学习如何从远程源获取数据。您还将看到如何使用图表库来显示获取的数据。

渴望一个新项目来磨练你的 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 图表类型来显示它,或者完全使用不同的图表库。

责任编辑:庞桂玉 来源: Linux公社
相关推荐

2020-06-28 08:43:14

CEOIT战略COVID-19

2021-02-01 16:49:52

可穿戴设备COVID-19远程监控

2021-04-15 11:19:44

物联网智能环境IoT

2021-01-04 12:03:04

人工智能AI物联网

2020-06-23 10:27:18

增强现实ARCOVID-19

2021-04-23 10:02:55

物联网传感器IoT

2020-12-20 08:22:05

PythonCOVID-19全球扩散图

2020-09-18 10:35:58

边境安全

2021-03-18 13:28:28

COVID-19恶意软件网络攻击

2020-08-03 11:13:33

网络安全CoVID-19网络攻击

2022-11-01 14:49:49

2020-07-23 11:26:06

网络安全数据技术

2020-07-27 10:21:14

COVID-19物联网IOT

2020-07-05 23:13:19

COVID-19CIO首席执行官

2021-01-10 15:25:39

区块链疫情区块链技术

2021-09-28 10:21:18

物联网恶意软件IoT

2022-08-30 11:59:35

暗网网络安全数据泄露

2021-09-23 10:06:01

物联网IOT

2021-05-13 05:29:42

网络犯罪英国COVID-19

2020-03-31 10:13:04

Google 开源技术
点赞
收藏

51CTO技术栈公众号