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
διαδραστικό οπτικοποιήσεις για το web.

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
Ας πάμε μέσα από αυτό.

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 vector graphics.

26
00:01:21,830 --> 00:01:27,530
Αυτός είναι ο τρόπος με τον οποίο πείτε στον browser να
κάνει διανυσματικά γραφικά στο πρόγραμμα περιήγησης.

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 pixels.

40
00:02:06,730 --> 00:02:10,220
>> Ας δώσουμε μια ομάδα 200 pixels, καθώς και.

41
00:02:10,220 --> 00:02:16,032
Και ένα R, μια ακτίνα, περίπου 40 pixels.

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 pixels.

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
Ας το ονομάσουμε circle2.

83
00:04:13,570 --> 00:04:15,840
Και ας κάνουμε το ακριβές
ίδιο πράγμα και να δώσει

84
00:04:15,840 --> 00:04:20,450
Χαρακτηριστικά, έχουν ένα Χ, θέση 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
Ας πούμε, χ θέση του 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
Είναι είδος δροσερό.

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
>> Πράξη ΙΙ, τα δεδομένα με γνώμονα 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
Ένα 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
κύκλος προσάρτησης και 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
Γεια σου, 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
Γεια σου, 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
Θα μπορούσαμε να ζητήσουμε, 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
>> Έτσι, αυτό το χ 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
>> κύκλος, πρόκειται να πάει, hey,
circle1 τι χ θέση σας.

218
00:11:41,920 --> 00:11:45,210
Προηγουμένως, ήμασταν
πάντα απαντώντας 200.

219
00:11:45,210 --> 00:11:48,630
Αλλά τώρα, κάθε φορά που ζητά D3
μας τι χ θέση σας,

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
Θεωρώ ότι αυτές κύκλους
είναι το είδος των συμπιεσμένη επάνω.

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
>> Ας δώσουμε μια εντολή if εδώ.

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
>> Έπειτα επάνω, Πράξη ΙΙΙ, 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, να απλώνεται και έπειτα
να αντισταθμίσει αυτό το κομμάτι είναι πραγματικά ογκώδη.

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
Έτσι, σε αυτή την περίπτωση, αν θέλουμε να δώσουμε μία,
πρόκειται να χαρτογραφήσει ότι έξω επάνω 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
Έτσι κλίμακα θα κλιμακωθούν.

335
00:19:02,635 --> 00:19:27,020

336
00:19:27,020 --> 00:19:48,880
>> Well-- Ω, έχουμε ένα μικρό λάθος εδώ.

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 pixels και 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
>> Και αντί να
Αυτό το είδος της λογικής ογκώδη

374
00:21:55,210 --> 00:21:58,550
έχουμε εδώ με την
εξαρτάται από εκεί,

375
00:21:58,550 --> 00:22:03,250
θα μπορούσαμε να έχουμε μια something--
γραμμική κλίμακα μεταξύ αυτών.

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
Και πάντα στο μεταξύ
είναι μια λειτουργία του d.

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
Είναι πολύ ογκώδη για να έχουν
τα δεδομένα του σκληρού κωδικοποιηθούν εδώ.

394
00:22:58,310 --> 00:23:01,220
Και γενικά, θα είμαστε ζητώντας
κάποιος άλλος για τα δεδομένα.

395
00:23:01,220 --> 00:23:05,400
Θα ζητήσουμε ίσως από την κυβέρνηση,
Το Census Bureau, τι είναι τα δεδομένα σας

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
Και τότε όλος ο κώδικας που είναι
εσοχή inside-- κατ 'ουσίαν,

411
00:24:18,570 --> 00:24:21,800
όλος ο κώδικας που έχουμε there-- θα
τρέχει μόνο όταν παίρνουμε πίσω τα δεδομένα.

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
Αυτά τυχαίνει να είναι ένα string.

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
>> Λοιπόν, τι θα κάνουμε is-- κάθε φορά μας
συνάρτηση καλείται με ένα κορδόνι,

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
Έχουμε μια απεικόνιση
του Crimson πρωτοσέλιδα.

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
τουλάχιστον στα δεδομένα μας set-- ενδιαφέρουσα.

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
όχι μόνο ένα string ή έναν αριθμό.

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
δ περιέχει πολλά στοιχεία δεδομένων.

506
00:29:54,780 --> 00:29:57,946
Γι 'αυτό και λαμβάνουμε D πίσω.

507
00:29:57,946 --> 00:29:59,670
D3 μας δίνει δ.

508
00:29:59,670 --> 00:30:06,080
Και εμείς ανταποκρινόμαστε με την εύρεση του μεγέθους
d και στη συνέχεια παρόδω ότι στην κλίμακα.

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
Αλλά επιφανειακά, αυτό που κάνει είναι,
διερωτάται αυτό το αρχείο 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 pixels.

572
00:33:41,370 --> 00:33:46,250
Όλη αυτή η οθόνη είναι 700 pixels
ευρύ, ώστε να μας κάνει για εδώ,

573
00:33:46,250 --> 00:33:53,310
και 154 pixel κάτω, την οποία θα
εκτίμηση είναι λίγο πολύ εδώ.

574
00:33:53,310 --> 00:33:57,250
>> Έτσι, λαμβάνοντας τα lat-επιμήκη προϊόντα, τα οποία
αντιπροσωπεύουν κάτι για όλη την υδρόγειο

575
00:33:57,250 --> 00:34:02,850
και squishing και κινείται γύρω από αυτό
να μας χ και γ τιμών 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-λονγκ
σε κάτι στην οθόνη σας.

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
Αλλά θέλουμε τιμές των 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
Έτσι, το πρώτο πράγμα
είμαστε 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
Και στη συνέχεια, το τελευταίο πράγμα που
θέλουμε να κάνουμε είναι απλά να πάρει το Χ,

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, επιπλέον χαρακτήρα
here-- ωραίο, έχουμε

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
Έτσι και πάλι, θα αντικαταστήσει ότι hard-coded
40 και να κάνει μερικούς υπολογισμούς.

631
00:36:46,210 --> 00:36:48,810
Θα χρησιμοποιήσουμε και πάλι το αγαπημένο μας κλίμακα.

632
00:36:48,810 --> 00:36:50,290
Και είμαστε το παρελθόν d.

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
και το χάρτη για να το αναπτύξετε.

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, σε αντίθεση με mouseover.

684
00:39:59,990 --> 00:40:06,399
>> Και θα γίνει επαναφορά στο
τι είχαμε before-- 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
πολλά σεισμών στο
Δυτική Ακτή στην Καλιφόρνια.

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