अपने वेब देव कौशल का अभ्यास करने के लिए एक त्वरित परियोजना की तलाश है? आपने संभवत: महामारी के दौरान कई अलग-अलग COVID ट्रैकर्स और चार्ट देखे हैं - यहां बताया गया है कि न्यूनतम प्रयास के साथ अपना खुद का कैसे बनाएं।

आप जावास्क्रिप्ट में कुछ उपयोगी तकनीकों को सीखेंगे जिसमें एपीआई से रिमोट डेटा कैसे लाया जाए और इसे प्रदर्शित करने के लिए चार्टिंग लाइब्रेरी का उपयोग कैसे किया जाए। आइए इसमें शामिल हों।

आप क्या निर्माण करेंगे

यह मार्गदर्शिका जावास्क्रिप्ट का उपयोग करके एपीआई के साथ काम करने की मूल बातें प्रदर्शित करने में मदद करेगी। आप सीखेंगे कि दूरस्थ स्रोत से डेटा कैसे प्राप्त करें। आप यह भी देखेंगे कि प्राप्त किए गए डेटा को प्रदर्शित करने के लिए चार्ट लाइब्रेरी का उपयोग कैसे करें।

इस आलेख में प्रयुक्त सभी कोड a. में उपलब्ध हैं Github भंडार।

डेटा स्रोत की खोज

नवीनतम COVID-संबंधित आंकड़े प्राप्त करने के लिए, हम उपयोग करेंगे रोग.शो जो खुद को "ओपन डिजीज डेटा एपीआई" के रूप में वर्णित करता है।

यह एपीआई उत्कृष्ट है क्योंकि:

  • इसमें डेटा के कई अलग-अलग स्रोत हैं, जिनमें से प्रत्येक थोड़ा अलग प्रारूप पेश करता है
    • instagram viewer
  • यह अच्छी तरह से प्रलेखित है, उदाहरणों के साथ नहीं, बल्कि इस बारे में विस्तार से बताया गया है कि इनमें से प्रत्येक कैसे है रोग.शो समापन बिंदु कार्य
  • यह JSON लौटाता है, जो जावास्क्रिप्ट से काम करना आसान है
  • यह पूरी तरह से खुला है और उपयोग करने के लिए स्वतंत्र है, किसी प्रमाणीकरण की आवश्यकता नहीं है

यह अंतिम बिंदु विशेष रूप से महत्वपूर्ण है: कई एपीआई के लिए आपको एक जटिल ओपनएथ प्रक्रिया से गुजरना पड़ता है, या बस ब्राउज़र में चल रहे जावास्क्रिप्ट के लिए उपलब्ध नहीं हैं।

इस ट्यूटोरियल के लिए, हम उपयोग करेंगे न्यूयॉर्क टाइम्स डेटा अमेरिका के लिए रोग से.श। इस एंडपॉइंट में महामारी की अवधि (21 जनवरी 2020 से) के डेटा को एक ऐसे प्रारूप में शामिल किया गया है, जिसके साथ काम करना आसान है। से कुछ डेटा पर एक नज़र डालें रोग.श समापन बिंदु हम उपयोग करेंगे:

यदि आप JSON से निपटने के अभ्यस्त हैं, तो आप इसे बिना किसी समस्या के पढ़ने में सक्षम हो सकते हैं। यहाँ अधिक पठनीय लेआउट में एक छोटा अंश दिया गया है:

[{
 "तारीख":"2020-01-21",
 "मामले": 1,
 "मौतें":0,
 "अपडेटेड":1643386814538
},{
 "तारीख":"2020-01-22",
 "मामले": 1,
 "मौतें":0,
 "अपडेटेड":1643386814538
}]

एपीआई वस्तुओं की एक साधारण सरणी देता है, प्रत्येक वस्तु दिनांक, मामलों आदि के साथ डेटा बिंदु का प्रतिनिधित्व करती है।

HTML सेट करना

अभी के लिए, हम कुछ बहुत ही सरल कंकाल HTML सेट करेंगे। अंततः, आपको कुछ बाहरी संसाधनों को शामिल करने की आवश्यकता होगी, लेकिन यह आरंभ करने के लिए पर्याप्त है:




कोविड ट्रैकर



कोविड मामले, यूएस



जावास्क्रिप्ट का उपयोग करके डेटा प्राप्त करना

