Как да създадете COVID-19 Tracker в JavaScript

Търсите бърз проект, за да практикувате уменията си за уеб разработчик? Вероятно сте виждали много различни COVID тракери и диаграми по време на пандемията – ето как да направите свои собствени с минимални усилия.

Ще научите някои полезни техники в JavaScript, включително как да извличате отдалечени данни от API и как да използвате библиотека за диаграми, за да ги показвате. Да влезем в него.

Какво ще строите

Това ръководство ще ви помогне да демонстрирате основите на работата с API с помощта на JavaScript. Ще научите как да извличате данни от отдалечен източник. Ще видите също как да използвате библиотека с диаграми за показване на извлечените данни.

Целият код, използван в тази статия, е наличен в a Github хранилище.

Проучване на източника на данни

За да получим най-новите данни, свързани с COVID, ще използваме болест.ш който се описва като „API за отворени данни за болести“.

Този API е отличен, защото:

• Той има много различни източници на данни, като всеки предлага малко по-различни формати
instagram viewer
• Той е добре документиран, не с примери, но с много подробности за това как всеки от тях болест.ш крайните точки работят
• Връща JSON, с който е лесно да се работи от JavaScript
• Той е напълно отворен и безплатен за използване, не се изисква удостоверяване

Тази последна точка е особено важна: много API изискват да преминете през сложен процес на OpenAuth или просто не са достъпни за JavaScript, работещ в браузър.

За този урок ще използваме Данни на Ню Йорк Таймс за САЩ от болест.ш. Тази крайна точка включва данни от продължителността на пандемията (от 21 януари 2020 г.) във формат, с който е лесен за работа. Разгледайте някои данни от болест.ш крайна точка ще използваме:

Ако сте свикнали да работите с JSON, може да успеете да го прочетете без проблем. Ето малък откъс в по-четливо оформление:

[{
 "дата": "2020-01-21",
 "случаи":1,
 "смърти":0,
 "актуализиран": 1643386814538
},{
 "дата": "2020-01-22",
 "случаи":1,
 "смърти":0,
 "актуализиран": 1643386814538
}]

API връща прост масив от обекти, като всеки обект представлява точка от данни с дата, случаи и т.н.

Настройка на HTML

Засега ще настроим много прост скелетен HTML. В крайна сметка ще трябва да включите няколко външни ресурси, но това е достатъчно, за да започнете:

Случаи на Covid, САЩ

Извличане на данните с помощта на JavaScript

Започнете, като просто вземете данните от API и ги покажете в конзолата на браузъра. Това ще ви помогне да проверите дали можете да извлечете от отдалечения сървър и да обработите отговора. Добавете следния код към вашия covid.js файл:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
извличане (api)
 .then (response => response.json())
 .след това (данни => {
 console.log (данни);
 });

API за извличане на JavaScript е по-нова алтернатива на XMLHttpRequest (прочетете подробно за него на MDN). Той използва Promise, което прави асинхронното програмиране с обратни извиквания малко по-лесно. Използвайки тази парадигма, можете да веригата няколко асинхронни стъпки заедно.

След като извлечете необходимия URL, използвайте тогава метод на обещанието за справяне с успешния случай. Анализирайте тялото на отговора като JSON чрез json() метод.

Свързани: Функциите със стрелка на JavaScript могат да ви направят по-добър разработчик

От тогава() винаги връща Promise, можете да продължите да се свързвате, за да се справите с всяка стъпка. Във втората стъпка засега просто регистрирайте данните в конзолата, за да можете да ги проверите:

Ще можете да взаимодействате с обекта, показан в конзолата, за да инспектирате данните от API. Вече сте постигнали голям напредък, така че преминете към следващата стъпка, когато сте готови.

Свързани: Отстраняване на грешки в JavaScript: Влизане в конзолата на браузъра

Показване на данните с помощта на billboard.js

Вместо да регистрираме данните, нека ги начертаем с помощта на JavaScript библиотека. Подгответе се за това, като актуализирате предишния код, за да изглежда така:

извличане (api)
 .then (response => response.json())
 .след това (данни => {
 plotData (данни);
 });
функция plotData (данни) {
}

Ще използваме billboard.js библиотека, за да ни даде проста интерактивна графика. billboard.js е основен, но поддържа няколко различни типа диаграми и ви позволява да персонализирате оси, етикети и всички стандартни съставки на диаграмата.

Ще трябва да включите три външни файла, така че добавете ги към HEAD на вашия html:

Изпробвайте billboard.js с най-основната диаграма. Добавете следното към plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 данни: {
 тип: "линия",
 колони: [
 [ "данни", 10, 40, 20 ]
 ]
 }
});

