प्लॉटेबल.जेएस के साथ डी 3 पर जल्दी से डायनामिक ग्राफ़ बनाएं

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

इसीलिए Plottable.js ऐसी बहुमूल्य लाइब्रेरी है। यह एक फ्री ओपन-सोर्स प्रोजेक्ट है D3.js के शीर्ष पर बनाया गया है, किसी के लिए भी बनाना आसान है खरोंच से इंटरैक्टिव डेटा रेखांकन.

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

प्रत्येक चार्ट का अपना घटक है जहां आप कर सकते हैं टेम्पलेट कोड को कॉपी / पेस्ट करें अपने दम पर चार्ट को फिर से बनाने के लिए। इस लेखन के रूप में, आप से चुन सकते हैं 10 प्लॉट ग्राफ शैलियों, बार ग्राफ, पाई चार्ट, तितर बितर भूखंड और क्षेत्र भूखंड सहित.

आप ऐसा कर सकते हैं व्यक्तिगत रूप से घटकों का पुनर्निर्माण तथा उनकी सेटिंग्स को गतिशील रूप से अनुकूलित करें. इस तरह, आप आसानी से इंटरैक्टिव तत्वों, रंग, एनिमेशन, पोजिशनिंग, आकार, और जो कुछ भी आप की जरूरत है बदल सकते हैं.

पूर्ण पुस्तकालय यदि आप स्रोत कोड ब्राउज़ करना चाहते हैं और एक प्रति डाउनलोड करना चाहते हैं तो GitHub पर उपलब्ध है.

लेकिन, सीखने का सबसे अच्छा तरीका उदाहरण के माध्यम से है। इसलिए आपको उनके बारे में जानकारी लेनी चाहिए नमूना ग्राफ चल रहा है यह देखने के लिए कि यह कार्रवाई में कैसे काम करता है.

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

मुझे उनकी साइट से दो व्यक्तिगत पसंदीदा हैं: द कैलेंडर हीटमैप GitHub के एक्टिविटी बोर्ड और मॉडल के बाद बनाया गया सिंक्रोनाइज़्ड चार्ट गतिशील चयन सुविधाओं के साथ.

यदि आपने पहले कभी भी डी 3 का उपयोग नहीं किया है तो आप इस लाइब्रेरी को सीखने के लिए संघर्ष करेंगे। खासकर, क्योंकि यह है टाइपस्क्रिप्ट में लिखा है, तो आप शायद उसे भी चुनना चाहेंगे। अंतिम कोड है ईएस 5 जावास्क्रिप्ट में संकलित, तो यह होना चाहिए सभी प्रमुख ब्राउज़रों में काम करते हैं.

यदि आप गोता लगाने के लिए तैयार हैं, तो उन पर एक नज़र डालें ट्यूटोरियल पृष्ठ आसान संसाधनों से भरा हुआ। आप सब कुछ सीखेंगे जो आपको प्लॉट करने योग्य और शुरू करने की आवश्यकता है गतिशील वेब-आधारित रेखांकन बनाएँ शुरुवात से.