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 Chouinard: მე ვარ დავით Chouinard, და ეს არის 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 ჩვენ მივიღეთ უფრო demos პერსპექტივები შესაძლებელი. 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 მოდით გავლა იგი. 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 circle-- ჩვენ უბრალოდ გააკეთა წრე. 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 არის scalable ვექტორული გრაფიკა. 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 პოზიცია, მისი Y პოზიცია, მისი რადიუსი. 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 pixels. 40 00:02:06,730 --> 00:02:10,220 >> მოდით მივცეთ მას y 200 pixels ასევე. 41 00:02:10,220 --> 00:02:16,032 და რ, რადიუსი, დაახლოებით 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 pixels, 200 pixels, რადიუსი 40 პიქსელი. 48 00:02:37,330 --> 00:02:38,280 სახის cool, არა? 49 00:02:38,280 --> 00:02:38,988 ჩვენ გვაქვს წრე. 50 00:02:38,988 --> 00:02:40,880 Yeah. 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 მოდით ეძახით circle2. 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 Yay, ჩვენ გვაქვს ორი წრეების ახლა. 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 hey, წრე, წასვლა პოზიცია 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 on the fly, რასაც ჩვენ მინდა, რომ ატრიბუტი უნდა იყოს. 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 ეს სახის cool. 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 >> მეორე მოქმედება, მონაცემთა Driven Documents-- ასე რომ, მოდით დაბრუნდეს აქ. 135 00:07:12,140 --> 00:07:15,340 და მოდით, უბრალოდ, თავი დაეღწია circle2, იმიტომ, რომ ჩვენ ვამატებთ და მოხსნის 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 ერთი წუთით მოდით, ვთქვათ, ჩვენ გვქონდა მონაცემები ამ ფორმით. 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 ჩვენ შეგვიძლია ამის გაკეთება ძველ რამ ჩვენ აკეთებს 152 00:08:03,590 --> 00:08:06,020 წრე დამატება და circle2 და 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 Hey, 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, იპოვოს me პირველ წრეში შეგიძლიათ. 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 ჩვენ შეიძლება ვთხოვოთ მას, hey, 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 დ აქ დგას ადგილი მონაცემები. 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 >> წრე, ის აპირებს, hey, circle1 რა არის თქვენი x პოზიცია. 218 00:11:41,920 --> 00:11:45,210 ადრე ვიყავით, ყოველთვის პასუხობდა 200. 219 00:11:45,210 --> 00:11:48,630 მაგრამ ახლა, ყოველ ჯერზე D3 სთხოვს us რა არის თქვენი 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 up. 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 და ჩვენ გვაქვს დიდი outlier აქ. 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 >> და ვთქვათ, ჩვენ შეგვეძლო conditionals ჩვენი ფუნქცია. 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 რომ ჩვენ დაინტერესებული in რატომღაც. 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 ასე რომ, მოდით უბრალოდ გადატანა out ცვლადი იმიტომ, რომ სუფთა, მოსწონს ეს. 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 >> შემდეგი up, აქტის III, Scales-- ასე რომ, ერთი პრობლემა უფლება 286 00:15:35,300 --> 00:15:38,920 აქ არის, თუ შევცვლით ჩვენი მონაცემები ამ 200 ღირებულება 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 და ჩვენ გვინდა, რუკაზე რომ out გადატანა სიგანე, სრული სიგანე აქ. 300 00:16:17,630 --> 00:16:20,620 ასე რომ, ჩვენ არ სპექტრი ნომრები მიმდინარეობს 0 100. 301 00:16:20,620 --> 00:16:24,980 და ჩვენ გვაქვს ამ campus I მიდის 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 on 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 ასე რომ, ამ შემთხვევაში, თუ ჩვენ მას ერთი, ის აპირებს რუკაზე რომ out გადატანა 20. 327 00:18:32,910 --> 00:18:37,750 და თუ ჩვენ მას 200, ეს ვაპირებთ რუკაზე რომ 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 ასე მასშტაბის მასშტაბის up. 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> Well-- Oh, ჩვენ გვაქვს პატარა შეცდომა აქ. 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 და რომ ფართოვდება იგი out. 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 out, 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 მაგრამ ჩვენ დაგვჭირდება MAP- დან მწვანე წითელი, მაგალითად. 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, სამუშაო მონაცემები პირველი, რაც 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 ეს ძალიან მოუხერხებელი აქვს მონაცემები რთული კოდირებული აქ. 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 ჩასვით იქ verbatim, წავიდეთ უკან ჩვენი ვიზუალიზაცია კოდი 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 და მაშინ ყველა კოდი, რომელიც არის indented შიგნით არსებითად, 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 ასე რომ ეს არის Crimson სათაურები მე აიყვანეს რამდენიმე დღის წინ. 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 ჩვენ გვაქვს ვიზუალიზაცია of Crimson ერთად. 444 00:26:23,190 --> 00:26:25,500 >> სასწორი არის ცოტა off. 445 00:26:25,500 --> 00:26:29,680 მოდით ვივარაუდოთ, რომ ყველაზე სათაური 100 სიმბოლომდე 446 00:26:29,680 --> 00:26:32,244 ასე span რომ გამოდის. 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 encode ზოგიერთი იმის შესახებ, არსებობს მსხვილი ნაწლავის ან არ. 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 მაგრამ ეს როგორ ჩვენ შეამოწმოთ string ერთი კონკრეტული ხასიათის 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 ეს არის ის, რაც ამ იმას ნიშნავს ლამაზი. 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 ჩვენ მხოლოდ ექვსი მონაცემების რაოდენობა და მხოლოდ ორი ჰქონდა colons. 470 00:27:42,380 --> 00:27:45,510 მაგრამ, როგორც ჩანს, ცოტა მეტი ქვედა ბოლოს, ფაქტობრივად. 471 00:27:45,510 --> 00:27:47,830 სათაურები colons, როგორც ჩანს, ზოგადად, მოკლე, 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 ჩვენ ვნახეთ strings. 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 შეიძლება იყოს სტუდენტი ასახელებს, სტუდენტი ID, 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 დაბრუნების აქ, კიდევ ერთხელ, გამოყენებით ჩვენი ჰისტოგრამის წრე ვიზუალიზაცია 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 მაგრამ ახლა, d შეიცავს მეტი რამ. 505 00:29:51,920 --> 00:29:54,780 d შეიცავს ბევრ მონაცემთა ელემენტები. 506 00:29:54,780 --> 00:29:57,946 ასე ჩვენ მივიღებთ დ უკან. 507 00:29:57,946 --> 00:29:59,670 D3 გვაძლევს დ. 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 ჩვენ გვინდა, encode ინფორმაცია პოზიცია ამ მიწისძვრის კითხვას, 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 მაგრამ ზედაპირულად, თუ რას აკეთებს არის, ეს შეკითხვა ამ 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 საფუძველზე latitudes და განედი. 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 In არსებობს კავშირების შემდგომი ამ. 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-longs შენობა 564 00:33:09,590 --> 00:33:13,990 ჩვენ ვზივართ მარჯვენა ახლა პროექტორის. 565 00:33:13,990 --> 00:33:20,560 და პროექტირება იქნება კონვერტირება რომ შევიდა x და y pixel ღირებულებებს. 566 00:33:20,560 --> 00:33:23,300 >> ასე რომ, რა პროექტირება აკეთებს ძალიან ჰგავს ჩვენს მასშტაბით. 567 00:33:23,300 --> 00:33:27,270 ეს ხდება ჩვენი latitudes და განედი რომელიც წარმოადგენს მთელ მსოფლიოში 568 00:33:27,270 --> 00:33:31,390 და მცირდება და sizing, რომ ქვემოთ მოედანზე, რომ ჩვენ გვინდა, 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 pixels. 572 00:33:41,370 --> 00:33:46,250 ეს მთელ ეკრანზე არის 700 pixels ფართო, ასე რომ გვაიძულებს აქ, 573 00:33:46,250 --> 00:33:53,310 და 154 pixels ქვემოთ, რომელიც მე ხარჯთაღრიცხვა არის საკმაოდ ბევრი აქ. 574 00:33:53,310 --> 00:33:57,250 >> ასე რომ, იმ lat-მიისწრაფვის, რომელიც წარმოადგენს რაღაც მთელი მსოფლიოს მასშტაბით 575 00:33:57,250 --> 00:34:02,850 და squishing და მოძრავი, რომ გარშემო მოგვცეს x და y pixel ღირებულებები, 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-longs გადატანა რაღაც თქვენს ეკრანზე. 579 00:34:14,310 --> 00:34:18,380 >> მაგრამ ჩვენ ვაპირებთ, რათა გამოიყენონ ეს პროექტირება ფუნქციები, რადგან აღმოჩნდება, 580 00:34:18,380 --> 00:34:20,270 ჩვენ გვაქვს lat-longs longs ასევე. 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 მაგრამ ჩვენ გვინდა pixel ღირებულებებს. 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 ასე რომ, პირველ რიგში, ჩვენ აკეთებს ასე რომ, ჩვენ 594 00:34:56,949 --> 00:35:01,520 მიღების d, რომელიც არის ინდივიდუალური მონაცემები ელემენტის ინდივიდუალური მიწისძვრის 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 პროექტორის აკონვერტებს იმ კოორდინატები შევიდა pixel ღირებულებები, 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 >> ჩვენ ყველაფერს გავაკეთებთ იგივე y. 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 Ooh, დამატებითი ხასიათი აქ კარგია, რომ ჩვენ გვაქვს 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 >> ავიღოთ up მაღალი დონის. 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 Ooh, ეს არ იმუშავებს. 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 და MAP- ის შესახებ, რომ გაფართოების გარეთ. 649 00:37:34,490 --> 00:37:37,370 და MAP- ის შესახებ, რომ 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 არის სწორი თავზე us. 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 ჰო, მოდით დაამატოთ ზოგიერთი interactivity მას. 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 >> ასე რომ, აქ, ყოველ ელემენტს, ჩვენ აღწერს bunch ატრიბუტები. 664 00:38:15,060 --> 00:38:20,230 მაგრამ ჩვენ შეგვიძლია ასევე აღწერს, რაც ჩვენ გვინდა უნდა მოხდეს interactivity ელემენტებს. 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 სადაც ჩვენ გავაკეთებთ რაღაც ელემენტს, როდესაც ჩვენ hover მას. 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 ასე, რასაც მე ვაკეთებ აქ არის, როდესაც ჩვენ hover მეტი რამე, ჩვენ კიდევ, რომ ელემენტს 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 ასე რომ, თუ ჩვენ hover მეტი აქ, იგი იღებს სრულ. 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, როგორც ეწინააღმდეგებოდა mouseover. 684 00:39:59,990 --> 00:40:06,399 >> და ჩვენ აღადგინოთ იგი რა გვქონდა ადრე 0.5. 685 00:40:06,399 --> 00:40:10,260 და ახლა, ყოველ ჯერზე ჩვენ hover, მივიღებთ სრულ წრეზე. 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 ბევრი მიწისძვრები West Coast კალიფორნიაში. 706 00:41:27,909 --> 00:41:30,950 მაგრამ ვფიქრობდი, რომ ეს იყო ძალიან საინტერესო რომ იქ ამდენი მიწისძვრები 707 00:41:30,950 --> 00:41:34,350 Alaska, და, როგორც ჩანს, აქ Midwest. 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 გადმოცემის ხალხს ღრმა insights რომ იღებს მათი ძირითადი 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