[השמעת מוסיקה] 

DAVID CHOUINARD: אני דוד Chouinard, וזה D3. ברוך הבא. אנחנו הולכים ללמוד על D3 היום. D3 הוא מסגרת JavaScript לבנייה באיכות גבוהה פריטים חזותיים אינטראקטיביים לאינטרנט. דברים כמו מה שאנחנו לראות בחלק האחורי שלי, אנחנו הולכים ללמוד לעשות אותם דברים, סוג של היסודות שלו. אבל זה הולך להיות מגניב. בואו נתחיל מה שהופך את תמונות יפות. יש לנו יותר הדגמות של לקוחות פוטנציאליים זמינים. בואו נעשה את זה. 

המערכה הראשונה, DOM manipulation-- אנחנו הולכים כדי להתחיל מייד עושים דברים מגניבים. קודם כל, בצד השמאל, יש לנו קוד. מימין, יש לנו התוצאה של הקוד שלנו. בואו נעבור את זה. 

בואו נעשה את המעגל. איך זה נשמע? svg.append circle-- רק עשינו מעגל. אתה לא מאמין לי, נכון? זה לא שם. 

אז מה שעשינו כאן הוא, SVG הוא גרפיקה וקטורית מדורגת. זו הדרך שאנחנו מספרים לדפדפן להפוך את הגרפיקה וקטורית בדפדפן. מה בדיוק עשינו עכשיו הוא הוסיף מעגל לגלוש. 

ההבטחה היא שהמעגל דורש קצת תכונות בסיסיות לפני שאנחנו באמת יכולים לראות את זה. אנחנו צריכים להגיד את זה עמדת x, עמדתה y, הרדיוס שלה. אנחנו לא אומרים את זה מכל זה, ולכן אנחנו לא רואים את זה עכשיו. אבל בואו נגיד לה דברים. 

אז קודם כל, יש לך לתת המעגל שלנו שם. אז בואו נקראים לזה המעגל. יש המעגל שלנו שם עכשיו. ובואו לתת לו כמה תכונות. מה דעתך על CX יתרכז x, כך מרכז עמדת x. נניח, 200 עבור 200 פיקסלים. 

בואו לתת אותו y של 200 פיקסלים, כמו גם. וr, רדיוס, של כ 40 פיקסלים. עכשיו בואו לראות. אני לא יכול לאיית. 

הנה לך. יש לנו מעגל בעמדה 200 פיקסלים, 200 פיקסלים, רדיוס של 40 פיקסלים. סוג של מגניב, נכון? יש לנו מעגל. כן. 

כך שאין צורך לבצע יחד. כל דוגמאות הללו, כל הקוד שאני עושה היום יסופק באינטרנט בסוף בצורה של דוגמאות אינטראקטיביות עם מחסומים ב כל מעשה, וכן הלאה. 

בואו לעשות יותר דברים. עיגול שחור זה באמת מכוער. אני מצטער על טעות ש הודעות ממש שם. יש לנו ללכת. 

בואו לתת לו צבע. איך זה? אני רוצה פלדה כחולה. ובכן, המעגל שלנו שינה את צבעיו. זה נהדר. בואו נעשה את זה שקוף למחצה too-- שקוף למחצה. 

אז אלה הם תכונות אנחנו מגדירים במעגל. הדבר הראשון שעשינו הוא אנחנו שמים את המעגל בדף. ואז אנחנו מגדירים חבורה של תכונות. חלקם של אלה נדרשים, כמו CX, CY, ורדיוס. ואחרים הם אופציונליים. 

יש הרבה יותר תכונות. יש הרבה מהם. לדוגמא, יש לנו יכולים שבץ וכן, שבץ של אדום. אבל בואו להסיר את זה. אנחנו חוזרים למעגל, עיגול כחול. 

אז בואו נעשה יותר חוגים. איך זה? בואו נעשה עוד מעגל. זה מרגש, נכון? 

אז להגיד שאני רק מודבק-העתק מה היה לנו כבר. בואו נקראים לזה circle2. ובואו נעשה מדויק ואותו דבר נותן לי תכונות, ניתנה עמדת x 300. Yay, יש לנו שני עיגולים עכשיו. 

וכמובן, שיכולנו לעדכן ערכים אלה. אני יכול לשים אותו ב 400, וכעת הוא נע. ומכיוון שזה מעצבן, בוא להסיר אותו, כך circle2.remove. עכשיו הוא נעלם. 

אז מה שאנחנו עושים ו הוא פשוט מאוד, very-- זה דומה מאוד למה שאתה יכול לעשות בjQuery, למשל. אנחנו רק מניפולציה DOM, שזה נקרא. אולי שמע את המילה הזאת לפני. אנחנו יוצרים דברים, הגדרה תכונות על דברים, הסרת חומר. 

עכשיו, כאן זה נהיה מעניין. אז מאוחר יותר בקוד, אנחנו עדיין יכולים מתייחס למעגל המקורי כאן. אז בואו לאפס תכונתה לCX. נניח, עמדת x ל -400. ואני הולך למעבר ש, כך שזה ברור. יש לנו ללכת. 

אז הוספנו מעגל. אנו קובעים כמה תכונות. הוספנו עוד מעגל, הסרתי אותו. ואז אנחנו שינוי המעגל המקורי. 

אבל כאן זה נהיה הרבה יותר מעניין. לא רק אנחנו יכולים להגדיר תכונות כרק ערכים, אנו יכולים לומר, היי, המעגל, ללכת למצב את 200. אנחנו גם יכולים להגדיר אותם כפונקציות. 

אז במקום לתת 400 כאן, אנחנו יכולים לעשות את חישוב כמה על לטוס למה שאנחנו רוצה תכונה שכדי להיות. אז ככה היית לבטא את זה. אנחנו אומרים, במקום 400, תנו לי אתן לך פונקציה במקום. והנה, בתוך פונקציה זו, אנחנו יכולים לעשות את כל חישוב מטורף. 

אנחנו יכולים לקחת את הזמן ו מסתכל על משהו אחר ודינמי להחליט ב המעגל מה ערך שאנחנו רוצים. מה דעתך עלינו רק לתת לי היא מחזיקה בעמדת x אקראית? אז זהו זה. 

אז מה שאומר הוא, ל כל x, לרוץ בפונקציה זו. ומה שאנחנו עושים הוא חישוב כמה דברים, זמנים אקראיים הרוחב וחוזר ש. אז בכל פעם שאנו נתקלים ש, אנחנו מקבלים המעגל שהולך למקום אקראי. זה סוג של מגניב. אני מרגיש כאילו אני יכול להסתכל בשלב זה לקטן. אנחנו מתחילים להגיע ל משהו מעניין כאן. בואו נעשה את זה מונע נתונים כעת. אין נתונים כאן. בואו לשנות את זה. 

Documents-- מערכה השני, הנתונים מונעים אז בואו נחזור לכאן. ובואו פשוט להיפטר מcircle2, כי אנחנו רק הוספה והסרה זה. אז אנחנו לא באמת צריכים את זה. אנחנו צריכים להיות חכמים הרבה יותר כאן. בואו נגיד, שיש לנו כמה נתונים מסוג כלשהו. אחד moment-- נניח, היו לנו נתונים של טופס זה. היו לנו מערך, רק חבורה של מספרים. יש לנו שבעה מספרים כאן, כל סכום represent-- אלה בחשבון הבנק של אנשים, איך כמה הם שוקלים, אלוהים יודע מה. 

אלה הם מספרים, ואנחנו רוצה להשתמש בחוגים שלנו כדי לייצג את המספרים האלה איכשהו. אנחנו רוצים לקשור אותנו חוגים למספרים האלה. אז מה שאנחנו עושים. בואו נגיד, שאנחנו רוצים המעגל עבור כל מספר. אנחנו יכולים לעשות את הישן דבר היינו doing-- צרף המעגל וcircle2 וcircle3. אבל זה יוצא מכלל שליטה, ו יש הרבה היגיון לחזור. 

אז בואו לקבל חכם יותר עם זה. במקום להשתמש במעגל var svg.append שרק משתמשים ב, אנחנו הולכים להשתמש ב הבלוק הקטן הזה כאן. אני לא רוצה ללכת לעומק למה שכל החלקים האלה לעשות. וזה סוג של נושא מתקדם. ולוואי שיכולתי. 

אבל דבר המפתח לrecognize-- ו תראה הוא לעתים קרובות מאוד בקוד D3. בלוק זה של טקסט בסיסי יוצר מעגלים רבים כפי שיש אלמנטי נתונים במערך זה ממש כאן. אז זה יוצר כמה שיותר חוגים כמו שיש אלמנטים. זה הולך ליצור לנו שבעה מדורים. והיא עושה את דבר באמת, באמת מפתח. אז בואו לרוץ ש. בואו להסיר המעגל האחר שלנו. בואו רק להגיב זה להיפרד החוצה ולהפעיל את זה שוב. 

יש לנו ללכת. אז המעגל שלנו כאן הוא כהה יותר הרבה, בגלל שאנחנו יש שבעה מעגלים, אחד על גבי השני. אנחנו פשוט יצרנו שבעה מעגלים, אחד כל אחד עבור כל אחד מרכיבי נתונים אלה. אבל יש דבר מרכזי שקרה עם קטע זה ממש כאן. 

זה שהנתונים היו קשור. אז כל אחד ואחד רכיבי נתונים אלה, 10, 45, 105, היה כבול למעגל מסוים. אז אלה לא נוצרו רק חבורה של חוגים אבל קושר שני הדברים האלה יחד. 

ובעתיד, משום שיצרנו אותם חוגים עם פונקצית D3 זה, אם אני נותן לך מעגל, אתה יכול תן לי את הנתונים הקשורים אליו. אז אנחנו יכולים לשאול D3. היי, D3, יש לי את המעגל הזה. מה הנתונים שיש לו את המעגל? וD3 היה אומר לנו 10 או 45 או 105. 

הדברים האלה חייבים. זה רעיון מאוד, מאוד בסיסי. בואו נסתכל על זה. 

אז הדרך היינו שואלת D3-- כך זה אינו רלוונטי לכך, אבל רק תאמין לי על זה. כך אנו מבקשים D3. היי, D3, תן לי הראשון המעגל שאתה יכול למצוא. תן לי את המעגל הראשון שאתה יכול למצוא. ואז נוכל לשאול D3, מה נתונים על ש, כמו זה, 10. 

אז אנחנו פשוט לשאול D3, למצוא אותי המעגל הראשון שאתה יכול למצוא. מה הנתונים שלה? 10, כי הוא אכן שלנו אלמנט נתונים ראשון. אנחנו יכולים לשאול אותו, היי, D3, תמצא אותנו המעגל השלישי שלנו. 105. למה זה באמת חשוב? 

אז כאן, שציינתי שאנחנו יכולים להשתמש בפונקציות. ואני ציינו שהיה דבר חזק מאוד. אז לא רק יכולים הפונקציות שלנו לעשות דברים כמו לעשות קצת חישוב, למשל, לחזור מספר אקראי, זה יכול גם לעשות דברים המבוססים על הנתונים. זה מה שמסמכי הנתונים מונעים אומר. זה מה שעומד D3 ל. 

אז זה x postition-- במקום של רק אומר, כל החוגים, לקבל את עמדת x 200, אנחנו יכול לתת לו תפקיד. וכאן, אנחנו יכולים לעשות את החישוב כמה. וד כאן עומד במקום לנתונים. אז בכל פעם שיש לנו מעגל, בעצם, D3 ייצור שבעת חוגים אלה. ולאחר מכן לכל 

המעגל, זה הולך ללכת, היי, circle1 מה העמדה שלך x. בעבר, היינו תמיד לענות 200. אבל עכשיו, בכל פעם ששואל D3 שלנו מה העמדה שלך x, זה הולך לתת us-- יש לנו כי המעגל, אז יש לנו את הנתונים. זה הולך לתת לנו את הנתונים ואומרים, מה אתה רוצה להיות האקספוזיציה, בהתבסס על נתונים ש. 

בואו פשוט להחזיר את הנתונים בפועל. אז אם אנחנו רצים זה, זה נותן לי הנתונים מונעים על מסמכים. חוגים אלה מבוססים בposition-- ביחס הם בסיסים כפונקציה של נתונים. 

אז למעגל הראשון, D3 מעמיד. מעגל ולאחר מכן D3 שואל אותנו, מה לעשות אתה רוצה להיות האקספוזיציה. ואנחנו רק אומרים, הנתונים כל מה ש. הפוך את התערוכה 10. 

ואז זה שואל, מה אתה רוצה אקספוזיציה להיות למעגל השני. ואנחנו תענו, 45. ואנחנו, כמובן, יכולים לעשות כמה חישובים כאן. אני מוצא שחוגים אלה הם סוג של נמעך עד. 

אז הכפיל אותו ב 3, להכפיל את הנתונים על ידי 3. רק המעגל שלנו יש הרחיב החוצה. הערך שלנו שולש. 

המעגל הוא באמת על הקצה, אז בואו אולי סוג של קיזוז זה. נניח, ב -20. הנה לך. 

זה נתונים להדמיה. זה מאוד בסיסי, אבל זה נותן לנו כמה תובנות הנתונים שלנו. הוא אומר לנו, למשל, אנחנו יש לקבוצה קטנה של אלמנטים. ויש לנו נתון חריג גדול כאן. זה נותן לנו קצת מידע על ההפצה. 

אם היינו, למשל, לשנות נתונים 150 כאן ורענון ל, ההדמיה שלנו משתנה. מסמך זה הוא הנתונים מונעים. 

אז כמובן, כל האלמנטים האלה, כל התכונות הללו כאן, אנחנו יכולים להשתמש בפונקציה, לא רק המספרים, לא רק x ועמדות y. כדי שנוכל להשתמש בפונקציה של הצבע. כך תהיה לנו לעשות את אותו הדבר. אנחנו ניתן לו תפקיד. 

ונניח, שיש לנו יכולים תניות בתפקוד שלנו. פונקציה זו יכולה להיות מאה מתורים ארוכים. הוא יכול לעשות דברים מאוד, מאוד מסובכים. 

אז בואו לשים אם הצהרה כאן. נניח, אם הנתונים שלנו הוא פחות מ -50, זה סף מסוים כי אנחנו מתעניינים מסיבה כלשהי. בואו נעשה את זה ירוק. אחרת, בואו נעשה את זה אדום. איך זה? נחמד. 

אז נתונים להדמיה שלנו מתחילה כדי להעביר מידע מעניין יותר בערוצים רבים. אז עכשיו אנחנו יודעים קצת על ההפצה. ואנחנו יודעים שיש איזה סוג של מנותק בגיל 50 שאנחנו מעוניינים בו. אנחנו יודעים שיש שתי נקודות נתונים מתחת לסף ושרובם לעיל. 

אז כצעד סופי, נתונים זה כאן, זה מאוד נדיר לראות את זה ככה. אז בואו פשוט להעביר את זה למשתנה כי זה נקי יותר, כמו זה. ולאחר מכן אנו משתמשים משתנים שכאן. זה בדיוק אותו דבר. זה רק קצת יותר נקי. 

בשלב הבא, מערכה שלישית, Scales-- אז בעיה אחת נכון כאן הוא, אם נשנינו הנתונים בvalue-- 200 זה אם נשנינו אותו ל -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 פיקסלים והוא squishes החוצה, אנחנו יכולים לקבל את זה over-- אנו יכולים להרחיב אותו, או ש יכול להפחית את השוליים שמאליים זה ל משהו פחות או יותר מ -20. מספרים אלה, אלה מקודדים קשים מספרים עכשיו הגיוניים לנו. 

ואנחנו יכולים לעשות הרבה יותר דברים מעניינים גם כן. אז במקום שיש ליניארי קנה מידה, שאולי רוצה להיכנס בקנה מידה. וזה ייתן לנו קנה מידת יומן. 

אז עכשיו בקנה מידה שלנו, במקום רק הרחבת את מגוון ש, הוא עושה דברים מתוחכמים יותר. במקום שיש טווח זה קשה מקודד, ובמקום שיש כי 600, אנו עשויים רוצים רק כדי להשתמש ברוחב, כך בין 20 ל הרוחב מינוס 40, 2 פעמים השוליים בצד השני. וזה עושה הרבה יותר הגיוני מישהו שאולי לעיין בקוד. 

מעניין, את הכף לקבל מאוד, מאוד מתוחכם, כמו גם. הם עושים הרבה דברים מעניינים. אז אין לי קשקשים בהכרח לפעול רק במספרים. בואו נעשה את סולם צבעים. 

אז הטווח שלנו יכול be-- התחום שלנו הוא 1 ל 200. זה דבר הקלט. אבל יתכן שעלינו למפות מ מירוק לאדום, למשל. ועכשיו, אם אנחנו עוברים אותו 1, אנחנו הולכים לקבל ירוקים. אם אנחנו נותנים לו 200, נקבל אדומים. ואם אנחנו עוברים את זה משהו באמצע, זה הולך להיות קצת תערובת של ש, אי שם בשיפוע בין ירוק ואדום. 

ובמקום שיש היגיון מגושם סוג זה יש לנו כאן עם מותנה ממש שם, יש לנו יכול something-- קנה מידה ליניארי בין אלה. אז היינו משתמש בקנה המידה שרק נוצר, שבו אנו נקראים צבע. והיינו נותנים לו D, ש הוא אלמנט הנתונים שלנו. ויש לנו ללכת. יש לנו בקנה מידה צבע. 

אז זה מיפוי. אז השמאל הקיצוני הוא ירוק לחלוטין. ימין הקיצוני הוא אדום לגמרי. וכל מה שבין היא פונקציה של d. יש לנו מעניין פריטים חזותיים כאן. אבל הנתונים שלנו היו די משעמם. בואו לראות מה אנחנו יכולים לעשות אם היו לנו נתונים מעניינים יותר. 

המערכה הרביעית, עבודה עם Data-- הדבר הראשון אנחנו רוצים לעשות כדי להפוך אותנו הדמיה מעניינת יותר הוא להעביר את הנתונים במקום אחר. זה מאוד מסורבל ליש לי נתונים מקודדים קשה כאן. ובאופן כללי, נהיה לשאול מישהו לנתונים אחר. אנחנו נהיה אולי מבקשים מהממשלה, הלשכה לסטטיסטיקה, מה הנתונים שלך ולאחר מכן קשירת קשר זה או שואל איזו ישות של צד שלישי לחלק מנתונים ולאחר מכן בנייה הדמיה שב. 

אז הדבר הראשון שאנחנו רוצים לעשות הוא להעביר את זה למקום אחר. אז אני הולך ליצור להגיש data.json כאן בשם. JSON הוא תבנית נתונים. אתה לא צריך לדעת על זה יותר מדי. ואנחנו הולכים להעתיק נתונים קטנים שיש לנו שם, הדבק אותו לשם מילה במילה, ללכת בחזרה לקוד ההדמיה שלנו כאן, ולהשתמש בפונקציה זו ממש כאן. אתה לא צריך לדעת את הפרטים. אבל מה זה יעשה הוא, היא תמצא את הקובץ ש, להביא אותו, ולהחזיר אותו אלינו. אז מה המשמעות של זה הוא, זה הולך ולקבל את קובץ data.json. ולאחר מכן את כל הקוד זה מסוכסך inside-- במהות, כל הקוד שיש לנו there-- יהיה לפעול רק כאשר אנחנו מקבלים את הנתונים בחזרה. ואז זה הולך לרוץ ש קוד עם הנתונים שיש לנו. גדול, יש לנו הדמיה ששאילתות עבור חלק מהקוד איפשהו אחר, שהיא בדרך כלל שבו שאילתות כמה נתונים מ במקום אחר, שהיא בדרך כלל איך חזותי לעבוד. 

אבל אני רוצה לחזור לנתונים. כך שנתוני יסודו בD3-- D3 צורכת נתונים זה רשימה של דברים. D3 מצפה נתונים פשוט להיות רשימה דברים, מערך של דברים. זה לא משנה מה הדברים האלה הם, כל עוד זה מערך שלהם. 

אז הנה, לדוגמא, אנחנו יכולים של כמובן שערכי נקודה צפו. יש לנו יכול תשלילים. D3 לא אכפת, כל כך הרבה זמן כמו שזה רשימה של דברים. 

דברים מעניינים כפי ש יכול להיות, אנחנו גם יכולים יש רשימה של מחרוזות כאלה. אז אלה הם כותרות Crimson הרמתי לפני כמה ימים. ואולי אתה יכול למצוא כמה מעניין דברים על כותרות הללו. 

אז שוב, זה רשימה של דברים. לא אכפת לי D3. אלה יקרו להיות מחרוזת. אנחנו כבר שינו את הנתונים שלנו. 

בואו נחזור להדמיה שלנו. עכשיו, להדמיה שלנו מצפה הקלט להיות מספרים. אז אנחנו הולכים ליש לי כדי לעשות כמה שינויים. כך למשל, קודם כל, אולי אנחנו רוצים לשים חוגים אלה יחד לפי אורך הכותרת, מספר התווים בכותרת. 

אז מה אנחנו נעשה is-- כל זמן שלנו פונקציה נקראת עם מחרוזת, אנחנו תמצאו שזה אורך ו לאחר מכן להעביר את זה לקנה מידה. הצבע, אני אחזור כי לפלדה כחולה. ויש לנו ללכת. יש לנו הדמיה כותרות של Crimson. 

בקנה מידה שלנו הוא מסיבי. הבה נניח כי הארוך ביותר הכותרת היא ארוכה עד 100 תווים, כך להקיף את זה קצת. ויש לנו שם ויזואליזציה. כך זה נראה שרוב הכותרות די קרובים זה לזה, במונחים של קו אופי. אבל אחד יש באמת בולט. 

אנחנו יכולים לבנות כמה כלים לחקור את זה יותר. אבל כאשר אני עובד על זה, אני היה סקרן אם, במערך נתונים זה, כותרות עם מעי גס בהם יהיה ארוך יותר. אני מניח שהם היו. 

אז בואו לגלות. בואו להשתמש בצבע ערוץ כמו שעשינו לפני, כדי לקודד כמה לגבי השאלה אם יש מעי גס או לא. לכן אנו נשתמש מותנים שוב. אתה לא צריך לדעת הפרטים של זה, אבל ככה אנחנו בודקים מחרוזת לאופי מסוים ב- JavaScript, שוב, לא רלוונטי. 

אבל אם אנחנו לא מוצאים מעי גס, נחזור ירוק. ואם אנחנו עושים, נחזור אדומים. אז שוב, כותרות ש יש לי מעי גס יהיה אדום. זה מה שזה means-- נחמד. 

לכן נראה כי השערה היא שחוקה. יש רק שני. יש לנו רק שש נקודות נתונים ורק שתיים היו נקודותיים. אבל זה נראה קצת יותר בסופו של הדבר נמוך יותר, למעשה. כותרות עם נקודותיים נראות להיות בדרך כלל קצר יותר, לפחות בנתונים שלנו set-- מעניין. 

בואו נחזור של פלדה כחולה ואז לראות מה אנחנו יכולים לעשות עם אף נתונים מעניינים נוסף. אז שוב, אני ציינו ש הנתונים בD3 הוא רשימה של דברים. ראינו מספרים מסוגים רבים. ראינו מחרוזות. אבל הדברים יכולים להיות גם אובייקטים. 

הם יכולים להיות דברים מסובכים שכולל הרבה דברים. לומר שבצורה ברורה יותר, ברוב המקרים, אנחנו רוצה לבנות בכל נקודת נתונים כ יותר מסובך מסתם ערך אחד. אם היית לדמיין מסד הנתונים על תלמידים, ייתכן שיש תלמיד שם, תעודת סטודנט, והרבה דברים הקשורים עם רקורד מסוים, לא רק מחרוזת או מספר. אז בואו נסתכל על זה. 

זה נתונים אחד כזה להגדיר. זה נתונים שנקבעו על רעידות אדמה. אז כל מה שכאן ברשימה או המערך שלנו דברים מכיל הרבה דברים עצמו. אז כל נקודת נתונים יש גודל ולתאם. ומרכז את עצמם מכיל שני דברים. 

אז כל יום הוא עכשיו הרבה יותר מסובך ומעניין הרבה יותר והוא מכיל הרבה יותר מידע מעניין. בואו לראות שאנחנו יכולים לבנות את זה. חוזר חזרה לכאן, שוב, באמצעות ההדמיה מעגל היסטוגרמה שלנו בנינו, בואו נראה אם ​​אנחנו יכולים לבנות הדמיה של הפצת גודל בקבוצת הנתונים שלנו. 

אז הנה, זה אותו הרעיון. אבל עכשיו, ד מכיל יותר דברים. ד מכיל אלמנטי נתונים רבים. אז אנחנו מקבלים ד בחזרה. D3 נותן לנו ד. ואנו מגיבים על ידי מציאת הגודל ד ולאחר מכן עובר לקנה מידה ש. 

ואז אנחנו צריכים לשנות בקנה מידה שלנו, כמובן. אז בהירויות לעשות פשוט לא ללכת הרבה יותר מ -10. למעשה, יש מעולם לא היה רעידת אדמה בסדר גודל 10. אבל זה סוג של העליון שלנו הסוף, הספקטרום העליון שלנו. 

בואו לרענן. נחמד, יש לנו שם ויזואליזציה. זה מעניין כל כך note-- יש שתי נקודות נתונים ש כמעט בדיוק זה על גבי זה אחר, במונחים של גודל. אתה רואה את זה על ידי האטימות אנו משתמשים. 

יש לנו נתונים גיאוגרפיים עכשיו. יש לנו קווי רוחב והאורך. אולי נוכל לעשות משהו הרבה יותר מעניין עם זה. בואו למצוא עוד קצת דרך מעניינת לדמיין זה יותר מסובך הנתונים שיש לנו גישה ל. 

המערכה החמישית, Mapping-- ביסוד, אנחנו רוצים לשים את אלה על מפה. אני מתכוון, זה לאן זה הולך. אנחנו רוצים לקודד מידע על עמדה של קריאות רעידת האדמה הבאות, כמו גם הגודל שלהם, כי יש לנו את זה עכשיו. אנו מבינים כיצד לצרוך נתונים מסובכים יותר. 

הדבר הראשון שנעשינו הוא ליצור מפה, מפת רקע. אני הולך לעבור זה מהר מאוד. זהו קוד מסובך. זה עוד אחד מאותם מתכונים שאתה עושה לא ממש צריך להבין באופן מלא כדי שתוכלו להשתמש. אבל זה קוד. קוד זה ממש כאן יוצר מפה. 

אנחנו לא מתכוונים ללכת בפירוט. אבל באופן שטחי, מה שהיא עושה הוא, זה שאילתות בקובץ זה us.json, ש מקורו של קובץ נתונים כמו שהיינו לנו בעבר. זה יותר מורכב, כמובן. אבל במקרה הזה, כל מה ש, כל נקודת נתונים היא מצב זה ויש לו רשימה של קווי רוחב והאורך המגדירים את המצולע, טופס ש, מדינה ש. 

אז מה D3 יעשה דומה למה שעשינו בעבר. זה יבקש וש לאגד כי לאלמנט. ויש פונקציה ש ימפה אלמנט שיצא, המבוסס על קווי הרוחב והאורך. אתה יכול לקרוא עוד על כך ב. ואני ממליץ עליו. 

ישנם קישורים ב סוף הקוד זה פורסם. והקוד הגיב. ביש קישורים לעוד על זה. אני ממליץ לך לבדוק את זה. אבל מה אכפת לנו הוא פונקצית הקרנה זו. אני רוצה לעבור את זה. 

קודם כל, תן לי להראות אתה, כן, יש לנו מפה. מפות הם מגניבים. אז בואו נסתכל על זה פונקצית ייצור. 

הקרנה היא מאוד כמו סולם, סולמות שוב. אז מה ייצור ל פונקצית הקרנה זו אין הוא, אנחנו יכולים לעבור את זה קו אורך וlatitudes-- במקרה זה, ערכים אלה הם כאן לאט-משתוקק של הבניין אנחנו יושבים בימין now-- להקרנה. והקרנה תהיה להמיר כי לערכי פיקסל x ו- y. 

אז מה עושה הקרנה דומה מאוד לקנה המידה שלנו. זה לוקח קווי הרוחב שלנו ו קו אורך, המייצג את כל עולם ומתכווץ ואומד ש עד לכיכר שאנחנו רוצים, שנתנו לו. במקרה זה, אנחנו עובר את הערכים הללו. וזה נותן לנו, גם, ש על המסך שלך אומר 640 פיקסלים. כל מסך זה הוא 700 פיקסלים רחב, כך שגורם לנו עליו כאן, ו -154 פיקסלים למטה, שהייתי הערכה היא פחות או יותר כאן. 

אז לקחת אותם לאט-מתגעגע, ש מייצג משהו על הגלובוס כולו ולמעוך ומרגש שסביב כדי לתת לנו x וערכי פיקסל y, זה הדבר הראשון זה נעשה בקוד מיפוי זה. ולאחר מכן את שאר קוד צורכת נתונים ואז לאט-מפות משתוקק אלה עלה על משהו על המסך שלך. 

אבל אנחנו הולכים להשתמש בהקרנה זו פונקציות, כי מתברר יש לנו משתוקק לאט-משתוקק גם כן. במבט לאחור על נתונים שלנו, יש לנו קווי רוחב ואורך לכל תצפית. אז בואו להשתמש הקרנה. 

אז מסתכל על התערוכה שלנו, אנחנו רוצים exposition-- יש לנו קו רוחב וקו אורך. אבל אנחנו רוצים ערכי פיקסל. ומתברר, שיש לנו בדיוק מה שאנחנו want-- הקרנה. ממש כמו שהיינו באמצעות קנה מידה ממש כאן, עכשיו אנחנו הולכים להשתמש הקרנה ולהעביר אותו המרכזת. אז הדבר הראשון אנחנו doing-- כך שאנחנו ד מקבל, שהוא נתונים אישיים אלמנט של רעידת אדמה בודדת קריאה. הדבר הראשון שאנחנו עושים הוא לקבל את הקואורדינטות. בסדר, יש לנו את הקואורדינטות. 

הדבר השני שאנחנו עושים הוא להעביר את זה הלאה להקרנה. הקרנה ממירה קואורדינטות אלה לערכי פיקסל, x ו- y. ואז הדבר האחרון שאנחנו רוצה לעשות הוא פשוט לקבל את x, שמקרה זה הוא ראשון. זה הראשון של שני הדברים שמוחזרים על ידי הקרנה. 

אנחנו נעשה את אותו הדבר עבור y. אבל במקום זה, נחזור האלמנט השני, y. תתכונן לרענון. אוו, דמות נוספת here-- נחמד, יש לנו מסמך מונע נתונים זה הסתרת קובץ JSON זה של חפצים, מה שהופך את המפה, ושינוי מייחס ביחס לנתונים להקרין אותו על מפה. זה באמת מעניין. זה מגניב. 

בואו ניקח את זה צעד אחד קדימה. אני מתכוון, יש לנו שתי חתיכות של מידע בכל נקודת נתונים. אני מתכוון, שלוש. יש לנו את הקואורדינטות, אשר הוא x ו- y. ויש לנו את הגודל. 

אנחנו צריכים לקודד גודל איכשהו. יש לנו הרבה ערוצים. אנו יכולים להשתמש בצבע. אנו יכולים להשתמש ברדיוס. אנו יכולים להשתמש באטימות. אנו יכולים להשתמש בהרבה דברים בקוד. כל תכונות ורבות אלה יותר שאינם מופיעים שם, בגלל שהם לא חובה, שיכולנו להשתמש בו כדי לקודד נתונים זה, השבץ וכל הדברים האלה שהזכרנו. 

בואו נעשה רדיוס. אני חושב שרדיוס הוא אינטואיטיבי ביותר. אז שוב, אנחנו נחליף כי בקידוד קשיח 40 ולעשות כמה חישובים. אנו נשתמש בקנה מידה המועדפת עלינו שוב. ואנחנו העבר ד. אבל לא d כי אנחנו רוצים את הגודל ד. ד הוא רק נקודת נתונים. אנחנו נעבור את הגודל לגודל. 

בואו ננסה את זה שוב. אוו, זה לא עובד. למה זה לא עובד? 

אז זוכר מה עושה בקנה מידה. בואו נסתכל שוב בקנה המידה. מפות בקנה מידה 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 המזויף שלנו על קובץ. ובמקום זאת, אני מתקשר USGS במהות. 

בואו לרענן, נחמד. זה הנתונים בפועל, בחיים אמיתיים משבוע לרעידות אדמה זו. זה באמת מעניין. הדבר אינו מפתיע עבורנו, אבל יש הרבה רעידות אדמה ב החוף המערבי בקליפורניה. אבל חשבתי שזה היה מאוד מעניין כי היו כל כך הרבה רעידות אדמה באלסקה, וככל הנראה, כאן במערב התיכון. אני מתכוון, מעניין, ואנחנו טובים. זה המסקנה. 

אבל ביסודו, זה זה מה שעוזר לנו לעשות D3. זה עוזר לנו לקחת את הנתונים, תכופף אותו לגורמים בDOM, ויש להם אלמנטים לשנות כפונקציה של נתונים, יש את התכונות, את כל תכונות רבות של האלמנטים, כל להיות שימושי עבור ערוצים להעברת מידע. 

D3 הוא חזק מאוד ספרייה ומדהימה גם לרוץ. זה כמה דברים חזקים. נתונים להדמיה היא כלי רב עצמה להעברת לאנשים עמוקים תובנות שמגיעות לליבה שלהם ועוזר להם להבין, ב דרך עמוקה ואינטואיטיבית זו, איך עובד ונתונים איך נתוני שינויים בחיים שלנו.