Cách tạo Trình theo dõi COVID-19 trong JavaScript
Bạn đang tìm kiếm một dự án nhanh để thực hành kỹ năng lập trình viên web của mình? Bạn có thể đã thấy nhiều trình theo dõi và biểu đồ COVID khác nhau trong suốt đại dịch — đây là cách tự tạo mà chỉ cần nỗ lực tối thiểu.
Bạn sẽ học một số kỹ thuật hữu ích trong JavaScript bao gồm cách tìm nạp dữ liệu từ xa từ một API và cách sử dụng thư viện biểu đồ để hiển thị nó. Hãy vào đó.
Mục Lục
Những gì bạn sẽ xây dựng
Hướng dẫn này sẽ giúp chứng minh những điều cơ bản về cách làm việc với API bằng JavaScript. Bạn sẽ học cách tìm nạp dữ liệu từ một nguồn từ xa. Bạn cũng sẽ thấy cách sử dụng thư viện biểu đồ để hiển thị dữ liệu đã tìm nạp.
Tất cả mã được sử dụng trong bài viết này đều có sẵn trong kho lưu trữ Github.
Khám phá nguồn dữ liệu
Để có được các số liệu mới nhất liên quan đến COVID, chúng tôi sẽ sử dụng disease.sh tự mô tả nó như một “API Dữ liệu Dịch bệnh Mở”.
API này là tuyệt vời vì:
-
Nó có nhiều nguồn dữ liệu khác nhau, mỗi nguồn cung cấp các định dạng hơi khác nhau
-
Nó được ghi lại đầy đủ, không phải với các ví dụ, nhưng với rất nhiều chi tiết về cách hoạt động của từng điểm cuối của bệnh.sh
-
Nó trả về JSON, dễ làm việc với JavaScript
-
Nó hoàn toàn mở và miễn phí để sử dụng, không cần xác thực
Điểm cuối cùng này đặc biệt quan trọng: nhiều API yêu cầu bạn phải trải qua một quy trình OpenAuth phức tạp hoặc đơn giản là không có sẵn cho JavaScript chạy trong trình duyệt.
Đối với hướng dẫn này, chúng tôi sẽ sử dụng dữ liệu của New York Times cho Hoa Kỳ từ disease.sh. Điểm cuối này bao gồm dữ liệu từ thời gian xảy ra đại dịch (kể từ ngày 21 tháng 1 năm 2020), ở định dạng dễ sử dụng. Hãy xem một số dữ liệu từ điểm cuối của disease.sh mà chúng tôi sẽ sử dụng:
Nếu bạn đã quen với JSON, bạn có thể đọc nó mà không gặp bất kỳ vấn đề gì. Đây là một đoạn trích nhỏ trong một bố cục dễ đọc hơn:
[{
"date":"2020-01-21",
"cases":1,
"deaths":0,
"updated":1643386814538
},{
"date":"2020-01-22",
"cases":1,
"deaths":0,
"updated":1643386814538
}]
API trả về một mảng đối tượng đơn giản, mỗi đối tượng đại diện cho một điểm dữ liệu với ngày tháng, trường hợp, v.v.
Thiết lập HTML
Hiện tại, chúng tôi sẽ thiết lập một số HTML khung rất đơn giản. Cuối cùng, bạn sẽ cần phải bao gồm một số tài nguyên bên ngoài, nhưng điều này là đủ để bắt đầu:
<!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>Tìm nạp dữ liệu bằng JavaScript
Bắt đầu bằng cách chỉ lấy dữ liệu từ API và hiển thị nó trong bảng điều khiển của trình duyệt. Điều này sẽ giúp bạn xác minh rằng bạn có thể tìm nạp từ máy chủ từ xa và xử lý phản hồi. Thêm mã sau vào của bạn covid.js tập tin:
var api = 'https://disease.sh/v3/covid-19/nyt/usa';
fetch(api)
.then(response => response.json())
.then(data => {
console.log(data);
});API Tìm nạp JavaScript là một giải pháp thay thế mới hơn cho XMLHttpRequest (đọc chi tiết về nó tại MDN). Nó sử dụng một Promise giúp lập trình không đồng bộ với các lệnh gọi lại dễ dàng hơn một chút. Sử dụng mô hình này, bạn có thể xâu chuỗi một số bước không đồng bộ lại với nhau.
Sau khi tìm nạp URL được yêu cầu, hãy sử dụng sau đó phương pháp của Lời hứa để xử lý trường hợp thành công. Phân tích cú pháp phần thân của Phản hồi dưới dạng JSON thông qua json () phương pháp.
Từ sau đó() luôn trả về một Lời hứa, bạn có thể tiếp tục xâu chuỗi để xử lý từng bước. Trong bước thứ hai, bây giờ, chỉ cần ghi dữ liệu vào bảng điều khiển để bạn có thể kiểm tra nó:
Bạn sẽ có thể tương tác với đối tượng được hiển thị trong bảng điều khiển để kiểm tra dữ liệu từ API. Bạn đã đạt được nhiều tiến bộ, vì vậy hãy chuyển sang bước tiếp theo khi bạn đã sẵn sàng.
Hiển thị dữ liệu bằng billboard.js
Thay vì ghi dữ liệu, hãy vẽ biểu đồ bằng thư viện JavaScript. Chuẩn bị cho điều này bằng cách cập nhật mã trước đó để trông giống như sau:
fetch(api)
.then(response => response.json())
.then(data => {
plotData(data);
});
function plotData(data) {
}
Chúng tôi sẽ sử dụng thư viện billboard.js để cung cấp cho chúng tôi một biểu đồ tương tác, đơn giản. billboard.js là cơ bản, nhưng nó hỗ trợ một số loại biểu đồ khác nhau và cho phép bạn tùy chỉnh các trục, nhãn và tất cả các thành phần tiêu chuẩn của biểu đồ.
Bạn sẽ cần bao gồm ba tệp bên ngoài, vì vậy hãy thêm các tệp này vào HEAD của html của bạn:
<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" />
Hãy thử billboard.js với biểu đồ cơ bản nhất. Thêm phần sau vào plotData ():
bb.generate({
bindto: "#covid-all-us-cases",
data: {
type: "line",
columns: [
[ "data", 10, 40, 20 ]
]
}
});Các ràng buộc thuộc tính xác định một bộ chọn xác định phần tử HTML mục tiêu để tạo biểu đồ. Dữ liệu dành cho một hàng biểu đồ, với một cột duy nhất. Lưu ý rằng dữ liệu cột là một mảng bao gồm bốn giá trị, với giá trị đầu tiên là một chuỗi đóng vai trò như tên của dữ liệu đó (“dữ liệu”).
Bạn sẽ thấy một biểu đồ trông giống như thế này, với ba giá trị trong chuỗi và chú giải gắn nhãn nó là “dữ liệu”:
Tất cả những gì còn lại bạn phải làm là sử dụng dữ liệu từ API mà bạn đã chuyển vào plotData (). Điều này đòi hỏi nhiều công việc hơn một chút vì bạn sẽ cần phải dịch nó sang một định dạng thích hợp và hướng dẫn billboard.js hiển thị mọi thứ một cách chính xác.
Chúng tôi sẽ vẽ một biểu đồ hiển thị lịch sử trường hợp đầy đủ. Bắt đầu bằng cách tạo hai cột, một cho trục x chứa ngày tháng và một cho chuỗi dữ liệu thực tế mà chúng tôi sẽ vẽ trên biểu đồ:
var keys = data.map(a => a.date),
cases = data.map(a => a.cases);
keys.unshift("dates");
cases.unshift("cases");Công việc còn lại yêu cầu chỉnh sửa đối tượng biển quảng cáo.
bb.generate({
bindto: "#covid-all-us-cases",
data: {
x: "dates",
type: "line",
columns: [
keys,
cases
]
}
});Cũng thêm phần sau trục bất động sản:
axis: {
x: {
type: "category",
tick: {
count: 10
}
}
}
Điều này đảm bảo trục x chỉ hiển thị 10 ngày để chúng được cách đều nhau. Lưu ý rằng kết quả cuối cùng là tương tác. Khi bạn di chuyển con trỏ qua biểu đồ, bảng quảng cáo hiển thị dữ liệu trong một cửa sổ bật lên:
Kiểm tra nguồn cho trình theo dõi này trong GitHub.
Các biến thể
Hãy xem cách bạn có thể sử dụng dữ liệu nguồn theo những cách khác nhau để thay đổi những gì bạn vẽ bằng billboard.js.
Chỉ xem dữ liệu trong một năm
Biểu đồ tổng thể rất bận rộn vì nó chứa quá nhiều dữ liệu. Một cách đơn giản để giảm nhiễu là giới hạn khoảng thời gian, chẳng hạn như một năm (GitHub). Bạn chỉ cần thay đổi một dòng để thực hiện việc này và bạn không cần phải chạm vào plotData chức năng ở tất cả; nó đủ chung để xử lý một tập hợp dữ liệu đã giảm.
Trong lần thứ hai .sau đó() gọi, thay thế:
plotData(data);Với:
plotData(data.filter(a => a.date > '2022'));Các lọc() phương thức giảm một mảng bằng cách gọi một hàm trên mỗi giá trị trong mảng. Khi hàm đó trả về đúng vậy, nó giữ nguyên giá trị. Nếu không, nó sẽ loại bỏ nó.
Hàm trên trả về true nếu giá trị của ngày thuộc tính lớn hơn ‘2022’. Đây là một phép so sánh chuỗi đơn giản, nhưng nó phù hợp với định dạng của dữ liệu này là năm-tháng-ngày, một định dạng rất thuận tiện.
Xem dữ liệu với ít chi tiết hơn
Thay vì giới hạn dữ liệu chỉ trong một năm, một cách khác để giảm nhiễu là loại bỏ phần lớn dữ liệu nhưng giữ lại dữ liệu từ một khoảng thời gian cố định (GitHub). Dữ liệu sau đó sẽ bao gồm toàn bộ giai đoạn ban đầu, nhưng sẽ ít hơn nhiều. Một cách tiếp cận rõ ràng là chỉ giữ một giá trị từ mỗi tuần — nói cách khác, mỗi giá trị thứ bảy.
Kỹ thuật tiêu chuẩn để làm điều này là với % (modulus) toán tử. Bằng cách lọc trên modulus 7 của mỗi chỉ số mảng bằng 0, chúng tôi sẽ giữ lại mọi giá trị thứ 7:
plotData(data.filter((a, index) => index % 7 == 0));Lưu ý rằng, lần này, bạn sẽ cần sử dụng một hình thức thay thế lọc() trong đó sử dụng hai đối số, đối số thứ hai đại diện cho chỉ mục. Đây là kết quả:
Xem các trường hợp và tử vong trong một biểu đồ
Cuối cùng, hãy thử hiển thị cả hai trường hợp và tử vong trên một biểu đồ (GitHub). Lần này bạn sẽ cần phải thay đổi plotData () phương pháp, nhưng cách tiếp cận chủ yếu là giống nhau. Những thay đổi quan trọng là việc bổ sung dữ liệu mới:
deaths = data.map(a => a.deaths)
...
columns = [ keys, cases, deaths ]Và các tinh chỉnh để đảm bảo billboard.js định dạng các trục một cách chính xác. Đặc biệt lưu ý, những thay đổi đối với cấu trúc dữ liệu thuộc đối tượng được chuyển đến bb.generate:
data: {
x: "dates",
columns: columns,
axes: { "cases": "y", "deaths": "y2" },
types: {
cases: "bar"
}
}Bây giờ, hãy xác định nhiều trục để vẽ biểu đồ cùng với một kiểu mới cụ thể cho các trường hợp hàng loạt.
Lập biểu đồ kết quả API bằng JavaScript
Hướng dẫn này trình bày cách sử dụng một API đơn giản và một thư viện biểu đồ để xây dựng một trình theo dõi COVID-19 cơ bản trong JavaScript. API hỗ trợ nhiều dữ liệu khác mà bạn có thể làm việc với các quốc gia khác nhau và cũng bao gồm dữ liệu về phạm vi cung cấp vắc xin.
Bạn có thể sử dụng nhiều loại biểu đồ billboard.js để hiển thị nó hoặc một thư viện biểu đồ khác hoàn toàn. Sự lựa chọn là của bạn!
Đọc tiếp
Giới thiệu về tác giả
