[संगीत खेल] 

डेविड Chouinard: मैं दाऊद हूँ Chouinard, और इस D3 है। वेलकम। हम आज डी 3 के बारे में जानने के लिए जा रहे हैं। डी 3 एक जावास्क्रिप्ट रूपरेखा है एक उच्च गुणवत्ता के निर्माण के लिए वेब के लिए इंटरैक्टिव visualizations के। हम क्या कर रहे हैं जैसे हालात मुझे के पीछे देखकर, हम उन बनाने के लिए सीखने के लिए जा रहे हैं बातें करते हैं, इसके बारे में मूल बातें की तरह। लेकिन यह अच्छा होने जा रहा है। चलो शुरू हो जाओ सुंदर चित्र बना रही है। हम और अधिक क़ौम मिल गया है उपलब्ध संभावनाओं की। चलो यह करते हैं। 

मैं अधिनियम, डोम manipulation-- हम जा रहे हैं ठंडी चीजें बनाने तुरंत शुरू करने के लिए। सबसे पहले, बाईं तरफ, हम कोड है। सही पर, हम हैं हमारे कोड का नतीजा है। चलो यह के माध्यम से चलते हैं। 

चलो एक वृत्त बनाते हैं। कैसे है कि ध्वनि करता है? svg.append circle-- हम सिर्फ एक चक्र बना दिया। तुम मुझ पर विश्वास नहीं करते हैं? यह वहाँ नहीं है। 

तो हम यहीं क्या किया, एसवीजी स्केलेबल वेक्टर ग्राफिक्स है। यह है कि हम करने के लिए ब्राउज़र बता तरीका है ब्राउज़र में वेक्टर ग्राफिक्स बनाने के। क्या हम सिर्फ सही अब किया ब्राउज़ करने के लिए एक चक्र जोड़ा गया है। 

वादा चक्र यह है कि बुनियादी विशेषताओं का एक बिट की आवश्यकता है हम वास्तव में इसे देख सकते हैं पहले। हम इसे अपनी एक्स स्थिति बताने की जरूरत इसके y स्थिति, इसकी त्रिज्या। हम इस बात का कोई भी यह नहीं बताया, इसलिए हम अभी यह नहीं देख रहे हैं। लेकिन यह सामान बता दूँ। 

तो सब से पहले, तुम मिल गया है हमारे चक्र एक नाम देने के लिए। तो चलो चक्र कहते हैं। हमारे चक्र अब एक नाम है। और हम इसका कुछ विशेषताओं को देते हैं। कैसे CX के बारे में तो, एक्स केंद्र होगा एक्स स्थिति के केंद्र। 200 पिक्सल के लिए, 200 कहते हैं। 

के रूप में अच्छी तरह से यह 200 पिक्सल के एक y दे दो। और लगभग 40 पिक्सल के एक अनुसंधान, एक त्रिज्या,। अब चलो देखते हैं। मैं जादू नहीं हो सकता। 

वहाँ तुम जाओ। हम स्थिति में 200 पर एक चक्र है पिक्सल, 200 पिक्सल, 40 पिक्सल की त्रिज्या। शांत की तरह, है ना? हम एक चक्र है। हाँ। 

तो कोई ज़रूरत नहीं के साथ पालन करने के लिए। इन सभी उदाहरणों के सभी मैं आज कर रहा हूँ कोड अंत में ऑनलाइन उपलब्ध कराया जाएगा इंटरैक्टिव उदाहरण के रूप में पर चौकियों के साथ हर कार्य, और इतने पर। 

के अधिक सामान करते हैं। इस काले सर्किल वास्तव में बदसूरत है। मुझे लगता है कि त्रुटि के लिए माफी चाहता हूँ वहाँ सही संदेश। हम वहाँ जाओ। 

चलो इसे एक रंग दे देते हैं। कैसे है? मैं इस्पात नीले रंग पसंद है। खैर, हमारे चक्र का रंग बदल गया। यह बहुत अच्छा है। चलो यह अर्द्ध पारदर्शी बनाने के चलो too-- अर्द्ध पारदर्शी। 

तो ये गुण हैं हम सर्कल पर परिभाषित कर रहे हैं। हम किया था पहली बात यह है हम पृष्ठ पर एक वृत्त डाल दिया। और फिर हम परिभाषित कर रहे हैं विशेषताओं का एक गुच्छा। इनमें से कुछ के लिए आवश्यक हैं, CX, सीवाई, और त्रिज्या की तरह। और दूसरों को वैकल्पिक हैं। 

एक बहुत अधिक विशेषताओं के होते हैं। उनमें से एक बहुत कुछ है। उदाहरण के लिए, हम एक हो सकता था स्ट्रोक के रूप में अच्छी तरह से लाल रंग का एक ही झटके। लेकिन हम उस को दूर करते हैं। हम वापस एक चक्र, एक नीले वृत्त के लिए कर रहे हैं। 

तो चलो अधिक हलकों बनाते हैं। कैसे है? चलो एक और वृत्त बनाते हैं। यह सही है, रोमांचक है? 

तो मैं बस कॉपी चिपकाया कहना क्या हम पहले से ही था। चलो यह circle2 कहते हैं। और सटीक करते हैं एक ही बात है और यह दे 300 की एक एक्स स्थिति को देखते हुए जिम्मेदार बताते हैं। याय, अब हम दो हलकों है। 

