[عزف الموسيقى] 

DAVID شوينار: أنا ديفيد شوينار، وهذا هو D3. مرحبا بكم. ونحن في طريقنا لمعرفة المزيد عن D3 اليوم. D3 هو إطار جافا سكريبت لبناء ذات جودة عالية تصورات التفاعلية لشبكة الإنترنت. أشياء مثل ما نحن رؤية في الجزء الخلفي من لي، ونحن في طريقنا لمعرفة لجعل تلك الأشياء، نوع من أساسيات منه. لكنها ستكون باردة. دعونا نبدأ جعل صور جميلة. لدينا المزيد من العروض آفاق المتاحة. دعونا نفعل ذلك. 

القانون الأول، DOM manipulation-- نحن ذاهبون لتبدأ على الفور اتخاذ تهدئة الامور. أولا وقبل كل شيء، على اليسار، لدينا التعليمات البرمجية. على اليمين، لدينا نتيجة رمز لنا. دعنا نذهب من خلال ذلك. 

دعونا نجعل دائرة. كيف هذا الصوت؟ svg.append circle-- التي قطعناها على أنفسنا فقط دائرة. كنت لا تصدقني، أليس كذلك؟ انها ليست هناك. 

ذلك ما فعلناه هنا هو، SVG هو مكافحة ناقلات الرسومات للتحجيم. هذه هي الطريقة التي تخبر المتصفح ل جعل مكافحة ناقلات الرسومات في المتصفح. ما نحن فقط لم الصحيح الآن يضاف دائرة لتصفح. 

الوعد هو أن دائرة يتطلب قليلا من سمات الأساسية قبل أن نتمكن من رؤية الواقع. نحن بحاجة لمعرفة ما موقف العاشر لها، موقف ذ لها، نصف قطرها. نحن لم يقولوا ذلك أي من ذلك، لذلك نحن لا نرى ذلك الآن. ولكن دعونا نقول أنه الاشياء. 

حتى في المقام الأول، كنت قد حصلت على لإعطاء دائرتنا اسما. لذلك دعونا نسميها دائرة. لدينا دائرة لديها اسم الآن. ودعونا إعطائها سمات قليلة. ماذا عن CX سوف تركز X، لذلك وسط موقف العاشر. دعنا نقول، 200 ل 200 بكسل. 

دعونا إعطائها ص 200 بكسل كذلك. وص، دائرة نصف قطرها، من حوالي 40 بكسل. الآن دعونا نرى. لا أستطيع أن الإملائي. 

هناك تذهب. لدينا دائرة في موقف 200 بكسل، 200 بكسل، دائرة نصف قطرها 40 بكسل. نوع من باردة، أليس كذلك؟ لدينا دائرة. نعم. 

لذلك لا حاجة لمتابعة على طول. كل هذه الأمثلة، كل من رمز أفعله اليوم وسيتم توفير الانترنت في نهاية في شكل من الأمثلة التفاعلية مع نقاط التفتيش في كل عمل، وهلم جرا. 

دعونا نفعل المزيد من الأشياء. هذه دائرة سوداء قبيحة حقا. أنا آسف لهذا الخطأ الرسائل الحق هناك. هناك نذهب. 

دعونا إعطائها اللون. كيف هذا؟ أود أن الأزرق الصلب. حسنا، دائرتنا غيرت اللون. هذا عظيم. دعونا جعله شبه شفافة too-- شبه شفافة. 

لذلك هذه هي الصفات نحن على تحديد الدائرة. أول شيء فعلناه هو نضع دائرة على الصفحة. ومن ثم نقوم بتعريف مجموعة من الصفات. ويلزم بعض هذه، مثل CX، CY، ونصف قطرها. والبعض الآخر اختياري. 

هناك الكثير من الصفات. هناك الكثير منهم. على سبيل المثال، يمكن أن لدينا السكتة الدماغية كذلك، ضربة الأحمر. ولكن دعونا إزالة هذا. نعود إلى دائرة، دائرة زرقاء. 

لذلك دعونا بذل المزيد من الدوائر. كيف هذا؟ دعونا نجعل دائرة أخرى. هذا هو مثير، أليس كذلك؟ 

لذلك أقول إنني مجرد نسخ لصق- ما كان لدينا بالفعل. دعنا نسميها circle2. ودعونا نفعل بالضبط نفس الشيء واعطائها الصفات، نظرا لموقف العاشر من 300. ياي، لدينا دائرتين الآن. 

وبطبيعة الحال، نحن يمكن تحديث هذه القيم. I يتمكن من تسديدها في 400، والآن يتحرك. ونظرا لأنه مزعج، دعونا إزالته، circle2.remove ذلك. انها ذهبت الآن. 

وذلك ما نقوم به و هو جدا فقط، very-- هذا هي مشابهة جدا لماذا أنت قد تفعل في مسج، على سبيل المثال. نحن فقط التلاعب وDOM، انه دعا. كنت قد سمعت تلك الكلمة من قبل. نحن بصدد إنشاء الاشياء، ووضع الصفات على الاشياء، وإزالة الاشياء. 

الآن، وهنا المكان الذي تحصل عليه للاهتمام. حتى وقت لاحق من رمز، وما زال بإمكاننا الرجوع إلى دائرة الأصلي هنا. لذلك دعونا إعادة تعيين السمة لCX. دعنا نقول، موقف العاشر ل400. وانا ذاهب للانتقال أن، لذلك فمن الواضح. هناك نذهب. 

