Web geliştirme becerilerinizi uygulamak için süratli bir proje mi aramıştınız? Muhtemelen pandemi süresince birçok değişik COVID seyircisi ve grafiği gördünüz – işte minimum çabayla kendinizi iyi mi yapacağınız.
JavaScript’te, bir API’den uzak verilerin iyi mi getirılacağı ve görüntülemek için grafik kitaplığının iyi mi kullanılacağı benzer biçimde bazı yararlı teknikler öğreneceksiniz. Hadi başlamış olalım.
İnşa Edeceğin Şey
Bu kılavuz, JavaScript kullanarak bir API ile çalışmanın temellerini göstermeye destek olacaktır. Uzak bir kaynaktan veri almayı öğreneceksiniz. Ek olarak, getirilen verileri görüntülemek için grafik kitaplığının iyi mi kullanılacağını da görürsünüz.
Bu makalede kullanılan tüm kodlar github deposunda kullanılabilir.
Veri Kaynağını Keşfetme
COVID ile ilgili son olarak sayıları elde etmek için, kendisini “Açık Hastalık Veri API’si” olarak tanımlayan disease.sh kullanacağız.
Bu API muhteşem bu sebeple:
- Her biri birazcık değişik biçimler sunan birçok değişik veri kaynağına haizdir.
- örneklerle değil, disease.sh uç noktalarının her birinin iyi mi çalmış olduğu hakkında birçok ayrıntıyla iyi belgelenmiştir.
- JavaScript’ten emek vermesi kolay JSON’ı döndürür
- Tamamen açık ve kullanımı parasızdır, kimlik doğrulaması gerekmez
Bu son nokta bilhassa önemlidir: birçok API karmaşık bir OpenAuth işleminden geçmenizi gerektirir yada tarayıcıda çalışan JavaScript tarafınca kullanılamaz.
Bu öğretici için, disease.sh’dan ABD için New York Times verilerini kullanacağız. Bu uç nokta, pandemi süresine (21 Ocak 2020’den bu yana) ilişik verileri, emek vermesi kolay bir halde ihtiva eder. Kullanacağımız disease.sh uç noktasından bazı verilere göz atın:
JSON ile uğraşmaya alışkınsanız, bunu sorunsuz bir halde okuyabilirsiniz. İşte daha okunabilir bir düzende ufak bir alıntı:
({
"date":"2020-01-21",
"cases":1,
"deaths":0,
"updated":1643386814538
},{
"date":"2020-01-22",
"cases":1,
"deaths":0,
"updated":1643386814538
})API, tarih, servis talepleri vb.
HTML’nin Ayarlanması
Şimdilik, oldukca rahat bir iskelet HTML’i kuracağız. Sonuçta, birkaç dış kaynak eklemeniz gerekir, sadece bu adım atmak için yeterlidir:
Covid Tracker
Covid vakaları, ABD
JavaScript Kullanarak Veri Getirme
Api’den verileri alıp tarayıcı konsolunda görüntüleyerek başlayın. Bu, uzak sunucudan getirebileceğinizi ve yanıtı işleyebildiğinizi doğrulamanıza destek sağlar. Aşağıdaki kodu covid.js dosya:
var api = 'https://disease.sh/v3/covid-19/nyt/usa';
fetch(api)
.then(response => response.json())
.then(data => {
console.log(data);
});Getir JavaScript API’si XMLHttpRequest’e daha yeni bir alternatiftir (MDN’de detaylı bir şekilde okuyun). Geri aramalarla süre uyumsuz programlamayı birazcık daha kolaylaştıran bir Promise kullanır. Bu paradigmayı kullanarak, birkaç süre uyumsuz adımı birbirine zincirleyebilirsiniz.
Lüzumlu URL’yi getirdikten sonrasında, sonrasında başarı durumunu ele almak için Vaat yöntemi. Cevap’ın gövdesini JSON olarak ayrıştırın. json() yöntem.
Beri sonrasında() devamlı bir Söz döndürür, her adımı işlemek için zincirlemeye devam edebilirsiniz. İkinci adımda, şimdilik, verileri konsola kaydetmeniz yeterlidir, böylece inceleyebilirsiniz:
API’den gelen verileri incelemek için konsolda görüntülenen nesneyle etkileşim kurabilirsiniz. Aslına bakarsanız oldukca ilerleme kaydettiniz, bu yüzden hazır olduğunuzda bir sonraki adıma geçin.
Reklam panosunu kullanarak Verileri Görüntüleme.js
Verileri günlüğe kaydetmek yerine, javascript kitaplığı kullanarak çizelim. Önceki kodu aşağıdaki benzer biçimde görünecek şekilde güncelleştirerek buna hazırlanın:
fetch(api)
.then(response => response.json())
.then(data => {
plotData(data);
});
function plotData(data) {
}
Bizlere rahat, etkileşimli bir grafik vermek için reklam panosunu.js kütüphanesini kullanacağız. billboard.js temeldir, sadece birkaç değişik grafik türünü destek sunar ve eksenleri, etiketleri ve grafiğin tüm standart bileşenlerini özelleştirmenizi sağlar.
Üç harici dosya eklemeniz gerekir, bundan dolayı bu tarz şeyleri html’nizin BAŞıNA ilave edin:
Billboard.js en temel grafikle deneyin. Aşağıdakileri ekle plotData():
bb.generate({
bindto: "#covid-all-us-cases",
data: {
type: "line",
columns: (
( "data", 10, 40, 20 )
)
}
});Bu, bir sonraki bağlama özelliği, grafiğin oluşturulacak hedef HTML öğesini tanımlayan bir seçici tanımlar. Veriler bir satır grafiği, tek bir sütunla beraber. Sütun verilerinin dört değerden oluşan bir takım bulunduğunu ve ilk değerin bu verilerin adı (“veri”) olarak davranan bir mısra bulunduğunu ihmal etmeyin.
Seride üç kıymet ve “veri” olarak etiketleyen bir gösterge ile birazcık buna benzeyen bir grafik görmeniz gerekir:
Sana kalan tek şey gerçek. veri aslına bakarsan aktardığınız API’den plotData(). Bu birazcık daha çok emek verme gerektirir, bu sebeple uygun bir formata çevirmeniz ve billboard.js her şeyi doğru görüntülemesi için yönerge vermeniz gerekir.
Dava geçmişinin tamamını gösteren bir cetvel çizeceğiz. Biri tarihleri içeren x ekseni için, diğeri de grafikte çizeceğiz gerçek veri serisi için olmak suretiyle iki sütun oluşturarak başlayın:
var keys = data.map(a => a.date),
cases = data.map(a => a.cases);
keys.unshift("dates");
cases.unshift("cases");Kalan emek verme, reklam panosu nesnelerinde ince ayar yapılmasını gerektirir.
bb.generate({
bindto: "#covid-all-us-cases",
data: {
x: "dates",
type: "line",
columns: (
keys,
cases
)
}
});Ek olarak aşağıdakileri ilave edin eksen mülk:
axis: {
x: {
type: "category",
tick: {
count: 10
}
}
}
Bu, x ekseninin yalnızca 10 tarih görüntülemesini sağlar, böylece güzel aralıklı olurlar. Nihai sonucun etkileşimli bulunduğunu ihmal etmeyin. İmlecinizi grafiğin üstüne siz taşırken, reklam panosu verileri bir açılır pencere içinde görüntüler:
GitHub’da bu izleyicinin kaynağına göz atın.
Varyasyon -ları
Billboard.js kullanarak çizdiğiniz şeyi değiştirebilmek için kaynak verileri değişik şekillerde iyi mi kullanabileceğinize bir göz atın.
Verileri Yalnızca Bir Yıl Süresince Görüntüleme
Genel grafik oldukca yoğun bu sebeple oldukca fazla veri içeriyor. Gürültüyü azaltmanın rahat bir yolu, süre dilimini mesela tek bir yılla sınırlamaktır (GitHub). Bunu yapmak için yalnız bir satırı değiştirmeniz gerekir ve plotData asla işlev; azaltılmış bir veri kümesini işlemek için yeterince geneldir.
İkincisinde .sonrasında() çağır, değiştir:
plotData(data);İle:
plotData(data.filter(a => a.date > '2022'));Bu, bir sonraki filtre() yöntemi, dizideki her değerde bir işlev çağırarak bir diziyi azaltır. Bu işlev geri döndüğünde doğrukıymetini korur. Aksi takdirde, onu atar.
Kıymet true ise yukarıdaki işlev tarih özelliği ‘2022’den büyüktür. Bu rahat bir mısra karşılaştırmasıdır, sadece bu verilerin yıl-ay-gün, oldukca uygun bir şekil olan formatı için çalışır.
Verileri Daha Azca Detay düzeyiyle 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 sadece verileri durağan(durgun) bir aralıktan (GitHub) korumaktır. Veriler hemen sonra tüm orijinal süreci kapsayacak, sadece oldukca daha azca olacaktır. Belirgin bir yaklaşım, her haftadan bir kıymet tutmaktır, başka bir deyişle, her yedinci kıymet.
Bunu yapmak için standart teknik, % (modül) işleci. 0’a eşit her dizi dizininin modül 7’sinde filtre uygulanarak, her 7.
plotData(data.filter((a, index) => index % 7 == 0));Bu sefer alternatif bir biçim kullanmanız icap ettiğini ihmal etmeyin. filtre() iki bağımsız değişken kullanır, ikincisi dizini temsil eder. İşte netice:
Vakaları ve Ölümleri Tek Grafikte Görüntüleme
Son olarak, hem vakaları hem de ölümleri tek bir grafikte (GitHub) görüntülemeyi deneyin. Bu sefer plotData() yöntemi, sadece yaklaşım esas olarak aynıdır. Mühim değişimler yeni verilerin eklenmesidir:
deaths = data.map(a => a.deaths)
...
columns = ( keys, cases, deaths )Billboard.js eksenleri doğru biçimlendirerek reklam panosunu sağlamak için ince ayarlar. Bilhassa, geçirilen nesneye ilişik veri yapısındaki değişikliklere dikkat edin bb.generate:
data: {
x: "dates",
columns: columns,
axes: { "cases": "y", "deaths": "y2" },
types: {
cases: "bar"
}
}Şimdi, çizim yapmak için birden oldukca ekseni tanımlayın ve Durumda silsile.
JavaScript Kullanarak API Neticelerini Çizme
Bu öğretici, JavaScript’te temel bir COVID-19 seyircisi oluşturmak için rahat bir API ve grafik kitaplığının iyi mi kullanılacağını gösterir. API, değişik ülkeler için çalışabileceğiniz öteki birçok veriyi destek sunar ve ek olarak aşı kapsamına ilişkin verileri de ihtiva eder.
Görüntülemek için oldukca çeşitli billboard.js grafik türleri yada tamamen değişik bir grafik kitaplığı kullanabilirsiniz. Seçim senin!