और हां, हम कर सकते थे इन मूल्यों को अद्यतन करें। मैं 400 में डाल सकता है, और अब यह बढ़ता रहता है। यह कष्टप्रद है और के बाद से, चलो इसलिए circle2.remove, इसे हटा दें। यह अब चला गया है। 

तो हम क्या कर रहे हैं और इस very--, अभी बहुत है आप क्या करने के लिए बहुत समान है उदाहरण के लिए, jQuery में कर सकता है। हम सिर्फ जोड़ तोड़ कर रहे हैं डोम, यह कहा जाता है। इससे पहले कि आप उस शब्द सुना सकता है। हम स्थापित करने, सामान बना रहे हैं सामान हटाने, सामान पर जिम्मेदार बताते हैं। 

यह दिलचस्प हो जाता है, जहां अब, यहाँ है। तो बाद में कोड में, हम अभी भी कर सकते थे यहाँ मूल चक्र को देखें। तो चलो CX के लिए अपनी विशेषता को रीसेट करते हैं। 400 करने के लिए अपने एक्स स्थिति, चलो कहते हैं। और मैं परिवर्तन करने के लिए जा रहा हूँ कि, यह स्पष्ट है इसलिए। हम वहाँ जाओ। 

इसलिए हम एक चक्र गयी। हम कुछ विशेषताओं को निर्धारित किया है। हम एक और चक्र जोड़ा इसे हटा दिया। और फिर हम संशोधित कर रहे हैं मूल चक्र। 

यह हो जाता है लेकिन जहां यहाँ है एक बहुत अधिक दिलचस्प। न केवल हम गुण सेट कर सकते हैं बस मूल्यों के रूप में, हम कह सकते हैं, अरे, चक्र, 200 की स्थिति के लिए जाना। हम यह भी कार्य के रूप में उन्हें सेट कर सकते हैं। 

तो बजाय, यहां 400 दे हम कुछ गणना कर सकते हैं क्या है के लिए उड़ान भरने पर हम उस विशेषता होना चाहते हैं। तो यह आपको लगता है कि व्यक्त करता हूं कि कैसे है। हम बजाय 400 की, मुझे जाने का कहना है, इसके बजाय आप एक समारोह देते हैं। और यहाँ, इस समारोह के अंदर, हम किसी भी पागल गणना कर सकते हैं। 

हम समय लग सकता है और कुछ अन्य बात पर देखने के लिए और गतिशील के लिए तय हम क्या चाहते हैं मूल्य चक्र। कैसे हम सिर्फ देने के बारे में यह एक यादृच्छिक एक्स स्थिति? तो यह है कि। 

तो क्या हुआ कि कहते हैं, के लिए है हर एक्स, इस समारोह में चलाते हैं। और हम क्या कर रहे हैं की गणना है कुछ बातें, एक यादृच्छिक समय चौड़ाई और कहा कि लौटने। इसलिए हम चाहते हैं कि चलाने के लिए हर समय, हम एक मिल एक यादृच्छिक जगह के लिए चला जाता है कि वृत्त। यह शांत की तरह है। मैं लग सकता है मुझे लगता है जैसे एक छोटी सी के लिए इस पर। हम करने के लिए प्राप्त करने के लिए शुरू कर रहे हैं यहाँ कुछ दिलचस्प। चलो अब संचालित इस डेटा बनाते हैं। यहाँ कोई डेटा नहीं है। चलो कि परिवर्तित करें। 

अधिनियम द्वितीय, डाटा प्रेरित Documents-- तो चलो यहाँ करने के लिए वापसी करते हैं। और, चलो बस circle2 से छुटकारा पाने के चलो हम सिर्फ जोड़ने और हटाने रहे हैं, क्योंकि यह। तो क्या हम वास्तव में इसकी जरूरत नहीं है। हम यहाँ एक बहुत अधिक चतुर होने की जरूरत है। हम हैं, हम कहते हैं किसी तरह की कुछ डेटा। एक का कहना हैं, moment-- हम इस फार्म के डेटा की थी। हम सिर्फ एक सरणी था संख्या का एक गुच्छा। हम यहाँ सात नंबर जो कुछ भी इन represent-- राशि लोगों के बैंक खाते हैं, कैसे में ज्यादा वे भगवान जानता है कि क्या, तौलना। 

इन नंबरों कर रहे हैं, और हम हमारे हलकों उपयोग करना चाहते हैं किसी न किसी तरह उन लोगों की संख्या का प्रतिनिधित्व करने के लिए। हम अपने टाई करने के लिए करना चाहते हैं उन लोगों की संख्या को हलकों। तो हम क्या करते हैं। हम कहते हैं, हम चाहते हैं कि एक हर नंबर के लिए वृत्त। हम पुराने कर सकता है हम doing-- थे बात वृत्त संलग्न करें और circle2 और circle3। लेकिन इस हाथ से निकल जाता है, और तर्क दोहराने की एक बहुत कुछ है। 

तो चलो उस के साथ अधिक चालाक हो जाओ। इसके बजाय वर चक्र का उपयोग करने का , हम सिर्फ उपयोग कर रहे थे कि svg.append हम उपयोग करने के लिए जा रहे हैं यहाँ इस छोटी सी ब्लॉक। मैं गहराई में जाने की जरूरत नहीं है क्या में इन सभी भागों से करते हैं। और यह एक उन्नत विषय की तरह है। और मुझे लगता है मैं कर सके। 