لذلك أضفنا دائرة. وضعنا بعض الصفات. أضفنا دائرة أخرى، إزالته. ثم نحن تعديل الدائرة الأصلية. 

ولكن هنا المكان الذي تحصل عليه الكثير أكثر إثارة للاهتمام. لا يمكن إلا أن وضعناها سمات كما تثمن فقط، يمكننا أن نقول، مهلا، دائرة، انتقل إلى وضع 200. يمكننا أيضا تعيين لهم وظائف. 

وذلك بدلا من إعطاء 400 هنا، يمكننا أن نجعل بعض الحساب على الطاير لماذا نحن تريد أن السمة أن يكون. لذلك هذا هو كيف كنت تعبير عن ذلك. نقول، بدلا من 400، واسمحوا لي تعطيك وظيفة بدلا من ذلك. وهنا، داخل هذه الوظيفة، يمكننا أن نجعل أي حساب مجنون. 

نحن يمكن أن تأخذ من الوقت و نلقي نظرة على بعض الشيء الآخر وتقرر حيوي ل دائرة ما قيمة نريد. ماذا عن نعطي فقط انها علامة X موقف عشوائي؟ ذلك أن أن. 

فما أن يقول هو، ل كل س، تشغيل هذه الوظيفة. وما نقوم به هو احتساب بعض الأشياء، وأوقات عشوائية العرض ويعود ذلك. وذلك في كل مرة ونحن تشغيل هذا، وحصلنا على دائرة أن يذهب إلى مكان عشوائي. انها نوع من بارد. أشعر أنني يمكن أن ننظر في هذا لقليلا. بدأنا نصل الى شيء مثير للاهتمام هنا. دعونا نجعل هذه البيانات مدفوعة الآن. ليس هناك بيانات هنا. دعونا تغيير ذلك. 

Documents-- قانون II، بيانات مدفوعة لذلك دعونا العودة إلى هنا. ودعونا مجرد الحصول على التخلص من circle2، لأننا فقط إضافة وإزالة ذلك. لذلك نحن لا حقا في حاجة إليها. ونحن بحاجة إلى أن تكون أكثر بكثير ذكي هنا. دعنا نقول، لدينا بعض البيانات من نوع ما. اللحظات، واحد دعنا نقول، كان لدينا بيانات من هذا النموذج. كان لدينا مجموعة، فقط مجموعة من الأرقام. لدينا سبعة أرقام هنا، مهما كانت هذه كمية represent-- في حساب مصرفي الناس، كيف مقدار ما يزن، والله يعلم ما. 

وهذه هي الأرقام، ونحن تريد استخدام الدوائر لدينا لتمثيل هذه الأرقام بطريقة أو بأخرى. نحن نريد لادراك التعادل لدينا الدوائر لتلك الأرقام. وذلك ما نقوم به. دعنا نقول، نريد دائرة لكل عدد. يمكننا أن نفعل القديم شيء كنا doing-- إلحاق دائرة وcircle2 وcircle3. ولكن هذا يخرج عن نطاق السيطرة، و هناك الكثير من تكرار المنطق. 

لذلك دعونا الحصول على أكثر ذكاء مع ذلك. بدلا من استخدام دائرة فار svg.append أننا كنا مجرد استخدام، ونحن في طريقنا لاستخدام هذه الكتلة قليلا هنا. أنا لا أريد أن أذهب في العمق في ما كل هذه الأجزاء القيام به. وانها نوع من موضوع المتقدم. وأتمنى أن. 

ولكن الشيء الرئيسي لrecognize-- و سترى هو في كثير من الأحيان في التعليمات البرمجية D3. هذه الكتلة من النص الأساسي يخلق العديد من الدوائر كما أن هناك عناصر البيانات في هذه المجموعة هنا. ولذلك فإن هذا يخلق أكبر عدد ممكن الدوائر كما أن هناك عناصر. انها سوف تخلق لنا سبع دوائر. وأنه لا شيء حقا، حقا أساسيا. لذلك دعونا تشغيل هذا. دعونا إزالة دينا دائرة أخرى. دعونا فقط التعليق هذه جزء من وتشغيل هذا مرة أخرى. 

هناك نذهب. حتى دائرتنا هنا هي الكثير قتامة، لأننا لدينا سبع دوائر، واحدة على رأس الآخر. ولقد خلقنا فقط سبع دوائر، واحدة كل لكل من هذه العناصر البيانات. ولكن هناك شيء الرئيسي الذي حدث مع هذا قصاصة هنا. 

ومن ذلك كان لا بد البيانات. لذلك كل واحد تلك العناصر البيانات، 10، 45، 105، كان لا بد إلى دائرة معينة. لذلك فان هذه لم يخلق فقط مجموعة من الدوائر لكن العلاقات هذين الأمرين معا. 

وفي المستقبل، لأننا خلق تلك الدوائر مع هذه الوظيفة D3، إذا أنا أعطيك دائرة، يمكنك تعطيني البيانات المرتبطة به. حتى يمكننا أن نسأل D3. مهلا، D3، لدي هذه الدائرة. ما هي البيانات إلى أن الدائرة لديها؟ وD3 أن تقول لنا 10 أو 45 أو 105. 

وتتضافر هذه الأشياء. هذا هو مفهوم جدا، أساسي جدا. دعونا ننظر في ذلك. 

وبالتالي فإن الطريقة كنا نسأل D3-- ذلك هذا لا يهم لهذا، ولكن فقط ثق بي على ذلك. هذه هي الطريقة التي نسأل D3. مهلا، D3، أعطني أول الدائرة التي يمكنك أن تجد. تعطيني الدائرة الأولى يمكنك أن تجد. ومن ثم يمكننا أن نسأل D3، ما هو البيانات على ذلك، من هذا القبيل، 10. 

لذلك نحن نطلب فقط D3، تجد لي الدائرة الأولى يمكنك أن تجد. ما هي البيانات الخاصة به؟ 10، وهذا هو في الواقع لدينا عنصر البيانات الأولى. يمكن أن نطلب منه، مهلا، D3، تجدنا الدائرة الثالثة لدينا. 105. لماذا هذا مهم حقا؟ 

حتى هنا، ذكرتها نتمكن من استخدام وظائف. وذكرت أن كان شيء قوي جدا. لذلك لا يمكن إلا أن وظائفنا تفعل أشياء مثل القيام ببعض الحسابات، على سبيل المثال، إرجاع رقم عشوائي، فإنه يمكن كما تفعل أشياء استنادا إلى البيانات. وهذا هو ما تعنيه ثائق بيانات مدفوعة. هذا ما تقف D3 ل. 

لذلك هذا خ postition-- بدلا من مجرد القول، جميع الدوائر، الحصول على موقف س 200، ونحن يمكن أن تعطيه وظيفة. وهنا، يمكننا أن نجعل بعض الحساب. ود يقف هنا في مكان للبيانات. لذلك كل الوقت لدينا دائرة، في الأساس، سوف D3 إنشاء هذه الدوائر السبعة. ثم لكل 

دائرة، انها سوف تذهب، مهلا، circle1 ما هو موقف العاشر الخاص بك. في السابق، كنا الإجابة دائما 200. ولكن الآن، يسأل في كل مرة D3 لنا ما هو موقف العاشر الخاص بك، انها سوف تعطي us-- لدينا هذه الدائرة، لذلك لدينا البيانات. انها سوف تعطينا بيانات ويقول: ماذا تريد المعرض أن يكون، بناء على تلك البيانات. 

دعونا فقط إرجاع البيانات الفعلية. لذلك إذا أردنا تشغيل هذا، وهذا يعطي البيانات الأمريكية مدفوعة الوثائق. وتستند هذه الدوائر فيما position-- انهم قواعد بوصفها وظيفة من البيانات. 

حتى بالنسبة للدائرة الأولى، D3 يضع دائرة. ثم D3 يطلب منا، ماذا تفعل تريد المعرض أن يكون. ونحن نقول فقط، مهما كانت البيانات. جعل المعرض 10. 

ثم يسأل، ماذا تريد معرض ليكون للدائرة الثانية. ونحن نجيب (45 عاما). ونحن، بالطبع، يمكن لل إجراء بعض الحسابات هنا. أجد أن تلك الدوائر هي نوع من مسحوق يصل. 

حتى اضربها 3، وتتضاعف البيانات بواسطة 3. لدينا دائرة فقط حصلت على توسيع بها. وكان ثلاثة أضعاف قيمة لدينا. 

الدائرة هي حقا على الحافة، لذلك دعونا ربما نوع من تعويض ذلك. دعنا نقول، بنسبة 20. ها أنت ذا. 

هذا هو التصور البيانات. انها واحدة أساسية جدا، ولكن هذا يعطينا فكرة عن البيانات لدينا. وهو يخبرنا بأن، على سبيل المثال، فإننا لدينا مجموعة صغيرة من العناصر. ولدينا ناشز كبيرة هنا. وهذا يعطينا بعض المعلومات حول التوزيع. 

إذا كنا، على سبيل المثال، لتغيير البيانات إلى 150 هنا والتحديث، يتم تغيير التصور لدينا. هذه الوثيقة هي البيانات مدفوعة. 

وذلك بطبيعة الحال، كل هذه العناصر، كل هذه الصفات هنا، يمكننا استخدام وظيفة، وليس مجرد أرقام، وليس فقط x و مواقف ذ. حتى نتمكن من استخدام دالة للون. ولذا فإننا سوف تفعل الشيء نفسه. ونحن سوف تعطيه وظيفة. 

ودعنا نقول، أننا يمكن أن يكون الشرطية في وظيفة لدينا. هذه الوظيفة يمكن أن يكون مئات من خطوط طويلة. ويمكن أن تفعل أشياء جدا ومعقدة جدا. 

لذلك دعونا إذا وضع بيان هنا. دعنا نقول، إذا كانت البيانات لدينا أقل من 50، وهذا بعض عتبة أننا مهتمون في لسبب ما. دعونا جعله الأخضر. خلاف ذلك، دعونا جعله الأحمر. كيف هذا؟ لطيفة. 

لذلك التصور بياناتنا بدأت لنقل المعلومات أكثر إثارة للاهتمام على العديد من القنوات. حتى الآن نحن نعرف قليلا حول التوزيع. ونحن نعرف أن هناك نوعا من قطع في 50 أننا مهتمون. ونحن نعلم أن هناك نقاط البيانات اثنين تحت هذه العتبة ومعظمهم من أعلاه. 

لذلك كخطوة نهائية، هذه البيانات هنا، من النادر جدا أن نرى هذا القبيل. لذلك دعونا مجرد تحرك بها إلى متغير لأن هذا هو الأنظف، مثل هذا. ومن ثم يمكننا استخدام هذا المتغير هنا. انها نفس الشيء بالضبط. انها مجرد أنظف قليلا. 

يصل المقبل، الفصل الثالث، Scales-- حتى مشكلة واحدة الحق هنا هو، إذا كان لنا أن نغير البيانات الواردة في هذا 200 value-- إذا كان لنا تغييره إلى 400 أو شيء من هذا والتحديث، ثم هذه القيمة فقط ذهبت خارج الشاشة. لذلك المنطق حقنا هنا كيف يمكننا القيام به 3 مرات و 20، لنشر بها وثم تعويض عليه قليلا هو عالي الكعب حقا. 

ماذا تعني هذه الأرقام؟ انهم مجرد الصعب مشفرة هناك. وانهم مرتبطة بكثير جدا من البيانات. نريد وثيقة بيانات مدفوعة. نريد وثيقة مرنة جدا، أن البيانات الواردة، تكيف لها ويمثل ذلك. 

ما نحتاج إليه في الأساس هو، ونحن لديك هذه مجموعة من الأرقام 10. 45، 105. ونحن نريد أن الخريطة التي خارجا على عرض، والعرض الكامل هنا. لذلك لدينا مجموعة من أرقام الذهاب من 0 إلى 100. ولدينا هذا الحرم الجامعي أنا وغني 20-700، في هذه الحالة. 

نحن نوع من تريد تعيين ذلك على. نحن نريد لتوسيع نطاق ما يصل و ثم يقابل ذلك قليلا. وتبين أن D3 ديه هذه. انه دعا نطاق. لذلك دعونا استخدامها. 

الطريقة التي works-- أنا ذاهب ل اكتب هذا الأمر ومن ثم شرح ذلك. هذا هو المقياس. ما سوف تفعله هو، فإنه سيتم رسم القيم 1-200 إلى 20-600. يمكننا التحقق من ذلك. يمكننا أن نرى ذلك هنا. 

حتى لو كنت إطعام عليه 1-- لحظة واحدة. أعطني ثانية واحدة. أنا يجب أن يكون أخطأت عليه. هناك تذهب. أنا آسف لذلك. 

لذلك ماذا سيفعل نطاق و، وسوف يستغرق قيمة ومن ثم تحويل ذلك، توسيع أنه من أصل، لذلك يملأ مجموعة كاملة كنت طالبا. حتى في هذه الحالة، إذا كان لنا أن تعطيه واحد، انها سوف الخريطة أن خروج الى 20. وإذا كان لنا أن تعطيه 200، انها الذهاب إلى الخريطة التي على 600. وفي مكان ما بين، اذا حصلنا على 100، انها سيكون في مكان ما في ما بين 20 و 600. 

وبطبيعة الحال، والآن هذا هو ما نحن بحاجة إلى إزالة تلك الثابت ترميز الأشياء لدينا الحق هناك. ذلك ما نريد القيام به هو تأخذ البيانات التي نحن معين، أن البيانات الفردية العنصر، ويسلمها لتوسيع نطاق أولا. حتى على نطاق وتحجيم عنه. 

Well-- أوه، لدينا خطأ صغير هنا. نفتقده البيانات. هناك تذهب. والذي يوسع من ذلك. 

هذا يعطينا نفس نتيجة كان لدينا من قبل، ولكن بدلا من وجود تلك الثابت ترميز القيود. وإذا كان حجم لدينا التغييرات قماش، على سبيل المثال، إذا كنا نريد أن يكون هذا على 400 بكسل ويسحق بها، نحن يمكن أن يكون ذلك over-- يمكننا توسيعه، أو أننا يمكن أن تقلل من هذا الهامش الأيسر ل شيء أقل أو أكثر من 20. هذه الأرقام، هذه الثابت ترميز أرقام تجعل الآن معنى بالنسبة لنا. 

ويمكننا أن نفعل أكثر بكثير أشياء مثيرة للاهتمام كذلك. وذلك بدلا من وجود الخطية الحجم، ونحن قد ترغب في تسجيل نطاق. وهذا سيتيح لنا نطاق السجل. 

حتى الآن لدينا الحجم، بدلا من مجرد توسيع إلى أن المدى، انها تفعل أشياء أكثر تطورا. بدلا من الاضطرار هذا النطاق الصعب مشفرة، وبدلا من الاضطرار أن 600، نحن قد ترغب في استخدام مجرد العرض، لذلك من 20 إلى العرض ناقص 40، 2 مرات الهامش على الجانب الآخر. وهذا ما يجعل الكثير من معنى ل شخص قد ننظر في التعليمات البرمجية. 

ومن المثير للاهتمام، وجداول الحصول على جدا ومتطورة جدا كذلك. يفعلون الكثير من الأشياء المثيرة للاهتمام. لذا المقاييس ليس بالضرورة للعمل فقط مع الأرقام. دعونا نجعل نطاق اللون. 

لذلك لدينا مجموعة يمكن be-- لنا المجال من 1 إلى 200 شخص. هذا هو الشيء الإدخال. ولكننا قد ترغب في تعيين من الأخضر إلى الأحمر، على سبيل المثال. والآن، إذا كنا تمريرها 1، ونحن في طريقنا للحصول على اللون الأخضر. إذا كان لنا أن تعطيه 200، وسوف نحصل الأحمر. وإذا كان لنا أن تمر عليه شيء في بين، انها سوف تكون بعض مزيج من ذلك، في مكان ما على التدرج بين الأخضر والأحمر. 

وبدلا من وجود هذا النوع من المنطق عالي الكعب لدينا هنا مع مشروطة هناك حق، أننا يمكن أن يكون something-- ل مقياس خطي بين هؤلاء. لذلك كنا استخدام على نطاق ونحن فقط خلق، وهو ما يسمى اللون. وكنا تعطيه د، والذي هو عنصر من عناصر البيانات لدينا. وهناك نذهب. لدينا مقياس اللون. 

لذلك هذا هو رسم الخرائط. حتى أقصى اليسار هو أخضر تماما. اليمين المتطرف هو أحمر تماما. وبين في كل شيء هي وظيفة من د. لدينا اهتمام تصورات هنا. ولكن البيانات لدينا هو نوع من مملة. دعونا نرى ما يمكننا القيام به إذا كان لدينا بيانات أكثر إثارة للاهتمام. 

القانون الرابع، مع العمل Data-- أول شيء سنقوم تريد القيام به لجعل لدينا التصور أكثر إثارة للاهتمام هو لنقل البيانات في مكان آخر. انها عالي الكعب جدا أن يكون البيانات الثابت ترميز هنا. وعموما، سنكون يسأل شخص آخر للبيانات. سنكون ربما نطلب من الحكومة، مكتب الإحصاء، ما هو البيانات الخاصة بك ثم بالتآمر أن يسأل أو بعض كيان طرف ثالث لبعض البيانات ومن ثم بناء التصور على ذلك. 

لذا فإن أول شيء نريد أن نفعله غير أن الانتقال إلى مكان آخر. لذلك أنا ذاهب لخلق ملف يسمى هنا data.json. JSON هو تنسيق البيانات. لم يكن لديك لمعرفة الكثير عن ذلك. ونحن في طريقنا للنسخ البيانات القليل لدينا هناك، صقه في حرفيا هناك، انتقل العودة إلى رمز التصور لدينا هنا، واستخدام هذه الوظيفة هنا. لم يكن لديك لمعرفة التفاصيل. ولكن ما هذا سوف تفعله هو، سوف تجد هذا الملف، جلب عليه، وإعادته إلينا. فماذا يعني هذا هو، فإنه يذهب والحصول على ملف data.json. وبعد ذلك كل رمز هذا بادئة inside-- أساسا، كافة التعليمات البرمجية لدينا there-- سوف تشغيل فقط عندما نحصل على البيانات مرة أخرى. وبعد ذلك يجري لتشغيل هذا الرمز مع البيانات التي لدينا. العظمى، لدينا تصور أن يستعلم لبعض التعليمات البرمجية في مكان ما آخر، والتي عادة ما حيث يستعلم بعض البيانات من في مكان آخر، والتي عادة ما كيفية عمل تصورات. 

ولكن أريد أن أعود إلى البيانات. ولذلك فإن البيانات بشكل أساسي في D3-- D3 تستهلك البيانات التي من قائمة من الأشياء. وتتوقع D3 البيانات أن يكون مجرد قائمة من الأشياء، ومجموعة من الأشياء. لا يهم ما هي تلك الأشياء هي، طالما انها مجموعة منهم. 

حتى هنا، على سبيل المثال، يمكننا من بالطبع لم يتحرك القيم نقطة. أننا يمكن أن يكون السلبيات. D3 لا يهتم، وقتا طويلا كما انها قائمة من الأشياء. 

أشياء مثيرة للاهتمام كما نحن يمكن أن يكون، نستطيع أيضا لديك قائمة من سلاسل من هذا القبيل. لذلك فان هذه هي العناوين الرئيسية قرمزي التقطت قبل بضعة أيام. وربما يمكنك أن تجد بعض مثيرة للاهتمام الأشياء عن هذه على عناوين الصحف. 

ذلك مرة أخرى، وهذا هو قائمة من الأشياء. D3 لا يهمه. هذه يحدث ليكون سلسلة. قمنا بتغيير البيانات لدينا. 

دعونا العودة إلى التصور لدينا. الآن، يتوقع التصور لدينا مدخلات أن تكون الأرقام. لذلك نحن ذاهبون لدينا لجعل بعض التغييرات. هكذا على سبيل المثال، أولا وقبل كل شيء، ربما نحن نريد ان نضع هذه الدوائر على طول من طول العنوان، و عدد الأحرف في العنوان. 

ذلك ما سنقوم به is-- في كل مرة لدينا يتم استدعاء الدالة مع سلسلة، سنجد انها طول و ثم تمرير ذلك إلى مقياس. لون، وأنا سوف نعود أن إلى اللون الأزرق الصلب. وهناك نذهب. لدينا التصور عناوين قرمزي. 

حجم أعمالنا هو خارج قليلا. دعونا نفترض أن أطول العنوان هو 100 حرفا، بحيث تمتد التي بها قليلا. ونحن لدينا التصور. لذلك يبدو أن معظم عناوين الصحف هي قريبة جدا معا، من حيث خط الحرف. ولكن واحدة هناك تقف حقا. 

نتمكن من بناء بعض الأدوات لاستكشاف أن أكثر. ولكن عندما كنت أعمل على هذا، كنت غريبة سواء، في هذه المجموعة البيانات، عناوين الصحف مع القولون في منهم سيكون لفترة أطول. I يفترض أنهم سوف. 

لذلك دعونا معرفة ذلك. دعونا استخدام اللون قناة كما فعلنا من قبل، لترميز بعض حول ما إذا كان هناك القولون أو لا. لذلك سنستخدم مشروطة مرة أخرى. لم يكن لديك لمعرفة تفاصيل هذا، ولكن هذه هي الطريقة التي تحقق ل سلسلة لحرف معين في جافا سكريبت، ومرة ​​أخرى، غير ذات صلة. 

ولكن إذا كنا لا نجد القولون، ونحن سوف نعود الأخضر. واذا لم نفعل، فإننا سوف نعود الأحمر. ذلك مرة أخرى، العناوين الرئيسية التي وقد القولون سوف تكون حمراء. هذا هو ما means-- هذا لطيف. 

لذلك يبدو أن بلدي وصدم الفرضية. هناك اثنين فقط. لدينا ست نقاط البيانات فقط وكان اثنان فقط كولون. ولكن يبدو أكثر قليلا على الطرف الأدنى، في الواقع. عناوين الصحف مع كولون يبدو أن تكون أقصر عموما، على الأقل في بياناتنا set-- مثيرة للاهتمام. 

دعونا العودة أن ل الفولاذ الأزرق وثم انظر ما يمكننا أن نجعل مع حتى بيانات أكثر إثارة للاهتمام. ذلك مرة أخرى، وأنا ذكرت أن البيانات في D3 هي قائمة من الأشياء. لقد رأينا أعداد العديد من أنواع. لقد رأينا السلاسل. ولكن الأمور يمكن أيضا أن تكون الكائنات. 

ويمكن أن تكون الأمور معقدة التي تشمل الكثير من الأشياء. القول بأن أكثر وضوحا، في معظم الحالات، ونحن نريد أن نبني كل نقطة البيانات كما هو أكثر تعقيدا من قيمة واحدة فقط. إذا كنت أتخيل قاعدة بيانات عن الطلاب، قد يكون هناك طالب اسم وهوية الطالب، والكثير من الأشياء المرتبطة مع سجل معين، ليس فقط سلسلة أو رقم. لذلك دعونا ننظر في ذلك. 

هذا هو واحد من هذا القبيل مجموعة البيانات. هذا هو مجموعة البيانات حول الزلازل. لذلك كل شيء هنا على قائمة لدينا أو مجموعة من الأشياء يحتوي على أشياء كثيرة نفسه. وذلك في كل نقطة من نقاط البيانات لديها حجم وتنسيق. وينسق أنفسهم يحتوي على أمرين. 

لذلك كل يوم هو الآن أكثر بكثير تعقيدا والكثير أكثر إثارة للاهتمام ويحتوي على أكثر من ذلك بكثير معلومات مثيرة للاهتمام. دعونا نرى نتمكن من بناء للخروج من هذا. العودة إلى هنا، مرة أخرى، وذلك باستخدام لدينا تصور الرسم البياني دائرة قمنا ببناء، دعونا نرى ما اذا كنا نستطيع بناء تصور توزيع حجم في مجموعة البيانات لدينا. 

حتى هنا، انها نفس المفهوم. ولكن الآن، د يحتوي على المزيد من الأشياء. د يحتوي على العديد من عناصر البيانات. حتى نحصل على د الظهر. D3 يعطينا د. ونرد من خلال إيجاد حجم د ثم يمر هذا إلى مقياس. 

ثم نحن بحاجة إلى تغيير حجم أعمالنا، بطبيعة الحال. لذلك المقادير ببساطة لا يذهب أكثر بكثير من 10. في الواقع، كان هناك أبدا زلزال 10 درجة. ولكن هذا النوع من موقعنا العلوي نهاية، الطيف العلوي لدينا. 

دعونا تحديث. لطيفة، لدينا التصور. انها مثيرة للاهتمام لnote-- ذلك هناك نقاط البيانات اللتين هي بالضبط تقريبا على رأس كل منهما البعض، من حيث الحجم. تشاهد ذلك من خلال التعتيم نستخدمه. 

لدينا البيانات الجغرافية الآن. لدينا خطوط العرض والطول. ربما نستطيع أن نفعل شيئا ل الكثير أكثر إثارة للاهتمام مع ذلك. دعونا العثور على بعض أكثر طريقة مثيرة للاهتمام لتصور هذا أكثر تعقيدا البيانات التي لدينا الوصول إليها. 

قانون V، Mapping-- بشكل أساسي، نحن نريد ان نضع هذه على الخريطة. أعني، وهذا هو أين يحدث هذا. نحن نريد لتشفير المعلومات حول موقف هذه القراءات الزلزال، وكذلك حجمها، لأن لدينا الآن. ونحن نفهم كيفية تستهلك بيانات أكثر تعقيدا. 

أول شيء سنقوم به هو إنشاء الخريطة، خريطة الخلفية. انا ذاهب للذهاب من خلال هذا بسرعة كبيرة. هذا هو كود صعبة. انها واحدة أخرى من تلك وصفات كنت لا حقا يجب أن نفهم تماما لتتمكن من استخدامها. ولكن هذا هو الرمز. هذا الرمز هنا يخلق الخريطة. 

نحن لن تذهب في التفاصيل. ولكن بشكل سطحي، ما تقوم به هو، فإنه يستعلم هذا الملف us.json، التي هو ملف البيانات مثل واحد كان لدينا من قبل. انها أكثر تعقيدا، بطبيعة الحال. لكن في هذه الحالة، كل شيء، كل نقطة البيانات هي هذه الدولة ولديه قائمة من خطوط العرض والطول التي تحدد المضلع، هذا النموذج، تلك الدولة. 

وذلك ما سوف تفعله هو D3 مماثلة لماذا فعلنا من قبل. وسوف يطلب ذلك و ربط هذا إلى عنصر. وهناك وظيفة أن سيتم تعيين هذا العنصر بها، على أساس خطوط العرض والطول. يمكنك قراءة المزيد عن ذلك. وأنا أوصي به. 

هناك روابط في نهاية هذا الرمز نشرها. وعلق التعليمات البرمجية. في وجود صلات لمزيد حول هذا الموضوع. أنصحك البحث عنه. ولكن ما يهمنا هو هذه الوظيفة الإسقاط. أريد أن أذهب من خلال ذلك. 

أولا وقبل كل شيء، اسمحوا لي أن تظهر لكم أن، نعم، لدينا خريطة. الخرائط هي باردة. لذلك دعونا ننظر إلى هذا دالة الإنتاج. 

الإسقاط هو إلى حد كبير مثل الحجم، وجداول مرة أخرى. فما الإنتاج ل هذه الوظيفة الإسقاط لا هو، ونحن يمكن أن تمر عليه الطول وlatitudes-- في هذه الحالة، هذه القيم هنا هي يتوق-خطوط الطول للمبنى ونحن نجلس في الحق now-- إلى الإسقاط. وسوف الإسقاط تحويل ذلك في x و y قيم بكسل. 

وذلك ما يقوم به الإسقاط هي مشابهة جدا لحجم أعمالنا. انها تأخذ خطوط العرض لدينا، و خط الطول الذي يمثل العالم كله وتقلص والتحجيم التي وصولا الى المربع الذي نريد، بعد أن قمنا بالنظر فيه. في هذه الحالة، نحن تمر هذه القيم. وانها تعطينا، حسنا، هذا على الشاشة يعني 640 بكسل. هذه الشاشة كلها 700 بكسل على نطاق واسع، بحيث يجعلنا عنه هنا، و 154 بكسل إلى أسفل، وهو ما من شأنه التقدير هو الى حد كبير هنا. 

وهكذا أخذ تلك يتوق-خطوط الطول، والتي تمثل شيئا على العالم كله والسحق ونقل أن حوالي لتعطينا x و القيم ص بكسل، هذا هو أول شيء هذا يتم في هذا الرمز رسم الخرائط. ومن ثم بقية كود يستهلك البيانات ثم خرائط تلك يتوق خطوط الطول- على شيء على الشاشة. 

ولكن نحن في طريقنا لاستخدام هذا الإسقاط وظائف، لأنه تبين لدينا خطوط الطول يتوق-يتوق كذلك. إذا نظرنا إلى الوراء في البيانات، لدينا خطوط العرض وخطوط الطول الإحداثيات لكل المراقبة. لذلك دعونا استخدام الإسقاط. 

لذلك تبحث في معرض لدينا، نريد exposition-- لدينا لدينا خطوط العرض والطول. لكننا نريد القيم بكسل. واتضح، لدينا بالضبط ما want-- الإسقاط. يشبه إلى حد كبير جدا كنا استخدام على نطاق والحق هنا، نحن الآن بصدد استخدام الإسقاط وتمريرها ينسق. لذا فإن أول شيء نحن doing-- لذلك نحن الحصول د، والذي هو البيانات الفردية عنصر من زلزال الفردية القراءة. أول شيء نقوم به هو الحصول على الإحداثيات. كل الحق، لدينا الإحداثيات. 

الشيء الثاني نقوم به هو تمرير ذلك إلى الإسقاط. الإسقاط يحول تلك الإحداثيات إلى قيم بكسل، x و y. ثم آخر شيء نحن تريد القيام به هو مجرد الحصول على خ، هذه الحالة التي هي أول واحد. انها أول من الأمرين التي يتم إرجاعها من قبل الإسقاط. 

ونحن سوف نفعل نفس الشيء بالنسبة ذ. ولكن بدلا من ذلك، سوف نعود العنصر الثاني، ذ. احصل على استعداد لتحديث. أوه، والطابع اضافية لطيفة here--، لدينا وثيقة تعتمد على البيانات هذا إخفاء هذا الملف JSON من الكائنات، جعل الخريطة، وتغيير السمة فيما يتعلق البيانات لذلك المشروع على الخريطة. هذا مثير للاهتمام حقا. هذا هو بارد. 

دعونا نلقي عنه قليلا. أعني، لدينا قطعتين من المعلومات مع كل نقطة البيانات. أعني، ثلاثة. لدينا إحداثيات، وهو x و y. وليس لدينا الحجم. 

نحن بحاجة لترميز حجم بطريقة أو بأخرى. لدينا الكثير من القنوات. يمكننا استخدام اللون. يمكننا استخدام دائرة نصف قطرها. يمكننا استخدام التعتيم. يمكن أن نستخدم أشياء كثيرة في التعليمات البرمجية. أي من هذه الصفات وغيرها الكثير أكثر التي لم يتم سردها هناك، لأنهم اختياري، ونحن يمكن أن استخدام لتشفير هذه البيانات، والسكتة الدماغية وجميع هذه الأشياء لقد ذكر. 

دعونا نفعل دائرة نصف قطرها. أعتقد دائرة نصف قطرها هو الأكثر بديهية. ذلك مرة أخرى، فإننا سوف تحل محل الثابت تلوينها 40 وجعل بعض العمليات الحسابية. سنستخدم النطاق المفضل لدينا مرة أخرى. ونحن الماضي د. ولكن ليس د لأننا نريد حجم د. د هو مجرد نقطة بيانات. ونحن سوف تمر حجم لتوسيع نطاق. 

دعونا نحاول أن مرة أخرى. أوه، أنها لا تعمل. لماذا لا تعمل؟ 

لذلك تذكر ما على نطاق ويفعل. دعونا ننظر في نطاق مرة أخرى. خرائط مقياس من 1 الى 10 من يوم إلى 22-600، أكثر أو أقل. 600 ضخمة. هذا هو السبب في أننا الحصول على هذا. 

لذلك نحن نريد لتغيير حجم أعمالنا إلى شيء أكثر معقولية. دعنا نقول، نريد من 0 إلى 60. 60 هو كبير، ولكن 10 الزلازل نادرة بشكل لا يصدق. في الواقع، لقد حدث أبدا. 

وذلك ما سوف تفعله هو هذا، وسوف يستغرق حجم لدينا أن يذهب 1-10 والخريطة على لتوسيع بها. والخريطة على لمن 0 إلى 60. دعونا تحديث. 

لطيفة، لدينا التصور. هذا شيء عظيم. هذا هو البيانات الفعلية. ستلاحظ، في بلدي لعبة صغيرة سبيل المثال، أكبر زلزال هو حق على رأس واحد منا. ولكن هذا كل شيء. لدينا تاريخ مدفوعة التصور التي تستهلك البيانات ويعطينا حقا معلومات مثيرة للاهتمام. نعم، دعونا نضيف بعض التفاعل إليها. أشرت إلى أن كان قوة قوية من D3. 

حتى هنا، على كل عنصر، ونحن وصف مجموعة من الصفات. ولكن يمكننا أيضا وصف ما نريد أن يحدث مع عناصر التفاعل. على سبيل المثال، فإننا يمكن أن تصف ماذا يحدث عندما كنا الماوس فوق. وتشبه الى حد بعيد ذلك، التي سوف تأخذ وظيفة، تشبه الى حد بعيد سمات كان لدينا من قبل، حيث أننا نفعل شيئا ل العنصر عندما كنا تحوم فوقها. 

لذلك أول شيء نحن بحاجة إلى القيام به هو تحديد هذا العنصر، للعثور عليه في الأساس، في المتصفح. ومن ثم نستطيع أن نضع سمة لذلك. ذلك ما أفعله هنا هو، ونحن عندما تحوم على شيء، وسوف نحصل هذا العنصر ثم قم بتعيين التعتيم ظهرها ل1، لمبهمة تماما. دعونا نرى ما يشبه. 

ويبدو لدينا منقوطة إضافية هنا. حتى إذا كنا تحوم فوق هنا، فإنه يحصل الكامل. ولكن الآن، بطبيعة الحال، فإنه يبقى كامل، لأننا لديك لوصف ما يحدث عندما إزالة المؤشر لدينا. لذلك دعونا نفعل بالضبط على mouseout، في مقابل تمرير الماوس فوق. 

وسنقوم إعادة تعيينها ل ما كان لدينا before-- 0.5. والآن، في كل مرة نحن تحوم، وحصلنا على دائرة كاملة. ويساعدنا على رؤية ما كنا نحن اختيار أساسا. 

والآن دعونا جعل هذا عظيم حقا. دعونا ربط هذه لبيانات حقيقية. لذلك دعونا نسأل يمكن USGS عن البيانات الخاصة بهم. حتى هيئة المسح الجيولوجي الامريكية لديها بيانات عن الزلازل. لديهم API هذا العام قادرة إلى أن تستهلك في شكل JSON. لذلك دعونا نفعل ذلك. 

لذلك هذا هو جزء من التعليمات البرمجية التي يتصل API USGS. وهناك القليل من المعالجة على ذلك. هذا ليس ذي صلة ولكن يبسط عليه إلى تنسيق البيانات بسيط مثل واحد كان لدينا من قبل. لذلك يمكنني التخلص من دعوتنا ل data.json لدينا وهمية على الملف. وبدلا من ذلك، ادعو هيئة المسح الجيولوجي الامريكية أساسا. 

دعونا تحديث، لطيفة. وهذا هو، والبيانات من واقع الحياة الفعلية من هذا الأسبوع لالزلازل. هذا مثير للاهتمام حقا. وهذا ليس مستغربا بالنسبة لنا، ولكن هناك الكثير من الزلازل على الساحل الغربي في ولاية كاليفورنيا. ولكن اعتقد انها كانت مثيرة جدا للاهتمام أن هناك الكثير من الزلازل في ألاسكا، وعلى ما يبدو، هنا في الغرب الأوسط. أعني، مثيرة للاهتمام، ونحن في حالة جيدة. هذا هو الاستنتاج. 

لكن في الأساس، وهذا هو ما يساعد D3 منا القيام به. أنها تساعدنا على البيانات، ربط انها لعناصر في DOM، ويكون تتغير تلك العناصر بوصفها وظيفة للبيانات، لديهم هذه الصفات، جميع العديد من الصفات من العناصر، يكون كل مفيد للقنوات لنقل المعلومات. 

D3 هو قوية بشكل لا يصدق مكتبة وبشكل مثير للدهشة تعمل بشكل جيد. هذه هي بعض الاشياء قوية. التصور البيانات هو أداة قوية بشكل لا يصدق لنقل الناس إلى عميق الأفكار التي يحصل حتى النخاع بهم ويساعدهم على فهم، في بهذه الطريقة العميقة وبديهية، كيف يعمل وكيف بيانات يتغير البيانات حياتنا.