Како направити ЦОВИД-19 Трацкер у ЈаваСцрипт-у

Тражите брз пројекат за вежбање својих вештина веб програмера? Вероватно сте видели много различитих ЦОВИД трацкера и графикона током пандемије - ево како да направите своје уз минималан напор.

Научићете неке корисне технике у ЈаваСцрипт-у, укључујући како да преузмете удаљене податке из АПИ-ја и како да користите библиотеку графикона за њихово приказивање. Хајдемо у то.

Шта ћете градити

Овај водич ће вам помоћи да покажете основе рада са АПИ-јем користећи ЈаваСцрипт. Научићете како да преузмете податке са удаљеног извора. Такође ћете видети како да користите библиотеку графикона за приказ преузетих података.

Сав код који се користи у овом чланку доступан је у а Гитхуб репозиторијум.

Истраживање извора података

Да бисмо добили најновије податке о ЦОВИД-у, користићемо болест.ш који себе описује као „АПИ отворених података о болестима“.

Овај АПИ је одличан јер:

• Има много различитих извора података, од којих сваки нуди мало другачије формате
• Добро је документовано, не са примерима, већ са доста детаља о томе како сваки од њих болест.ш крајње тачке раде
instagram viewer
• Враћа ЈСОН, са којим је лако радити из ЈаваСцрипт-а
• Потпуно је отворен и бесплатан за употребу, није потребна аутентификација

Ова последња тачка је посебно важна: многи АПИ-ји захтевају да прођете кроз компликован ОпенАутх процес или једноставно нису доступни ЈаваСцрипт-у који ради у прегледачу.

За овај водич користићемо Подаци Њујорк тајмса за САД од болести.ш. Ова крајња тачка укључује податке о трајању пандемије (од 21. јануара 2020.), у формату са којим је лако радити. Погледајте неке податке из болест.ш крајња тачка користићемо:

Ако сте навикли да радите са ЈСОН-ом, можда ћете моћи да га прочитате без проблема. Ево малог извода у читљивијем изгледу:

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

АПИ враћа једноставан низ објеката, при чему сваки објекат представља тачку података са датумом, случајевима итд.

Подешавање ХТМЛ-а

За сада ћемо поставити неки врло једноставан скелет ХТМЛ. На крају, мораћете да укључите неколико спољних ресурса, али ово је довољно да започнете:

Случајеви Цовида, САД

Преузимање података помоћу ЈаваСцрипт-а

Почните тако што ћете једноставно преузети податке из АПИ-ја и приказати их у конзоли претраживача. Ово ће вам помоћи да потврдите да можете преузети са удаљеног сервера и обрадити одговор. Додајте следећи код у свој цовид.јс фајл:

вар апи = ' https://disease.sh/v3/covid-19/nyt/usa';
дохвати (апи)
 .тхен (респонсе => респонсе.јсон())
 .тхен (подаци => {
 цонсоле.лог (подаци);
 });

Фетцх ЈаваСцрипт АПИ је новија алтернатива КСМЛХттпРекуест (прочитајте о томе детаљно на МДН). Користи Промисе што чини асинхроно програмирање са повратним позивима мало лакшим. Користећи ову парадигму, можете уланчати неколико асинхроних корака заједно.

Након преузимања тражене УРЛ адресе, користите онда метод обећања за решавање случаја успеха. Анализирајте тело одговора као ЈСОН преко јсон() методом.

Повезан: ЈаваСцрипт функције стрелице могу да вас учине бољим програмером

Од онда() увек враћа Промисе, можете наставити да се повезујете да бисте обрадили сваки корак. У другом кораку, за сада, једноставно пријавите податке на конзолу да бисте могли да их прегледате:

Моћи ћете да ступите у интеракцију са објектом приказаним на конзоли да бисте прегледали податке из АПИ-ја. Већ сте доста напредовали, па пређите на следећи корак када будете спремни.

Повезан: Отклањање грешака у ЈаваСцрипт-у: пријављивање на конзолу претраживача

Приказивање података помоћу биллбоард.јс

Уместо да евидентирамо податке, хајде да их нацртамо помоћу ЈаваСцрипт библиотеке. Припремите се за ово ажурирањем претходног кода да изгледа овако:

дохвати (апи)
 .тхен (респонсе => респонсе.јсон())
 .тхен (подаци => {
 плотДата (подаци);
 });
функција плотДата (подаци) {
}

Користићемо биллбоард.јс библиотека да нам да једноставан, интерактивни графикон. биллбоард.јс је основни, али подржава неколико различитих типова графикона и омогућава вам да прилагодите осе, ознаке и све стандардне састојке графикона.

Мораћете да укључите три спољне датотеке, па их додајте у ГЛАВУ вашег хтмл-а:

Испробајте биллбоард.јс са најосновнијим графиконом. Додајте следеће на плотДата():

бб.генерате({
 биндто: "#цовид-алл-ус-цасес",
 подаци: {
 укуцајте: "линија",
 колоне: [
 [ "подаци", 10, 40, 20 ]
 ]
 }
});