लेकिन महत्वपूर्ण बात यह है कि recognize-- करने के लिए और आप डी 3 कोड में बहुत बार है देखेंगे। पाठ मूल के इस ब्लॉक के रूप में कई हलकों बनाता है डेटा तत्व के रूप में वहाँ यहीं इस सरणी में। तो इस रूप में कई बनाता है वहाँ के रूप में हलकों तत्व हैं। यह हमें सात हलकों बनाने के लिए जा रहा है। और यह एक सच में, सच कुंजी बात करता है। तो चलो कि चलाते हैं। चलो हमारे अन्य चक्र को दूर करते हैं। चलो बस इस टिप्पणी दें बाहर भाग और फिर इस चलाते हैं। 

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

यह डेटा के लिए बाध्य किया गया था कि है। तो हर एक की उन डेटा तत्वों, 10, 45, 105, बाध्य किया गया था एक विशेष सर्कल के लिए। तो ये ही नहीं बनाया हलकों का एक गुच्छा लेकिन एक साथ उन दो बातें संबंधों। 

और भविष्य में, हम बनाया है क्योंकि इस डी 3 समारोह के साथ उन हलकों, मैं तुम्हें एक वृत्त दे, तो आप कर सकते हैं मुझे इसके साथ जुड़े आंकड़े दे। इसलिए हम डी 3 पूछ सकते हैं। अरे, डी 3, मैं इस चक्र है। वृत्त है कि डेटा क्या है? और डी 3 हमें 10 या 45 या 105 बताना होगा। 

इन बातों को बाध्य कर रहे हैं। यह एक बहुत, बहुत मौलिक अवधारणा है। चलो उस पर नजर डालते हैं। 

तो जिस तरह से हम इतने D3-- पूछना चाहते हैं यही नहीं, इस बात के लिए अप्रासंगिक है लेकिन अभी इस पर मुझे भरोसा है। यह हम डी 3 पूछना कैसे है। अरे, डी 3, पहले मुझे दे आप पा सकते हैं कि वृत्त। मुझे आप पा सकते हैं पहले चक्र दीजिए। और फिर हम डी 3 पूछ सकते हैं, क्या हो रहा है इस तरह से उस पर डेटा, 10। 

तो हम बस डी 3 से पूछते हैं, मुझे लगता है आप पा सकते हैं पहले चक्र। अपने डेटा क्या है? 10, कि वास्तव में हमारी है पहली डेटा तत्व। हम, हे, डी 3 यह पूछ सकता है हमें हमारे तीसरे चक्र पाते हैं। 105। क्यों यह वास्तव में महत्वपूर्ण है? 

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

तो यह एक्स postition-- बजाय की बस, सभी हलकों कह रही है, एक्स स्थिति 200 मिलता है, हम यह एक समारोह दे सकता है। और यहाँ, हम कुछ गणना कर सकते हैं। और डी यहां डेटा के लिए जगह में खड़ा है। तो हर बार हम हैं एक चक्र, मूल रूप से, डी 3 इन सात हलकों पैदा करेगा। और फिर हर 

वृत्त, यह अरे, जाना जा रहा है circle1 अपने एक्स स्थिति क्या है। इससे पहले, हम थे हमेशा 200 का जवाब दे। लेकिन अब, हर बार डी 3 पूछता हमें अपने एक्स स्थिति क्या है, यह हम हैं us-- देने के लिए जा रहा है उस चक्र, इसलिए हम डेटा है। यह हमारे डेटा देने के लिए और कहने के लिए जा रहा है क्या आप प्रदर्शनी बनना चाहते हो, उस डेटा पर आधारित है। 

चलो बस वास्तविक डेटा वापस जाएँ। हम इस चलाते हैं तो, इस देता है हमें डेटा दस्तावेजों संचालित। इन हलकों आधारित हैं संबंध position-- में वे डेटा के एक समारोह के रूप में कुर्सियां ​​कर रहे हैं। 

पहले चक्र के लिए तो, डी 3 एक चक्र डालता है। और फिर डी 3 कि क्या करना है, हमें पूछता आप प्रदर्शनी होना चाहते हैं। और हम सिर्फ डेटा है, जो कुछ भी कहते हैं। प्रदर्शनी 10 बनाओ। 

तो फिर यह तुम क्या चाहते हो, पूछता प्रदर्शनी के दूसरे चक्र के लिए किया जाना है। और हम 45, जवाब। और हम, ज़ाहिर है, कर सकते हैं यहाँ कुछ गणना करते हैं। मैं उन हलकों को लगता है कि एक तरह से ऊपर squished रहे हैं। 

तो 3 से डेटा गुणा, तीन से गुणा करें। हमारे चक्र बस से बाहर का विस्तार किया गया। हमारे मूल्य तीन गुना हो गया था। 

वृत्त, वास्तव में बढ़त पर है तो चलो शायद एक तरह से यह ऑफसेट करते हैं। 20 से, हम कहते हैं। हेयर यू गो। 

यह एक डेटा दृश्य है। यह एक बहुत ही बुनियादी है, लेकिन इस हमें हमारे डेटा में कुछ अंतर्दृष्टि देता है। यह हमें बताता है कि, उदाहरण के लिए, हम तत्वों का एक छोटा समूह है। और हम यहाँ एक बड़ा ग़ैर है। यह हमें कुछ जानकारी देता है वितरण के बारे में। 