केवल एपीआई से डेटा प्राप्त करके और इसे ब्राउज़र कंसोल में प्रदर्शित करके प्रारंभ करें। इससे आपको यह सत्यापित करने में मदद मिलेगी कि आप दूरस्थ सर्वर से प्राप्त कर सकते हैं और प्रतिक्रिया को संसाधित कर सकते हैं। निम्नलिखित कोड को अपने में जोड़ें covid.js फ़ाइल:

वर एपीआई = ' https://disease.sh/v3/covid-19/nyt/usa';
फ़ेच (एपीआई)
 तब (प्रतिक्रिया => प्रतिक्रिया.जेसन ())
 तब (डेटा => {
 कंसोल.लॉग (डेटा);
 });

फ़ेच जावास्क्रिप्ट एपीआई XMLHttpRequest का एक नया विकल्प है (इसके बारे में विस्तार से पढ़ें एमडीएन). यह एक प्रॉमिस का उपयोग करता है जो कॉलबैक के साथ एसिंक्रोनस प्रोग्रामिंग को थोड़ा आसान बनाता है। इस प्रतिमान का उपयोग करके, आप कई अतुल्यकालिक चरणों को एक साथ श्रृंखलाबद्ध कर सकते हैं।

आवश्यक URL प्राप्त करने के बाद, का उपयोग करें फिर सफलता के मामले को संभालने के लिए वादा की विधि। प्रतिक्रिया के शरीर को JSON के रूप में पार्स करें जेसन () तरीका।

सम्बंधित: जावास्क्रिप्ट एरो फंक्शन आपको एक बेहतर डेवलपर बना सकते हैं

तब से फिर() हमेशा एक वादा लौटाता है, आप प्रत्येक चरण को संभालने के लिए जंजीर बना सकते हैं। दूसरे चरण में, अभी के लिए, बस डेटा को कंसोल में लॉग करें ताकि आप उसका निरीक्षण कर सकें:

आप एपीआई से डेटा का निरीक्षण करने के लिए कंसोल में प्रदर्शित ऑब्जेक्ट के साथ इंटरैक्ट करने में सक्षम होंगे। आपने पहले ही बहुत प्रगति कर ली है, इसलिए जब आप तैयार हों तो अगले चरण पर आगे बढ़ें।

सम्बंधित: जावास्क्रिप्ट में डिबगिंग: ब्राउज़र कंसोल में लॉगिंग

बिलबोर्ड.जेएस का उपयोग करके डेटा प्रदर्शित करना

डेटा को लॉग करने के बजाय, इसे जावास्क्रिप्ट लाइब्रेरी का उपयोग करके प्लॉट करें। इस तरह दिखने के लिए पिछले कोड को अपडेट करके इसके लिए तैयारी करें:

फ़ेच (एपीआई)
 तब (प्रतिक्रिया => प्रतिक्रिया.जेसन ())
 तब (डेटा => {
 प्लॉटडेटा (डेटा);
 });
फ़ंक्शन प्लॉटडेटा (डेटा) {
}

हम उपयोग करेंगे बिलबोर्ड.जेएस हमें एक सरल, संवादात्मक ग्राफ देने के लिए पुस्तकालय। बिलबोर्ड.जेएस बुनियादी है, लेकिन यह कुछ अलग चार्ट प्रकारों का समर्थन करता है, और आपको अक्ष, लेबल और चार्ट के सभी मानक अवयवों को अनुकूलित करने की अनुमति देता है।

आपको तीन बाहरी फ़ाइलें शामिल करनी होंगी, इसलिए इन्हें अपने html के HEAD में जोड़ें:




सबसे बुनियादी चार्ट के साथ बिलबोर्ड.जेएस आज़माएं। निम्नलिखित में जोड़ें प्लॉटडेटा ():

बीबी.उत्पन्न ({
 बिंद्टो: "#कोविड-ऑल-यू-केस",
 आंकड़े: {
 टाइप करें: "लाइन",
 कॉलम: [
 [ "डेटा", 10, 40, 20 ]
 ]
 }
});

से बंधा संपत्ति एक चयनकर्ता को परिभाषित करती है जो लक्ष्य HTML तत्व की पहचान करता है जिसमें चार्ट उत्पन्न करना है। डेटा a. के लिए है रेखा चार्ट, एक कॉलम के साथ। ध्यान दें कि कॉलम डेटा एक सरणी है जिसमें चार मान होते हैं, पहले मान के साथ एक स्ट्रिंग उस डेटा के नाम ("डेटा") के रूप में कार्य करती है।

