Как создать трекер COVID-19 на JavaScript

Ищете быстрый проект, чтобы попрактиковаться в своих навыках веб-разработки? Вы, наверное, видели много разных трекеров и диаграмм COVID на протяжении всей пандемии — вот как создать свой собственный с минимальными усилиями.

Вы узнаете о некоторых полезных приемах в JavaScript, в том числе о том, как получать удаленные данные из API и как использовать библиотеку диаграмм для их отображения. Давайте углубимся в это.

Что вы будете строить

Это руководство поможет продемонстрировать основы работы с API с помощью JavaScript. Вы узнаете, как получать данные из удаленного источника. Вы также увидите, как использовать библиотеку диаграмм для отображения полученных данных.

Весь код, использованный в этой статье, доступен в Гитхаб репозиторий.

Изучение источника данных

Чтобы получить последние данные, связанные с COVID, мы будем использовать болезнь.ш который описывает себя как «Открытый API данных о заболеваниях».

Этот API превосходен, потому что:

• Он имеет много разных источников данных, каждый из которых предлагает немного разные форматы.
instagram viewer
• Он хорошо документирован, не с примерами, но с большим количеством деталей о том, как каждый из болезнь.ш конечные точки работают
• Он возвращает JSON, с которым легко работать из JavaScript.
• Он полностью открыт и бесплатен для использования, аутентификация не требуется.

Последний пункт особенно важен: многие API требуют прохождения сложного процесса OpenAuth или просто недоступны для JavaScript, работающего в браузере.

Для этого урока мы будем использовать Данные Нью-Йорк Таймс для США от болезней.ш. Эта конечная точка включает данные о продолжительности пандемии (с 21 января 2020 г.) в удобном для работы формате. Взгляните на некоторые данные из конечная точка Disease.sh мы будем использовать:

Если вы привыкли иметь дело с JSON, вы сможете прочитать это без каких-либо проблем. Вот небольшой отрывок в более удобном для чтения формате:

[{
 "дата": "2020-01-21",
 "случаи":1,
 "смертей":0,
 «обновлено»: 1643386814538
},{
 "дата": "2020-01-22",
 "случаи":1,
 "смертей":0,
 «обновлено»: 1643386814538
}]

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

Настройка HTML

Сейчас мы настроим очень простой каркас HTML. В конечном итоге вам потребуется подключить несколько внешних ресурсов, но для начала этого достаточно:

Случаи Covid, США

Получение данных с помощью JavaScript

Начните с получения данных из API и отображения их в консоли браузера. Это поможет вам убедиться, что вы можете получить данные с удаленного сервера и обработать ответ. Добавьте следующий код в свой covid.js файл:

вар апи = ' https://disease.sh/v3/covid-19/nyt/usa';
выборка (апи)
 .затем (ответ => ответ.json())
 .тогда (данные => {
 console.log(данные);
 });

Fetch JavaScript API — это более новая альтернатива XMLHttpRequest (подробно о нем читайте на странице МДН). Он использует обещание, которое немного упрощает асинхронное программирование с обратными вызовами. Используя эту парадигму, вы можете объединить несколько асинхронных шагов.

После получения требуемого URL-адреса используйте тогда метод Promise для обработки случая успеха. Разобрать тело ответа как JSON через json() метод.

Связанный: Стрелочные функции JavaScript могут сделать вас лучшим разработчиком

С тогда() всегда возвращает обещание, вы можете продолжать цепочку для обработки каждого шага. На втором этапе просто запишите данные в консоль, чтобы вы могли их проверить:

Вы сможете взаимодействовать с объектом, отображаемым в консоли, для проверки данных из API. Вы уже добились большого прогресса, поэтому переходите к следующему шагу, когда будете готовы.

Связанный: Отладка в JavaScript: вход в консоль браузера

Отображение данных с помощью billboard.js

Вместо того, чтобы регистрировать данные, давайте нанесем их на график с помощью библиотеки JavaScript. Подготовьтесь к этому, обновив предыдущий код, чтобы он выглядел так:

выборка (апи)
 .затем (ответ => ответ.json())
 .тогда (данные => {
 plotData (данные);
 });
функция plotData (данные) {
}

Мы будем использовать билборд.js библиотека, чтобы дать нам простой интерактивный график. Billboard.js является базовым, но поддерживает несколько различных типов диаграмм и позволяет настраивать оси, метки и все стандартные компоненты диаграммы.

Вам нужно будет включить три внешних файла, поэтому добавьте их в HEAD вашего html:

Попробуйте billboard.js с самой простой диаграммой. Добавьте следующее в сюжетные данные ():

bb.генерировать({
 bindto: "#covid-all-us-cases",
 данные: {
 тип: "линия",
 столбцы: [
 [ "данные", 10, 40, 20 ]
 ]
 }
});

