Jak zbudować narzędzie do śledzenia COVID-19 w JavaScript

Szukasz szybkiego projektu, aby poćwiczyć swoje umiejętności w zakresie tworzenia stron internetowych? Prawdopodobnie widziałeś wiele różnych monitorów i wykresów COVID podczas pandemii — oto jak stworzyć własne przy minimalnym wysiłku.

Nauczysz się kilku przydatnych technik w JavaScript, w tym sposobu pobierania zdalnych danych z interfejsu API i korzystania z biblioteki wykresów do ich wyświetlania. Przejdźmy do tego.

Co będziesz budować

Ten przewodnik pomoże zademonstrować podstawy pracy z interfejsem API przy użyciu JavaScript. Dowiesz się, jak pobierać dane ze zdalnego źródła. Dowiesz się również, jak używać biblioteki wykresów do wyświetlania pobranych danych.

Cały kod użyty w tym artykule jest dostępny w Github magazyn.

Eksploracja źródła danych

Aby uzyskać najnowsze dane dotyczące COVID, użyjemy choroba.sh który określa się jako „Open Disease Data API”.

Ten interfejs API jest doskonały, ponieważ:

• Ma wiele różnych źródeł danych, z których każde oferuje nieco inne formaty
• Jest to dobrze udokumentowane, nie z przykładami, ale z dużą ilością szczegółów na temat tego, jak każdy z
  instagram viewer
  choroba.sh punkty końcowe działają
• Zwraca JSON, który jest łatwy w obsłudze z JavaScript
• Jest całkowicie otwarty i darmowy, nie wymaga uwierzytelnienia

Ta ostatnia kwestia jest szczególnie ważna: wiele interfejsów API wymaga przejścia przez skomplikowany proces OpenAuth lub po prostu nie jest dostępnych dla JavaScriptu uruchomionego w przeglądarce.

W tym samouczku użyjemy Dane New York Times dla USA z choroby.sh. Ten punkt końcowy zawiera dane z czasu trwania pandemii (od 21 stycznia 2020 r.) w formacie łatwym w obsłudze. Spójrz na niektóre dane z choroba.sh punkt końcowy będziemy używać:

Jeśli jesteś przyzwyczajony do obsługi JSON, możesz to przeczytać bez żadnego problemu. Oto mały fragment w bardziej czytelnym układzie:

[{
 "date":"2020-01-21",
 "przypadki":1,
 "zgony":0,
 "zaktualizowany":1643386814538
},{
 "date":"2020-01-22",
 "przypadki":1,
 "zgony":0,
 "zaktualizowany":1643386814538
}]

API zwraca prostą tablicę obiektów, z których każdy reprezentuje punkt danych z datą, przypadkami itp.

Konfigurowanie HTML

Na razie skonfigurujemy bardzo prosty szkielet HTML. Ostatecznie będziesz musiał uwzględnić kilka zewnętrznych zasobów, ale to wystarczy, aby zacząć:

Przypadki Covid, USA

Pobieranie danych za pomocą JavaScript

Zacznij od pobrania danych z API i wyświetlenia ich w konsoli przeglądarki. Pomoże Ci to sprawdzić, czy możesz pobrać ze zdalnego serwera i przetworzyć odpowiedź. Dodaj następujący kod do swojego covid.js plik:

zmienna api = ' https://disease.sh/v3/covid-19/nyt/usa';
pobierz (api)
 .then (odpowiedź => odpowiedź.json())
 .to (dane => {
 console.log (dane);
 });

Fetch JavaScript API jest nowszą alternatywą dla XMLHttpRequest (przeczytaj o tym szczegółowo na MDN). Wykorzystuje obietnicę, która sprawia, że ​​programowanie asynchroniczne z wywołaniami zwrotnymi jest nieco łatwiejsze. Korzystając z tego paradygmatu, możesz połączyć ze sobą kilka asynchronicznych kroków.

Po pobraniu wymaganego adresu URL użyj następnie sposób Obietnicy, aby zająć się przypadkiem sukcesu. Przeanalizuj treść odpowiedzi jako JSON za pomocą json() metoda.

Związane z: Funkcje strzałek JavaScript mogą uczynić Cię lepszym programistą

Odkąd następnie() zawsze zwraca obietnicę, możesz kontynuować łańcuch, aby obsłużyć każdy krok. Na razie w drugim kroku po prostu zaloguj się do konsoli, aby móc je sprawdzić:

Będziesz mógł wchodzić w interakcję z obiektem wyświetlanym w konsoli, aby sprawdzać dane z API. Poczyniłeś już duże postępy, więc przejdź do następnego kroku, gdy będziesz gotowy.

Związane z: Debugowanie w JavaScript: logowanie do konsoli przeglądarki

Wyświetlanie danych za pomocą billboard.js

Zamiast rejestrować dane, wykreślmy je za pomocą biblioteki JavaScript. Przygotuj się na to, aktualizując poprzedni kod, aby wyglądał tak:

pobierz (api)
 .then (odpowiedź => odpowiedź.json())
 .to (dane => {
 plotData (dane);
 });
funkcja plotData (dane) {
}

Użyjemy billboard.js biblioteka, aby dać nam prosty, interaktywny wykres. billboard.js jest prosty, ale obsługuje kilka różnych typów wykresów i pozwala dostosować osie, etykiety i wszystkie standardowe składniki wykresu.

Musisz dołączyć trzy zewnętrzne pliki, więc dodaj je do HEAD swojego html:

Wypróbuj billboard.js z najbardziej podstawowym wykresem. Dodaj następujące do wykresDane():

bb.generuj({
 bindto: "#covid-all-us-cases",
 dane: {
 typ: "linia",
 kolumny: [
 [ "dane", 10, 40, 20 ]
 ]
 }
});

