Cara Membuat Pelacak COVID-19 di JavaScript

Mencari proyek cepat untuk melatih keterampilan pengembang web Anda? Anda mungkin telah melihat banyak pelacak dan bagan COVID yang berbeda selama pandemi—berikut cara membuatnya sendiri dengan sedikit usaha.

Anda akan mempelajari beberapa teknik yang berguna dalam JavaScript termasuk cara mengambil data jarak jauh dari API dan cara menggunakan pustaka bagan untuk menampilkannya. Mari kita masuk ke dalamnya.

Apa yang Akan Anda Bangun

Panduan ini akan membantu menunjukkan dasar-dasar bekerja dengan API menggunakan JavaScript. Anda akan belajar cara mengambil data dari sumber jarak jauh. Anda juga akan melihat cara menggunakan pustaka bagan untuk menampilkan data yang diambil.

Semua kode yang digunakan dalam artikel ini tersedia di a Github gudang.

Menjelajahi Sumber Data

Untuk mendapatkan angka terbaru terkait COVID, kami akan menggunakan penyakit.sh yang menggambarkan dirinya sebagai "API Data Penyakit Terbuka".

API ini sangat baik karena:

• Ini memiliki banyak sumber data yang berbeda, masing-masing menawarkan format yang sedikit berbeda
instagram viewer
• Ini didokumentasikan dengan baik, tidak dengan contoh, tetapi dengan banyak detail tentang bagaimana masing-masing penyakit.sh titik akhir berfungsi
• Ini mengembalikan JSON, yang mudah digunakan dari JavaScript
• Ini benar-benar terbuka dan gratis untuk digunakan, tidak diperlukan otentikasi

Poin terakhir ini sangat penting: banyak API mengharuskan Anda melalui proses OpenAuth yang rumit, atau tidak tersedia untuk JavaScript yang berjalan di browser.

Untuk tutorial ini, kami akan menggunakan Data New York Times untuk AS dari disease.sh. Titik akhir ini mencakup data dari durasi pandemi (sejak 21 Januari 2020), dalam format yang mudah digunakan. Simak beberapa data dari titik akhir penyakit.sh kami akan menggunakan:

Jika Anda terbiasa berurusan dengan JSON, Anda mungkin dapat membacanya tanpa masalah. Berikut kutipan kecil dalam tata letak yang lebih mudah dibaca:

[{
 "tanggal":"21-21-2020",
 "kasus":1,
 "mati":0,
 "diperbarui":1643386814538
},{
 "tanggal":"22-01-2020",
 "kasus":1,
 "mati":0,
 "diperbarui":1643386814538
}]

API mengembalikan array objek sederhana, setiap objek mewakili titik data dengan tanggal, kasus, dll.

Menyiapkan HTML

Untuk saat ini, kita akan menyiapkan beberapa kerangka HTML yang sangat sederhana. Pada akhirnya, Anda harus menyertakan beberapa sumber daya eksternal, tetapi ini cukup untuk memulai:

Kasus Covid, AS

Mengambil Data Menggunakan JavaScript

Mulailah dengan hanya mendapatkan data dari API dan menampilkannya di konsol browser. Ini akan membantu Anda memverifikasi bahwa Anda dapat mengambil dari server jauh dan memproses responsnya. Tambahkan kode berikut ke Anda covid.js mengajukan:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
ambil (api)
 .then (respons => respon.json())
 .kemudian (data => {
 console.log (data);
 });

Fetch JavaScript API adalah alternatif yang lebih baru untuk XMLHttpRequest (baca selengkapnya di MDN). Ini menggunakan Janji yang membuat pemrograman asinkron dengan panggilan balik sedikit lebih mudah. Dengan menggunakan paradigma ini, Anda dapat menggabungkan beberapa langkah asinkron.

Setelah mengambil URL yang diperlukan, gunakan kemudian metode Janji untuk menangani kasus sukses. Parsing badan Response sebagai JSON melalui json() metode.

Terkait: Fungsi Panah JavaScript Dapat Membuat Anda Menjadi Pengembang yang Lebih Baik

Sejak kemudian() selalu mengembalikan Janji, Anda dapat terus merantai untuk menangani setiap langkah. Pada langkah kedua, untuk saat ini, cukup log data ke konsol sehingga Anda dapat memeriksanya:

Anda akan dapat berinteraksi dengan objek yang ditampilkan di konsol untuk memeriksa data dari API. Anda telah membuat banyak kemajuan, jadi lanjutkan ke langkah berikutnya saat Anda siap.

Terkait: Debug di JavaScript: Masuk ke Konsol Browser

Menampilkan Data Menggunakan billboard.js

Alih-alih mencatat data, mari kita plot menggunakan pustaka JavaScript. Persiapkan ini dengan memperbarui kode sebelumnya agar terlihat seperti ini:

ambil (api)
 .then (respons => respon.json())
 .kemudian (data => {
 plotData (data);
 });
fungsi plotData (data) {
}

Kami akan menggunakan billboard.js perpustakaan untuk memberi kita grafik interaktif sederhana. billboard.js adalah dasar, tetapi mendukung beberapa jenis bagan yang berbeda, dan memungkinkan Anda untuk menyesuaikan sumbu, label, dan semua bahan standar bagan.

Anda harus menyertakan tiga file eksternal, jadi tambahkan ini ke HEAD html Anda:

Cobalah billboard.js dengan grafik paling dasar. Tambahkan yang berikut ini ke plotData():

bb.hasilkan({
 bindto: "#covid-all-us-cases",
 data: {
 jenis: "garis",
 kolom: [
 [ "data", 10, 40, 20 ]
 ]
 }
});

