JavaScript'te COVID-19 İzleyici Nasıl Oluşturulur

Web geliştirme becerilerinizi geliştirmek için hızlı bir proje mi arıyorsunuz? Muhtemelen pandemi boyunca birçok farklı COVID takipçisi ve çizelgesi görmüşsünüzdür; işte minimum çabayla kendinizinkini nasıl yapacağınız.

Bir API'den uzak verilerin nasıl getirileceği ve bunu görüntülemek için bir grafik kitaplığının nasıl kullanılacağı dahil olmak üzere JavaScript'te bazı yararlı teknikler öğreneceksiniz. İçeri girelim.

Ne Yapacaksınız

Bu kılavuz, JavaScript kullanarak bir API ile çalışmanın temellerini göstermeye yardımcı olacaktır. Uzak bir kaynaktan nasıl veri getirileceğini öğreneceksiniz. Getirilen verileri görüntülemek için bir grafik kitaplığının nasıl kullanılacağını da göreceksiniz.

Bu makalede kullanılan tüm kodlar bir Github depo.

Veri Kaynağını Keşfetmek

COVID ile ilgili en son rakamları almak için kullanacağız hastalık.sh kendini bir “Açık Hastalık Veri API'si” olarak tanımlıyor.

Bu API mükemmel çünkü:

• Her biri biraz farklı formatlar sunan birçok farklı veri kaynağına sahiptir.
• Örneklerle değil, her birinin nasıl yapıldığına dair birçok ayrıntıyla iyi belgelenmiştir.
  instagram viewer
  hastalık.sh uç noktalar çalışması
• JavaScript'ten çalışması kolay olan JSON'u döndürür
• Tamamen açık ve kullanımı ücretsizdir, kimlik doğrulama gerektirmez

Bu son nokta özellikle önemlidir: Birçok API, karmaşık bir OpenAuth sürecinden geçmenizi gerektirir veya yalnızca bir tarayıcıda çalışan JavaScript için kullanılamaz.

Bu eğitim için kullanacağız New York Times verileri ABD için hastalık.sh'den. Bu uç nokta, pandeminin süresinden (21 Ocak 2020'den bu yana) verileri, birlikte çalışması kolay bir biçimde içerir. Bazı verilere bir göz atın hastalık.sh uç noktası kullanacağız:

JSON ile uğraşmaya alışkınsanız, bunu sorunsuz bir şekilde okuyabilirsiniz. İşte daha okunaklı bir düzende küçük bir alıntı:

[{
 "tarih":"2020-01-21",
 "vakalar":1,
 "ölümler":0,
 "güncellendi":1643386814538
},{
 "tarih":"2020-01-22",
 "vakalar":1,
 "ölümler":0,
 "güncellendi":1643386814538
}]

API, basit bir nesne dizisi döndürür; her nesne tarih, vakalar vb. ile bir veri noktasını temsil eder.

HTML'yi Ayarlama

Şimdilik, çok basit bir iskelet HTML'si oluşturacağız. Sonuç olarak, birkaç harici kaynak eklemeniz gerekecek, ancak bu, başlamak için yeterlidir:

Covid vakaları, ABD

JavaScript Kullanarak Verileri Alma

API'den verileri alıp tarayıcı konsolunda görüntüleyerek başlayın. Bu, uzak sunucudan getirebileceğinizi ve yanıtı işleyebileceğinizi doğrulamanıza yardımcı olacaktır. Aşağıdaki kodu dosyanıza ekleyin covid.js dosya:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
getir (api)
 .then (yanıt => yanıt.json())
 .then (veri => {
 konsol.log (veri);
 });

Fetch JavaScript API, XMLHttpRequest'e daha yeni bir alternatiftir (ayrıntılı olarak şu adresten okuyun: MDN). Geri aramalarla eşzamansız programlamayı biraz daha kolaylaştıran bir Söz kullanır. Bu paradigmayı kullanarak, birkaç eşzamansız adımı birlikte zincirleyebilirsiniz.