हम थे, उदाहरण के लिए, परिवर्तित करने के लिए यहां 150 और ताज़ा करने के लिए डेटा, हमारे दृश्य बदल जाता है। इस दस्तावेज़ को डेटा संचालित है। 

तो ज़ाहिर है, इन सभी तत्वों, यहां इन सभी विशेषताओं, हम एक समारोह में नहीं उपयोग कर सकते हैं बस संख्या में ही नहीं, एक्स और वाई पदों। इसलिए हम रंग के लिए एक समारोह का उपयोग कर सकते हैं। तो हम भी ऐसा ही करेंगे। हम इसे एक समारोह में दे दूँगा। 

और हम कर सकते थे, हम कहते हैं हमारे समारोह में सशर्त। इस समारोह में किया जा सकता है लंबी लाइनों के सौ। यह बहुत, बहुत जटिल बातें कर सकते हैं। 

तो चलो यहाँ एक अगर बयान डाल दिया। हमारे डेटा भी कम है, तो हम कहते हैं 50 से, कि कुछ सीमा है हम रुचि रखते हैं कि किसी कारण के लिए है। चलो यह हरे रंग बनाते हैं। अन्यथा, चलो यह लाल बनाते हैं। कैसे है? अच्छा लगा। 

इसलिए हमारे डेटा दृश्य शुरू कर रहा है और अधिक रोचक जानकारी देने के लिए कई चैनलों पर। तो अब हम एक सा पता वितरण के बारे में। और हम किसी प्रकार का पता है कि वहाँ हम में रुचि रखते हैं कि 50 में काट दिया। हम दो डेटा बिंदुओं जानते हैं कि वहाँ उनमें से ज्यादातर कि सीमा से नीचे और ऊपर दिए गए। 

तो एक अंतिम कदम के रूप में, यहाँ इस डेटा, यह उस तरह यह देखने के लिए बहुत दुर्लभ है। तो चलो बस एक चर करने के लिए इसे बाहर चलते हैं कि इस तरह से, क्लीनर है क्योंकि। और फिर हम यहाँ कि चर का उपयोग करें। यह सटीक एक ही बात है। यह सिर्फ एक बिट क्लीनर है। 

आगे, अधिनियम III, Scales-- तो एक समस्या सही हम बदलते हैं, तो यहाँ है, हमारे इस 200 value-- में डेटा हम 400 के लिए इसे बदल अगर या कुछ और ताज़ा, तो इस मान बस छिपा चला गया। यहीं हमारे तर्क तो कैसे की हम क्या टाइम्स 3 और 20 है, तो यह बाहर फैल गया है और करने के लिए यह ऑफसेट एक सा वास्तव में clunky है। 

उन लोगों की संख्या क्या मतलब है? वे सिर्फ मुश्किल वहाँ कोडित रहे हैं। और वे बहुत ज्यादा डेटा के लिए बंधे हैं। हम एक डेटा संचालित दस्तावेज़ चाहते हैं। हम एक बहुत ही लचीला दस्तावेज़ चाहते हैं, दिए गए डेटा कि, यह करने के लिए adapts और यह प्रतिनिधित्व करता है। 

क्या हम मूल रूप से जरूरत है हम, है संख्या 10 में इस श्रृंखला है। 45, 105। और हम पर है कि नक्शे से बाहर करना चाहते हैं चौड़ाई, यहाँ पूरी चौड़ाई। इसलिए हम की श्रृंखला है 0-100 जा रहा संख्या। और हम इस परिसर मैं चला जाता है इस मामले में, 20-700। 

हम एक तरह से उस पर मैप करने के लिए चाहते हैं। हम चाहते हैं कि ऊपर पैमाने पर करना चाहते हैं और तो यह एक छोटा सा ऑफसेट। यह डी 3 इन किया है कि पता चला है। यह एक पैमाने कहा जाता है। तो चलो इसका इस्तेमाल करते हैं। 

मैं जा रहा हूँ works-- कि जिस तरह से इस अप टाइप करें और फिर इसे समझा। इस पैमाने है। क्या यह करना होगा, इसे बाहर नक्शा होगा करने के लिए 20-600 पर 1-200 मूल्यों। हम चाहते हैं कि जाँच कर सकते हैं। हम यहां देख सकते हैं। 

इसलिए मैं इसे फ़ीड अगर 1-- एक पल। मुझे एक दूसरी दे। मैं इसे गलत टाइप किया होगा। वहाँ तुम जाओ। मैं इस बारे में माफी चाहता हूँ। 

इसलिए पैमाने क्या करेंगे , यह एक मान ले जाएगा और फिर उस कन्वर्ट, कि बाहर का विस्तार है, तो यह आप के लिए पूछ रहे हैं पूरी श्रृंखला भरता है। इस मामले में तो, हम इसे एक देते हैं, यह 20 पर है कि नक्शे से बाहर जा रहा है। हम इसे 200 दे और, अगर यह बात है 600 करने के लिए उस पर मैप करने के लिए जा रहा है। और बीच में कहीं, हम 100 से मिलता है, तो यह बात है कहीं होने जा रहा 20 और 600 के बीच में। 