Itu mengikat properti mendefinisikan pemilih yang mengidentifikasi elemen HTML target untuk menghasilkan bagan. Data tersebut untuk garis grafik, dengan satu kolom. Perhatikan bahwa data kolom adalah larik yang terdiri dari empat nilai, dengan nilai pertama berupa string yang bertindak sebagai nama data tersebut (“data”).

Anda akan melihat bagan yang terlihat seperti ini, dengan tiga nilai dalam rangkaian dan legenda yang melabelinya sebagai "data":

Yang tersisa untuk Anda lakukan adalah menggunakan yang sebenarnya data dari API yang sudah Anda lewati plotData(). Ini membutuhkan sedikit lebih banyak pekerjaan karena Anda harus menerjemahkannya ke dalam format yang sesuai dan menginstruksikan billboard.js untuk menampilkan semuanya dengan benar.

Kami akan memplot bagan yang menunjukkan riwayat kasus lengkap. Mulailah dengan membuat dua kolom, satu untuk sumbu x yang berisi tanggal, dan satu untuk seri data aktual yang akan kita plot pada grafik:

var keys = data.map (a => a.date),
 kasus = data.map (a => a.kasus);
keys.unshift("tanggal");
kasus.unshift("kasus");

Pekerjaan yang tersisa membutuhkan penyesuaian pada objek billboard.

bb.hasilkan({
 bindto: "#covid-all-us-cases",
 data: {
 x: "tanggal",
 jenis: "garis",
 kolom: [
 kunci,
 kasus
 ]
 }
});

Tambahkan juga yang berikut ini sumbu Properti:

 sumbu: {
 x: {
 ketik: "kategori",
 centang: {
 hitung: 10
 }
 }
 }

Ini memastikan sumbu x hanya menampilkan 10 tanggal sehingga jaraknya baik. Perhatikan bahwa hasil akhirnya bersifat interaktif. Saat Anda menggerakkan kursor di atas grafik, papan iklan menampilkan data dalam sembulan:

Lihat sumber untuk pelacak ini di GitHub.

Variasi

Lihatlah bagaimana Anda dapat menggunakan data sumber dengan cara yang berbeda untuk mengubah apa yang Anda plot menggunakan billboard.js.

Melihat Data Hanya untuk Satu Tahun

Grafik keseluruhan sangat sibuk karena berisi begitu banyak data. Cara sederhana untuk mengurangi kebisingan adalah dengan membatasi periode waktu, misalnya satu tahun (GitHub). Anda hanya perlu mengubah satu baris untuk melakukan ini, dan Anda tidak perlu menyentuh plotData berfungsi sama sekali; itu cukup umum untuk menangani kumpulan data yang dikurangi.

Di detik .kemudian() panggil, ganti:

plotData (data);

Dengan:

plotData (data.filter (a => a.date > '2022'));

Itu Saring() metode mengurangi array dengan memanggil fungsi pada setiap nilai dalam array. Ketika fungsi itu kembali benar, itu menjaga nilai. Jika tidak, ia akan membuangnya.

Fungsi di atas mengembalikan true jika nilainya tanggal properti lebih besar dari ' 2022 '. Ini adalah perbandingan string sederhana, tetapi berfungsi untuk format data ini yaitu tahun-bulan-hari, format yang sangat nyaman.

Melihat Data Dengan Lebih Sedikit Granularitas

Daripada membatasi data hanya untuk satu tahun, cara lain untuk mengurangi kebisingan adalah dengan membuang sebagian besar data tetapi menyimpan data dari interval tetap (GitHub). Data kemudian akan mencakup seluruh periode awal, tetapi jumlahnya akan jauh lebih sedikit. Pendekatan yang jelas adalah dengan hanya menyimpan satu nilai dari setiap minggu—dengan kata lain, setiap nilai ketujuh.

Teknik standar untuk melakukan ini adalah dengan % (modulus) operator. Dengan memfilter modulus 7 dari setiap indeks array yang sama dengan 0, kami akan mempertahankan setiap nilai ke-7:

plotData (data.filter((a, indeks) => indeks % 7 == 0));

Perhatikan bahwa, kali ini, Anda harus menggunakan bentuk alternatif dari Saring() yang menggunakan dua argumen, yang kedua mewakili indeks. Inilah hasilnya:

Melihat Kasus dan Kematian dalam Satu Grafik

Terakhir, coba tampilkan kasus dan kematian pada satu grafik (GitHub). Kali ini Anda perlu mengubah plotData() metode, tetapi pendekatannya pada dasarnya sama. Perubahan utama adalah penambahan data baru:

kematian = data.map (a => a.kematian)
...
kolom = [ kunci, kasus, kematian ]

Dan tweak untuk memastikan billboard.js memformat sumbu dengan benar. Perhatikan, khususnya, perubahan pada struktur data milik objek yang diteruskan ke bb.generate:

data: {
 x: "tanggal",
 kolom: kolom,
 sumbu: { "kasus": "y", "kematian": "y2" },
 jenis: {
 kasus: "batang"
 }
}

Sekarang, tentukan beberapa sumbu untuk diplot bersama dengan tipe baru khusus untuk kasus seri.

Merencanakan Hasil API Menggunakan JavaScript

Tutorial ini menunjukkan cara menggunakan API sederhana dan library charting untuk membangun pelacak COVID-19 dasar dalam JavaScript. API mendukung banyak data lain yang dapat Anda gunakan untuk berbagai negara dan juga mencakup data tentang cakupan vaksin.

Anda dapat menggunakan berbagai jenis bagan billboard.js untuk menampilkannya, atau pustaka bagan yang berbeda sama sekali. Pilihan ada padamu!

Cara Membuat Bagan Dengan Chart.js

Menampilkan data dinamis dengan JavaScript tidak pernah semudah ini.

Baca Selanjutnya

Tentang Penulis