आपको एक ऐसा चार्ट देखना चाहिए जो इस तरह दिखता है, श्रृंखला में तीन मान और एक किंवदंती इसे "डेटा" के रूप में लेबल करती है:

आपके लिए बस इतना करना बाकी है कि वास्तविक का उपयोग करें आंकड़े जिस एपीआई में आप पहले से ही गुजर रहे हैं प्लॉटडेटा (). इसके लिए थोड़ा और काम करना होगा क्योंकि आपको इसे एक उपयुक्त प्रारूप में अनुवाद करना होगा और बिलबोर्ड.जेएस को सब कुछ सही ढंग से प्रदर्शित करने का निर्देश देना होगा।

हम एक चार्ट तैयार करेंगे जो पूरे मामले का इतिहास दिखाएगा। दो कॉलम बनाकर शुरू करें, एक एक्स-अक्ष के लिए जिसमें तिथियां होती हैं, और एक वास्तविक डेटा श्रृंखला के लिए हम ग्राफ़ पर प्लॉट करेंगे:

var कुंजियाँ = data.map (a => a.date),
 केस = डेटा.मैप (ए => ए.केस);
key.unshift ("तिथियां");
केस.अनशिफ्ट ("केस");

शेष कार्य के लिए बिलबोर्ड ऑब्जेक्ट में बदलाव की आवश्यकता है।

बीबी.उत्पन्न ({
 बिंद्टो: "#कोविड-ऑल-यू-केस",
 आंकड़े: {
 एक्स: "तिथियां",
 टाइप करें: "लाइन",
 कॉलम: [
 चांबियाँ,
 मामलों
 ]
 }
});

निम्नलिखित भी जोड़ें एक्सिस संपत्ति:

 एक्सिस: {
 एक्स: {
 टाइप करें: "श्रेणी",
 टिक: {
 गिनती: 10
 }
 }
 }

यह सुनिश्चित करता है कि x-अक्ष केवल 10 तिथियों को प्रदर्शित करता है ताकि वे अच्छी तरह से दूरी पर हों। ध्यान दें कि अंतिम परिणाम इंटरैक्टिव है। जैसे ही आप अपने कर्सर को ग्राफ़ पर ले जाते हैं, बिलबोर्ड पॉपअप में डेटा प्रदर्शित करता है:

इस ट्रैकर के स्रोत की जाँच करें GitHub.

बदलाव

इस पर एक नज़र डालें कि आप बिलबोर्ड.जेएस का उपयोग करके अपनी साजिश को बदलने के लिए विभिन्न तरीकों से स्रोत डेटा का उपयोग कैसे कर सकते हैं।

केवल एक वर्ष के लिए डेटा देखना

समग्र चार्ट बहुत व्यस्त है क्योंकि इसमें बहुत अधिक डेटा है। शोर को कम करने का एक आसान तरीका समय अवधि को एक वर्ष तक सीमित करना है, उदाहरण के लिए (GitHub). ऐसा करने के लिए आपको केवल एक पंक्ति बदलने की आवश्यकता है, और आपको स्पर्श करने की आवश्यकता नहीं है प्लॉटडेटा बिल्कुल समारोह; डेटा के कम सेट को संभालने के लिए यह सामान्य है।

क्षण में ।फिर() कॉल करें, बदलें:

प्लॉटडेटा (डेटा);

साथ:

प्लॉटडाटा (डेटा.फिल्टर (ए => ए.डेट> '2022'));

फ़िल्टर () विधि सरणी में प्रत्येक मान पर फ़ंक्शन को कॉल करके सरणी को कम करती है। जब वह फ़ंक्शन वापस आता है सच, यह मूल्य रखता है। अन्यथा, यह इसे त्याग देता है।

यदि मान है तो उपरोक्त फ़ंक्शन सही है दिनांक संपत्ति '2022' से अधिक है। यह एक साधारण स्ट्रिंग तुलना है, लेकिन यह इस डेटा के प्रारूप के लिए काम करता है जो साल-महीने-दिन है, एक बहुत ही सुविधाजनक प्रारूप है।

कम ग्रैन्युलैरिटी के साथ डेटा देखना