और हां, अब यह क्या है हम उन कठिन कोडित दूर करने की जरूरत बातें हम अभी भी वहीं है। तो हम क्या करना चाहते है हम कर रहे हैं कि डेटा ले यह देखते हुए कि व्यक्तिगत डेटा तत्व है, और पहली पैमाने पर करने के लिए इसे पारित। इसलिए पैमाने इसे पैमाने पर होगा। 

ओह Well--, हम यहां एक छोटी सी त्रुटि है। हम डेटा याद कर रहे हैं। वहाँ तुम जाओ। और कहा कि इसे बाहर फैलता है। 

यही कारण है कि हमें एक ही देता है परिणाम हम, पहले था लेकिन बजाय उन होने कठिन बाधाओं कोडित। और यदि का आकार हमारे कैनवास परिवर्तन, उदाहरण के लिए, हम इस पर करना चाहते हैं 400 पिक्सल है और इसे बाहर squishes, हम यह over-- हो सकता है हम इसे विस्तार, या हम कर सकते हैं करने के लिए इस छोड़ा मार्जिन कम कर सकते हैं कम या अधिक से अधिक 20 कुछ। ये संख्या, इन हार्ड कोडित संख्या अब हमें समझ बनाने के लिए। 

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

तो अब हमारे पैमाने के बजाय, सिर्फ इतना है कि सीमा के बाहर का विस्तार इसे और अधिक परिष्कृत बातें कर रही है। इसके बजाय कठिन इस श्रृंखला होने की , और इसके बजाय कि 600 होने के कोडित, हम सिर्फ चौड़ाई का उपयोग करने के लिए चाहते हो सकता है, इतनी चौड़ाई शून्य से 40 करने के लिए 20 से, 2 बार दूसरे पक्ष पर मार्जिन। और यह एक बहुत अधिक समझ में आता है कोड पर लग सकता है, जो किसी को। 

दिलचस्प है, तराजू मिल बहुत, बहुत परिष्कृत रूप में अच्छी तरह से। वे रोचक बातें की एक बहुत कुछ है। तो तराजू जरूरी भी नहीं है बस संख्या के साथ संचालित करने के लिए। चलो एक रंग पैमाने बनाते हैं। 

तो हमारी सीमा be-- सकता है हमारे डोमेन 1-200 है। कि इनपुट बात है। लेकिन हम से नक्शा करने के लिए चाहते हो सकता है उदाहरण के लिए, लाल करने के लिए हरी। और अब, हम इसे एक गुजारें, हम हरी पाने के लिए जा रहे हैं। हम इसे 200 देते हैं, हम लाल मिलेगा। और हम दोनों के बीच में यह कुछ गुजारें, यह इस बात का कुछ मिश्रण होने जा रहा है, कहीं ढाल पर हरे और लाल के बीच। 

और बदले की हो रही है भद्दा तर्क के इस तरह हम साथ यहाँ है सही वहाँ सशर्त, हम something-- एक हो सकता था उन दोनों के बीच रैखिक पैमाने। इसलिए हम पैमाने का उपयोग होता है कि हम सिर्फ बनाया, हम रंग जो बुलाया। और हम यह डी देना चाहते हैं जो हमारे डेटा तत्व है। और हम वहाँ जाते हैं। हम एक रंग पैमाने पर है। 

तो यह मानचित्रण है। अब तक छोड़ दिया है पूरी तरह से हरे रंग की है। अभी तक सही पूरी तरह से लाल है। और बीच में सब कुछ डी के एक समारोह है। हम एक दिलचस्प है यहाँ visualizations के। लेकिन हमारे डेटा बोरिंग की तरह था। हम अगर कर सकता है देखते हैं क्या हम और अधिक दिलचस्प डेटा था। 

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

पहली बात तो हम क्या करना चाहते हैं कहीं और करने के लिए कदम है कि है। तो मैं एक बनाने के लिए जा रहा हूँ यहाँ बुलाया data.json फ़ाइल। JSON डेटा स्वरूप है। तुम उस के बारे में ज्यादा पता नहीं करना पड़ेगा। और हम कॉपी करने के लिए जा रहे हैं हम वहाँ थोड़ा डेटा, वहाँ शब्दशः में पेस्ट, जाओ वापस हमारे दृश्य कोड के लिए यहां, और यहीं इस समारोह का उपयोग करें। आप जानकारी पता करने के लिए नहीं है। लेकिन क्या यह नहीं होगा, है यह उस फ़ाइल को मिल जाएगा, यह लाने, और यह हमारे लिए वापसी। तो यह क्या करता है, यह हो जाता है, और data.json फ़ाइल मिलता है। और फिर सभी कोड है कि अनिवार्य रूप से inside-- इंडेंट, सभी कोड हम there-- होगा हम वापस डेटा प्राप्त जब केवल चलाते हैं। और फिर यह कि चलाने के लिए जा रहा है हमारे पास डेटा के साथ कोड। बढ़िया है, हमारे पास एक क्वेरी उस दृश्य कुछ कोड के लिए कहीं न कहीं वरना, जो आम तौर पर है यह कहाँ से कुछ डेटा से पूछता है कहीं और, जो आमतौर पर visualizations के कैसे काम करते हैं। 