В се свързва с свойството дефинира селектор, който идентифицира целевия HTML елемент, в който да генерира диаграмата. Данните са за а линия диаграма, с една колона. Имайте предвид, че данните в колоната са масив, състоящ се от четири стойности, като първата стойност е низ, действащ като име на тези данни („данни“).

Трябва да видите диаграма, която изглежда малко така, с три стойности в серията и легенда, обозначаваща я като „данни“:

Всичко, което ви остава да направите, е да използвате действителното данни от API, в който вече преминавате plotData(). Това изисква малко повече работа, защото ще трябва да го преведете в подходящ формат и да инструктирате billboard.js да показва всичко правилно.

Ще начертаем диаграма, която показва пълната история на случая. Започнете с изграждане на две колони, една за оста x, която съдържа дати, и една за действителните серии от данни, които ще начертаем на графиката:

var keys = data.map (a => a.date),
 случаи = data.map (a => a.cases);
keys.unshift("датите");
case.unshift("случаи");

Останалата работа изисква промени в обекта на билборда.

bb.generate({
 bindto: "#covid-all-us-cases",
 данни: {
 x: "дати",
 тип: "линия",
 колони: [
 ключове,
 случаи
 ]
 }
});

Добавете и следното ос Имот:

 ос: {
 х: {
 тип: "категория",
 отметка: {
 брой: 10
 }
 }
 }

Това гарантира, че оста X показва само 10 дати, така че те да са добре разположени. Имайте предвид, че крайният резултат е интерактивен. Когато преместите курсора си върху графиката, билбордът показва данни в изскачащ прозорец:

Проверете източника за този тракер в GitHub.

Вариации

Разгледайте как можете да използвате изходните данни по различни начини, за да промените това, което начертавате, като използвате billboard.js.

Преглед на данни само за една година

Цялостната диаграма е много натоварена, защото съдържа толкова много данни. Един прост начин за намаляване на шума е да се ограничи периодът от време, например до една година (GitHub). Трябва само да промените един ред, за да направите това, и не е нужно да докосвате plotData функция изобщо; той е достатъчно общ, за да обработва намален набор от данни.

Във втория .тогава() обадете се, заменете:

plotData (данни);

с:

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

В филтър() метод намалява масив чрез извикване на функция за всяка стойност в масива. Когато тази функция се върне вярно, той запазва стойността. В противен случай го изхвърля.

Функцията по-горе връща true, ако стойността е дата имотът е по-голям от „2022“. Това е просто сравнение на низове, но работи за формата на тези данни, който е година-месец-ден, много удобен формат.

Преглед на данни с по-малко детайлност

Вместо да ограничавате данните само до една година, друг начин за намаляване на шума е да изхвърлите по-голямата част от тях, но да запазите данните от фиксиран интервал (GitHub). След това данните ще покриват целия първоначален период, но ще има много по-малко от него. Очевиден подход е да запазите само една стойност от всяка седмица — с други думи, всяка седма стойност.

Стандартната техника за това е с % (модулен) оператор. Чрез филтриране по модул 7 на всеки индекс на масив, равен на 0, ще запазим всяка 7-ма стойност:

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

Имайте предвид, че този път ще трябва да използвате алтернативна форма на филтър() който използва два аргумента, вторият представлява индекса. Ето резултата:

Преглед на случаите и смъртните случаи в една графика

И накрая, опитайте да покажете както случаите, така и смъртните случаи на една диаграма (GitHub). Този път ще трябва да промените plotData() метод, но подходът е основно същият. Основните промени са добавянето на нови данни:

смъртни случаи = data.map (a => a.deaths)
...
колони = [ключове, случаи, смъртни случаи]

И настройки, за да гарантира, че billboard.js форматира осите правилно. Обърнете внимание по-специално на промените в структурата на данните, принадлежащи на обекта, към който се предава бб.генерира:

данни: {
 x: "дати",
 колони: колони,
 оси: { "случаи": "y", "смърти": "y2" },
 типове: {
 случаи: "бар"
 }
}

Сега дефинирайте множеството оси за начертаване заедно с нов тип, специфичен за случаи серия.

Изобразяване на резултати от API с помощта на JavaScript

Този урок демонстрира как да използвате прост API и библиотека за диаграми, за да създадете основен инструмент за проследяване на COVID-19 в JavaScript. API поддържа много други данни, с които можете да работите за различни държави, и също така включва данни за покритието на ваксините.

Можете да използвате широка гама от типове диаграми billboard.js, за да ги покажете, или изцяло различна библиотека за диаграми. Изборът е твой!

Как да направите диаграма с Chart.js

Показването на динамични данни с JavaScript никога не е било по-лесно.

Прочетете Следващото

За автора