То связываются с Свойство определяет селектор, который идентифицирует целевой HTML-элемент, в котором создается диаграмма. Данные для линия диаграмма с одним столбцом. Обратите внимание, что данные столбца представляют собой массив, состоящий из четырех значений, причем первое значение представляет собой строку, действующую как имя этих данных («данные»).

Вы должны увидеть диаграмму, которая выглядит примерно так, с тремя значениями в ряду и легендой, помечающей ее как «данные»:

Все, что вам осталось сделать, это использовать настоящую данные из API, в который вы уже переходите сюжетные данные (). Это требует немного больше работы, потому что вам нужно будет перевести его в соответствующий формат и дать указание billboard.js отображать все правильно.

Мы построим диаграмму, показывающую полную историю болезни. Начните с создания двух столбцов, один для оси X, которая содержит даты, а другой для фактических рядов данных, которые мы нанесем на график:

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

Оставшаяся работа требует настройки объекта рекламного щита.

bb.генерировать({
 bindto: "#covid-all-us-cases",
 данные: {
 х: "даты",
 тип: "линия",
 столбцы: [
 ключи,
 случаи
 ]
 }
});

Также добавьте следующее ось имущество:

 ось: {
 Икс: {
 тип: "категория",
 галочка: {
 количество: 10
 }
 }
 }

Это гарантирует, что по оси x будет отображаться только 10 дат, поэтому они будут хорошо расположены. Обратите внимание, что окончательный результат является интерактивным. Когда вы наводите курсор на график, рекламный щит отображает данные во всплывающем окне:

Проверьте источник для этого трекера в Гитхаб.

Вариации

Посмотрите, как вы можете использовать исходные данные по-разному, чтобы изменить то, что вы рисуете с помощью billboard.js.

Просмотр данных только за один год

Общая диаграмма очень загружена, потому что она содержит так много данных. Простой способ уменьшить шум — ограничить период времени, например, одним годом (Гитхаб). Для этого вам нужно всего лишь изменить одну строку, и вам не нужно прикасаться к plotData функционировать вообще; он достаточно общий, чтобы обрабатывать сокращенный набор данных.

Во-вторых .тогда() позвони, замени:

plotData (данные);

С участием:

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

То фильтр() Метод уменьшает массив, вызывая функцию для каждого значения в массиве. Когда эта функция возвращается истинный, он сохраняет значение. В противном случае он отбрасывает его.

Приведенная выше функция возвращает true, если значение Дата свойство больше, чем «2022». Это простое сравнение строк, но оно работает для формата данных год-месяц-день, что очень удобно.

Просмотр данных с меньшей степенью детализации

Вместо того, чтобы ограничивать данные только одним годом, другой способ уменьшить шум состоит в том, чтобы отбросить большую его часть, но сохранить данные за фиксированный интервал (Гитхаб). Тогда данные будут охватывать весь первоначальный период, но их будет гораздо меньше. Очевидный подход состоит в том, чтобы просто сохранять одно значение каждую неделю, другими словами, каждое седьмое значение.

Стандартная техника для этого с помощью % (модуль) оператор. Фильтруя по модулю 7 каждого индекса массива, равного 0, мы сохраним каждое 7-е значение:

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

Обратите внимание, что на этот раз вам нужно будет использовать альтернативную форму фильтр() который использует два аргумента, второй представляет индекс. Вот результат:

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

Наконец, попробуйте отобразить случаи и смерти на одной диаграмме (Гитхаб). На этот раз вам нужно изменить сюжетные данные () метод, но подход в основном тот же. Ключевые изменения заключаются в добавлении новых данных:

смерти = data.map (a => a.deaths)
...
столбцы = [ключи, дела, смерти]

И настройки, чтобы обеспечить правильное форматирование осей Billboard.js. Обратите внимание, в частности, на изменения в структуре данных, принадлежащих объекту, переданному в bb.генерировать:

данные: {
 х: "даты",
 столбцы: столбцы,
 оси: { "случаи": "у", "смерти": "у2" },
 типы: {
 падежи: "бар"
 }
}

Теперь определите несколько осей для построения вместе с новым типом, специфичным для случаи ряд.

График результатов API с использованием JavaScript

В этом руководстве показано, как использовать простой API и библиотеку диаграмм для создания базового трекера COVID-19 на JavaScript. API поддерживает множество других данных, с которыми вы можете работать для разных стран, а также включает данные об охвате вакцинацией.

Вы можете использовать широкий спектр типов диаграмм billboard.js для его отображения или вообще другую библиотеку диаграмм. Выбор остается за вами!

Как сделать диаграмму с помощью Chart.js

Отображение динамических данных с помощью JavaScript никогда не было проще.

Читать дальше

Об авторе