लेकिन मुझे लगता है कि डेटा के लिए वापस जाना चाहता हूँ। D3-- डी 3 में मौलिक रूप से तो डेटा चीजों की एक सूची है कि डेटा की खपत। डी 3 डेटा बस एक सूची होने की उम्मीद बातों के बारे में चीजों की एक सरणी। यह क्या उन चीजों को कोई फर्क नहीं पड़ता इसलिए जब तक यह उनमें से एक सरणी है, के रूप में कर रहे हैं। 

तो यहाँ, उदाहरण के लिए, हम सकता है बेशक बिंदु मूल्यों तैर कर दिया है। हम नकारात्मक हो सकता था। डी 3 इतने लंबे समय, कोई परवाह नहीं है यह चीजों की एक सूची है के रूप में। 

हम के रूप में दिलचस्प बातें हो सकता है, हम भी कर सकते थे लगता है कि जैसे तारों की एक सूची है। इसलिए इन क्रिमसन सुर्खियों में रहे हैं मैं कुछ दिन पहले उठाया। और हो सकता है कि आप कुछ दिलचस्प मिल सकता है इनमें से एक में सुर्खियों के बारे में बातें। 

तो फिर, यह चीजों की एक सूची है। डी 3 की परवाह नहीं करता। ये एक स्ट्रिंग होना होता है। हम अपने डेटा बदल दिया है। 

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

तो क्या हम हर समय is-- करूँगा हमारे समारोह एक तार के साथ कहा जाता है, हम यह लंबाई है मिलेगा और फिर पैमाने पर करने कि गुजरती हैं। रंग, मैं वापस कर देंगे इस्पात नीले रंग के लिए है। और हम वहाँ जाते हैं। हम एक दृश्य है के क्रिमसन सुर्खियों। 

हमारे पैमाने थोड़ा दूर है। सबसे लंबे समय तक मान लेते हैं कि शीर्षक, 100 वर्ण लंबा है इसलिए एक सा है कि बाहर अवधि। और हम एक दृश्य है। तो यह है कि सबसे अधिक सुर्खियों में लगता है एक साथ बहुत करीब हैं, चरित्र रेखा के संदर्भ में। लेकिन वहाँ एक सच में बाहर खड़ा है। 

हम कुछ उपकरणों का निर्माण कर सकता अधिक है कि पता लगाने के लिए। मैं इस पर काम कर रहा था लेकिन जब मैं था जिज्ञासु, चाहे इस डेटा सेट में, एक पेट के साथ सुर्खियों में उन में लंबे समय तक होगा। मुझे लगता है वे होगा मानता है। 

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

लेकिन हम एक नहीं मिल रहा है पेट के, हम हरी वापस कर देंगे। हम करते हैं, हम लाल वापस कर देंगे। तो फिर, सुर्खियों में है कि एक पेट के लाल हो जाएगा। यह इस अच्छा means-- क्या है। 

तो यह लगता है कि मेरे परिकल्पना टकरा जाता है। केवल दो है। हम केवल छह डेटा अंक है और केवल दो कोलन था। लेकिन यह थोड़ा और अधिक लगता है निचले सिरे पर है, वास्तव में। कोलन के साथ सुर्खियों में लग रहे हैं आम तौर पर कम हो, हमारे डेटा में कम से कम दिलचस्प set--। 

के लिए है कि वापस जाने इस्पात नीला और फिर देखते हैं हम भी साथ क्या कर सकते हैं और अधिक रोचक डेटा। तो फिर, मैं उल्लेख किया है कि डी 3 में डेटा चीजों की एक सूची है। हम कई प्रकार की संख्या को देखा है। हम तार देखा है। लेकिन चीजें भी वस्तुओं हो सकता है। 

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

इस सेट से एक इस तरह के डेटा है। इस भूकंप के बारे में सेट एक डेटा है। हमारी सूची या सरणी पर यहाँ सब कुछ इतना बातों के बारे में बहुत सी बातें अपने आप में शामिल हैं। इसलिए हर डेटा बिंदु है एक परिमाण और एक समन्वय। और खुद को निर्देशांक दो बातें होते हैं। 

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

यहाँ तो, यह एक ही अवधारणा है। लेकिन अब, घ अधिक बातें शामिल हैं। डी कई डेटा तत्व शामिल हैं। इसलिए हम वापस डी मिलता है। डी 3 हमें डी देता है। और हम परिमाण खोजने के द्वारा जवाब डी और फिर पैमाने पर करने कि पारित की। 

और फिर हम बदलने की जरूरत है हमारे पैमाने, बिल्कुल। परिमाण बस नहीं है ज्यादा 10 से अधिक चलते हैं। दरअसल, वहां कभी नहीं गया है एक 10 परिमाण के भूकंप। लेकिन यह है कि हमारे ऊपरी की तरह है अंत में, हमारे ऊपरी स्पेक्ट्रम। 

की ताज़ा करने दें। अच्छा है, हम एक दृश्य है। यह तो note-- दिलचस्प है दो डेटा अंक हैं कि लगभग बिल्कुल प्रत्येक के शीर्ष पर हैं अन्य, परिमाण के संदर्भ में। आप हम प्रयोग कर रहे अस्पष्टता से देखते हैं। 

अब हम भौगोलिक डेटा है। हम अक्षांश और देशांतर है। शायद हम कुछ एक कर सकता है बहुत कुछ उस के साथ और अधिक दिलचस्प। चलो कुछ और अधिक जानकारी प्राप्त करते हैं कल्पना करने के लिए दिलचस्प तरीका यह और अधिक जटिल डेटा हम करने के लिए उपयोग किया है। 