डेटा को केवल एक वर्ष तक सीमित रखने के बजाय, शोर को कम करने का एक और तरीका है कि इसके अधिकांश भाग को छोड़ दिया जाए लेकिन डेटा को एक निश्चित अंतराल से बनाए रखा जाए (GitHub). डेटा तब संपूर्ण मूल अवधि को कवर करेगा, लेकिन इसमें बहुत कम होगा। एक स्पष्ट दृष्टिकोण यह है कि प्रत्येक सप्ताह से केवल एक मान रखा जाए—दूसरे शब्दों में, प्रत्येक सातवें मान को।

ऐसा करने के लिए मानक तकनीक के साथ है % (मापांक) ऑपरेटर। 0 के बराबर प्रत्येक सरणी अनुक्रमणिका के मापांक 7 पर फ़िल्टर करके, हम प्रत्येक 7वें मान को बनाए रखेंगे:

प्लॉटडाटा (डेटा.फिल्टर ((ए, इंडेक्स) => इंडेक्स% 7 == 0));

ध्यान दें, इस बार, आपको के वैकल्पिक रूप का उपयोग करना होगा फ़िल्टर () जो दो तर्कों का उपयोग करता है, दूसरा सूचकांक का प्रतिनिधित्व करता है। यहाँ परिणाम है:

मामलों और मौतों को एक ग्राफ में देखना

अंत में, मामलों और मौतों दोनों को एक चार्ट पर प्रदर्शित करने का प्रयास करें (GitHub). इस बार आपको बदलना होगा प्लॉटडेटा () विधि, लेकिन दृष्टिकोण मुख्य रूप से एक ही है। प्रमुख परिवर्तन नए डेटा के अतिरिक्त हैं:

डेथ्स = डेटा.मैप (ए => ए.डेथ्स)
...
कॉलम = [कुंजी, मामले, मौत]

और यह सुनिश्चित करने के लिए बदलाव करता है कि बिलबोर्ड.जेएस कुल्हाड़ियों को सही ढंग से प्रारूपित करता है। ध्यान दें, विशेष रूप से, पास की गई वस्तु से संबंधित डेटा संरचना में परिवर्तन बी बी.उत्पन्न:

आंकड़े: {
 एक्स: "तिथियां",
 कॉलम: कॉलम,
 कुल्हाड़ियों: { "मामलों": "y", "मृत्यु": "y2"},
 प्रकार: {
 मामले: "बार"
 }
}

अब, एक नए प्रकार के साथ प्लॉट करने के लिए कई अक्षों को परिभाषित करें मामलों श्रृंखला।

जावास्क्रिप्ट का उपयोग करके एपीआई परिणाम प्लॉट करना

यह ट्यूटोरियल दर्शाता है कि जावास्क्रिप्ट में एक बुनियादी COVID-19 ट्रैकर बनाने के लिए एक साधारण एपीआई और चार्टिंग लाइब्रेरी का उपयोग कैसे करें। एपीआई कई अन्य डेटा का समर्थन करता है जिनके साथ आप विभिन्न देशों के लिए काम कर सकते हैं और इसमें वैक्सीन कवरेज पर डेटा भी शामिल है।

आप इसे प्रदर्शित करने के लिए बिलबोर्ड.जेएस चार्ट प्रकारों की एक विस्तृत श्रृंखला का उपयोग कर सकते हैं, या पूरी तरह से एक अलग चार्टिंग लाइब्रेरी का उपयोग कर सकते हैं। चुनना आपको है!

चार्ट के साथ चार्ट कैसे बनाएं।js

जावास्क्रिप्ट के साथ गतिशील डेटा प्रदर्शित करना इतना आसान कभी नहीं रहा।

आगे पढ़िए

साझा करनाकलरवईमेल
संबंधित विषय
  • प्रोग्रामिंग
  • जावास्क्रिप्ट
  • कोडिंग ट्यूटोरियल
  • COVID-19
लेखक के बारे में
बॉबी जैक (66 लेख प्रकाशित)

बॉबी एक प्रौद्योगिकी उत्साही हैं जिन्होंने दो दशकों तक एक सॉफ्टवेयर डेवलपर के रूप में काम किया। उन्हें गेमिंग का शौक है, स्विच प्लेयर मैगज़ीन में एडिटर-इन-चीफ के रूप में काम करते हुए, और ऑनलाइन प्रकाशन और वेब विकास के सभी पहलुओं में डूबे हुए हैं।

बॉबी जैक की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें