d3.js
D3 के लिए रोबस्ट, रिस्पॉन्सिव और रियूजेबल (r3) बनाना

परिचय

स्कैटर प्लॉट

इस उदाहरण में कुल 1000 से अधिक लाइनें हैं (यहाँ बहुत अधिक एम्बेड किया जाना है)। इस कारण से सभी कोड http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 (वैकल्पिक रूप से https://bl.ocks.org/SexNeuron/956772481d4e625eec9a59fdb9fbe2b2 पर होस्ट किए गए ) पर उपलब्ध हैं । ध्यान दें कि bl.ocks.org iframe का उपयोग करता है इसलिए आकार बदलने के लिए आपको बटन खुला (iframe के निचले दाएं कोने) पर क्लिक करना होगा। चूंकि बहुत अधिक कोड है, इसलिए इसे कई फाइलों में तोड़ दिया गया है और संबंधित कोड खंड फाइल नाम और लाइन नंबर दोनों के संदर्भ में होगा। कृपया इस उदाहरण को खोलें क्योंकि हम इसके माध्यम से जाते हैं।

चार्ट क्या बनाता है?

कई मुख्य घटक हैं जो किसी भी पूर्ण चार्ट में जाते हैं; इनमें शामिल हैं:

• शीर्षक
• कुल्हाड़ियों
• कुल्हाड़ियों लेबल
• आँकड़े

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

चूंकि हमारे चार्ट की सामग्री इंटरएक्टिव होगी, इसलिए चार्ट के गतिशील होने के लिए यह उपयुक्त होगा - जैसे कि विंडो का आकार बदलता है। एसवीजी स्केलेबल है, इसलिए आप अपने चार्ट को वर्तमान परिप्रेक्ष्य बनाए रखने की अनुमति दे सकते हैं। हालाँकि, सेट के दृष्टिकोण के आधार पर, चार्ट पढ़ने योग्य होने के लिए बहुत छोटा हो सकता है, भले ही चार्ट के लिए अभी भी पर्याप्त जगह हो (जैसे अगर चौड़ाई ऊंचाई से अधिक है)। इसलिए बचे हुए आकार में चार्ट को फिर से तैयार करना बेहतर हो सकता है।

यह उदाहरण कवर करेगा कि बटन, शीर्षक, कुल्हाड़ियों, कुल्हाड़ियों के लेबल के गतिशील रूप से गणना करने के तरीके के साथ-साथ विभिन्न प्रकार के डेटा के डेटासेट को कैसे संभालना है।

सेट अप

विन्यास

चूंकि हम कोड के पुन: उपयोग के लिए लक्ष्य कर रहे हैं, हमें अपने चार्ट के पहलुओं के लिए वैश्विक विकल्पों को शामिल करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनानी चाहिए। इस तरह की एक कॉन्फ़िगरेशन फ़ाइल का एक charts_configuration.json ।

यदि हम इस फाइल को देखते हैं तो हम देख सकते हैं कि मैंने कई तत्वों को शामिल किया है, जिनका हमारे चार्ट बनाते समय पहले से ही स्पष्ट उपयोग होना चाहिए:

• फ़ाइलें (हमारे चार्ट डेटा को आयोजित करने के लिए स्ट्रिंग को संग्रहीत करता है)
• document_state (वर्तमान में हमारे चार्ट के लिए कौन सा बटन चुना गया है)
• chart_ids (चार्ट के लिए html आईडी हम बनाएंगे)
• svg (svg के लिए विकल्प, उदाहरण के लिए आकार)
• plot_attributes
  • शीर्षक (विभिन्न फ़ॉन्ट विशेषताएँ सेट करें)
  • टूलटिप (विभिन्न टूलटिप शैली गुण सेट करें)
  • कुल्हाड़ियों (विभिन्न फ़ॉन्ट विशेषताएँ सेट करें)
  • बटन (विभिन्न फ़ॉन्ट और शैली विशेषताएँ सेट करें)
• भूखंडों
  • तितर बितर (हमारे बिखराव की साजिश के विभिन्न पहलुओं को सेट करें, उदाहरण के लिए बिंदु त्रिज्या)
• रंग (एक विशिष्ट रंग पैलेट का उपयोग करने के लिए)

हेल्पर कार्य करता है

इन वैश्विक पहलुओं को स्थापित करने के अलावा, हमें कुछ सहायक कार्यों को परिभाषित करने की आवश्यकता है। ये helpers.js तहत पाए जा सकते हैं

• ajax_json (तुल्यकालन या असिंक्रोनस रूप से लोड json फ़ाइलें)
• keys (दी गई वस्तु की कुंजियाँ - d3.keys () के बराबर)
• parseNumber (यदि हम नहीं जानते कि संख्या या संख्या क्या है तो एक सामान्य संख्या में parseNumber )
• typeofNumber (संख्या प्रकार typeofNumber )

index.html

अंत में हमें अपनी html फाइल सेट करनी चाहिए। इस उदाहरण के उद्देश्य के लिए हम अपने चार्ट को एक section टैग में डालेंगे जहां id कॉन्फ़िगरेशन फ़ाइल (लाइन 37) में प्रदान की गई id मेल खाती है। चूंकि प्रतिशत केवल तभी काम करते हैं जब उन्हें उनके मूल सदस्य से परिकलित किया जा सकता है, इसलिए हम कुछ मूल स्टाइल (लाइनें 19-35) भी शामिल करते हैं

हमारे बिखराव की साजिश रच रहे हैं

आइए make_scatter_chart.js खोलें। अब आइए पंक्ति 2 पर ध्यान दें, जहाँ कई सबसे महत्वपूर्ण चर पूर्वनिर्धारित हैं:

• चार्ट के svg का svg - d3 चयन
• chart_group - sv3 के अंदर समूह का चयन जिसमें डेटा रखा जाएगा
• कैनवास - सुविधा के लिए svg अर्क के मुख्य पहलू
• मार्जिन - मार्जिन को हमें ध्यान में रखना चाहिए
• maxi_draw_space सबसे बड़ा x और y मान जिसमें हम अपना डेटा आकर्षित कर सकते हैं
• doc_state - दस्तावेज़ की वर्तमान स्थिति यदि हम बटन का उपयोग कर रहे हैं (इस उदाहरण में हम हैं)

आपने देखा होगा कि हमने html में svg को शामिल नहीं किया था। इसलिए इससे पहले कि हम अपने चार्ट के साथ कुछ भी कर सकें, हमें svg को index.html जोड़ने की जरूरत है अगर यह अभी तक मौजूद नहीं है। यह फ़ाइल make_svg.js में फ़ंक्शन make_chart_svg द्वारा प्राप्त किया जाता है। make_svg.js देखते make_svg.js हम देखते हैं कि हम svg चौड़ाई और ऊँचाई के लिए चार्ट कॉन्फ़िगरेशन पर सहायक फ़ंक्शन parseNumber उपयोग करते हैं। यदि संख्या एक फ्लोट है, तो यह svg की चौड़ाई और ऊँचाई को उसके अनुभाग की चौड़ाई और ऊँचाई के समानुपाती बनाता है। यदि संख्या एक पूर्णांक है, तो यह केवल उन पूर्णांकों को सेट करेगा।

लाइन्स 6 - 11 टेस्ट देखने के लिए - प्रभाव में - अगर यह पहली कॉल है या नहीं और chart_group (और दस्तावेज़ स्थिति यदि यह पहली कॉल है) सेट करता है।

लाइन 14 - 15 क्लिक किए गए बटन द्वारा वर्तमान में चयनित डेटा को निकालता है; लाइन 16 सेट data_extent । जबकि d3 में डेटा सीमा निकालने के लिए एक फ़ंक्शन है, इस चर में डेटा सीमा को संग्रहीत करना मेरी प्राथमिकता है।

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

make_margins (मेक_मार्जिन.जस में)

हम देख सकते हैं कि मार्जिन ऑब्जेक्ट चार्ट के बाएं, दाएं, ऊपर और नीचे (x.left, x.right, y.top, y.bottom क्रमशः), शीर्षक, और बटन पर कुछ जगह लेता है। कुल्हाड़ियों।

हम यह भी देखते हैं कि एक्सिस मार्जिन 21 लाइन में अपडेट किया गया है।

हम ऐसा क्यों करते हैं? जब तक हम टिकों की संख्या निर्दिष्ट नहीं करते हैं, टिक टिकटिक टिक आकार, और टिक लेबल फ़ॉन्ट आकार, हम कुल्हाड़ियों की जरूरत के आकार की गणना नहीं कर सकते हैं। तब भी हमें टिक लेबल और टिक्स के बीच की जगह का पता लगाना होगा। इसलिए हमारे डेटा का उपयोग करके कुछ डमी अक्ष बनाना आसान है, देखें कि संबंधित एसवीजी तत्व कितने बड़े हैं, और फिर आकार वापस करते हैं।

हमें वास्तव में केवल y अक्ष की चौड़ाई और x अक्ष की ऊंचाई की आवश्यकता है, जो कि axes.y और axes.x में संग्रहीत है।

हमारे डिफ़ॉल्ट मार्जिन सेट के साथ, हम फिर max_drawing_space ( max_drawing_space लाइनों को make_margins.js में) की गणना करते हैं

make_buttons (मेक_बुटन्स.जेएस में)

फ़ंक्शन सभी बटनों के लिए एक समूह बनाता है, और फिर प्रत्येक बटन के लिए एक समूह होता है, जो बदले में एक सर्कल और पाठ तत्व संग्रहीत करता है। लाइन 37 - 85 बटन की स्थिति की गणना करता है। यह देखने के द्वारा होता है कि क्या प्रत्येक बटन की लंबाई का पाठ सही जगह से अधिक लंबा है जो हमें (रेखा 75) में खींचने के लिए अनुमति देता है। यदि ऐसा है, तो यह एक लाइन के नीचे बटन को ड्रॉप करता है और मार्जिन को अपडेट करता है।

make_title (make_title.js में)

make_title , make_title के समान है जिसमें यह स्वचालित रूप से आपके चार्ट के शीर्षक को कई लाइनों में तोड़ देगा, और ज़रूरत पड़ने पर हाइफ़नेट कर देगा। यह थोड़ा सा हैकी है क्योंकि इसमें TeX की हाइफ़नेशन स्कीम का परिष्कार नहीं है, लेकिन यह पर्याप्त रूप से अच्छी तरह से काम करता है। यदि हमें एक से अधिक लाइनों की आवश्यकता है तो मार्जिन अपडेट किया जाता है।

बटन, शीर्षक और मार्जिन सेट के साथ, हम अपनी कुल्हाड़ियों बना सकते हैं।

make_axes (make_axes.js में)

Make_axes के तर्क से पता चलता है कि डमी कुल्हाड़ियों द्वारा आवश्यक स्थान की गणना के लिए। हालांकि, यह कुल्हाड़ियों के बीच परिवर्तन के लिए संक्रमण को जोड़ता है।

अंत में हमारी तितर बितर साजिश

उस सब को पूरा करने के साथ, हम अंत में अपने बिखराव की साजिश रच सकते हैं। चूंकि हमारे डेटासेट में अलग-अलग अंक हो सकते हैं इसलिए हमें इसे ध्यान में रखना चाहिए और तदनुसार डी 3 के प्रवेश और निकास की घटनाओं का लाभ उठाना चाहिए। पहले से ही मौजूद बिंदुओं की संख्या को 40 की संख्या में किया जा रहा है। यदि पंक्ति 45 - 59 में कथन अधिक सर्कल तत्व जोड़ता है यदि हमारे पास अधिक डेटा है, या एक कोने में अतिरिक्त तत्वों को स्थानांतरित करता है और फिर बहुत अधिक होने पर उन्हें निकाल देता है।

एक बार जब हमें पता चल जाता है कि हमारे पास तत्वों की सही संख्या है, तो हम शेष सभी तत्वों को उनकी सही स्थिति (लाइन 64) में परिवर्तित कर सकते हैं

अंत में हम 67 और 68 लाइन में टूलटिप को जोड़ते हैं। टूलटिप फ़ंक्शन make_tooltip.js

बॉक्स और व्हिस्कर चार्ट

पिछले उदाहरण (make_title, make_axes, make_buttons, आदि) में उन जैसे सामान्यीकृत कार्यों के मूल्य को दिखाने के लिए, इस बॉक्स और व्हिस्कर चार्ट पर विचार करें: https://bl.ocks.org/SumNeuron-262e37e2f932cf4b693f241c52a410ff44ffff4

जबकि बक्से और मूंछ बनाने के लिए कोड केवल अंक रखने से अधिक गहन है, हम देखते हैं कि समान कार्य पूरी तरह से काम करते हैं।

बार चार्ट

https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248