ten powiązać właściwość definiuje selektor, który identyfikuje docelowy element HTML, w którym ma zostać wygenerowany wykres. Dane dotyczą linia wykres z pojedynczą kolumną. Zwróć uwagę, że dane w kolumnie to tablica składająca się z czterech wartości, przy czym pierwsza wartość to ciąg znaków pełniący funkcję nazwy danych („dane”).

Powinieneś zobaczyć wykres, który wygląda mniej więcej tak, z trzema wartościami w serii i legendą oznaczającą go jako „dane”:

Pozostało ci tylko użyć rzeczywistego dane z API, do którego już przechodzisz wykresDane(). Wymaga to trochę więcej pracy, ponieważ będziesz musiał przetłumaczyć go na odpowiedni format i poinstruować billboard.js, aby wyświetlał wszystko poprawnie.

Sporządzimy wykres, który pokazuje pełną historię sprawy. Zacznij od zbudowania dwóch kolumn, jednej dla osi x zawierającej daty, a drugiej dla rzeczywistych serii danych, które wykreślimy na wykresie:

var keys = data.map (a => a.data),
 case = data.map (a => a.cases);
keys.unshift("daty");
case.unshift("przypadki");

Pozostała praca wymaga poprawek w obiekcie billboardu.

bb.generuj({
 bindto: "#covid-all-us-cases",
 dane: {
 x: "daty",
 typ: "linia",
 kolumny: [
 Klucze,
 sprawy
 ]
 }
});

Dodaj również następujące oś własność:

 oś: {
 x: {
 typ: "kategoria",
 zaznacz: {
 liczba: 10
 }
 }
 }

Dzięki temu oś X wyświetla tylko 10 dat, dzięki czemu są one ładnie rozmieszczone. Zauważ, że wynik końcowy jest interaktywny. Gdy najedziesz kursorem na wykres, billboard wyświetla dane w wyskakującym okienku:

Sprawdź źródło tego trackera w GitHub.

Wariacje

Zobacz, jak możesz wykorzystać dane źródłowe na różne sposoby, aby zmienić to, co wykreślasz za pomocą billboard.js.

Wyświetlanie danych tylko przez jeden rok

Ogólny wykres jest bardzo zajęty, ponieważ zawiera tak dużo danych. Prostym sposobem na zmniejszenie hałasu jest ograniczenie czasu, np. do jednego roku (GitHub). Aby to zrobić, wystarczy zmienić jedną linię i nie musisz dotykać wykresDane w ogóle funkcjonować; jest wystarczająco ogólny, aby obsłużyć ograniczony zestaw danych.

W sekundę .następnie() zadzwoń, wymień:

plotData (dane);

Z:

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

ten filtr() Metoda redukuje tablicę, wywołując funkcję na każdej wartości w tablicy. Kiedy ta funkcja powróci prawda, zachowuje wartość. W przeciwnym razie odrzuca go.

Powyższa funkcja zwraca true, jeśli wartość jest Data nieruchomość jest większa niż „2022”. Jest to proste porównanie ciągów, ale działa dla formatu tych danych, czyli rok-miesiąc-dzień, bardzo wygodny format.

Wyświetlanie danych z mniejszą szczegółowością

Zamiast ograniczać dane do jednego roku, innym sposobem na zmniejszenie szumu jest odrzucenie większości z nich, ale zachowanie danych z ustalonego interwału (GitHub). Dane obejmą wtedy cały pierwotny okres, ale będzie ich znacznie mniej. Oczywistym podejściem jest zachowanie jednej wartości z każdego tygodnia — innymi słowy, co siódma wartość.

Standardową techniką robienia tego jest % (moduł) operatora. Filtrując według modułu 7 każdego indeksu tablicy równego 0, zachowamy co siódmą wartość:

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

Pamiętaj, że tym razem będziesz musiał użyć alternatywnej formy filtr() który używa dwóch argumentów, drugi reprezentuje indeks. Oto wynik:

Wyświetlanie przypadków i zgonów na jednym wykresie

Na koniec spróbuj wyświetlić zarówno przypadki, jak i zgony na jednym wykresie (GitHub). Tym razem będziesz musiał zmienić wykresDane() metoda, ale podejście jest zasadniczo takie samo. Kluczowe zmiany to dodanie nowych danych:

zgony = data.map (a => a.zgony)
...
kolumny = [ klucze, przypadki, zgony ]

I poprawki, aby zapewnić, że billboard.js poprawnie sformatuje osie. Zwróć uwagę w szczególności na zmiany w strukturze danych należących do obiektu przekazane do bb.generuj:

dane: {
 x: "daty",
 kolumny: kolumny,
 osie: { "przypadki": "y", "zgony": "y2" },
 typy: {
 przypadki: "bar"
 }
}

Teraz zdefiniuj wiele osi do wykreślenia wraz z nowym typem specyficznym dla sprawy seria.

Wykreślanie wyników API za pomocą JavaScript

Ten samouczek pokazuje, jak korzystać z prostego interfejsu API i biblioteki wykresów do tworzenia podstawowego modułu do śledzenia COVID-19 w JavaScript. Interfejs API obsługuje wiele innych danych, z którymi możesz pracować dla różnych krajów, a także zawiera dane dotyczące zasięgu szczepień.

Możesz użyć szerokiej gamy typów wykresów billboard.js, aby je wyświetlić, lub zupełnie innej biblioteki wykresów. Wybór nalezy do ciebie!

Jak zrobić wykres za pomocą Chart.js

Wyświetlanie dynamicznych danych za pomocą JavaScript nigdy nie było łatwiejsze.

Czytaj dalej

O autorze