अधिनियम वी, Mapping-- मौलिक, हम एक नक्शे पर इन डाल करना चाहते हैं। मैं यह जा रहा है जहां यह है, मतलब है। हम के बारे में जानकारी सांकेतिक शब्दों में बदलना चाहते हैं इन भूकंप रीडिंग की स्थिति, के रूप में अच्छी तरह से उनके परिमाण, अब हम उस किया है। हम उपभोग के लिए समझने और अधिक जटिल डेटा। 

हम क्या करेंगे पहली बात है एक नक्शा, एक पृष्ठभूमि नक्शा बना। मैं के माध्यम से जाने के लिए जा रहा हूँ यह बहुत जल्दी। यह मुश्किल कोड है। यह उन लोगों की एक और एक है व्यंजनों तुम सच में नहीं है आप का उपयोग करने के लिए पूरी तरह से समझना होगा। लेकिन इस कोड है। इस कोड को यहीं एक नक्शा बनाता है। 

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

तो डी 3 क्या करेंगे समान है हम पहले किया था क्या। ऐसा लगता है कि अनुरोध करेंगे और एक तत्व है कि बाँध। और एक समारोह है कि वहाँ उस तत्व बाहर नक्शा होगा, अक्षांश और देशांतर पर आधारित है। आप उस पर और अधिक पढ़ सकते हैं। और मैं यह सलाह देते हैं। 

पर लिंक कर रहे हैं इस कोड के अंत में तैनात हैं। और कोड टिप्पणी की है। में इस पर आगे के लिए लिंक कर रहे हैं। मैं आपको यह देखने की सलाह देते हैं। लेकिन हम क्या है के बारे में परवाह इस प्रक्षेपण समारोह। मुझे लगता है कि के माध्यम से जाने के लिए चाहते हैं। 

सबसे पहले, मुझे दिखाओ आपको लगता है कि, हाँ, हम एक नक्शा है। मैप्स शांत कर रहे हैं। तो चलो इस पर नजर डालते हैं उत्पादन कार्य करते हैं। 

प्रोजेक्शन बहुत ज्यादा है एक पैमाने की तरह, फिर से तराजू। तो क्या उत्पादन के लिए इस प्रक्षेपण समारोह , हम इसे देशांतर पारित कर सकता है करता है और इस मामले में latitudes--, यहाँ ये मान रहे हैं इमारत के अक्षां-चाहता है हम सही में बैठे हैं now-- प्रक्षेपण के लिए। और प्रक्षेपण में परिवर्तित कर देंगे एक्स और वाई पिक्सेल मूल्यों में है। 

तो क्या प्रक्षेपण कर रही है हमारे पैमाने पर करने के समान है। यह हमारे अक्षांशों ले जा रहा है और एक पूरी दुनिया का प्रतिनिधित्व करता है कि देशांतर और सिकुड़ते और है कि नौकरशाही का आकार घटाने हम चाहते हैं कि वर्ग के लिए नीचे, हम यह दिया गया है। इस मामले में, हम कर रहे हैं इन मूल्यों गुजर रहा है। और यह कि, ठीक है, हमें दे रही है अपनी स्क्रीन पर 640 पिक्सल का मतलब है। इस पूरे स्क्रीन 700 पिक्सल है विस्तृत, कि यहाँ के बारे में हमें बनाता है तो, नीचे और 154 पिक्सल, जो मैं होता अनुमान बहुत ज्यादा यहाँ है। 

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

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

इसलिए हमारे प्रदर्शनी को देख, हम अपने exposition-- चाहते हैं हम एक अक्षांश और देशांतर है। लेकिन हम पिक्सेल मूल्यों चाहते हैं। और यह पता चला है, हम वास्तव में है क्या हम प्रक्षेपण want--। हम थे बहुत पसंद यहीं पैमाने का उपयोग कर, अब हम प्रक्षेपण का उपयोग करने के लिए जा रहे हैं और यह निर्देशांक गुजरती हैं। पहली बात तो हम हम कर रहे हैं ताकि doing-- रहे एक व्यक्ति डेटा है जो हो रही है विकास, एक व्यक्ति के भूकंप के तत्व पढ़ने। हम पहली बात निर्देशांक मिलता है। सब ठीक है, हम निर्देशांक है। 

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

हम y के लिए भी ऐसा ही करेंगे। लेकिन इसके बजाय, हम वापस कर देंगे दूसरे तत्व, वाई। ताज़ा करने के लिए तैयार हो जाओ। ओह, अतिरिक्त चरित्र here-- अच्छा, हम हैं है कि एक डेटा संचालित दस्तावेज़ वस्तुओं के इस JSON फ़ाइल छुपा, एक नक्शा बना रही है, और बदलते डेटा के संबंध में विशेषता एक मानचित्र पर यह परियोजना के लिए। यह वाकई दिलचस्प है। यह अच्छी बात है। 

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

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

की त्रिज्या करते हैं। मैं त्रिज्या सबसे सहज लगता है। तो फिर, हम चाहते हैं कि कड़ी मेहनत से कोडित की जगह लेंगे 40 और कुछ गणना करते हैं। हम फिर से हमारे पसंदीदा पैमाने का उपयोग करेंगे। और हम डी अतीत हो। हम परिमाण चाहते हैं क्योंकि लेकिन डी नहीं डी के। डी सिर्फ डेटा बिंदु है। हम परिमाण पैमाने पर करने के पारित करेंगे। 