Тхе везан за својство дефинише селектор који идентификује циљни ХТМЛ елемент у коме се генерише графикон. Подаци су за а линија графикон, са једном колоном. Имајте на уму да су подаци колоне низ који се састоји од четири вредности, при чему је прва вредност низ који делује као име тог податка („подаци“).

Требало би да видите графикон који изгледа отприлике овако, са три вредности у низу и легендом која га означава као „подаци“:

Све што вам преостаје је да користите стварни података из АПИ-ја у који већ прелазите плотДата(). Ово захтева мало више посла јер ћете морати да га преведете у одговарајући формат и упутите биллбоард.јс да све прикаже исправно.

Направићемо графикон који приказује пуну историју случаја. Почните тако што ћете направити две колоне, једну за к-осу која садржи датуме, а другу за стварне серије података које ћемо исцртати на графикону:

вар кључеви = дата.мап (а => а.дате),
 случајеви = дата.мап (а => а.цасес);
кеис.унсхифт("датуми");
цасе.унсхифт("случајеви");

Преостали рад захтева подешавање објекта билборда.

бб.генерате({
 биндто: "#цовид-алл-ус-цасес",
 подаци: {
 к: "датуми",
 укуцајте: "линија",
 колоне: [
 кључеви,
 случајевима
 ]
 }
});

Такође додајте следеће осовина својство:

 оса: {
 Икс: {
 тип: "категорија",
 квачица: {
 број: 10
 }
 }
 }

Ово осигурава да к-оса приказује само 10 датума тако да су лепо распоређени. Имајте на уму да је коначни резултат интерактиван. Док померате курсор преко графикона, билборд приказује податке у искачућем прозору:

Проверите извор за овај трагач у ГитХуб.

Варијације

Погледајте како можете да користите изворне податке на различите начине да промените оно што цртате користећи биллбоард.јс.

Преглед података само за једну годину

Укупан графикон је веома заузет јер садржи толико података. Једноставан начин да се смањи бука је да се временски период ограничи на једну годину на пример (ГитХуб). Само треба да промените једну линију да бисте то урадили, и не морате да додирујете плотДата уопште функционише; довољно је уопштено да рукује смањеним скупом података.

И секунди .онда() позови, замени:

плотДата (подаци);

са:

плотДата (дата.филтер (а => а.дате > '2022'));

Тхе филтер() метода смањује низ позивањем функције на свакој вредности у низу. Када се та функција врати истина, задржава вредност. У супротном, одбацује га.

Горња функција враћа тачно ако је вредност датум својство је веће од „2022“. Ово је једноставно поређење стрингова, али ради за формат ових података који је година-месец-дан, веома згодан формат.

Преглед података са мање грануларности

Уместо да ограничите податке на само једну годину, други начин да се смањи бука је да се већина њих одбаци, али да се подаци задрже из фиксног интервала (ГитХуб). Подаци ће тада покривати цео првобитни период, али ће га бити много мање. Очигледан приступ је да се задржи само једна вредност сваке недеље—другим речима, свака седма вредност.

Стандардна техника за ово је са % (модул) оператор. Филтрирањем на модулу 7 сваког индекса низа који је једнак 0, задржаћемо сваку 7. вредност:

плотДата (дата.филтер((а, индекс) => индекс % 7 == 0));

Имајте на уму да ћете овог пута морати да користите алтернативни облик филтер() који користи два аргумента, од којих други представља индекс. Ево резултата:

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

На крају, покушајте да прикажете и случајеве и смрти на једном графикону (ГитХуб). Овај пут ћете морати да промените плотДата() метод, али приступ је углавном исти. Кључне промене су додавање нових података:

смрти = подаци.мапа (а => а.смрти)
...
колоне = [ кључеви, случајеви, смрти ]

И подешавања како би се осигурало да биллбоард.јс правилно форматира осе. Посебно обратите пажњу на промене у структури података који припадају објекту коме је прослеђен бб.генерисати:

подаци: {
 к: "датуми",
 колоне: колоне,
 осе: { "случајеви": "и", "смрти": "и2" },
 врсте: {
 случајеви: "бар"
 }
}

Сада дефинишите више оса за цртање заједно са новим типом специфичним за случајевима серије.

Исцртавање резултата АПИ-ја помоћу ЈаваСцрипт-а

Овај водич показује како да користите једноставан АПИ и библиотеку графикона да бисте направили основни ЦОВИД-19 трацкер у ЈаваСцрипт-у. АПИ подржава много других података са којима можете да радите за различите земље и такође укључује податке о покривености вакцином.

Можете да користите широк спектар типова графикона биллбоард.јс да бисте их приказали или потпуно другу библиотеку графикона. Избор је на вама!

Како направити графикон са Цхарт.јс

Приказивање динамичких података помоћу ЈаваСцрипт-а никада није било лакше.

Реад Нект

О аутору