Gerekli URL'yi getirdikten sonra, sonra Başarı davasını ele almak için Sözün yöntemi. Yanıtın gövdesini şu yolla JSON olarak ayrıştırın: json() yöntem.

İlişkili: JavaScript Ok İşlevleri Sizi Daha İyi Bir Geliştirici Yapabilir

Dan beri sonra() her zaman bir Söz verir, her adımı işlemek için zincirlemeye devam edebilirsiniz. İkinci adımda, şimdilik, kontrol edebilmek için verileri konsola kaydetmeniz yeterlidir:

API'den gelen verileri incelemek için konsolda görüntülenen nesneyle etkileşime girebileceksiniz. Zaten çok ilerleme kaydettiniz, bu yüzden hazır olduğunuzda bir sonraki adıma geçin.

İlişkili: JavaScript'te Hata Ayıklama: Tarayıcı Konsolunda Oturum Açma

Billboard.js Kullanarak Verileri Görüntüleme

Verileri günlüğe kaydetmek yerine, bir JavaScript kitaplığı kullanarak çizelim. Önceki kodu şöyle görünecek şekilde güncelleyerek buna hazırlanın:

getir (api)
 .then (yanıt => yanıt.json())
 .then (veri => {
 plotData (veri);
 });
function plotData (veri) {
}

kullanacağız reklam panosu.js bize basit, etkileşimli bir grafik vermek için kütüphane. billboard.js temeldir, ancak birkaç farklı grafik türünü destekler ve eksenleri, etiketleri ve bir grafiğin tüm standart bileşenlerini özelleştirmenize olanak tanır.

Üç harici dosya eklemeniz gerekecek, bu yüzden bunları html'nizin HEAD'ine ekleyin:

En temel grafikle billboard.js'yi deneyin. Aşağıdakileri ekleyin arsaData():

bb.generate({
 bindto: "#covid-all-us-cases",
 veri: {
 tip: "satır",
 sütunlar: [
 [ "veri", 10, 40, 20 ]
 ]
 }
});

bu bağlanan özellik, grafiğin oluşturulacağı hedef HTML öğesini tanımlayan bir seçiciyi tanımlar. Veriler bir astar tek sütunlu grafik. Sütun verilerinin dört değerden oluşan bir dizi olduğunu ve ilk değerin bu verinin adı ("veri") olarak işlev gören bir dize olduğunu unutmayın.

Seride üç değer ve bunu "veri" olarak etiketleyen bir açıklama ile biraz buna benzeyen bir grafik görmelisiniz:

Yapmanız gereken tek şey gerçek olanı kullanmaktır. veri zaten geçmekte olduğunuz API'den arsaData(). Bu biraz daha fazla çalışma gerektirir çünkü onu uygun bir biçime çevirmeniz ve billboard.js'ye her şeyi doğru bir şekilde göstermesi için talimat vermeniz gerekir.

Tüm vaka geçmişini gösteren bir grafik çizeceğiz. Biri tarihleri ​​içeren x ekseni için, diğeri grafikte çizeceğimiz gerçek veri serileri için olmak üzere iki sütun oluşturarak başlayın:

var anahtarlar = data.map (a => a.date),
 case = data.map (a => a.cases);
key.unshift("tarihler");
case.unshift("durumlar");

Kalan çalışma, reklam panosu nesnesinde ince ayarlar gerektirir.

bb.generate({
 bindto: "#covid-all-us-cases",
 veri: {
 x: "tarihler",
 tip: "satır",
 sütunlar: [
 anahtarlar,
 vakalar
 ]
 }
});

Ayrıca şunları ekleyin eksen Emlak:

 eksen: {
 x: {
 tür: "kategori",
 kene: {
 sayı: 10
 }
 }
 }

Bu, x ekseninin yalnızca 10 tarihi görüntülemesini sağlar, böylece aralarında güzel bir boşluk olur. Nihai sonucun etkileşimli olduğunu unutmayın. İmlecinizi grafiğin üzerine getirdiğinizde, reklam panosu verileri bir açılır pencerede görüntüler:

Bu izleyicinin kaynağına şuradan bakın: GitHub.

Varyasyonlar

Billboard.js kullanarak çizdiğiniz şeyi değiştirmek için kaynak verileri farklı şekillerde nasıl kullanabileceğinize bir göz atın.

Yalnızca Bir Yıl İçin Verileri Görüntüleme

Genel grafik çok yoğun çünkü çok fazla veri içeriyor. Gürültüyü azaltmanın basit bir yolu, süreyi örneğin tek bir yılla sınırlamaktır (GitHub). Bunu yapmak için bir satırı değiştirmeniz yeterlidir ve plotData hiç işlev; azaltılmış bir veri kümesini işlemek için yeterince geneldir.

Saniyede .sonra() arayın, değiştirin:

plotData (veri);

İle:

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

bu filtre() yöntemi, dizideki her değerde bir işlev çağırarak diziyi küçültür. Bu işlev döndüğünde doğru, değeri tutar. Aksi takdirde, onu atar.

Değer tarih Mülkiyet '2022'den büyüktür. Bu basit bir dizi karşılaştırmasıdır, ancak yıl-ay-gün olan bu verinin formatı için çok uygun bir formattır.

Verileri Daha Az Ayrıntı ile Görüntüleme

Verileri yalnızca bir yılla sınırlamak yerine, gürültüyü azaltmanın başka bir yolu, çoğunu atmak, ancak verileri sabit bir aralıkta tutmaktır (GitHub). Veriler daha sonra tüm orijinal dönemi kapsayacak, ancak çok daha azı olacak. Açık bir yaklaşım, her haftadan yalnızca bir değer tutmaktır - başka bir deyişle, her yedinci değer.

Bunu yapmak için standart teknik, % (modül) operatörü. 0'a eşit olan her dizi indeksinin modül 7'sini filtreleyerek, her 7. değeri koruyacağız:

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

Bu sefer alternatif bir form kullanmanız gerekeceğini unutmayın. filtre() hangi iki argüman kullanır, ikincisi dizini temsil eder. İşte sonuç:

Vakaları ve Ölümleri Tek Grafikte Görüntüleme

Son olarak, hem vakaları hem de ölümleri tek bir grafikte görüntülemeyi deneyin (GitHub). bu sefer değiştirmen gerekecek arsaData() yöntem, ancak yaklaşım esas olarak aynıdır. Önemli değişiklikler, yeni verilerin eklenmesidir:

ölümler = data.map (a => a.deaths)
...
sütunlar = [ anahtarlar, vakalar, ölümler ]

Ve billboard.js'nin eksenleri doğru şekilde biçimlendirmesini sağlamak için ince ayarlar. Özellikle, iletilen nesneye ait veri yapısındaki değişikliklere dikkat edin. bb.oluşturmak:

veri: {
 x: "tarihler",
 sütunlar: sütunlar,
 eksenler: { "durumlar": "y", "ölümler": "y2" },
 türler: {
 durumlar: "çubuk"
 }
}

Şimdi, çizime özel yeni bir tiple birlikte çizilecek çoklu eksenleri tanımlayın. vakalar diziler.

JavaScript Kullanarak API Sonuçlarını Çizme

Bu eğitici, JavaScript'te temel bir COVID-19 izleyici oluşturmak için basit bir API ve bir grafik kitaplığının nasıl kullanılacağını gösterir. API, farklı ülkeler için birlikte çalışabileceğiniz birçok başka veriyi destekler ve ayrıca aşı kapsamına ilişkin verileri içerir.

Görüntülemek için çok çeşitli billboard.js grafik türlerini veya tamamen farklı bir grafik kitaplığı kullanabilirsiniz. Seçim senin!

Chart.js ile Grafik Nasıl Yapılır?

JavaScript ile dinamik verileri görüntülemek hiç bu kadar kolay olmamıştı.

Sonrakini Oku

Yazar hakkında