כיצד לבנות מעקב אחר COVID-19 ב-JavaScript

מחפש פרויקט מהיר לתרגול כישורי פיתוח האינטרנט שלך? בטח ראיתם עוקבים ותרשימים רבים של COVID לאורך המגיפה - הנה איך להכין משלכם במינימום מאמץ.

תלמד כמה טכניקות שימושיות ב-JavaScript, כולל כיצד להביא נתונים מרוחקים מ-API וכיצד להשתמש בספריית תרשימים כדי להציג אותם. בואו ניכנס לזה.

מה אתה תבנה

מדריך זה יעזור להדגים את היסודות של עבודה עם API באמצעות JavaScript. תלמד כיצד להביא נתונים ממקור מרוחק. תראה גם כיצד להשתמש בספריית תרשימים כדי להציג את הנתונים שהובאו.

כל הקוד המשמש במאמר זה זמין ב-a Github מאגר.

חקר מקור הנתונים

כדי לקבל את הנתונים העדכניים ביותר הקשורים לנגיף הקורונה, נשתמש disease.sh שמתאר את עצמו כ- "Open Disease Data API".

API זה מצוין כי:

• יש לו הרבה מקורות נתונים שונים, כל אחד מציע פורמטים שונים במקצת
• זה מתועד היטב, לא עם דוגמאות, אבל עם הרבה פרטים על איך כל אחד מה disease.sh נקודות הקצה פועלות
• זה מחזיר JSON, שקל לעבוד איתו מ-JavaScript
• זה פתוח לחלוטין וחינמי לשימוש, אין צורך באימות

נקודה אחרונה זו חשובה במיוחד: ממשקי API רבים דורשים ממך לעבור תהליך מסובך של OpenAuth, או שפשוט אינם זמינים ל-JavaScript הפועל בדפדפן.

עבור הדרכה זו, נשתמש ב- נתוני ניו יורק טיימס עבור ארה"ב מ- disease.sh. נקודת קצה זו כוללת נתונים ממשך המגיפה (מאז 21 בינואר 2020), בפורמט שקל לעבוד איתו. תסתכל על כמה נתונים מה- נקודת קצה disease.sh נשתמש ב:

אם אתה רגיל להתמודד עם JSON, ייתכן שתוכל לקרוא את זה ללא כל בעיה. להלן קטע קטן בפריסה קריא יותר:

[{
 "תאריך":"2020-01-21",
 "מקרים":1,
 "מוות":0,
 "מעודכן":1643386814538
},{
 "תאריך":"2020-01-22",
 "מקרים":1,
 "מוות":0,
 "מעודכן":1643386814538
}]

ה-API מחזיר מערך פשוט של אובייקטים, כל אובייקט מייצג נקודת נתונים עם תאריך, מקרים וכו'.

הגדרת ה-HTML

לעת עתה, נגדיר HTML פשוט מאוד של שלד. בסופו של דבר, תצטרך לכלול כמה משאבים חיצוניים, אבל זה מספיק כדי להתחיל:

מקרי קוביד, ארה"ב

שליפת הנתונים באמצעות JavaScript

התחל רק בקבלת הנתונים מה-API והצגתם במסוף הדפדפן. זה יעזור לך לוודא שאתה יכול לאחזר מהשרת המרוחק ולעבד את התגובה. הוסף את הקוד הבא שלך covid.js קוֹבֶץ:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
להביא (API)
 .then (response => response.json())
 .then (נתונים => {
 console.log (נתונים);
 });

ה-API של Fetch JavaScript הוא חלופה חדשה יותר ל-XMLHttpRequest (קרא על זה בפירוט ב MDN). הוא משתמש בהבטחה שמקלה מעט על תכנות אסינכרוני עם התקשרויות חוזרות. באמצעות פרדיגמה זו, ניתן לשרשר מספר שלבים אסינכרוניים יחד.

לאחר שליפת כתובת האתר הנדרשת, השתמש ב- לאחר מכן שיטת ההבטחה לטיפול בתיק ההצלחה. נתח את גוף התגובה כ-JSON דרך json() שיטה.

קָשׁוּר: פונקציות חץ JavaScript יכולות להפוך אותך למפתח טוב יותר

מאז לאחר מכן() תמיד מחזיר הבטחה, אתה יכול להמשיך לשרשר כדי להתמודד עם כל שלב. בשלב השני, לעת עתה, פשוט רשום את הנתונים למסוף כדי שתוכל לבדוק אותם:

תוכל ליצור אינטראקציה עם האובייקט המוצג במסוף כדי לבדוק את הנתונים מה-API. כבר התקדמת הרבה, אז המשך לשלב הבא כשתהיה מוכן.

קָשׁוּר: איתור באגים ב-JavaScript: כניסה למסוף הדפדפן

הצגת הנתונים באמצעות billboard.js

במקום לרשום את הנתונים, בואו נשרטט אותם באמצעות ספריית JavaScript. התכונן לכך על ידי עדכון הקוד הקודם כך שייראה כך:

להביא (API)
 .then (response => response.json())
 .then (נתונים => {
 plotData (נתונים);
 });
function 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),
 cases = data.map (a => a.cases);
keys.unshift("dates");
cases.unshift("cases");

העבודה הנותרת דורשת שינויים באובייקט שלט החוצות.

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() השיטה, אבל הגישה היא בעיקרה זהה. השינויים העיקריים הם הוספת הנתונים החדשים:

deaths = data.map (a => a.deaths)
...
עמודות = [מפתחות, מקרים, מקרי מוות]

ושינויים כדי להבטיח ש-billboard.js יעצב את הצירים בצורה נכונה. שימו לב, במיוחד, לשינויים במבנה הנתונים השייכים לאובייקט שהועבר אליו bb.generate:

נתונים: {
 x: "תאריכים",
 עמודות: עמודות,
 axes: { "cases": "y", "deaths": "y2" },
 סוגים: {
 מקרים: "בר"
 }
}

כעת, הגדירו את הצירים המרובים לציור יחד עם סוג חדש ספציפי ל- מקרים סִדרָה.

שרטוט תוצאות API באמצעות JavaScript

מדריך זה מדגים כיצד להשתמש ב-API פשוט ובספריית תרשימים כדי לבנות מעקב בסיסי של COVID-19 ב-JavaScript. ה-API תומך בהרבה נתונים אחרים שאתה יכול לעבוד איתם עבור מדינות שונות וכולל גם נתונים על כיסוי חיסונים.

אתה יכול להשתמש במגוון רחב של סוגי תרשימים של billboard.js כדי להציג אותו, או בספריית תרשימים אחרת לגמרי. הבחירה בידיים שלך!

כיצד ליצור תרשים עם Chart.js

הצגת נתונים דינמיים עם JavaScript מעולם לא הייתה קלה יותר.

קרא הבא

על הסופר