का है कि फिर से कोशिश करते हैं। ओह, यह काम नहीं करता। क्यों यह काम नहीं करता है? 

तो क्या करता पैमाने याद है। चलो फिर पैमाने पर देखें। 1 से 10 स्केल नक्शे पर 22-600 करने के लिए, कम या ज्यादा। 600 बहुत बड़ा है। हम इस हो रही है यही कारण है। 

इसलिए हम अपने स्तर को बदलना चाहते हैं अधिक उचित कुछ करने के लिए। हम 0-60 चाहते हैं, हम कहते हैं। 60 बड़ी है, लेकिन 10 भूकंप अविश्वसनीय रूप से दुर्लभ हैं। वास्तव में, वे कभी नहीं हुआ हूँ। 

तो क्या करेंगे यह क्या है, इसे ले जाऊँगा 1-10 जाता है कि हमारे परिमाण और इसे बाहर का विस्तार करने के लिए यह नक्शा। और 0-60 के लिए यह नक्शा। की ताज़ा करने दें। 

अच्छा है, हम एक दृश्य है। यह बहुत अच्छा है। यह वास्तविक डेटा है। तुम मेरे छोटे खिलौने में, नोटिस हूँ उदाहरण के लिए, सबसे बड़ा भूकंप सही हम में से शीर्ष पर है। लेकिन यह बात है। हम एक तारीख संचालित दृश्य है उस डेटा की खपत और वास्तव में हमें देता है रोचक जानकारी। हाँ, चलो कुछ जोड़ दें यह करने के लिए अन्तरक्रियाशीलता। मुझे लगता है कि उल्लेख किया गया डी 3 की मजबूत ताकत। 

यहाँ तो हर तत्व के लिए, हम कर रहे हैं विशेषताओं का एक गुच्छा का वर्णन। लेकिन हम यह भी कि हम क्या चाहते वर्णन कर सकते हैं अन्तरक्रियाशीलता तत्वों के साथ हो लिए। उदाहरण के लिए, हम वर्णन कर सकता क्या हम जब माउस से अधिक होता है। और कहा कि बहुत ही इसी तरह, एक समारोह है कि ले जाऊँगा, बहुत समान , हम पहले था विशेषताएँ जहां हम करने के लिए कुछ करना है हम इसे खत्म तत्व मंडराना जब। 

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

यह है कि हम एक है प्रकट होता है यहां अतिरिक्त अर्धविराम। हम यहाँ पर जाएँ तो, अगर यह पूरा हो जाता है। लेकिन अब, ज़ाहिर है, यह , पूर्ण रहता है क्योंकि हम क्या होता है का वर्णन करने के लिए है जब हमारे कर्सर को हटा दें। तो चलो उस पर बिल्कुल करते हैं mouseout, mouseover करने का विरोध किया। 

और हम इसे रीसेट करता हूँ क्या हम 0.5 before-- था। और अब, हर बार हम मंडराना, हम एक चक्र पूरा मिलता है। यह हमें देखना क्या मदद करता है हम हम अनिवार्य रूप से चयन कर रहे हैं। 

और अब हम इस सच में महान बनाते हैं। के वास्तविक आंकड़ों के इस कनेक्ट करते हैं। तो चलो पूछना दे सकता है यूएसजीएस अपने डेटा के बारे में। अमेरिकी भूवैज्ञानिक सर्वेक्षण तो भूकंप के बारे में डेटा है। वे सक्षम है कि एक सार्वजनिक एपीआई JSON प्रारूप में भस्म हो। तो चलो करते हैं। 

इसलिए इस कोड का एक सा है कि यूएसजीएस एपीआई को जोड़ता है। और उस पर प्रसंस्करण का एक सा है। यह प्रासंगिक नहीं है बल्कि यह सरल करता है एक तरह एक साधारण डेटा प्रारूप करने के लिए हम पहले था। इसलिए मैं करने के लिए हमारे कॉल से छुटकारा पाने के फाइल पर हमारे नकली data.json। और इसके बजाय, मैं बोल रहा हूँ अनिवार्य रूप से यूएसजीएस। 

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

लेकिन मौलिक, इस डी 3 हमें करना क्या मदद करता है। यह हमारे डेटा लेने में मदद करता है, बाँध डोम में तत्वों के लिए यह, और उन तत्वों को बदलना होगा डेटा के एक समारोह के रूप में, उन विशेषताओं, सब किया है तत्वों के कई गुण है, सभी चैनलों के लिए उपयोगी हो सकता है जानकारी देने के लिए। 

डी 3 एक अविश्वसनीय रूप से शक्तिशाली है पुस्तकालय और आश्चर्यजनक अच्छी तरह से चला रहे हैं। यह कुछ शक्तिशाली सामान है। डेटा दृश्य है एक अविश्वसनीय रूप से शक्तिशाली उपकरण गहरी लोगों के लिए संदेश के लिए उनके कोर करने के लिए हो जाता है कि अंतर्दृष्टि और उन में, समझने में मदद करता इस गहन और सहज तरीके से, कैसे डेटा काम करता है और कैसे डेटा हमारे जीवन बदल जाता है।