# स्थान डेटा का विज़ुअलाइज़ेशन  > स्केच नोट [नित्या नरसिम्हन](https://github.com/nitya) द्वारा। बड़े संस्करण के लिए छवि पर क्लिक करें। यह वीडियो Azure Maps और IoT का अवलोकन देता है, जो इस पाठ में कवर किया जाएगा। [](https://www.youtube.com/watch?v=P5i2GFTtb2s) > 🎥 वीडियो देखने के लिए ऊपर दी गई छवि पर क्लिक करें ## व्याख्यान से पहले का क्विज़ [व्याख्यान से पहले का क्विज़](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/25) ## परिचय पिछले पाठ में आपने सीखा कि अपने सेंसर से GPS डेटा प्राप्त करके उसे सर्वरलेस कोड का उपयोग करके क्लाउड में स्टोरेज कंटेनर में कैसे सहेजें। अब आप यह जानेंगे कि उन बिंदुओं को Azure मानचित्र पर कैसे विज़ुअलाइज़ करें। आप सीखेंगे कि वेब पेज पर मानचित्र कैसे बनाएं, GeoJSON डेटा प्रारूप के बारे में जानें और इसे अपने मानचित्र पर सभी कैप्चर किए गए GPS बिंदुओं को प्लॉट करने के लिए कैसे उपयोग करें। इस पाठ में हम कवर करेंगे: * [डेटा विज़ुअलाइज़ेशन क्या है](../../../../../3-transport/lessons/3-visualize-location-data) * [मानचित्र सेवाएँ](../../../../../3-transport/lessons/3-visualize-location-data) * [Azure Maps संसाधन बनाएं](../../../../../3-transport/lessons/3-visualize-location-data) * [वेब पेज पर मानचित्र दिखाएं](../../../../../3-transport/lessons/3-visualize-location-data) * [GeoJSON प्रारूप](../../../../../3-transport/lessons/3-visualize-location-data) * [GeoJSON का उपयोग करके मानचित्र पर GPS डेटा प्लॉट करें](../../../../../3-transport/lessons/3-visualize-location-data) > 💁 इस पाठ में HTML और JavaScript का थोड़ा उपयोग होगा। यदि आप HTML और JavaScript का उपयोग करके वेब विकास के बारे में अधिक जानना चाहते हैं, तो [शुरुआती के लिए वेब विकास](https://github.com/microsoft/Web-Dev-For-Beginners) देखें। ## डेटा विज़ुअलाइज़ेशन क्या है डेटा विज़ुअलाइज़ेशन, जैसा कि नाम से पता चलता है, डेटा को इस तरह से विज़ुअलाइज़ करने के बारे में है जो मनुष्यों के लिए इसे समझना आसान बनाता है। यह आमतौर पर चार्ट और ग्राफ़ से जुड़ा होता है, लेकिन यह डेटा को चित्रात्मक रूप से प्रस्तुत करने का कोई भी तरीका है जो न केवल डेटा को बेहतर ढंग से समझने में मदद करता है, बल्कि निर्णय लेने में भी मदद करता है। एक साधारण उदाहरण लेते हैं - फार्म प्रोजेक्ट में आपने मिट्टी की नमी के स्तर को कैप्चर किया था। 1 जून 2021 को हर घंटे कैप्चर किए गए मिट्टी की नमी के डेटा की एक तालिका कुछ इस प्रकार हो सकती है: | दिनांक | रीडिंग | | ---------------- | ------: | | 01/06/2021 00:00 | 257 | | 01/06/2021 01:00 | 268 | | 01/06/2021 02:00 | 295 | | 01/06/2021 03:00 | 305 | | 01/06/2021 04:00 | 325 | | 01/06/2021 05:00 | 359 | | 01/06/2021 06:00 | 398 | | 01/06/2021 07:00 | 410 | | 01/06/2021 08:00 | 429 | | 01/06/2021 09:00 | 451 | | 01/06/2021 10:00 | 460 | | 01/06/2021 11:00 | 452 | | 01/06/2021 12:00 | 420 | | 01/06/2021 13:00 | 408 | | 01/06/2021 14:00 | 431 | | 01/06/2021 15:00 | 462 | | 01/06/2021 16:00 | 432 | | 01/06/2021 17:00 | 402 | | 01/06/2021 18:00 | 387 | | 01/06/2021 19:00 | 360 | | 01/06/2021 20:00 | 358 | | 01/06/2021 21:00 | 354 | | 01/06/2021 22:00 | 356 | | 01/06/2021 23:00 | 362 | एक इंसान के लिए इस डेटा को समझना मुश्किल हो सकता है। यह केवल संख्याओं की एक दीवार है जिसमें कोई अर्थ नहीं है। इस डेटा को विज़ुअलाइज़ करने के पहले चरण के रूप में, इसे एक लाइन चार्ट पर प्लॉट किया जा सकता है:  इसे और बेहतर बनाने के लिए एक रेखा जोड़ी जा सकती है जो यह दिखाती है कि स्वचालित सिंचाई प्रणाली कब मिट्टी की नमी के स्तर 450 पर चालू हुई:  यह चार्ट बहुत जल्दी दिखाता है कि मिट्टी की नमी का स्तर क्या था और सिंचाई प्रणाली कब चालू हुई। चार्ट डेटा को विज़ुअलाइज़ करने का एकमात्र उपकरण नहीं हैं। IoT डिवाइस जो मौसम को ट्रैक करते हैं, वे वेब ऐप्स या मोबाइल ऐप्स का उपयोग कर सकते हैं जो मौसम की स्थिति को प्रतीकों के माध्यम से विज़ुअलाइज़ करते हैं, जैसे बादल वाले दिनों के लिए बादल का प्रतीक, बारिश वाले दिनों के लिए बारिश का बादल और इसी तरह। डेटा को विज़ुअलाइज़ करने के कई तरीके हैं, कुछ गंभीर, कुछ मज़ेदार। ✅ उन तरीकों के बारे में सोचें जिनसे आपने डेटा को विज़ुअलाइज़ होते देखा है। कौन से तरीके सबसे स्पष्ट थे और निर्णय लेने में सबसे तेज़ मदद की? सबसे अच्छे विज़ुअलाइज़ेशन वे होते हैं जो मनुष्यों को जल्दी निर्णय लेने में मदद करते हैं। उदाहरण के लिए, औद्योगिक मशीनरी से संबंधित सभी प्रकार की रीडिंग दिखाने वाले गेज की दीवार को समझना कठिन हो सकता है, लेकिन जब कुछ गलत होता है तो एक चमकती लाल बत्ती इंसान को निर्णय लेने की अनुमति देती है। कभी-कभी सबसे अच्छा विज़ुअलाइज़ेशन एक चमकती बत्ती होती है! GPS डेटा के साथ काम करते समय, सबसे स्पष्ट विज़ुअलाइज़ेशन डेटा को मानचित्र पर प्लॉट करना हो सकता है। उदाहरण के लिए, एक मानचित्र जो डिलीवरी ट्रकों को दिखाता है, एक प्रसंस्करण संयंत्र में काम करने वालों को यह देखने में मदद कर सकता है कि ट्रक कब आएंगे। यदि यह मानचित्र केवल ट्रकों की वर्तमान स्थिति की तस्वीरें दिखाने के बजाय ट्रक की सामग्री का भी संकेत देता है, तो संयंत्र में काम करने वाले तदनुसार योजना बना सकते हैं - यदि वे देखते हैं कि एक रेफ्रिजरेटेड ट्रक पास में है, तो वे फ्रिज में जगह तैयार कर सकते हैं। ## मानचित्र सेवाएँ मानचित्रों के साथ काम करना एक दिलचस्प अभ्यास है, और चुनने के लिए कई विकल्प हैं जैसे Bing Maps, Leaflet, Open Street Maps, और Google Maps। इस पाठ में, आप [Azure Maps](https://azure.microsoft.com/services/azure-maps/?WT.mc_id=academic-17441-jabenn) और उनके माध्यम से अपने GPS डेटा को प्रदर्शित करने के बारे में जानेंगे।  Azure Maps "भौगोलिक सेवाओं और SDKs का एक संग्रह है जो ताज़ा मानचित्र डेटा का उपयोग करके वेब और मोबाइल अनुप्रयोगों को भौगोलिक संदर्भ प्रदान करता है।" डेवलपर्स को सुंदर, इंटरैक्टिव मानचित्र बनाने के लिए उपकरण प्रदान किए जाते हैं जो ट्रैफ़िक मार्गों की सिफारिश करने, ट्रैफ़िक घटनाओं की जानकारी देने, इनडोर नेविगेशन, खोज क्षमताओं, ऊंचाई की जानकारी, मौसम सेवाओं और बहुत कुछ करने में सक्षम होते हैं। ✅ कुछ [मानचित्र कोड नमूनों](https://docs.microsoft.com/samples/browse?WT.mc_id=academic-17441-jabenn&products=azure-maps) के साथ प्रयोग करें आप मानचित्रों को एक खाली कैनवास, टाइल्स, उपग्रह छवियों, सड़कों के साथ उपग्रह छवियों, विभिन्न प्रकार के ग्रेस्केल मानचित्र, ऊंचाई दिखाने के लिए छायांकित राहत के साथ मानचित्र, रात दृश्य मानचित्र, और एक उच्च कंट्रास्ट मानचित्र के रूप में प्रदर्शित कर सकते हैं। आप [Azure Event Grid](https://azure.microsoft.com/services/event-grid/?WT.mc_id=academic-17441-jabenn) के साथ एकीकृत करके अपने मानचित्रों पर वास्तविक समय अपडेट प्राप्त कर सकते हैं। आप मानचित्र को पिंच, ड्रैग और क्लिक जैसी घटनाओं पर प्रतिक्रिया देने की अनुमति देने के लिए विभिन्न नियंत्रण सक्षम करके इसके व्यवहार और रूप को नियंत्रित कर सकते हैं। अपने मानचित्र के रूप को नियंत्रित करने के लिए, आप बबल्स, लाइन्स, पॉलीगन्स, हीट मैप्स और अधिक सहित लेयर्स जोड़ सकते हैं। आप किस प्रकार का मानचित्र लागू करते हैं, यह आपके चुने गए SDK पर निर्भर करता है। आप Azure Maps APIs तक इसकी [REST API](https://docs.microsoft.com/javascript/api/azure-maps-rest/?WT.mc_id=academic-17441-jabenn&view=azure-maps-typescript-latest), इसके [Web SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control?WT.mc_id=academic-17441-jabenn), या, यदि आप एक मोबाइल ऐप बना रहे हैं, इसके [Android SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-android-map-control-library?WT.mc_id=academic-17441-jabenn&pivots=programming-language-java-android) का उपयोग करके पहुंच सकते हैं। इस पाठ में, आप वेब SDK का उपयोग करके एक मानचित्र खींचने और अपने सेंसर के GPS स्थान के पथ को प्रदर्शित करने का तरीका सीखेंगे। ## Azure Maps संसाधन बनाएं आपका पहला कदम एक Azure Maps खाता बनाना है। ### कार्य - Azure Maps संसाधन बनाएं 1. अपने टर्मिनल या कमांड प्रॉम्प्ट से निम्नलिखित कमांड चलाएं ताकि `gps-sensor` संसाधन समूह में एक Azure Maps संसाधन बनाया जा सके: ```sh az maps account create --name gps-sensor \ --resource-group gps-sensor \ --accept-tos \ --sku S1 ``` यह `gps-sensor` नामक एक Azure Maps संसाधन बनाएगा। उपयोग किया जा रहा टियर `S1` है, जो एक पेड टियर है जिसमें कई सुविधाएँ शामिल हैं, लेकिन मुफ्त में एक उदार मात्रा में कॉल्स के साथ। > 💁 Azure Maps का उपयोग करने की लागत देखने के लिए, [Azure Maps मूल्य निर्धारण पृष्ठ](https://azure.microsoft.com/pricing/details/azure-maps/?WT.mc_id=academic-17441-jabenn) देखें। 1. आपको मानचित्र संसाधन के लिए एक API कुंजी की आवश्यकता होगी। इस कुंजी को प्राप्त करने के लिए निम्नलिखित कमांड का उपयोग करें: ```sh az maps account keys list --name gps-sensor \ --resource-group gps-sensor \ --output table ``` `PrimaryKey` मान की एक प्रति लें। ## वेब पेज पर मानचित्र दिखाएं अब आप अगला कदम उठा सकते हैं, जो कि अपने मानचित्र को एक वेब पेज पर प्रदर्शित करना है। हम आपके छोटे वेब ऐप के लिए केवल एक `html` फ़ाइल का उपयोग करेंगे; ध्यान रखें कि उत्पादन या टीम वातावरण में, आपके वेब ऐप में अधिक भाग हो सकते हैं! ### कार्य - वेब पेज पर मानचित्र दिखाएं 1. अपने स्थानीय कंप्यूटर पर कहीं एक फ़ोल्डर में index.html नामक एक फ़ाइल बनाएं। मानचित्र को होल्ड करने के लिए HTML मार्कअप जोड़ें: ```html
``` मानचित्र `myMap` `div` में लोड होगा। कुछ स्टाइल इसे पेज की चौड़ाई और ऊंचाई तक फैलने की अनुमति देते हैं। > 🎓 एक `div` वेब पेज का एक खंड है जिसे नामित और स्टाइल किया जा सकता है। 1. `` टैग के नीचे, मानचित्र प्रदर्शन को नियंत्रित करने के लिए एक बाहरी स्टाइल शीट और इसके व्यवहार को प्रबंधित करने के लिए वेब SDK से एक बाहरी स्क्रिप्ट जोड़ें: ```html ``` यह स्टाइल शीट मानचित्र के रूप को नियंत्रित करने के लिए सेटिंग्स रखती है, और स्क्रिप्ट फ़ाइल मानचित्र को लोड करने के लिए कोड रखती है। इस कोड को जोड़ना C++ हेडर फ़ाइलों को शामिल करने या Python मॉड्यूल आयात करने के समान है। 1. उस स्क्रिप्ट के नीचे, मानचित्र लॉन्च करने के लिए एक स्क्रिप्ट ब्लॉक जोड़ें। ```javascript ``` `