1 00:00:00,000 --> 00:00:00,780 2 00:00:00,780 --> 00:00:11,880 >> [เล่นเพลง] 3 00:00:11,880 --> 00:00:16,480 >> DAVID บอนี่: ฉันเดวิด บอนี่และนี่คือ D3 4 00:00:16,480 --> 00:00:17,700 ยินดีต้อนรับ 5 00:00:17,700 --> 00:00:21,270 เรากำลังจะไปเรียนรู้เกี่ยวกับ D3 วันนี้ 6 00:00:21,270 --> 00:00:25,020 D3 เป็นกรอบ JavaScript สำหรับการสร้างที่มีคุณภาพสูง 7 00:00:25,020 --> 00:00:28,110 การสร้างภาพแบบโต้ตอบสำหรับเว็บ 8 00:00:28,110 --> 00:00:30,870 สิ่งที่ชอบสิ่งที่เรากำลัง เห็นในด้านหลังของฉัน 9 00:00:30,870 --> 00:00:34,230 เราจะเรียนรู้ที่จะทำให้ผู้ที่ สิ่งที่ชนิดของพื้นฐานของมัน 10 00:00:34,230 --> 00:00:36,452 แต่มันก็เป็นไปได้เย็น 11 00:00:36,452 --> 00:00:38,160 ขอเริ่มต้น ทำให้ภาพสวย 12 00:00:38,160 --> 00:00:41,108 13 00:00:41,108 --> 00:00:44,350 เราได้มีการสาธิตมากขึ้น ของลูกค้าที่มีอยู่ 14 00:00:44,350 --> 00:00:48,040 15 00:00:48,040 --> 00:00:50,760 ลองทำมัน 16 00:00:50,760 --> 00:00:58,700 >> ทำผม, DOM manipulation-- เรากำลังจะ ที่จะเริ่มต้นทันทีทำสิ่งดีๆ 17 00:00:58,700 --> 00:01:01,240 แรกของทุกด้านซ้ายเรามีรหัส 18 00:01:01,240 --> 00:01:03,470 ด้านขวาเรามี ผลของรหัสของเรา 19 00:01:03,470 --> 00:01:04,900 Let 's go ผ่านมัน 20 00:01:04,900 --> 00:01:05,780 >> ขอให้เป็นวงกลม 21 00:01:05,780 --> 00:01:08,570 เสียงที่ไม่อย่างไร? 22 00:01:08,570 --> 00:01:14,934 svg.append วงกลม เราเพิ่งทำวงกลม 23 00:01:14,934 --> 00:01:16,100 คุณไม่เชื่อฉันใช่มั้ย? 24 00:01:16,100 --> 00:01:18,190 มันไม่ได้มี 25 00:01:18,190 --> 00:01:21,830 >> ดังนั้นสิ่งที่เราทำที่นี่คือ SVG เป็นกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ 26 00:01:21,830 --> 00:01:27,530 นี่คือวิธีที่เราบอกเบราว์เซอร์ ทำให้กราฟิกแบบเวกเตอร์ในเบราว์เซอร์ 27 00:01:27,530 --> 00:01:30,740 สิ่งที่เราได้ทำในขณะนี้ จะมีการเพิ่มวงกลมเพื่อเรียกดู 28 00:01:30,740 --> 00:01:34,790 >> สัญญาที่เป็นวงกลม ต้องใช้บิตของคุณลักษณะพื้นฐาน 29 00:01:34,790 --> 00:01:36,850 ก่อนที่เราจะสามารถมองเห็นมัน 30 00:01:36,850 --> 00:01:40,045 เราต้องบอกว่าตำแหน่ง x ของ และตำแหน่งของรัศมี 31 00:01:40,045 --> 00:01:43,310 เราไม่ได้บอกว่าการใด ๆ ที่ ดังนั้นเราไม่เห็นได้ในขณะนี้ 32 00:01:43,310 --> 00:01:46,210 แต่ขอบอกสิ่งที่มัน 33 00:01:46,210 --> 00:01:49,510 >> ดังนั้นแรกของทั้งหมดที่คุณมี เพื่อให้วงกลมของเราชื่อ 34 00:01:49,510 --> 00:01:53,070 ดังนั้นขอเรียกว่าวงกลม 35 00:01:53,070 --> 00:01:54,406 วงกลมของเรามีชื่อในขณะนี้ 36 00:01:54,406 --> 00:01:57,230 37 00:01:57,230 --> 00:01:59,490 และขอให้มันไม่กี่คุณลักษณะ 38 00:01:59,490 --> 00:02:03,690 วิธีการเกี่ยวกับ CX จะศูนย์ x ดังนั้น ศูนย์กลางของตำแหน่ง x 39 00:02:03,690 --> 00:02:06,730 สมมติว่า 200 200 พิกเซล 40 00:02:06,730 --> 00:02:10,220 >> ขอให้มัน y ของ 200 พิกเซลเป็นอย่างดี 41 00:02:10,220 --> 00:02:16,032 และ R, รัศมีประมาณ 40 พิกเซล 42 00:02:16,032 --> 00:02:16,950 ตอนนี้ขอดู 43 00:02:16,950 --> 00:02:21,740 44 00:02:21,740 --> 00:02:23,440 ฉันไม่สามารถสะกด 45 00:02:23,440 --> 00:02:30,430 46 00:02:30,430 --> 00:02:31,520 >> มีคุณไป 47 00:02:31,520 --> 00:02:37,330 เรามีวงกลมที่ 200 ตำแหน่ง พิกเซล, 200 พิกเซล, รัศมี 40 พิกเซล 48 00:02:37,330 --> 00:02:38,280 ชนิดของเย็นใช่มั้ย? 49 00:02:38,280 --> 00:02:38,988 เรามีวงกลม 50 00:02:38,988 --> 00:02:40,880 ใช่ 51 00:02:40,880 --> 00:02:42,670 >> ดังนั้นจำเป็นที่จะต้องทำตามไม่ 52 00:02:42,670 --> 00:02:45,790 ตัวอย่างทั้งหมดเหล่านี้ทั้งหมด รหัสที่ฉันทำในวันนี้ 53 00:02:45,790 --> 00:02:51,300 จะมีการจัดออนไลน์ในตอนท้าย ในรูปแบบของตัวอย่างแบบโต้ตอบ 54 00:02:51,300 --> 00:02:54,010 กับจุดตรวจที่ ทุกการกระทำและอื่น ๆ 55 00:02:54,010 --> 00:02:55,160 >> ลองทำสิ่งอื่น ๆ อีกมากมาย 56 00:02:55,160 --> 00:02:58,901 นี้วงกลมสีดำน่าเกลียดจริงๆ 57 00:02:58,901 --> 00:03:01,541 ฉันขอโทษสำหรับข้อผิดพลาดที่ ข้อความที่นั่น 58 00:03:01,541 --> 00:03:05,340 มีที่เราจะไป 59 00:03:05,340 --> 00:03:06,350 >> ขอให้มันสี 60 00:03:06,350 --> 00:03:07,170 ที่ได้อย่างไร? 61 00:03:07,170 --> 00:03:08,340 ผมชอบที่จะเหล็กสีฟ้า 62 00:03:08,340 --> 00:03:13,280 63 00:03:13,280 --> 00:03:16,030 ดีวงกลมของเราเปลี่ยนสี 64 00:03:16,030 --> 00:03:17,320 นั่นวิเศษมาก 65 00:03:17,320 --> 00:03:31,330 ขอให้มันกึ่งโปร่งใส too-- กึ่งโปร่งใส 66 00:03:31,330 --> 00:03:33,670 >> ดังนั้นเหล่านี้เป็นคุณลักษณะ เรากำลังกำหนดบนวงกลม 67 00:03:33,670 --> 00:03:36,774 สิ่งแรกที่เราทำคือ เราใส่วงกลมบนหน้าเว็บ 68 00:03:36,774 --> 00:03:38,690 และจากนั้นเราจะกำหนด พวงของคุณลักษณะ 69 00:03:38,690 --> 00:03:41,610 บางส่วนของเหล่านี้จะต้อง เช่น CX, CY และรัศมี 70 00:03:41,610 --> 00:03:42,680 และอื่น ๆ ที่เป็นตัวเลือก 71 00:03:42,680 --> 00:03:44,730 >> มีคุณลักษณะที่มากขึ้นเป็น 72 00:03:44,730 --> 00:03:46,760 มีจำนวนมากของพวกเขาคือ 73 00:03:46,760 --> 00:03:53,070 ตัวอย่างเช่นเราอาจมี โรคหลอดเลือดสมองเป็นอย่างดีจังหวะของสีแดง 74 00:03:53,070 --> 00:03:55,630 แต่ขอเอาว่า 75 00:03:55,630 --> 00:04:00,450 เรากลับไปที่วงกลม, วงกลมสีฟ้า 76 00:04:00,450 --> 00:04:01,600 >> ดังนั้นขอให้วงการมากขึ้น 77 00:04:01,600 --> 00:04:02,810 ที่ได้อย่างไร? 78 00:04:02,810 --> 00:04:04,665 ขอให้วงกลมอีก 79 00:04:04,665 --> 00:04:05,985 นี้เป็นที่น่าตื่นเต้นใช่ไหม? 80 00:04:05,985 --> 00:04:09,630 81 00:04:09,630 --> 00:04:12,300 >> ดังนั้นบอกว่าฉันเพียงแค่คัดลอกวาง สิ่งที่เรามีอยู่แล้ว 82 00:04:12,300 --> 00:04:13,570 ขอเรียกว่าวงกลม 2 83 00:04:13,570 --> 00:04:15,840 และขอทำที่แน่นอน สิ่งที่เหมือนกันและให้มัน 84 00:04:15,840 --> 00:04:20,450 คุณลักษณะที่ได้รับตำแหน่ง x 300 85 00:04:20,450 --> 00:04:24,140 ยายเรามีสองวงการในขณะนี้ 86 00:04:24,140 --> 00:04:27,240 >> และแน่นอนที่เราจะทำได้ อัพเดตค่าเหล่านี้ 87 00:04:27,240 --> 00:04:31,640 ฉันสามารถวางมันไว้ที่ 400 และตอนนี้ก็ย้าย 88 00:04:31,640 --> 00:04:35,470 และเนื่องจากมันน่ารำคาญให้ เอามันออกไปดังนั้น circle2.remove 89 00:04:35,470 --> 00:04:39,000 90 00:04:39,000 --> 00:04:40,730 มันหายไปตอนนี้ 91 00:04:40,730 --> 00:04:43,170 >> ดังนั้นสิ่งที่เรากำลังทำอยู่และ เป็นเพียงมาก very-- นี้ 92 00:04:43,170 --> 00:04:46,030 จะคล้ายกับสิ่งที่คุณ อาจทำใน jQuery ตัวอย่างเช่น 93 00:04:46,030 --> 00:04:48,240 เรากำลังจัดการกับ DOM ก็เรียกว่า 94 00:04:48,240 --> 00:04:50,040 คุณอาจเคยได้ยินคำว่าก่อนที่ 95 00:04:50,040 --> 00:04:53,255 เรากำลังสร้างสิ่งที่การตั้งค่า คุณลักษณะในสิ่งที่เอาสิ่งที่ 96 00:04:53,255 --> 00:04:58,950 97 00:04:58,950 --> 00:05:02,360 >> ตอนนี้ที่นี่คือสิ่งที่จะได้รับที่น่าสนใจ 98 00:05:02,360 --> 00:05:07,250 ดังนั้นในภายหลังในรหัสที่เราจะทำได้ยังคง อ้างถึงวงกลมต้นฉบับที่นี่ 99 00:05:07,250 --> 00:05:14,100 ดังนั้นขอรีเซ็ตแอตทริบิวต์ที่จะ cx 100 00:05:14,100 --> 00:05:18,260 สมมติว่าตำแหน่งของ x 400 101 00:05:18,260 --> 00:05:22,406 และผมกำลังจะเปลี่ยน นั้นจึงเป็นสิ่งที่เห็นได้ชัด 102 00:05:22,406 --> 00:05:23,360 มีที่เราจะไป 103 00:05:23,360 --> 00:05:24,780 >> ดังนั้นเราจึงเพิ่มวงกลม 104 00:05:24,780 --> 00:05:26,440 เราตั้งค่าคุณสมบัติบางอย่าง 105 00:05:26,440 --> 00:05:28,210 เราได้เพิ่มอีกกลุ่มหยิบมันออกมา 106 00:05:28,210 --> 00:05:31,650 และจากนั้นเรากำลังปรับเปลี่ยน วงกลมเดิม 107 00:05:31,650 --> 00:05:35,400 >> แต่นี่คือสิ่งที่จะได้รับ มากน่าสนใจมากขึ้น 108 00:05:35,400 --> 00:05:39,070 ไม่เพียง แต่เราสามารถตั้งค่าคุณสมบัติ เป็นเพียงค่าเราสามารถพูดได้ว่า 109 00:05:39,070 --> 00:05:41,610 เดี๋ยวก่อนวงกลมให้ไปที่ตำแหน่ง 200 110 00:05:41,610 --> 00:05:44,540 นอกจากนี้เรายังสามารถตั้งค่าให้เป็นฟังก์ชั่น 111 00:05:44,540 --> 00:05:48,850 >> ดังนั้นแทนที่จะให้ 400 ที่นี่ เราสามารถทำให้การคำนวณบาง 112 00:05:48,850 --> 00:05:53,950 ในการบินสำหรับสิ่งที่เรา ต้องการแอตทริบิวต์ที่จะเป็น 113 00:05:53,950 --> 00:05:56,580 ดังนั้นนี่คือวิธีที่คุณจะแสดงว่า 114 00:05:56,580 --> 00:06:00,660 เราพูดแทน 400 ให้ฉัน ให้คุณฟังก์ชั่นแทน 115 00:06:00,660 --> 00:06:04,180 และที่นี่ภายในฟังก์ชั่นนี้ เราสามารถทำให้การคำนวณบ้าใด ๆ 116 00:06:04,180 --> 00:06:06,820 >> เราอาจจะใช้เวลาและ ดูที่บางสิ่งอื่น ๆ 117 00:06:06,820 --> 00:06:11,230 และแบบไดนามิกตัดสินใจ วงกลมสิ่งที่มีค่าที่เราต้องการ 118 00:06:11,230 --> 00:06:15,266 วิธีการเกี่ยวกับเราเพียงแค่ให้ มันตำแหน่ง x สุ่ม? 119 00:06:15,266 --> 00:06:20,360 120 00:06:20,360 --> 00:06:21,120 ดังนั้นที่ว่า 121 00:06:21,120 --> 00:06:25,490 >> ดังนั้นสิ่งที่ว่าคือสำหรับ x ทุกเรียกใช้ฟังก์ชั่นนี้ 122 00:06:25,490 --> 00:06:29,340 และสิ่งที่เรากำลังทำคือการคำนวณ บางสิ่งบางอย่างเวลาที่สุ่มกว้าง 123 00:06:29,340 --> 00:06:30,410 และกลับมาที่ 124 00:06:30,410 --> 00:06:34,765 ดังนั้นเวลาที่เราทำงานที่ทุกคนที่เราได้รับ วงกลมที่จะไปยังสถานที่ที่สุ่ม 125 00:06:34,765 --> 00:06:36,394 เป็นชนิดของเย็น 126 00:06:36,394 --> 00:06:38,310 ฉันรู้สึกเหมือนฉันสามารถดู ที่นี้เล็ก ๆ น้อย ๆ 127 00:06:38,310 --> 00:06:44,274 128 00:06:44,274 --> 00:06:46,440 เราเริ่มที่จะได้รับ สิ่งที่น่าสนใจที่นี่ 129 00:06:46,440 --> 00:06:49,120 130 00:06:49,120 --> 00:06:51,390 ขอให้ข้อมูลนี้ขับเคลื่อนในขณะนี้ 131 00:06:51,390 --> 00:06:53,420 ไม่มีข้อมูลที่นี่ 132 00:06:53,420 --> 00:06:54,482 ลองเปลี่ยนที่ 133 00:06:54,482 --> 00:06:57,440 134 00:06:57,440 --> 00:07:12,140 >> Act II, Data Driven Documents-- ดังนั้นขอให้กลับไปที่นี่ 135 00:07:12,140 --> 00:07:15,340 และขอเพียงแค่ได้รับกำจัดของวงกลม 2, เพราะเราเพียงแค่การเพิ่มและลบ 136 00:07:15,340 --> 00:07:15,840 มัน 137 00:07:15,840 --> 00:07:17,382 ดังนั้นเราจึงไม่จำเป็นจริงๆ 138 00:07:17,382 --> 00:07:21,421 เราจำเป็นต้องมีจำนวนมากฉลาดมากขึ้นที่นี่ 139 00:07:21,421 --> 00:07:23,170 สมมติว่าเรามี ข้อมูลบางส่วนของการจัดเรียงบาง 140 00:07:23,170 --> 00:07:31,540 141 00:07:31,540 --> 00:07:40,020 หนึ่ง moment-- สมมุติว่า เรามีข้อมูลของแบบฟอร์มนี้ 142 00:07:40,020 --> 00:07:41,800 เรามีอาร์เรย์เพียง พวงของตัวเลข 143 00:07:41,800 --> 00:07:45,750 เรามีเจ็ดหมายเลขที่นี่ สิ่งเหล่านี้จำนวน represent-- 144 00:07:45,750 --> 00:07:48,810 ในบัญชีธนาคารของผู้คนว่า พวกเขามีน้ำหนักพระเจ้ารู้ว่าสิ่งที่ 145 00:07:48,810 --> 00:07:51,310 >> เหล่านี้เป็นตัวเลขและเรา ต้องการที่จะใช้วงกลมของเรา 146 00:07:51,310 --> 00:07:53,240 เพื่อเป็นตัวแทนของตัวเลขเหล่านั้นอย่างใด 147 00:07:53,240 --> 00:07:55,515 เราต้องการที่จะผูกของเรา วงการกับตัวเลขเหล่านั้น 148 00:07:55,515 --> 00:07:58,750 149 00:07:58,750 --> 00:07:59,626 ดังนั้นสิ่งที่เราทำ 150 00:07:59,626 --> 00:08:01,500 สมมติว่าเราต้องการ วงกลมสำหรับทุกหมายเลข 151 00:08:01,500 --> 00:08:03,590 เราสามารถทำเก่า สิ่งที่เรากำลัง doing-- 152 00:08:03,590 --> 00:08:06,020 ผนวกวงกลมและวงกลม 2 และ circle3 153 00:08:06,020 --> 00:08:10,020 แต่ตอนนี้ได้รับจากมือและ มีจำนวนมากของการทำซ้ำตรรกะ 154 00:08:10,020 --> 00:08:12,760 >> จึงขอได้ฉลาดมากขึ้นกับว่า 155 00:08:12,760 --> 00:08:17,810 แทนการใช้วงกลม var svg.append ว่าเราเป็นเพียงแค่การใช้ 156 00:08:17,810 --> 00:08:21,580 เรากำลังจะใช้ นี้บล็อกเล็ก ๆ น้อย ๆ ที่นี่ 157 00:08:21,580 --> 00:08:24,510 ฉันไม่ต้องการที่จะไปในเชิงลึก เป็นสิ่งที่ทุกชิ้นส่วนเหล่านี้ทำ 158 00:08:24,510 --> 00:08:26,020 และมันเป็นชนิดของหัวข้อขั้นสูง 159 00:08:26,020 --> 00:08:27,830 และฉันหวังว่าฉันจะทำได้ 160 00:08:27,830 --> 00:08:31,370 >> แต่สิ่งที่สำคัญในการ recognize-- และ คุณจะเห็นมากมักจะอยู่ในรหัส D3 161 00:08:31,370 --> 00:08:36,840 บล็อกพื้นฐานข้อความนี้ สร้างเป็นจำนวนมากวงการ 162 00:08:36,840 --> 00:08:41,360 เนื่องจากมีองค์ประกอบของข้อมูล ในอาร์เรย์นี้ที่นี่ 163 00:08:41,360 --> 00:08:53,420 164 00:08:53,420 --> 00:08:55,780 ดังนั้นนี้จะสร้างเป็นจำนวนมาก วงกลมที่มีองค์ประกอบ 165 00:08:55,780 --> 00:08:58,520 มันจะสร้างเราเจ็ดวงการ 166 00:08:58,520 --> 00:09:01,710 และมันไม่จริงๆสิ่งที่สำคัญจริงๆ 167 00:09:01,710 --> 00:09:02,460 ดังนั้นเรามาทำงานที่ 168 00:09:02,460 --> 00:09:05,460 ลองเอาวงอื่น ๆ ของเรา 169 00:09:05,460 --> 00:09:09,565 ขอเพียงแสดงความคิดเห็นนี้ เป็นส่วนหนึ่งออกมาและทำงานนี้อีกครั้ง 170 00:09:09,565 --> 00:09:13,840 171 00:09:13,840 --> 00:09:15,260 >> มีที่เราจะไป 172 00:09:15,260 --> 00:09:18,030 ดังนั้นวงกลมของเราที่นี่คือ เข้มมากเพราะเรา 173 00:09:18,030 --> 00:09:20,720 มีเจ็ดวงกลมหนึ่ง ด้านบนของที่อื่น ๆ 174 00:09:20,720 --> 00:09:25,425 เราเพิ่งสร้างขึ้นเจ็ดวงกลมหนึ่ง แต่ละสำหรับแต่ละองค์ประกอบของข้อมูลเหล่านี้ 175 00:09:25,425 --> 00:09:28,860 แต่มีสิ่งที่สำคัญที่เกิดขึ้น กับตัวอย่างนี้ที่นี่ 176 00:09:28,860 --> 00:09:31,030 >> มันเป็นเรื่องที่เป็นข้อมูลที่ถูกผูกไว้ 177 00:09:31,030 --> 00:09:33,440 ดังนั้นทุกหนึ่งเดียวของ องค์ประกอบของข้อมูลเหล่านั้น 178 00:09:33,440 --> 00:09:38,830 10, 45, 105, เป็นที่ถูกผูกไว้ วงกลมโดยเฉพาะอย่างยิ่ง 179 00:09:38,830 --> 00:09:40,960 ดังนั้นเหล่านี้ไม่ได้สร้างเพียง พวงของวงการ 180 00:09:40,960 --> 00:09:43,420 แต่ความสัมพันธ์ของทั้งสองสิ่งเข้าด้วยกัน 181 00:09:43,420 --> 00:09:48,740 >> และในอนาคตเพราะเราสร้าง วงการผู้ที่มีฟังก์ชั่นนี้ D3, 182 00:09:48,740 --> 00:09:52,430 ถ้าฉันให้คุณวงกลมคุณสามารถ ให้ฉันข้อมูลที่เกี่ยวข้องกับมัน 183 00:09:52,430 --> 00:09:53,280 ดังนั้นเราจึงสามารถขอ D3 184 00:09:53,280 --> 00:09:54,840 เฮ้ D3 ผมมีวงกลมนี้ 185 00:09:54,840 --> 00:09:57,350 อะไรคือข้อมูลที่วงกลมมี? 186 00:09:57,350 --> 00:10:01,290 และ D3 จะบอกเรา 10 หรือ 45 หรือ 105 187 00:10:01,290 --> 00:10:02,380 >> สิ่งเหล่านี้เป็นที่ถูกผูกไว้ 188 00:10:02,380 --> 00:10:04,490 นั่นเป็นมากแนวคิดพื้นฐานมาก 189 00:10:04,490 --> 00:10:06,070 ลองดูที่ว่า 190 00:10:06,070 --> 00:10:12,210 >> ดังนั้นวิธีที่เราต้องการขอ D3-- ดังนั้น นี้จะไม่เกี่ยวข้องสำหรับเรื่องนี้ 191 00:10:12,210 --> 00:10:16,620 แต่เชื่อฉันเกี่ยวกับมัน 192 00:10:16,620 --> 00:10:17,620 นี่คือวิธีที่เราขอ D3 193 00:10:17,620 --> 00:10:21,312 Hey, D3, ให้ฉันเป็นครั้งแรก วงกลมที่คุณสามารถค้นหา 194 00:10:21,312 --> 00:10:23,580 ให้ฉันวงกลมแรกที่คุณสามารถหา 195 00:10:23,580 --> 00:10:29,660 และจากนั้นเราสามารถถาม D3 อะไร ข้อมูลเกี่ยวกับที่ว่าเช่นนี้, 10 196 00:10:29,660 --> 00:10:33,380 >> ดังนั้นเราเพียงแค่ถาม D3 หาฉัน วงกลมแรกที่คุณสามารถหา 197 00:10:33,380 --> 00:10:34,400 อะไรคือข้อมูลของตนหรือไม่ 198 00:10:34,400 --> 00:10:36,650 10 ที่เป็นจริงของเรา องค์ประกอบของข้อมูลครั้งแรก 199 00:10:36,650 --> 00:10:42,150 เราสามารถขอเดี๋ยวก่อน D3, พบกับเราได้วงกลมที่สามของเรา 200 00:10:42,150 --> 00:10:44,450 105 201 00:10:44,450 --> 00:10:45,740 นี่คือเหตุผลที่สำคัญจริงๆ? 202 00:10:45,740 --> 00:10:49,790 203 00:10:49,790 --> 00:10:52,250 >> ดังนั้นที่นี่ที่ผมกล่าวถึง ที่เราสามารถใช้ฟังก์ชั่น 204 00:10:52,250 --> 00:10:54,910 และผมก็บอกว่าเป็น สิ่งที่ทรงพลังมาก 205 00:10:54,910 --> 00:11:03,070 ดังนั้นไม่เพียง แต่ฟังก์ชั่นของเราสามารถทำสิ่ง เช่นทำคำนวณบางอย่างเช่น 206 00:11:03,070 --> 00:11:09,170 กลับตัวเลขสุ่มก็สามารถ นอกจากนี้ยังทำสิ่งที่อยู่บนพื้นฐานของข้อมูล 207 00:11:09,170 --> 00:11:11,550 นี่คือสิ่งที่ขับเคลื่อนด้วยข้อมูลเอกสารหมายถึง 208 00:11:11,550 --> 00:11:13,750 นั่นคือสิ่งที่ D3 ย่อมาจาก 209 00:11:13,750 --> 00:11:17,800 >> ดังนั้นนี่ x postition-- แทน บอกเพียงแค่วงกลมทั้งหมด 210 00:11:17,800 --> 00:11:21,735 ได้รับตำแหน่ง x 200 เรา จะให้มันฟังก์ชั่น 211 00:11:21,735 --> 00:11:26,140 212 00:11:26,140 --> 00:11:30,140 และที่นี่เราสามารถทำให้การคำนวณบาง 213 00:11:30,140 --> 00:11:33,710 และ d ที่นี่ตั้งอยู่ในสถานที่สำหรับข้อมูล 214 00:11:33,710 --> 00:11:36,120 ดังนั้นเวลาที่เรามีทุก วงกลมโดยทั่วไป 215 00:11:36,120 --> 00:11:37,750 D3 จะสร้างทั้งเจ็ดวงการ 216 00:11:37,750 --> 00:11:38,500 และแล้วทุก 217 00:11:38,500 --> 00:11:41,920 >> วงกลมก็จะไปเดี๋ยวก่อน วงกลม 1 สิ่งที่ตำแหน่ง x ของคุณ 218 00:11:41,920 --> 00:11:45,210 ก่อนหน้านี้เรามี มักจะตอบ 200 219 00:11:45,210 --> 00:11:48,630 แต่ตอนนี้เวลา D3 ทุกถาม เราสิ่งที่ตำแหน่ง x ของคุณ 220 00:11:48,630 --> 00:11:51,790 มันจะทำให้เรามี us-- วงกลมที่ดังนั้นเรามีข้อมูล 221 00:11:51,790 --> 00:11:55,290 มันจะทำให้เรามีข้อมูลและพูดว่า สิ่งที่คุณต้องการแสดงออกให้เป็นที่ 222 00:11:55,290 --> 00:11:57,120 บนพื้นฐานของข้อมูลที่ 223 00:11:57,120 --> 00:11:59,590 >> ขอเพียงกลับข้อมูลที่เกิดขึ้นจริง 224 00:11:59,590 --> 00:12:04,910 ดังนั้นถ้าเราทำงานนี้นี้จะช่วยให้ เราข้อมูลเอกสารการขับเคลื่อน 225 00:12:04,910 --> 00:12:08,040 วงการเหล่านี้จะขึ้น ในความสัมพันธ์ position-- 226 00:12:08,040 --> 00:12:11,120 พวกเขากำลังฐานเป็นหน้าที่ของข้อมูล 227 00:12:11,120 --> 00:12:13,100 >> ดังนั้นสำหรับวงกลมแรก D3 ทำให้วงกลม 228 00:12:13,100 --> 00:12:16,770 และแล้ว D3 ขอให้เราทำในสิ่งที่ คุณต้องการแสดงออกให้เป็น 229 00:12:16,770 --> 00:12:19,620 และเราก็บอกว่าข้อมูลใดเป็น 230 00:12:19,620 --> 00:12:21,185 ทำให้การแสดงออก 10 231 00:12:21,185 --> 00:12:26,320 >> จากนั้นก็จะถามว่าสิ่งที่คุณต้องการ การแสดงออกที่จะให้วงกลมสอง 232 00:12:26,320 --> 00:12:27,270 และเราตอบ 45 233 00:12:27,270 --> 00:12:30,000 234 00:12:30,000 --> 00:12:32,230 และเราแน่นอนสามารถ ทำให้การคำนวณบางอย่างที่นี่ 235 00:12:32,230 --> 00:12:35,510 ผมพบว่าวงการเหล่านั้น เป็นชนิดของ squished ขึ้น 236 00:12:35,510 --> 00:12:38,965 >> ดังนั้นคูณด้วย 3 คูณ 3 ข้อมูลโดย 237 00:12:38,965 --> 00:12:41,870 238 00:12:41,870 --> 00:12:43,840 วงกลมของเราเพิ่งได้ขยายตัวออก 239 00:12:43,840 --> 00:12:46,730 มูลค่าของเราได้สามเท่า 240 00:12:46,730 --> 00:12:51,010 >> วงกลมที่เป็นจริงบนขอบ จึงขออาจจะชดเชยชนิดของมัน 241 00:12:51,010 --> 00:12:53,632 สมมติว่า 20 242 00:12:53,632 --> 00:12:56,070 นี่คุณไป 243 00:12:56,070 --> 00:12:57,590 >> นี่คือการแสดงข้อมูล 244 00:12:57,590 --> 00:13:01,767 มันเป็นหนึ่งในขั้นพื้นฐานมาก แต่นี้ ทำให้เราเข้าใจข้อมูลของเราบางส่วน 245 00:13:01,767 --> 00:13:04,600 มันบอกเราว่าสำหรับตัวอย่างเช่นเรา มีกลุ่มเล็ก ๆ น้อย ๆ ขององค์ประกอบ 246 00:13:04,600 --> 00:13:06,340 และเรามีขอบเขตใหญ่ที่นี่ 247 00:13:06,340 --> 00:13:10,830 นี้จะช่วยให้เราข้อมูลบางอย่าง เกี่ยวกับการกระจาย 248 00:13:10,830 --> 00:13:20,830 >> ถ้าเรายกตัวอย่างเช่นการเปลี่ยนแปลง ข้อมูลถึง 150 นี่และฟื้นฟู 249 00:13:20,830 --> 00:13:22,630 การสร้างภาพของเรามีการเปลี่ยนแปลง 250 00:13:22,630 --> 00:13:24,285 เอกสารนี้มีข้อมูลขับเคลื่อน 251 00:13:24,285 --> 00:13:32,640 252 00:13:32,640 --> 00:13:36,180 >> ดังนั้นแน่นอนทุกองค์ประกอบเหล่านี้ คุณลักษณะทั้งหมดเหล่านี้ที่นี่ 253 00:13:36,180 --> 00:13:38,430 เราสามารถใช้ฟังก์ชั่นไม่ได้ เพียงตัวเลขที่ไม่เพียง 254 00:13:38,430 --> 00:13:39,900 x และ y ตำแหน่ง 255 00:13:39,900 --> 00:13:42,120 ดังนั้นเราจึงสามารถใช้ฟังก์ชั่นสี 256 00:13:42,120 --> 00:13:45,260 257 00:13:45,260 --> 00:13:46,360 ดังนั้นเราจะทำเช่นเดียวกัน 258 00:13:46,360 --> 00:13:49,360 เราจะให้มันฟังก์ชั่น 259 00:13:49,360 --> 00:13:52,320 >> และสมมุติว่าเราจะได้มี เงื่อนไขในการทำงานของเรา 260 00:13:52,320 --> 00:13:54,770 ฟังก์ชั่นนี้จะมี ร้อยสายยาว 261 00:13:54,770 --> 00:13:57,150 มันสามารถทำมากสิ่งที่ซับซ้อนมาก 262 00:13:57,150 --> 00:13:59,080 >> ดังนั้นขอใส่ถ้ามีคำสั่งที่นี่ 263 00:13:59,080 --> 00:14:03,420 สมมติว่าถ้าข้อมูลของเรามีน้อย มากกว่า 50 ที่เกณฑ์บางอย่าง 264 00:14:03,420 --> 00:14:05,817 ที่เราสนใจ ในเหตุผลบางอย่าง 265 00:14:05,817 --> 00:14:06,650 ขอให้มันเป็นสีเขียว 266 00:14:06,650 --> 00:14:09,830 267 00:14:09,830 --> 00:14:15,320 มิฉะนั้นขอให้มันเป็นสีแดง 268 00:14:15,320 --> 00:14:16,110 ที่ได้อย่างไร? 269 00:14:16,110 --> 00:14:19,630 270 00:14:19,630 --> 00:14:21,220 ดี 271 00:14:21,220 --> 00:14:24,860 >> ดังนั้นการแสดงข้อมูลของเราคือการเริ่มต้น ในการถ่ายทอดข้อมูลที่น่าสนใจอื่น ๆ อีกมากมาย 272 00:14:24,860 --> 00:14:26,727 ในหลายช่องทาง 273 00:14:26,727 --> 00:14:28,560 ดังนั้นตอนนี้เรารู้อีกเล็กน้อย เกี่ยวกับการกระจาย 274 00:14:28,560 --> 00:14:31,768 และเรารู้ว่ามีการจัดเรียงของบางอย่าง ตัดที่ 50 ที่เรากำลังสนใจใน 275 00:14:31,768 --> 00:14:35,630 เรารู้ว่ามีสองจุดข้อมูล ต่ำกว่าเกณฑ์ที่และส่วนใหญ่ของพวกเขา 276 00:14:35,630 --> 00:14:36,130 เหนือ 277 00:14:36,130 --> 00:14:41,510 278 00:14:41,510 --> 00:14:46,160 >> ดังนั้นในขณะที่ขั้นตอนสุดท้ายข้อมูลที่นี่ มันหายากมากที่จะเห็นเช่นนี้ว่า 279 00:14:46,160 --> 00:14:52,610 เพื่อให้เพียงย้ายออกไปยังตัวแปร เพราะนั่นคือการทำความสะอาดเช่นนี้ 280 00:14:52,610 --> 00:15:02,980 281 00:15:02,980 --> 00:15:05,197 และจากนั้นเราใช้ตัวแปรที่นี่ 282 00:15:05,197 --> 00:15:06,280 มันเป็นสิ่งเดียวที่แน่นอน 283 00:15:06,280 --> 00:15:07,280 มันเป็นเพียงแค่ทำความสะอาดบิต 284 00:15:07,280 --> 00:15:25,300 285 00:15:25,300 --> 00:15:35,300 >> ถัดขึ้นไป, iii กระทำ Scales-- ดังนั้นหนึ่งปัญหาที่เหมาะสม 286 00:15:35,300 --> 00:15:38,920 ที่นี่คือถ้าเราเปลี่ยนของเรา ข้อมูลใน 200 value-- 287 00:15:38,920 --> 00:15:41,685 ถ้าเราเปลี่ยนเป็น 400 หรือบางสิ่งบางอย่างและฟื้นฟู 288 00:15:41,685 --> 00:15:44,540 แล้วค่านี้เพิ่งไป Offscreen 289 00:15:44,540 --> 00:15:49,040 ดังนั้นตรรกะของเราที่นี่ ของวิธีการที่เราทำครั้งที่ 3 290 00:15:49,040 --> 00:15:52,570 และ 20 เพื่อกระจายมันออกมาแล้ว ชดเชยมันบิตเป็น clunky จริงๆ 291 00:15:52,570 --> 00:15:54,150 >> สิ่งใดที่ตัวเลขเหล่านั้นหมายถึงอะไร? 292 00:15:54,150 --> 00:15:55,400 พวกเขากำลังเขียนยากเพียงแค่มี 293 00:15:55,400 --> 00:15:58,830 และพวกเขากำลังเชื่อมโยงอย่างมากกับข้อมูลที่ 294 00:15:58,830 --> 00:16:00,550 เราต้องการข้อมูลเอกสารการขับเคลื่อน 295 00:16:00,550 --> 00:16:05,460 เราต้องการเอกสารที่มีความยืดหยุ่นมาก ว่าข้อมูลที่ได้รับจะปรับไปใช้มัน 296 00:16:05,460 --> 00:16:07,900 และเป็นตัวแทนของมัน 297 00:16:07,900 --> 00:16:11,330 >> สิ่งที่เราต้องการโดยทั่วไปก็คือเรา มีช่วงของตัวเลข 10 นี้ 298 00:16:11,330 --> 00:16:12,640 45, 105 299 00:16:12,640 --> 00:16:17,630 และเราต้องการแมปที่ออกไป ความกว้าง, ความกว้างเต็มได้ที่นี่ 300 00:16:17,630 --> 00:16:20,620 ดังนั้นเราจึงมีช่วงของ ตัวเลขไปจาก 0 ถึง 100 301 00:16:20,620 --> 00:16:24,980 และเรามีผมวิทยาเขตนี้ไป 20-700 ในกรณีนี้ 302 00:16:24,980 --> 00:16:26,515 >> ชนิดของเราต้องการแมปที่เกี่ยวกับ 303 00:16:26,515 --> 00:16:30,002 เราต้องการที่จะไต่ขึ้นมาและ ชดเชยแล้วมันนิด ๆ หน่อย ๆ 304 00:16:30,002 --> 00:16:33,165 แต่กลับกลายเป็นว่า D3 มีเหล่านี้ 305 00:16:33,165 --> 00:16:34,220 มันเรียกว่าขนาด 306 00:16:34,220 --> 00:16:37,410 307 00:16:37,410 --> 00:16:38,250 ดังนั้นขอให้ใช้งานได้ 308 00:16:38,250 --> 00:16:46,300 309 00:16:46,300 --> 00:16:49,670 >> วิธีการที่ works-- ฉันจะ พิมพ์นี้ขึ้นและจากนั้นอธิบายได้ 310 00:16:49,670 --> 00:17:01,530 311 00:17:01,530 --> 00:17:02,450 นี่คือขนาด 312 00:17:02,450 --> 00:17:08,670 สิ่งที่จะทำคือมันจะแผนที่ออก ค่า 1-200 เพื่อ 20-600 313 00:17:08,670 --> 00:17:10,990 เราสามารถตรวจสอบว่า 314 00:17:10,990 --> 00:17:13,329 เราจะเห็นว่าที่นี่ 315 00:17:13,329 --> 00:17:21,704 >> ดังนั้นถ้าฉันอาหารมัน 1-- ช่วงเวลาหนึ่ง 316 00:17:21,704 --> 00:17:47,764 317 00:17:47,764 --> 00:17:48,555 ให้ฉันหนึ่งวินาที 318 00:17:48,555 --> 00:17:53,680 319 00:17:53,680 --> 00:17:55,080 ฉันต้องได้พิมพ์ผิดมัน 320 00:17:55,080 --> 00:18:15,320 321 00:18:15,320 --> 00:18:15,990 มีคุณไป 322 00:18:15,990 --> 00:18:17,930 ฉันขอโทษเกี่ยวกับว่า 323 00:18:17,930 --> 00:18:22,050 >> ดังนั้นสิ่งที่ขนาดจะทำ คือมันจะใช้ค่า 324 00:18:22,050 --> 00:18:24,930 แล้วแปลงนั้น ขยายออกจึง 325 00:18:24,930 --> 00:18:27,320 เติมเต็มรูปแบบที่คุณขอ 326 00:18:27,320 --> 00:18:32,910 ดังนั้นในกรณีนี้ถ้าเราจะให้มันหนึ่ง มันจะ map ที่ออกไปยัง 20 327 00:18:32,910 --> 00:18:37,750 และถ้าเราจะให้มัน 200 ก็ จะ map ว่าเมื่อวันที่ 600 328 00:18:37,750 --> 00:18:40,460 และบางแห่งในระหว่าง ถ้าเราได้รับ 100 ก็ 329 00:18:40,460 --> 00:18:44,610 จะไปอยู่ที่ไหนสักแห่ง ในระหว่างวันที่ 20 และ 600 330 00:18:44,610 --> 00:18:51,480 >> และแน่นอนตอนนี้คือสิ่งที่ เราจำเป็นต้องลบรหัสยากเหล่านั้น 331 00:18:51,480 --> 00:18:53,402 สิ่งที่เรามีสิทธิที่มี 332 00:18:53,402 --> 00:18:55,950 ดังนั้นสิ่งที่เราต้องการจะทำคือ ใช้ข้อมูลที่เรา 333 00:18:55,950 --> 00:19:00,950 กำหนดว่าข้อมูลของแต่ละบุคคล องค์ประกอบและผ่านมันจะไต่แรก 334 00:19:00,950 --> 00:19:02,635 ดังนั้นขนาดจะขนาดมันขึ้นมา 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> สวยหน่อยโอ้เรามีข้อผิดพลาดเล็ก ๆ น้อย ๆ ที่นี่ 337 00:19:48,880 --> 00:19:50,120 เรากำลังขาดหายไปข้อมูล 338 00:19:50,120 --> 00:19:51,290 มีคุณไป 339 00:19:51,290 --> 00:19:58,550 340 00:19:58,550 --> 00:19:59,550 และที่ขยายมันออกมา 341 00:19:59,550 --> 00:20:01,383 >> ที่ทำให้เราเหมือนกัน ผลที่เรามีมาก่อน 342 00:20:01,383 --> 00:20:04,030 แต่แทนที่จะมีผู้ ยากที่ จำกัด ของรหัส 343 00:20:04,030 --> 00:20:07,790 และถ้าขนาดของเรา การเปลี่ยนแปลงผ้าใบยกตัวอย่างเช่น 344 00:20:07,790 --> 00:20:11,790 ถ้าเราต้องการที่จะมีมากกว่านี้ 400 พิกเซลและมัน squishes ออก 345 00:20:11,790 --> 00:20:15,440 เราสามารถมีได้ over-- เราสามารถขยายหรือเรา 346 00:20:15,440 --> 00:20:21,890 สามารถลดอัตราการทำกำไรที่เหลือนี้ บางสิ่งบางอย่างมากหรือน้อยกว่า 20 347 00:20:21,890 --> 00:20:25,470 ตัวเลขเหล่านี้เหล่านี้เขียนยาก ตัวเลขในขณะนี้ทำให้รู้สึกถึงเรา 348 00:20:25,470 --> 00:20:28,110 349 00:20:28,110 --> 00:20:30,520 >> และเราสามารถทำอะไรได้มากขึ้น สิ่งที่น่าสนใจเช่นกัน 350 00:20:30,520 --> 00:20:35,990 ดังนั้นแทนที่จะมีเชิงเส้น ขนาดเราอาจต้องการที่จะเข้าสู่ระบบขนาด 351 00:20:35,990 --> 00:20:37,840 และนั่นจะทำให้เรามีระดับการเข้าสู่ระบบ 352 00:20:37,840 --> 00:20:41,269 >> ดังนั้นตอนนี้ขนาดของเราแทน เพียงแค่ขยายออกช่วงนั้น 353 00:20:41,269 --> 00:20:42,810 ก็ทำสิ่งที่ซับซ้อนมากขึ้น 354 00:20:42,810 --> 00:20:48,790 355 00:20:48,790 --> 00:20:53,790 แทนที่จะมีช่วงนี้ยาก รหัสและแทนที่จะมีที่ 600, 356 00:20:53,790 --> 00:20:58,465 เราอาจจะต้องการเพียงแค่ใช้ความกว้าง ดังนั้นจากความกว้าง 20 ลบ 40, 357 00:20:58,465 --> 00:21:02,392 2 ครั้งอัตรากำไรขั้นต้นในด้านอื่น ๆ 358 00:21:02,392 --> 00:21:05,350 และสิ่งนี้ทำให้มากรู้สึกมากขึ้น ใครบางคนที่อาจจะมองไปที่รหัส 359 00:21:05,350 --> 00:21:08,080 360 00:21:08,080 --> 00:21:11,850 >> ที่น่าสนใจ, เครื่องชั่งน้ำหนักได้ มากที่มีความซับซ้อนมากเช่นกัน 361 00:21:11,850 --> 00:21:13,350 พวกเขาทำสิ่งต่างๆมากมายที่น่าสนใจ 362 00:21:13,350 --> 00:21:17,620 ดังนั้นเครื่องชั่งน้ำหนักไม่จำเป็นต้องมี ในการดำเนินงานเพียงกับตัวเลข 363 00:21:17,620 --> 00:21:18,955 ขอให้ระดับสี 364 00:21:18,955 --> 00:21:23,120 365 00:21:23,120 --> 00:21:26,120 >> ดังนั้นช่วงของเราสามารถ be-- โดเมนของเราคือ 1-200 366 00:21:26,120 --> 00:21:28,220 นั่นเป็นสิ่งที่มีการป้อนข้อมูล 367 00:21:28,220 --> 00:21:33,793 แต่เราอาจต้องการที่จะจากแผนที่ สีเขียวเป็นสีแดงเช่น 368 00:21:33,793 --> 00:21:39,710 369 00:21:39,710 --> 00:21:42,910 และตอนนี้ถ้าเราผ่านมันที่ 1, เรากำลังจะได้รับสีเขียว 370 00:21:42,910 --> 00:21:45,110 ถ้าเราจะให้มัน 200, เราจะได้รับสีแดง 371 00:21:45,110 --> 00:21:49,480 และถ้าเราผ่านมันบางสิ่งบางอย่างในระหว่าง มันจะเป็นส่วนผสมของว่าบาง 372 00:21:49,480 --> 00:21:52,520 ที่ไหนสักแห่งบนทางลาด ระหว่างสีเขียวและสีแดง 373 00:21:52,520 --> 00:21:55,210 >> และแทนที่จะต้อง ชนิดของตรรกะ clunky นี้ 374 00:21:55,210 --> 00:21:58,550 เรามีที่นี่ด้วย เงื่อนไขที่นั่น 375 00:21:58,550 --> 00:22:03,250 เราอาจจะมีบางสิ่งบางอย่าง ขนาดเชิงเส้นระหว่างผู้ 376 00:22:03,250 --> 00:22:07,100 ดังนั้นเราจึงต้องการใช้ขนาดที่เราเพิ่ง สร้างขึ้นซึ่งเราเรียกว่าสี 377 00:22:07,100 --> 00:22:09,060 และเราต้องการให้มัน d ซึ่ง เป็นองค์ประกอบข้อมูลของเรา 378 00:22:09,060 --> 00:22:14,250 379 00:22:14,250 --> 00:22:15,060 และมีที่เราจะไป 380 00:22:15,060 --> 00:22:18,070 เรามีขนาดสี 381 00:22:18,070 --> 00:22:18,940 >> ดังนั้นนี่คือการทำแผนที่ 382 00:22:18,940 --> 00:22:20,960 ดังนั้นซ้ายสุดเป็นสีเขียวอย่างสมบูรณ์ 383 00:22:20,960 --> 00:22:22,560 ขวาสุดจะเป็นสีแดงอย่างสมบูรณ์ 384 00:22:22,560 --> 00:22:24,828 และทุกสิ่งในระหว่าง เป็นหน้าที่ของง 385 00:22:24,828 --> 00:22:33,369 386 00:22:33,369 --> 00:22:35,160 เรามีที่น่าสนใจ การสร้างภาพที่นี่ 387 00:22:35,160 --> 00:22:36,952 แต่ข้อมูลของเราเป็นชนิดของน่าเบื่อ 388 00:22:36,952 --> 00:22:39,410 ลองมาดูกันว่าเราจะทำอย่างไรถ้า เรามีข้อมูลที่น่าสนใจมากขึ้น 389 00:22:39,410 --> 00:22:44,420 390 00:22:44,420 --> 00:22:50,500 >> พระราชบัญญัติ IV, การทำงานกับ Data-- สิ่งแรก 391 00:22:50,500 --> 00:22:53,560 เราจะต้องการที่จะทำเพื่อให้เรา การสร้างภาพที่น่าสนใจมากขึ้น 392 00:22:53,560 --> 00:22:56,140 คือการย้ายข้อมูลที่อื่น 393 00:22:56,140 --> 00:22:58,310 มันเป็น clunky มากที่จะมี ข้อมูลรหัสยากที่นี่ 394 00:22:58,310 --> 00:23:01,220 และโดยทั่วไปเราจะขอให้ คนอื่นสำหรับข้อมูลที่ 395 00:23:01,220 --> 00:23:05,400 เราจะอาจจะขอให้รัฐบาล สำนักสำรวจสำมะโนประชากรของสิ่งที่ข้อมูลของคุณ 396 00:23:05,400 --> 00:23:10,170 แล้วพล็อตที่หรือถาม บางกิจการที่บุคคลที่สามสำหรับข้อมูลบางอย่าง 397 00:23:10,170 --> 00:23:13,330 แล้วสร้าง การสร้างภาพว่า 398 00:23:13,330 --> 00:23:17,170 >> ดังนั้นสิ่งแรกที่เราต้องการจะทำ มีการย้ายที่ไปที่อื่น 399 00:23:17,170 --> 00:23:24,130 ดังนั้นฉันจะสร้าง ไฟล์ที่เรียกว่าที่นี่ data.json 400 00:23:24,130 --> 00:23:25,600 JSON เป็นรูปแบบข้อมูล 401 00:23:25,600 --> 00:23:29,210 คุณไม่จำเป็นต้องรู้มากเกี่ยวกับว่า 402 00:23:29,210 --> 00:23:33,210 และเรากำลังจะคัดลอก ข้อมูลเล็ก ๆ น้อย ๆ ที่เรามีอยู่ที่นั่น 403 00:23:33,210 --> 00:23:40,330 วางไว้ในคำต่อคำที่นั่นไป กลับไปที่รหัสการมองเห็นของเรา 404 00:23:40,330 --> 00:23:45,362 ที่นี่และใช้ฟังก์ชันนี้ที่นี่ 405 00:23:45,362 --> 00:23:46,820 คุณไม่จำเป็นต้องทราบรายละเอียด 406 00:23:46,820 --> 00:23:49,800 แต่สิ่งนี้จะทำคือ มันจะหาไฟล์ที่ 407 00:23:49,800 --> 00:23:51,780 เรียกมันและส่งกลับมาให้เรา 408 00:23:51,780 --> 00:24:11,660 409 00:24:11,660 --> 00:24:15,220 ดังนั้นสิ่งนี้จะเป็นมันไป และได้รับไฟล์ data.json 410 00:24:15,220 --> 00:24:18,570 และแล้วทุกรหัสที่ เยื้องตัวในเป็นหลัก 411 00:24:18,570 --> 00:24:21,800 รหัสทั้งหมดที่เรามีตรงนี้จะ ทำงานเฉพาะเมื่อเราได้รับข้อมูลกลับ 412 00:24:21,800 --> 00:24:25,760 และจากนั้นก็จะไปทำงานที่ รหัสกับข้อมูลที่เรามี 413 00:24:25,760 --> 00:24:28,870 ที่ดีที่เรามี การสร้างภาพที่จะสอบถาม 414 00:24:28,870 --> 00:24:31,390 สำหรับรหัสบางอย่างอยู่ที่ไหนสักแห่ง อื่นซึ่งมักจะ 415 00:24:31,390 --> 00:24:36,110 ที่มันจะสอบถามข้อมูลจากบางส่วน ที่อื่นซึ่งมักจะ 416 00:24:36,110 --> 00:24:38,656 วิธีการสร้างภาพทำงาน 417 00:24:38,656 --> 00:24:41,400 >> แต่ผมต้องการที่จะกลับไปที่ข้อมูล 418 00:24:41,400 --> 00:24:48,030 ดังนั้นข้อมูลที่ลึกซึ้งใน D3-- D3 สิ้นเปลืองข้อมูลที่เป็นรายการของสิ่งที่ 419 00:24:48,030 --> 00:24:53,000 D3 คาดว่าข้อมูลเพียงแค่เป็นรายการ ของสิ่งอาร์เรย์ของสิ่ง 420 00:24:53,000 --> 00:24:58,780 มันไม่สำคัญว่าสิ่งที่สิ่งเหล่านั้น ดังนั้นตราบใดที่มันเป็นอาเรย์ของพวกเขา 421 00:24:58,780 --> 00:25:02,460 >> ดังนั้นที่นี่ตัวอย่างเช่นเราสามารถของ แน่นอนมีการลอยค่าจุด 422 00:25:02,460 --> 00:25:04,830 เราจะได้มีเชิงลบ 423 00:25:04,830 --> 00:25:09,400 D3 ไม่สนใจตราบ ที่เป็นรายการของสิ่งที่ 424 00:25:09,400 --> 00:25:13,270 >> สิ่งที่น่าสนใจในขณะที่เรา อาจมีเรายังสามารถทำได้ 425 00:25:13,270 --> 00:25:19,410 มีรายชื่อของสตริงเช่นนั้น 426 00:25:19,410 --> 00:25:25,440 ดังนั้นเหล่านี้เป็นพาดหัวเป็นสีแดงเข้ม ผมหยิบขึ้นมาไม่กี่วันที่ผ่านมา 427 00:25:25,440 --> 00:25:29,220 และบางทีคุณอาจพบที่น่าสนใจบางอย่าง สิ่งที่เกี่ยวกับเหล่านี้พาดหัว 428 00:25:29,220 --> 00:25:30,970 >> ดังนั้นครั้งนี้เป็นรายการของสิ่งที่ 429 00:25:30,970 --> 00:25:32,360 D3 ไม่ได้ดูแล 430 00:25:32,360 --> 00:25:35,572 เหล่านี้เกิดขึ้นจะเป็นสตริง 431 00:25:35,572 --> 00:25:36,530 เราได้มีการเปลี่ยนแปลงข้อมูลของเรา 432 00:25:36,530 --> 00:25:38,210 >> ลองกลับไปที่การสร้างภาพของเรา 433 00:25:38,210 --> 00:25:42,495 ตอนนี้เราคาดว่าการสร้างภาพ การป้อนข้อมูลให้เป็นตัวเลข 434 00:25:42,495 --> 00:25:44,370 ดังนั้นเรากำลังจะมี ที่จะทำให้การเปลี่ยนแปลงเล็กน้อย 435 00:25:44,370 --> 00:25:47,180 436 00:25:47,180 --> 00:25:52,180 ดังนั้นสำหรับตัวอย่างแรกของทุกคนอาจจะ เราต้องการที่จะนำวงการเหล่านี้พร้อม 437 00:25:52,180 --> 00:25:56,870 โดยความยาวของพาดหัว, จำนวนตัวอักษรในพาดหัว 438 00:25:56,870 --> 00:26:03,600 >> ดังนั้นสิ่งที่เราจะทำเท่าไหร่เวลาของเราทุกคน ฟังก์ชั่นเรียกว่ามีสตริง 439 00:26:03,600 --> 00:26:09,095 เราจะพบว่ามันเป็นระยะเวลาและ แล้วผ่านที่จะไต่ 440 00:26:09,095 --> 00:26:11,550 สีผมจะกลับมา ที่เป็นสีฟ้าเหล็ก 441 00:26:11,550 --> 00:26:19,060 442 00:26:19,060 --> 00:26:20,420 และมีที่เราจะไป 443 00:26:20,420 --> 00:26:23,190 เรามีการสร้างภาพ พาดหัวเป็นสีแดงเข้ม 444 00:26:23,190 --> 00:26:25,500 >> ขนาดเราเป็นบิตออก 445 00:26:25,500 --> 00:26:29,680 สมมติว่ายาวที่สุด พาดหัวเป็น 100 ตัวอักษรยาว 446 00:26:29,680 --> 00:26:32,244 ดังนั้นช่วงที่ออกมาเล็กน้อย 447 00:26:32,244 --> 00:26:33,410 และเรามีการสร้างภาพ 448 00:26:33,410 --> 00:26:36,710 ดังนั้นจึงดูเหมือนว่าพาดหัวมากที่สุด มีความสวยใกล้กัน 449 00:26:36,710 --> 00:26:38,750 ในแง่ของสายอักขระ 450 00:26:38,750 --> 00:26:41,200 แต่สิ่งหนึ่งที่นั่นจริงๆยืนออก 451 00:26:41,200 --> 00:26:46,660 >> เราสามารถสร้างเครื่องมือบางอย่าง ในการสำรวจว่า 452 00:26:46,660 --> 00:26:50,710 แต่เมื่อผมทำงานเกี่ยวกับเรื่องนี้ผมเป็น อยากรู้อยากเห็นว่าในข้อมูลชุดนี้ 453 00:26:50,710 --> 00:26:53,880 พาดหัวข่าวกับลำไส้ใหญ่ ในพวกเขาจะเป็นอีกต่อไป 454 00:26:53,880 --> 00:26:55,770 ผมถือว่าพวกเขาจะ 455 00:26:55,770 --> 00:26:56,660 >> ดังนั้นเรามาหา 456 00:26:56,660 --> 00:27:00,650 ลองใช้สี ช่องเหมือนที่เราทำมาก่อน 457 00:27:00,650 --> 00:27:04,540 การเข้ารหัสบางอย่างเกี่ยวกับว่า มีลำไส้ใหญ่หรือไม่มีเลย 458 00:27:04,540 --> 00:27:07,220 ดังนั้นเราจะใช้เงื่อนไขอีกครั้ง 459 00:27:07,220 --> 00:27:09,350 คุณไม่จำเป็นต้องรู้ รายละเอียดของการนี​​้, 460 00:27:09,350 --> 00:27:14,260 แต่นี่คือวิธีการที่เราตรวจสอบ สตริงสำหรับตัวละครโดยเฉพาะอย่างยิ่ง 461 00:27:14,260 --> 00:27:16,355 ใน JavaScript อีกครั้งไม่เกี่ยวข้อง 462 00:27:16,355 --> 00:27:18,910 463 00:27:18,910 --> 00:27:23,270 >> แต่ถ้าเราจะไม่พบ ลำไส้ใหญ่เราจะกลับสีเขียว 464 00:27:23,270 --> 00:27:26,100 และถ้าเราทำเราจะกลับสีแดง 465 00:27:26,100 --> 00:27:29,010 ดังนั้นอีกครั้งพาดหัวข่าวว่า ได้ลำไส้ใหญ่จะเป็นสีแดง 466 00:27:29,010 --> 00:27:34,980 นี่คือสิ่งที่ means-- นี้มีความสุข 467 00:27:34,980 --> 00:27:38,040 >> ดังนั้นจึงดูเหมือนว่าฉัน สมมติฐานชน 468 00:27:38,040 --> 00:27:39,360 มีเพียงสองคือ 469 00:27:39,360 --> 00:27:42,380 เรามีเพียงหกจุดข้อมูล และมีเพียงสองมีทวิภาค 470 00:27:42,380 --> 00:27:45,510 แต่ดูเหมือนว่าน้อยมาก ในระดับล่างสุดในความเป็นจริง 471 00:27:45,510 --> 00:27:47,830 พาดหัวข่าวกับทวิภาคดูเหมือน ไปโดยทั่วไปจะสั้นลง 472 00:27:47,830 --> 00:27:52,370 อย่างน้อยในข้อมูลของเราถึงตรงที่น่าสนใจ 473 00:27:52,370 --> 00:27:55,830 >> ลองกลับไปที่ เหล็กสีฟ้าแล้วดู 474 00:27:55,830 --> 00:28:00,601 สิ่งที่เราสามารถทำกับแม้กระทั่ง ข้อมูลที่น่าสนใจมากขึ้น 475 00:28:00,601 --> 00:28:04,370 476 00:28:04,370 --> 00:28:09,070 ดังนั้นอีกครั้งที่ผมกล่าวถึงว่า ข้อมูลใน D3 เป็นรายการของสิ่งที่ 477 00:28:09,070 --> 00:28:11,080 เราได้เห็นตัวเลขมากมายหลายชนิด 478 00:28:11,080 --> 00:28:12,810 เราได้เห็นสตริง 479 00:28:12,810 --> 00:28:15,700 แต่สิ่งที่ยังสามารถเป็นวัตถุ 480 00:28:15,700 --> 00:28:20,080 >> พวกเขาสามารถเป็นสิ่งที่ซับซ้อน ที่มีสิ่งต่างๆมากมาย 481 00:28:20,080 --> 00:28:24,510 ที่จะบอกว่าชัดเจนมากขึ้น ในกรณีส่วนใหญ่เรา 482 00:28:24,510 --> 00:28:28,384 ต้องการที่จะสร้างจุดข้อมูลทุก ซับซ้อนมากขึ้นกว่าเพียงหนึ่งค่า 483 00:28:28,384 --> 00:28:30,175 หากคุณต้องการจินตนาการ ฐานข้อมูลเกี่ยวกับนักเรียน 484 00:28:30,175 --> 00:28:32,470 อาจจะมีนักเรียน ชื่อ, รหัสนักศึกษา, 485 00:28:32,470 --> 00:28:36,370 และจำนวนมากของสิ่งที่เกี่ยวข้อง ที่มีการบันทึกโดยเฉพาะอย่างยิ่ง 486 00:28:36,370 --> 00:28:39,834 ไม่ได้เป็นเพียงสตริงหรือจำนวน 487 00:28:39,834 --> 00:28:40,750 ดังนั้นให้ดูที่ว่า 488 00:28:40,750 --> 00:28:55,180 489 00:28:55,180 --> 00:28:56,760 >> นี้เป็นหนึ่งในข้อมูลดังกล่าวตั้ง 490 00:28:56,760 --> 00:28:59,090 นี้เป็นชุดข้อมูลที่เกี่ยวกับการเกิดแผ่นดินไหว 491 00:28:59,090 --> 00:29:01,910 492 00:29:01,910 --> 00:29:08,430 ดังนั้นทุกอย่างที่นี่ในรายการหรืออาร์เรย์ของเรา ของสิ่งที่มีหลายสิ่งที่ตัวเอง 493 00:29:08,430 --> 00:29:11,380 ดังนั้นจุดข้อมูลทุกคนมี ขนาดและการประสานงาน 494 00:29:11,380 --> 00:29:13,425 และพิกัดของตัวเอง มีสองสิ่ง 495 00:29:13,425 --> 00:29:15,960 496 00:29:15,960 --> 00:29:20,450 >> ดังนั้นทุกวันอยู่ในขณะนี้มากขึ้น ที่มีความซับซ้อนและมากน่าสนใจมากขึ้น 497 00:29:20,450 --> 00:29:22,700 และมีมากขึ้น ข้อมูลที่น่าสนใจ 498 00:29:22,700 --> 00:29:26,730 ลองมาดูกันว่าเราสามารถสร้างออกจากที่ 499 00:29:26,730 --> 00:29:36,130 กลับกลับไปที่นี่อีกครั้งโดยใช้ การสร้างภาพวงกลม histogram ของเรา 500 00:29:36,130 --> 00:29:42,110 เราได้สร้างให้ดูว่าเราสามารถสร้าง การสร้างภาพของการกระจายขนาด 501 00:29:42,110 --> 00:29:43,305 อยู่ในชุดข้อมูลของเรา 502 00:29:43,305 --> 00:29:45,850 503 00:29:45,850 --> 00:29:48,660 >> ดังนั้นที่นี่มันเป็นแนวคิดเดียวกัน 504 00:29:48,660 --> 00:29:51,920 แต่ตอนนี้มีสิ่งที่ดีมากขึ้น 505 00:29:51,920 --> 00:29:54,780 งมีองค์ประกอบข้อมูลจำนวนมาก 506 00:29:54,780 --> 00:29:57,946 ดังนั้นเราจึงได้รับการ d กลับ 507 00:29:57,946 --> 00:29:59,670 D3 ทำให้เรา d 508 00:29:59,670 --> 00:30:06,080 และเราตอบสนองโดยการหาขนาด งแล้วผ่านที่ขนาด 509 00:30:06,080 --> 00:30:08,490 >> แล้วเราต้องเปลี่ยน ขนาดของเราแน่นอน 510 00:30:08,490 --> 00:30:12,980 ดังนั้นเคาะก็ทำไม่ได้ มากไปกว่า 10 511 00:30:12,980 --> 00:30:15,485 ที่จริงมีไม่เคย แผ่นดินไหวขนาด 10 512 00:30:15,485 --> 00:30:19,360 แต่นั่นเป็นชนิดของเราบน ปลายสเปกตรัมบนของเรา 513 00:30:19,360 --> 00:30:20,240 >> ลองรีเฟรช 514 00:30:20,240 --> 00:30:22,990 ดีที่เรามีการสร้างภาพ 515 00:30:22,990 --> 00:30:25,490 มันน่าสนใจที่จะ note-- ดังนั้น มีสองจุดข้อมูลที่ 516 00:30:25,490 --> 00:30:29,010 เกือบจะตรงกับด้านบนของแต่ละ อื่น ๆ ในแง่ของขนาด 517 00:30:29,010 --> 00:30:31,350 คุณจะเห็นนี้โดยความทึบแสงที่เรากำลังใช้ 518 00:30:31,350 --> 00:30:40,810 519 00:30:40,810 --> 00:30:42,690 >> เรามีข้อมูลทางภูมิศาสตร์ในขณะนี้ 520 00:30:42,690 --> 00:30:44,710 เรามีละติจูดและลองจิจูด 521 00:30:44,710 --> 00:30:47,549 บางทีเราอาจจะทำอะไรบางอย่าง จำนวนมากที่น่าสนใจมากขึ้นกับว่า 522 00:30:47,549 --> 00:30:49,590 ลองหาข้อมูลเพิ่มเติมบางส่วน วิธีที่น่าสนใจที่จะเห็นภาพ 523 00:30:49,590 --> 00:30:53,500 นี้มีความซับซ้อนมากขึ้น ข้อมูลที่เรามีการเข้าถึง 524 00:30:53,500 --> 00:31:04,950 >> พระราชบัญญัติ V, Mapping-- พื้นฐาน เราต้องการที่จะนำเหล่านี้บนแผนที่ 525 00:31:04,950 --> 00:31:07,690 ฉันหมายความว่านี่คือที่นี้เป็นไป 526 00:31:07,690 --> 00:31:13,130 เราต้องการที่จะเข้ารหัสข้อมูลเกี่ยวกับ ตำแหน่งของการอ่านแผ่นดินไหวเหล่านี้ 527 00:31:13,130 --> 00:31:16,350 รวมทั้งความสำคัญของพวกเขา เพราะเรามีที่ตอนนี้ 528 00:31:16,350 --> 00:31:21,310 เราเข้าใจวิธีการกิน ข้อมูลที่ซับซ้อนมากขึ้น 529 00:31:21,310 --> 00:31:26,200 >> สิ่งแรกที่เราจะทำคือ สร้างแผนที่แผนที่พื้นหลัง 530 00:31:26,200 --> 00:31:29,360 ผมกำลังจะผ่านไป นี้ได้อย่างรวดเร็ว 531 00:31:29,360 --> 00:31:30,560 นี้เป็นรหัสยุ่งยาก 532 00:31:30,560 --> 00:31:33,110 เป็นอีกหนึ่งในบรรดา สูตรที่คุณทำไม่ได้จริงๆ 533 00:31:33,110 --> 00:31:35,690 ต้องเข้าใจอย่างเต็มที่เพื่อให้คุณใช้ 534 00:31:35,690 --> 00:31:38,510 535 00:31:38,510 --> 00:31:39,740 แต่นี่เป็นรหัส 536 00:31:39,740 --> 00:31:43,580 รหัสนี้ที่นี่สร้างแผนที่ 537 00:31:43,580 --> 00:31:45,730 >> เราไม่ได้จะไปในรายละเอียด 538 00:31:45,730 --> 00:31:54,210 แต่เผิน ๆ สิ่งที่มันไม่เป็น มัน queries ไฟล์ us.json นี้ซึ่ง 539 00:31:54,210 --> 00:31:57,150 เป็นแฟ้มข้อมูลเช่น คนที่เราเคยมีมาก่อน 540 00:31:57,150 --> 00:31:59,150 มันเป็นเรื่องที่ซับซ้อนมากขึ้นแน่นอน 541 00:31:59,150 --> 00:32:02,920 แต่ในกรณีนี้ทุกอย่าง จุดข้อมูลทุกรัฐนี้ 542 00:32:02,920 --> 00:32:05,420 และมีรายชื่อของ ละติจูดและลองจิจูด 543 00:32:05,420 --> 00:32:10,500 ที่กำหนดรูปหลายเหลี่ยม, แบบฟอร์มที่รัฐว่า 544 00:32:10,500 --> 00:32:13,280 >> ดังนั้นสิ่งที่จะทำ D3 คล้าย กับสิ่งที่เราทำมาก่อน 545 00:32:13,280 --> 00:32:18,140 มันจะขอให้และ ผูกที่องค์ประกอบ 546 00:32:18,140 --> 00:32:20,890 และมีฟังก์ชั่นที่ แผนที่จะองค์ประกอบที่ออก 547 00:32:20,890 --> 00:32:23,410 ขึ้นอยู่กับละติจูดและลองจิจูด 548 00:32:23,410 --> 00:32:24,580 คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการที่ 549 00:32:24,580 --> 00:32:27,385 และผมขอแนะนำให้มัน 550 00:32:27,385 --> 00:32:30,090 >> มีการเชื่อมโยงที่มี ในตอนท้ายของรหัสนี้โพสต์ 551 00:32:30,090 --> 00:32:31,570 และรหัสที่มีการแสดงความคิดเห็น 552 00:32:31,570 --> 00:32:34,050 ในที่มีการเชื่อมโยงสำหรับเพิ่มเติมเกี่ยวกับเรื่องนี้ 553 00:32:34,050 --> 00:32:36,590 ผมขอแนะนำให้คุณมองมันได้ 554 00:32:36,590 --> 00:32:39,460 แต่สิ่งที่เราสนใจคือ ฟังก์ชันการฉายนี้ 555 00:32:39,460 --> 00:32:41,210 ผมต้องการที่จะผ่านไปที่ 556 00:32:41,210 --> 00:32:43,522 >> ครั้งแรกของทั้งหมดให้ฉันแสดง คุณว่าใช่เรามีแผนที่ 557 00:32:43,522 --> 00:32:47,300 558 00:32:47,300 --> 00:32:49,970 แผนที่จะเย็น 559 00:32:49,970 --> 00:32:52,330 ดังนั้นเรามาดูที่นี้ ฟังก์ชั่นการผลิต 560 00:32:52,330 --> 00:32:56,481 >> ฉายเป็นอย่างมาก เช่นขนาด, ตาชั่งอีกครั้ง 561 00:32:56,481 --> 00:32:59,210 ดังนั้นสิ่งที่ผลิต ฟังก์ชันการฉายนี้ 562 00:32:59,210 --> 00:33:06,610 จะให้ความสำคัญเราสามารถผ่านมันเส้นแวง และ latitudes-- ในกรณีนี้ 563 00:33:06,610 --> 00:33:09,590 ค่าเหล่านี้ที่นี่มี ปรารถนา-lat ของอาคาร 564 00:33:09,590 --> 00:33:13,990 เรากำลังนั่งอยู่ในที่เหมาะสม now-- ที่จะฉาย 565 00:33:13,990 --> 00:33:20,560 และประมาณการจะแปลง ที่เป็น x และ y ค่าพิกเซล 566 00:33:20,560 --> 00:33:23,300 >> ดังนั้นสิ่งที่ฉายจะทำ จะคล้ายกับขนาดของเรา 567 00:33:23,300 --> 00:33:27,270 ก็สละละติจูดของเราและ เส้นแวงที่แสดงถึงโลกทั้ง 568 00:33:27,270 --> 00:33:31,390 และหดตัวและการปรับขนาดที่ ลงไปที่ตารางที่เราต้องการ 569 00:33:31,390 --> 00:33:33,510 ที่เราได้รับมัน 570 00:33:33,510 --> 00:33:35,220 ในกรณีนี้เราไม่ ผ่านค่าเหล่านี้ 571 00:33:35,220 --> 00:33:41,370 และมันก็ทำให้เรามีดีที่ บนหน้าจอของคุณหมายถึง 640 พิกเซล 572 00:33:41,370 --> 00:33:46,250 หน้าจอนี้ทั้งหมดเป็น 700 พิกเซล กว้างเพื่อที่จะทำให้เราเกี่ยวกับที่นี่ 573 00:33:46,250 --> 00:33:53,310 และ 154 พิกเซลลงที่ฉันจะ ประมาณการสวยมากที่นี่ 574 00:33:53,310 --> 00:33:57,250 >> ดังนั้นการผู้ lat-ปรารถนาซึ่ง เป็นตัวแทนของบางสิ่งบางอย่างในโลกทั้ง 575 00:33:57,250 --> 00:34:02,850 และ squishing และการย้ายที่อยู่รอบ ๆ เพื่อให้เรามี x และค่าพิกเซล y, 576 00:34:02,850 --> 00:34:05,450 นี้เป็นสิ่งแรกที่ ทำในรหัสการทำแผนที่นี้ 577 00:34:05,450 --> 00:34:07,920 และจากนั้นส่วนที่เหลือของ รหัสสิ้นเปลืองข้อมูล 578 00:34:07,920 --> 00:34:14,310 แล้วแผนที่เหล่านั้น lat-ปรารถนา บนบางสิ่งบางอย่างบนหน้าจอของคุณ 579 00:34:14,310 --> 00:34:18,380 >> แต่เรากำลังจะใช้การฉายภาพนี้ ฟังก์ชั่นเพราะมันจะเปิดออก 580 00:34:18,380 --> 00:34:20,270 เรามีปรารถนา lat-ปรารถนาเป็นอย่างดี 581 00:34:20,270 --> 00:34:24,509 มองย้อนกลับไปที่ข้อมูลของเราเรามี เส้นรุ้งเส้นแวงและพิกัด 582 00:34:24,509 --> 00:34:25,425 สำหรับทุกการสังเกต 583 00:34:25,425 --> 00:34:28,131 584 00:34:28,131 --> 00:34:29,130 ดังนั้นขอให้ใช้การฉาย 585 00:34:29,130 --> 00:34:33,250 586 00:34:33,250 --> 00:34:37,639 >> ดังนั้นมองไปที่การแสดงออกของเรา เราต้องการ exposition-- ของเรา 587 00:34:37,639 --> 00:34:39,590 เรามีละติจูดและลองจิจูด 588 00:34:39,590 --> 00:34:40,770 แต่เราต้องการค่าพิกเซล 589 00:34:40,770 --> 00:34:43,510 และมันจะเปิดออกเราได้ว่า สิ่งที่เรา want-- ฉาย 590 00:34:43,510 --> 00:34:46,239 อย่างมากเช่นที่เราอยู่ โดยใช้มาตราส่วนที่นี่ 591 00:34:46,239 --> 00:34:52,075 ตอนนี้เราจะใช้การฉาย และผ่านมันพิกัด 592 00:34:52,075 --> 00:34:55,241 593 00:34:55,241 --> 00:34:56,949 ดังนั้นสิ่งแรกที่ เรากำลัง doing-- ดังนั้นเรา 594 00:34:56,949 --> 00:35:01,520 รับวันซึ่งเป็นข้อมูลของแต่ละบุคคล องค์ประกอบของการเกิดแผ่นดินไหวแต่ละบุคคล 595 00:35:01,520 --> 00:35:02,370 การอ่าน 596 00:35:02,370 --> 00:35:04,640 สิ่งแรกที่เราทำ จะได้รับพิกัด 597 00:35:04,640 --> 00:35:06,150 สิทธิทั้งหมดที่เรามีพิกัด 598 00:35:06,150 --> 00:35:09,160 >> สิ่งที่สองที่เราทำคือ ที่ผ่านไปฉาย 599 00:35:09,160 --> 00:35:13,440 ฉายแปลงพิกัดเหล่านั้น เป็นค่าพิกเซล, x และ y 600 00:35:13,440 --> 00:35:16,680 และแล้วสิ่งสุดท้ายที่เรา ต้องการจะทำคือเพียงแค่ได้รับ x, 601 00:35:16,680 --> 00:35:19,342 ซึ่งในกรณีนี้เป็นครั้งแรกหนึ่ง 602 00:35:19,342 --> 00:35:22,050 มันเป็นครั้งแรกของทั้งสองสิ่ง ที่ส่งคืนโดยการฉาย 603 00:35:22,050 --> 00:35:27,840 604 00:35:27,840 --> 00:35:29,630 >> เราจะทำเช่นเดียวกันสำหรับปี 605 00:35:29,630 --> 00:35:34,960 แต่แทนที่จะเราจะกลับมา องค์ประกอบที่สอง, y 606 00:35:34,960 --> 00:35:35,980 พร้อมที่จะรับการฟื้นฟู 607 00:35:35,980 --> 00:35:39,830 608 00:35:39,830 --> 00:35:46,450 โออักขระพิเศษ มีความสุขตรงนี้เรามี 609 00:35:46,450 --> 00:35:51,730 ข้อมูลเอกสารการขับเคลื่อนที่ ปกปิดไฟล์ JSON ของวัตถุนี้ 610 00:35:51,730 --> 00:35:57,560 การทำแผนที่และการเปลี่ยน แอตทริบิวต์ที่เกี่ยวข้องกับข้อมูล 611 00:35:57,560 --> 00:35:59,600 โครงการบนแผนที่ 612 00:35:59,600 --> 00:36:00,840 นี้เป็นที่น่าสนใจจริงๆ 613 00:36:00,840 --> 00:36:03,770 นี่คือเย็น 614 00:36:03,770 --> 00:36:05,640 >> เราจะทำมันขึ้นรอย 615 00:36:05,640 --> 00:36:08,795 ผมหมายความว่าเรามีสองชิ้น ข้อมูลที่มีจุดข้อมูลทุก 616 00:36:08,795 --> 00:36:10,000 ผมหมายถึงสาม 617 00:36:10,000 --> 00:36:12,540 เรามีพิกัด ซึ่งเป็น x และ y 618 00:36:12,540 --> 00:36:15,700 และเรามีความสำคัญ 619 00:36:15,700 --> 00:36:17,420 >> เราจำเป็นต้องมีการเข้ารหัสความสำคัญอย่างใด 620 00:36:17,420 --> 00:36:18,920 เรามีจำนวนมากของช่องทาง 621 00:36:18,920 --> 00:36:20,370 เราสามารถใช้สี 622 00:36:20,370 --> 00:36:21,890 เราสามารถใช้รัศมี 623 00:36:21,890 --> 00:36:23,040 เราสามารถใช้ความทึบแสง 624 00:36:23,040 --> 00:36:25,540 เราสามารถใช้หลายสิ่งหลายอย่างในรหัส 625 00:36:25,540 --> 00:36:29,180 ใด ๆ ของคุณลักษณะเหล่านี้และอีกมากมาย อื่น ๆ อีกมากมายที่ไม่ได้จดทะเบียนมี 626 00:36:29,180 --> 00:36:33,065 เพราะพวกเขากำลังไม่จำเป็นที่เราจะทำได้ ใช้ในการเข้ารหัสข้อมูลนี้โรคหลอดเลือดสมอง 627 00:36:33,065 --> 00:36:35,670 และสิ่งเหล่านี้ผมได้กล่าวถึง 628 00:36:35,670 --> 00:36:36,690 >> ขอทำรัศมี 629 00:36:36,690 --> 00:36:38,830 ผมคิดว่ารัศมีคือใช้งานง่ายที่สุด 630 00:36:38,830 --> 00:36:46,210 ดังนั้นอีกครั้งเราจะเปลี่ยนที่กำหนดค่าตายตัว 40 และทำให้การคำนวณบาง 631 00:36:46,210 --> 00:36:48,810 เราจะใช้ขนาดที่ชื่นชอบของเราอีกครั้ง 632 00:36:48,810 --> 00:36:50,290 และเราก็ผ่านมาง 633 00:36:50,290 --> 00:36:55,850 แต่ไม่ได้ d เพราะเราต้องการขนาด ง งเป็นเพียงจุดข้อมูล 634 00:36:55,850 --> 00:36:57,430 เราจะผ่านความสำคัญในการปรับขนาด 635 00:36:57,430 --> 00:36:58,470 >> ลองอีกครั้ง 636 00:36:58,470 --> 00:37:00,230 โอ้วมันไม่ทำงาน 637 00:37:00,230 --> 00:37:02,940 ทำไมมันไม่ทำงาน? 638 00:37:02,940 --> 00:37:04,387 >> ดังนั้นอย่าลืมสิ่งที่ขนาดไม่ 639 00:37:04,387 --> 00:37:05,470 ลองดูที่ขนาดอีกครั้ง 640 00:37:05,470 --> 00:37:10,800 แผนที่มาตราส่วน 1-10 บน เพื่อ 22-600 มากกว่าหรือน้อยกว่า 641 00:37:10,800 --> 00:37:12,030 600 มีขนาดใหญ่มาก 642 00:37:12,030 --> 00:37:14,730 นี่คือเหตุผลที่เราได้รับนี้ 643 00:37:14,730 --> 00:37:18,420 >> ดังนั้นเราจึงต้องการที่จะเปลี่ยนขนาดของเรา บางสิ่งบางอย่างที่เหมาะสมมากขึ้น 644 00:37:18,420 --> 00:37:22,610 สมมติว่าเราต้องการที่ 0-60 645 00:37:22,610 --> 00:37:25,340 60 มีขนาดใหญ่ แต่ 10 แผ่นดินไหว เป็นของหายากอย่างไม่น่าเชื่อ 646 00:37:25,340 --> 00:37:27,880 ในความเป็นจริงพวกเขาไม่เคยเกิดขึ้น 647 00:37:27,880 --> 00:37:31,830 >> ดังนั้นสิ่งนี้จะทำคือมันจะใช้เวลา ขนาดของเราที่จะไป 1-10 648 00:37:31,830 --> 00:37:34,490 และแผนที่มันเกี่ยวกับที่จะขยายมันออกมา 649 00:37:34,490 --> 00:37:37,370 และแผนที่มันไป 0-60 650 00:37:37,370 --> 00:37:38,840 ลองรีเฟรช 651 00:37:38,840 --> 00:37:41,850 >> ดีที่เรามีการสร้างภาพ 652 00:37:41,850 --> 00:37:42,500 นี่คือที่ดี 653 00:37:42,500 --> 00:37:43,736 นี้เป็นข้อมูลจริง 654 00:37:43,736 --> 00:37:46,360 คุณจะสังเกตเห็นในของเล่นเล็ก ๆ น้อย ๆ ของฉัน ตัวอย่างเช่นแผ่นดินไหวที่ใหญ่ที่สุด 655 00:37:46,360 --> 00:37:49,417 เป็นขวาด้านบนของเรา 656 00:37:49,417 --> 00:37:50,000 แต่ที่มัน 657 00:37:50,000 --> 00:37:54,422 เรามีการสร้างภาพที่ขับเคลื่อน ที่กินข้อมูล 658 00:37:54,422 --> 00:37:56,255 และทำให้เราจริงๆ ข้อมูลที่น่าสนใจ 659 00:37:56,255 --> 00:38:02,600 660 00:38:02,600 --> 00:38:06,420 ใช่ให้เพิ่มบางส่วน การติดต่อสื่อสารกับมัน 661 00:38:06,420 --> 00:38:08,675 ที่ผมกล่าวถึงว่าเป็น แรงของ D3 662 00:38:08,675 --> 00:38:11,490 663 00:38:11,490 --> 00:38:15,060 >> ดังนั้นที่นี่สำหรับทุกองค์ประกอบเราไม่ อธิบายพวงของคุณลักษณะ 664 00:38:15,060 --> 00:38:20,230 แต่เรายังสามารถอธิบายสิ่งที่เราต้องการ ที่จะเกิดขึ้นกับองค์ประกอบการติดต่อสื่อสาร 665 00:38:20,230 --> 00:38:26,190 ตัวอย่างเช่นเราสามารถอธิบาย สิ่งที่เกิดขึ้นเมื่อเราเลื่อนเมาส์ไป 666 00:38:26,190 --> 00:38:28,740 667 00:38:28,740 --> 00:38:33,640 และคล้ายว่า ที่จะนำฟังก์ชั่น 668 00:38:33,640 --> 00:38:36,700 คล้ายกับ แอตทริบิวต์ที่เรามีมาก่อน 669 00:38:36,700 --> 00:38:44,650 ที่เราทำบางอย่างเพื่อ องค์ประกอบเมื่อเราเลื่อนไปมัน 670 00:38:44,650 --> 00:38:47,100 >> ดังนั้นสิ่งแรกที่เราต้อง ทำคือการเลือกองค์ประกอบที่ 671 00:38:47,100 --> 00:38:49,435 ที่จะหาได้โดยทั่วไปในเบราว์เซอร์ 672 00:38:49,435 --> 00:38:57,090 673 00:38:57,090 --> 00:39:00,920 แล้วเราสามารถตั้งค่า แอตทริบิวต์กับมัน 674 00:39:00,920 --> 00:39:06,870 ดังนั้นสิ่งที่ฉันทำที่นี่คือเมื่อเราเลื่อน มากกว่าสิ่งที่เราจะได้รับองค์ประกอบที่ 675 00:39:06,870 --> 00:39:11,197 จากนั้นตั้งค่าความทึบแสงของมันกลับ 1, การทึบแสงสมบูรณ์ 676 00:39:11,197 --> 00:39:12,488 ลองมาดูสิ่งที่ดูเหมือนว่า 677 00:39:12,488 --> 00:39:29,430 678 00:39:29,430 --> 00:39:39,080 >> มันจะปรากฏขึ้นที่เรามี อัฒภาคพิเศษที่นี่ 679 00:39:39,080 --> 00:39:42,420 ดังนั้นหากเราเลื่อนเมาส์ไปที่นี่จะได้รับเต็มรูปแบบ 680 00:39:42,420 --> 00:39:46,530 681 00:39:46,530 --> 00:39:48,960 แต่ตอนนี้แน่นอนมัน อยู่เต็มเพราะเรา 682 00:39:48,960 --> 00:39:53,240 ต้องอธิบายสิ่งที่เกิดขึ้น เมื่อเอา​​เคอร์เซอร์ของเรา 683 00:39:53,240 --> 00:39:59,990 ดังนั้นเรามาทำตรงว่าเมื่อวันที่ mouseout เมื่อเทียบกับการวางเมาส์ 684 00:39:59,990 --> 00:40:06,399 >> และเราจะตั้งค่าให้ สิ่งที่เรามี before-- 0.5 685 00:40:06,399 --> 00:40:10,260 และตอนนี้ทุกครั้งที่เรา โฉบเราได้รับเต็มวง 686 00:40:10,260 --> 00:40:13,468 มันจะช่วยให้เราเห็นสิ่งที่เรา เราเลือกเป็นหลัก 687 00:40:13,468 --> 00:40:19,210 688 00:40:19,210 --> 00:40:22,860 >> และตอนนี้ขอให้นี้ดีจริงๆ 689 00:40:22,860 --> 00:40:26,210 ลองเชื่อมต่อนี้ไปยังข้อมูลจริง 690 00:40:26,210 --> 00:40:30,890 ดังนั้นขอถามจะทำได้ USGS เกี่ยวกับข้อมูลของพวกเขา 691 00:40:30,890 --> 00:40:35,630 ดังนั้นการสำรวจทางธรณีวิทยาของสหรัฐ มีข้อมูลเกี่ยวกับการเกิดแผ่นดินไหว 692 00:40:35,630 --> 00:40:41,460 พวกเขามีประชาชน API ที่สามารถ ที่จะบริโภคในรูปแบบ JSON 693 00:40:41,460 --> 00:40:42,548 ดังนั้นขอให้ทำอย่างนั้น 694 00:40:42,548 --> 00:40:49,730 695 00:40:49,730 --> 00:40:55,900 >> ดังนั้นนี่คือบิตของรหัสที่ เชื่อมต่อกับ USGS API 696 00:40:55,900 --> 00:40:57,990 และมีบิตของการประมวลผลที่มัน 697 00:40:57,990 --> 00:41:02,200 นี้ไม่ได้เกี่ยวข้อง แต่มันช่วยลดความยุ่งยาก เป็นรูปแบบข้อมูลง่ายอย่างหนึ่ง 698 00:41:02,200 --> 00:41:03,800 เรามีมาก่อน 699 00:41:03,800 --> 00:41:08,140 ดังนั้นผมจึงได้รับการกำจัดของสายของเราที่จะ data.json ปลอมของเราในแฟ้ม 700 00:41:08,140 --> 00:41:13,110 และแทนฉันโทร USGS เป็นหลัก 701 00:41:13,110 --> 00:41:16,700 >> ลองรีเฟรชดี 702 00:41:16,700 --> 00:41:21,260 นี้เป็นจริงข้อมูลในชีวิตจริง จากสัปดาห์สำหรับการเกิดแผ่นดินไหวครั้งนี้ 703 00:41:21,260 --> 00:41:23,217 นี้เป็นที่น่าสนใจจริงๆ 704 00:41:23,217 --> 00:41:25,050 นี้ไม่น่าแปลกใจ สำหรับเรา แต่มี 705 00:41:25,050 --> 00:41:27,909 จำนวนมากของการเกิดแผ่นดินไหวบน ฝั่งตะวันตกในแคลิฟอร์เนีย 706 00:41:27,909 --> 00:41:30,950 แต่ผมคิดว่ามันเป็นที่น่าสนใจมาก ว่ามีการเกิดแผ่นดินไหวจำน​​วนมาก 707 00:41:30,950 --> 00:41:34,350 ในอลาสกาและเห็นได้ชัด ที่นี่ในมิดเวสต์ 708 00:41:34,350 --> 00:41:37,630 ผมหมายถึงที่น่าสนใจและเรากำลังดี 709 00:41:37,630 --> 00:41:40,410 นั่นเป็นข้อสรุป 710 00:41:40,410 --> 00:41:43,760 >> แต่พื้นฐานนี้ คือสิ่งที่จะช่วยให้เรา D3 ทำ 711 00:41:43,760 --> 00:41:48,030 มันจะช่วยให้เราใช้ข้อมูลที่ผูก มันกับองค์ประกอบใน DOM, 712 00:41:48,030 --> 00:41:51,620 และมีองค์ประกอบเหล่านั้นเปลี่ยน เป็นหน้าที่ของข้อมูล 713 00:41:51,620 --> 00:41:54,780 มีแอตทริบิวต์เหล่านั้นทั้งหมด คุณลักษณะหลายองค์ประกอบ 714 00:41:54,780 --> 00:41:57,393 ทั้งหมดจะเป็นประโยชน์สำหรับช่องทาง ในการถ่ายทอดข้อมูล 715 00:41:57,393 --> 00:42:05,440 716 00:42:05,440 --> 00:42:09,290 >> D3 เป็นที่มีประสิทธิภาพอย่างไม่น่าเชื่อ ห้องสมุดและทำงานได้ดีอย่างน่าอัศจรรย์ 717 00:42:09,290 --> 00:42:12,260 นี่คือบางสิ่งที่มีประสิทธิภาพ 718 00:42:12,260 --> 00:42:15,960 การแสดงข้อมูลเป็น เครื่องมือที่มีประสิทธิภาพอย่างไม่น่าเชื่อ 719 00:42:15,960 --> 00:42:21,530 สำหรับการถ่ายทอดให้กับคนที่ลึก ข้อมูลเชิงลึกที่ได้รับการหลักของพวกเขา 720 00:42:21,530 --> 00:42:25,430 และช่วยให้พวกเขาเข้าใจใน วิธีนี้ลึกซึ้งและใช้งานง่าย 721 00:42:25,430 --> 00:42:29,760 วิธีการทำงานของข้อมูลและวิธีการ เปลี่ยนแปลงข้อมูลชีวิตของเรา 722 00:42:29,760 --> 00:42:31,019