[MUSIC CHƠI] 

DAVID Chouinard: Tôi là David Chouinard, và điều này là D3. Chào mừng. Chúng ta sẽ tìm hiểu về D3 ngày hôm nay. D3 là một khuôn khổ JavaScript để xây dựng một chất lượng cao visualizations tương tác cho web. Những điều như những gì chúng tôi nhìn thấy ở phía sau của tôi, chúng ta sẽ tìm hiểu để làm cho những người điều, loại vấn đề cơ bản của nó. Nhưng nó sẽ được mát mẻ. Hãy bắt đầu làm cho hình ảnh đẹp. Chúng tôi đã có nhiều bản demo khách hàng tiềm năng có sẵn. Hãy làm điều đó. 

Act I, DOM manipulation-- chúng ta đang đi để bắt đầu ngay lập tức làm cho những thứ mát mẻ. Trước hết, bên trái, chúng ta có mã. Bên phải, chúng ta có kết quả của mã của chúng tôi. Chúng ta hãy đi qua nó. 

Hãy thực hiện một vòng tròn. Làm thế nào để âm thanh? svg.append circle-- chúng ta chỉ cần thực hiện một vòng tròn. Bạn không tin tôi, phải không? Nó không có ở đó. 

Vì vậy, những gì chúng tôi đã làm đúng ở đây là, SVG là đồ họa vector mở rộng. Đây là cách chúng ta nói với trình duyệt làm cho đồ họa vector trong trình duyệt. Những gì chúng ta chỉ cần làm ngay bây giờ được thêm vào một vòng tròn để duyệt. 

Lời hứa là vòng tròn đòi hỏi một chút về các thuộc tính cơ bản trước khi chúng ta thực sự có thể nhìn thấy nó. Chúng tôi cần phải nói cho nó vị trí x của nó, vị trí của y, bán kính của nó. Chúng tôi đã không nói với nó điều đó, vì vậy chúng ta không nhìn thấy nó ngay bây giờ. Nhưng hãy nói cho nó công cụ. 

Vì vậy, trước hết, bạn đã có để cung cấp cho chúng tôi một vòng tròn tên. Vì vậy, chúng ta hãy gọi nó là vòng tròn. Vòng tròn của chúng tôi có một cái tên bây giờ. Và chúng ta hãy cho nó một vài thuộc tính. Làm thế nào về cx sẽ tập trung x, do đó trung tâm của vị trí x. Hãy nói rằng, 200 x 200 pixel. 

Hãy cung cấp cho nó một y 200 pixel là tốt. Và một r, bán kính, khoảng 40 pixel. Bây giờ chúng ta hãy xem. Tôi không thể đánh vần. 

Có bạn đi. Chúng tôi có một vòng tròn ở vị trí 200 pixel, 200 pixel, bán kính 40 pixel. Loại mát mẻ, phải không? Chúng tôi có một vòng tròn. Yeah. 

Vì vậy, không cần thiết phải làm theo cùng. Tất cả những ví dụ này, tất cả các mã Tôi đang làm hôm nay sẽ được cung cấp trực tuyến ở cuối trong các hình thức ví dụ tương tác với trạm kiểm soát tại mỗi hành động, và như vậy. 

Hãy làm nhiều thứ hơn. Vòng tròn màu đen này là thực sự xấu xí. Tôi xin lỗi vì lỗi tin nhắn ngay ở đó. Hiện chúng tôi đi. 

Hãy cung cấp cho nó một màu sắc. Làm thế nào vậy? Tôi thích màu xanh thép. Vâng, vòng tròn của chúng tôi thay đổi màu sắc. Đó là tuyệt vời. Hãy làm cho nó bán trong suốt too-- bán trong suốt. 

Vì vậy, đây là những thuộc tính chúng tôi đang xác định trên đường tròn. Điều đầu tiên chúng tôi làm chúng tôi đặt một vòng tròn trên trang. Và sau đó chúng tôi đang xác định một loạt các thuộc tính. Một số trong số này được yêu cầu, như CX, CY, và Radius. Và những người khác là tùy chọn. 

Có rất nhiều thuộc tính. Có rất nhiều trong số họ. Ví dụ, chúng ta có thể có một đột quỵ cũng như, một cơn đột quỵ của màu đỏ. Nhưng chúng ta hãy loại bỏ. Chúng ta trở lại với một vòng tròn, một vòng tròn màu xanh. 

Vì vậy, chúng ta hãy làm tròn hơn. Làm thế nào vậy? Chúng ta hãy làm một vòng tròn. Đây là thú vị, phải không? 

Vì vậy, nói tôi chỉ Copy-dán những gì chúng tôi đã có rồi. Hãy gọi nó là circle2. Và chúng ta hãy làm chính xác điều tương tự và cung cấp cho nó thuộc tính, với một vị trí x 300. Yay, chúng tôi có hai vòng tròn bây giờ. 

Và tất nhiên, chúng ta có thể cập nhật các giá trị này. Tôi có thể đặt nó ở 400, và bây giờ nó di chuyển. Và kể từ khi nó gây phiền nhiễu, hãy loại bỏ nó, vì vậy circle2.remove. Nó đi ngay bây giờ. 

Vì vậy, những gì chúng tôi đang làm và chỉ là rất, very-- này rất giống với những gì bạn có thể làm trong jQuery, cho ví dụ. Chúng tôi chỉ đang thao tác DOM, nó được gọi là. Bạn có thể đã nghe từ đó trước. Chúng tôi đang tạo ra các công cụ, thiết lập thuộc tính trên các công cụ, loại bỏ công cụ. 

Bây giờ, đây là nơi mà nó được thú vị. Vì vậy, sau này trong mã, chúng ta vẫn có thể tham khảo các vòng tròn ban đầu ở đây. Vì vậy, chúng ta hãy thiết lập lại thuộc tính của nó để cx. Hãy nói rằng, vị trí x lên 400. Và tôi sẽ chuyển đó, vì vậy nó là hiển nhiên. Hiện chúng tôi đi. 

Vì vậy, chúng tôi đã thêm một vòng tròn. Chúng tôi thiết lập một số thuộc tính. Chúng tôi thêm một vòng tròn, loại bỏ nó. Và sau đó chúng tôi đang thay đổi các vòng tròn ban đầu. 

Nhưng đây là nơi nó được rất nhiều chi tiết thú vị. Không chỉ chúng tôi có thể thiết lập các thuộc tính như chỉ là giá trị, chúng ta có thể nói, hey, vòng tròn, đi đến vị trí 200. Chúng tôi cũng có thể cài đặt chúng như các chức năng. 

Vì vậy, thay vì cho 400 ở đây, chúng ta có thể làm một số tính toán trên bay cho những gì chúng tôi muốn thuộc tính đó được. Vì vậy, đây là cách thức bạn thể hiện điều đó. Chúng tôi nói, thay vì 400, cho tôi cung cấp cho bạn một chức năng thay thế. Và ở đây, bên trong chức năng này, chúng ta có thể thực hiện bất kỳ tính toán điên. 

Chúng tôi có thể dành thời gian và xem xét một số điều khác và tự động quyết định cho vòng tròn những gì giá trị mà chúng ta muốn. Làm thế nào về chúng tôi chỉ cung cấp cho nó một vị trí x ngẫu nhiên? Vì vậy, đó là điều đó. 

Vì vậy, những gì mà nói là, cho mọi x, chạy chức năng này. Và những gì chúng tôi đang làm là tính toán một số thứ, một lần ngẫu nhiên chiều rộng và quay trở lại đó. Vì vậy, mỗi khi chúng ta chạy đó, chúng tôi nhận được một vòng tròn mà đi đến một nơi ngẫu nhiên. Đó là loại mát mẻ. Tôi cảm thấy như tôi có thể nhìn lúc này cho một chút. Chúng tôi đang bắt đầu để có được một cái gì đó thú vị ở đây. Hãy làm cho dữ liệu này hướng bây giờ. Không có dữ liệu ở đây. Hãy thay đổi điều đó. 

Documents-- Act II, dữ liệu Driven Vì vậy, chúng ta hãy trở lại đây. Và chúng ta hãy chỉ thoát khỏi circle2, bởi vì chúng ta chỉ cần thêm và loại bỏ nó. Vì vậy, chúng tôi không thực sự cần nó. Chúng tôi cần phải trở nên thông minh hơn rất nhiều ở đây. Hãy nói rằng, chúng tôi có một số dữ liệu của một số loại. Một moment-- hãy nói, chúng tôi đã có dữ liệu của mẫu này. Chúng tôi đã có một mảng, chỉ cần một loạt các con số. Chúng tôi có bảy số ở đây, bất cứ điều gì các tiền represent-- trong tài khoản ngân hàng của người dân, làm thế nào nhiều họ cân nhắc, thần biết gì. 

Đây là những con số, và chúng tôi muốn sử dụng vòng tròn của chúng tôi để đại diện cho những con số này bằng cách nào đó. Chúng tôi muốn buộc chúng tôi vòng tròn đến con số đó. Vì vậy, những gì chúng tôi làm. Hãy nói rằng, chúng tôi muốn có một vòng tròn cho mỗi số. Chúng tôi có thể làm cũ điều chúng tôi đã doing-- vòng tròn và append circle2 và circle3. Nhưng điều này được ra khỏi tay, và có rất nhiều lặp lại logic. 

Vì vậy, hãy thông minh hơn với điều đó. Thay vì sử dụng các vòng tròn var svg.append rằng chúng tôi chỉ sử dụng, chúng ta sẽ sử dụng khối nhỏ này ở đây. Tôi không muốn đi vào chiều sâu vào những gì tất cả các bộ phận làm. Và nó là loại một chủ đề cao. Và tôi ước tôi có thể. 

Nhưng điều quan trọng để recognize-- và bạn sẽ thấy là rất thường xuyên trong mã D3. Đây là khối cơ bản của văn bản tạo ra nhiều vòng tròn như có những yếu tố dữ liệu trong mảng này ngay tại đây. Vì vậy, điều này tạo ra càng nhiều những vòng tròn có những yếu tố. Nó sẽ tạo cho chúng tôi bảy vòng tròn. Và nó là một điều thực sự, thực sự quan trọng. Vì vậy, chúng ta hãy chạy đó. Hãy loại bỏ vòng tròn khác của chúng tôi. Hãy chỉ nhận xét này chia ra và chạy này một lần nữa. 

Hiện chúng tôi đi. Vì vậy, vòng tròn của chúng tôi ở đây là một tối hơn rất nhiều, bởi vì chúng tôi có bảy vòng, một trên đầu khác. Chúng tôi vừa tạo ra bảy vòng, một từng cho từng yếu tố dữ liệu. Nhưng có một điều quan trọng đã xảy ra với đoạn này ngay tại đây. 

Đó là những dữ liệu đã bị ràng buộc. Vì vậy, mỗi một đơn của những yếu tố dữ liệu, 10, 45, 105, là ràng buộc một vòng tròn đặc biệt. Vì vậy, những điều này không chỉ tạo ra một loạt các vòng tròn nhưng quan hệ hai thứ với nhau. 

Và trong tương lai, bởi vì chúng tôi tạo ra những vòng tròn với chức năng D3 này, nếu tôi cung cấp cho bạn một vòng tròn, bạn có thể cung cấp cho tôi những dữ liệu liên kết với nó. Vì vậy, chúng tôi có thể yêu cầu D3. Hey, D3, tôi có vòng tròn này. Các dữ liệu mà các vòng tròn có những gì? Và D3 sẽ cho chúng ta 10 hoặc 45 hoặc 105. 

Những điều này đang bị ràng buộc. Đó là một khái niệm rất, rất cơ bản. Hãy nhìn vào đó. 

Vì vậy, cách chúng ta muốn hỏi D3-- vậy này là không thích hợp cho việc này, nhưng chỉ tin tưởng tôi về nó. Đây là cách chúng tôi yêu cầu D3. Hey, D3, cho tôi là người đầu tiên vòng tròn mà bạn có thể tìm thấy. Hãy cho tôi những vòng tròn đầu tiên, bạn có thể tìm thấy. Và sau đó chúng ta có thể hỏi D3, có chuyện gì các dữ liệu trên đó, như thế này, 10. 

Vì vậy, chúng tôi chỉ cần hỏi D3, tìm thấy tôi vòng tròn đầu tiên, bạn có thể tìm thấy. Dữ liệu của nó là gì? 10, đó thực sự của chúng tôi là phần tử dữ liệu đầu tiên. Chúng tôi có thể yêu cầu nó, hey, D3, tìm thấy chúng tôi vòng tròn thứ ba của chúng tôi. 105. Tại sao điều này là thực sự quan trọng? 

Vì vậy, ngay ở đây, tôi đã đề cập rằng chúng ta có thể sử dụng chức năng này. Và tôi đã đề cập đó là một điều rất mạnh mẽ. Vì vậy, không chỉ có thể chức năng của chúng tôi làm những việc như làm một số tính toán, ví dụ, trả về một số ngẫu nhiên, nó có thể cũng làm việc dựa trên dữ liệu. Đây là những gì dữ liệu hướng các tài liệu có ý nghĩa. Đó là những gì D3 là viết tắt của. 

Vì vậy, đây x postition-- thay chỉ nói rằng, tất cả các vòng tròn, có được vị trí x 200, chúng tôi có thể cung cấp cho nó một chức năng. Và ở đây, chúng ta có thể làm một số tính toán. và d ở đây đứng tại chỗ cho các dữ liệu. Vì vậy, mỗi khi chúng tôi có một vòng tròn, về cơ bản, D3 sẽ tạo ra những vòng tròn bảy. Và sau đó cho mỗi 

hình tròn, nó sẽ đi, hey, circle1 vị trí x của bạn là gì. Trước đây, chúng tôi đã luôn luôn trả lời 200. Nhưng bây giờ, mỗi khi D3 hỏi chúng tôi vị trí x của bạn là gì, nó sẽ cung cấp cho chúng tôi có us-- vòng tròn đó, vì vậy chúng tôi có dữ liệu. Nó sẽ cung cấp cho chúng ta những dữ liệu và nói, làm những gì bạn muốn trình bày là, dựa trên dữ liệu đó. 

Hãy chỉ trả lại các dữ liệu thực tế. Vì vậy, nếu chúng ta chạy này, điều này cho dữ liệu chúng tôi định hướng các tài liệu. Những vòng tròn dựa trong mối quan hệ position-- họ căn cứ như là một chức năng của dữ liệu. 

Vì vậy, đối với các vòng tròn đầu tiên, D3 đặt một vòng tròn. Và sau đó D3 đòi hỏi chúng ta, những gì làm bạn muốn trình bày được. Và chúng ta chỉ nói rằng, bất cứ dữ liệu được. Hãy giải trình 10. 

Sau đó nó sẽ hỏi, những gì bạn muốn Tờ trình được cho vòng tròn thứ hai. Và chúng tôi trả lời, 45. Và chúng ta, tất nhiên, có thể thực hiện một số tính toán ở đây. Tôi thấy rằng những vòng tròn là loại squished lên. 

Vì vậy, nhân nó bằng 3, nhân dữ liệu bằng 3. Vòng tròn của chúng tôi chỉ cần được mở rộng ra. Giá trị của chúng tôi đã tăng gấp ba lần. 

Các vòng tròn thực sự trên các cạnh, vì vậy chúng ta có thể loại bù đắp nó. Hãy nói rằng, bằng 20. Ở đây bạn đi. 

Đây là một hình dung dữ liệu. Đó là một trong rất cơ bản, nhưng điều này cung cấp cho chúng tôi một số cái nhìn sâu sắc vào dữ liệu của chúng tôi. Nó cho chúng ta biết rằng, ví dụ, chúng tôi có một cụm nhỏ của yếu tố. Và chúng tôi có một outlier lớn ở đây. Điều này mang lại cho chúng tôi một số thông tin về phân phối. 

Nếu chúng ta, ví dụ, để thay đổi các dữ liệu đến 150 ở đây và làm mới, visualization của chúng tôi là thay đổi. Tài liệu này là hướng dữ liệu. 

Vì vậy, tất nhiên, tất cả những yếu tố này, tất cả các thuộc tính ở đây, chúng ta có thể sử dụng một chức năng, không chỉ số, không chỉ x và vị trí y. Vì vậy, chúng ta có thể sử dụng một chức năng cho màu sắc. Vì vậy, chúng tôi sẽ làm như vậy. Chúng tôi sẽ cung cấp cho nó một chức năng. 

Và chúng ta hãy nói, chúng ta có thể có điều kiện trong hàm của chúng ta. Chức năng này có thể được hàng trăm hàng dài. Nó có thể làm những việc rất, rất phức tạp. 

Vì vậy, chúng ta hãy đặt một tuyên bố nếu đây. Hãy nói rằng, nếu dữ liệu của chúng tôi là ít 50, đó là một số ngưỡng mà chúng tôi quan tâm ở cho một số lý do. Hãy làm cho nó màu xanh lá cây. Nếu không, chúng ta hãy làm cho nó màu đỏ. Làm thế nào vậy? Nice. 

Vì vậy, trực quan dữ liệu của chúng tôi được bắt đầu để truyền đạt thông tin thú vị hơn trên nhiều kênh. Vì vậy, bây giờ chúng ta biết một chút về phân phối. Và chúng ta biết rằng có một số loại cắt ở 50 mà chúng tôi quan tâm. Chúng tôi biết rằng có hai điểm dữ liệu dưới ngưỡng đó và hầu hết trong số họ trên. 

Vì vậy, như một bước cuối cùng, dữ liệu này ở đây, nó rất hiếm khi thấy điều này như thế. Vì vậy, chúng ta hãy di chuyển nó ra một biến bởi vì đó là sạch hơn, như thế này. Và sau đó chúng tôi sử dụng biến ở đây. Đó là điều chính xác. Nó chỉ là một chút bụi. 

Tiếp theo, Act III, Scales-- Vì vậy, một vấn đề ngay ở đây là, nếu chúng ta thay đổi của chúng tôi dữ liệu trong 200 value-- này nếu chúng ta thay đổi nó để 400 hoặc một cái gì đó và làm mới, sau đó giá trị này chỉ cần đi offscreen. Vì vậy, logic của chúng tôi ngay tại đây làm thế nào chúng ta làm lần 3 và 20, để truyền bá nó ra và sau đó bù lại nó một chút thực sự là phiền phức. 

Làm những con số có ý nghĩa gì? Họ chỉ cứng mã hoá đó. Và chúng tôi rất nhiều ràng buộc với các dữ liệu. Chúng tôi muốn có một tài liệu hướng dữ liệu. Chúng tôi muốn có một tài liệu rất linh hoạt, rằng dữ liệu nhất định, thích nghi với nó và đại diện cho nó. 

, Những gì chúng ta cần là về cơ bản chúng tôi có phạm vi này của con số 10. 45, 105. Và chúng tôi muốn bản đồ đó ra vào chiều rộng, chiều rộng đầy đủ ở đây. Vì vậy, chúng tôi luôn có đủ các số đi 0-100. Và chúng tôi có cơ sở này tôi đi 20-700, trong trường hợp này. 

Chúng tôi loại muốn bản đồ đó vào. Chúng tôi muốn quy mô mà lên và sau đó bù đắp cho nó một chút. Nó chỉ ra rằng có những D3. Nó được gọi là quy mô. Vì vậy, hãy sử dụng nó. 

Cách mà works-- tôi sẽ gõ này và sau đó giải thích nó. Đây là một quy mô. Những gì nó sẽ làm được, nó sẽ vạch ra giá trị 1-200 vào 20-600. Chúng tôi có thể kiểm tra xem. Chúng ta có thể thấy rằng ở đây. 

Vì vậy, nếu tôi ăn nó 1-- một thời điểm. Hãy cho tôi một giây. Tôi phải gõ sai nó. Có bạn đi. Tôi xin lỗi về điều đó. 

Vì vậy, những gì một quy mô sẽ làm được, nó sẽ mất một giá trị và sau đó chuyển đổi đó, mở rộng mà ra, vì vậy nó điền đầy đủ bạn đang xin. Vì vậy, trong trường hợp này, nếu chúng ta cung cấp cho nó một, nó sẽ ra bản đồ đó lên 20. Và nếu chúng ta cung cấp cho nó 200, đó là đi đến bản đồ đó vào 600. Và ở đâu đó ở giữa, nếu chúng tôi nhận được 100, đó là đi đến một nơi nào đó ở giữa 20 và 600. 

Và tất nhiên, bây giờ điều này là những gì chúng ta cần phải loại bỏ những mã hoá cứng điều chúng ta có quyền đó. Vì vậy, những gì chúng tôi muốn làm là mất dữ liệu mà chúng tôi đưa ra, rằng dữ liệu cá nhân phần tử, và vượt qua nó để mở rộng quy mô đầu tiên. Vì vậy, quy mô sẽ có quy mô nó lên. 

Well-- Oh, chúng tôi có một lỗi nhỏ ở đây. Chúng tôi đang thiếu dữ liệu. Có bạn đi. Và đó mở rộng nó ra. 

Điều đó cho chúng ta cùng Kết quả chúng ta có trước, nhưng thay vì có những cứng mã hoá hạn chế. Và nếu kích thước của chúng tôi thay đổi vải, ví dụ, nếu chúng ta muốn có hơn này 400 pixel và nó squishes ra, chúng ta có thể có nó over-- chúng ta có thể mở rộng nó, hoặc chúng tôi có thể giảm lề trái này để một cái gì đó ít hơn hoặc nhiều hơn so với 20. Những con số, những khó mã hoá số doanh nghiệp có ý nghĩa đối với chúng tôi. 

Và chúng ta có thể làm nhiều hơn điều thú vị là tốt. Vì vậy, thay vì có một tuyến tính quy mô, chúng ta có thể muốn ghi lại một quy mô. Và đó sẽ cung cấp cho chúng ta một thang logarit. 

Vì vậy, hiện nay quy mô của chúng tôi, thay vì chỉ mở rộng ra phạm vi đó, nó làm những việc phức tạp hơn. Thay vì có nhiều khó khăn này mã hóa, và thay vì có mà 600, chúng ta có thể muốn chỉ sử dụng chiều rộng, do đó, từ 20 đến chiều rộng trừ đi 40, 2 lần mức ở phía bên kia. Và điều này làm cho rất nhiều ý nghĩa hơn ai đó có thể nhìn vào các mã. 

Điều thú vị là, các thang được rất, rất tinh vi là tốt. Họ làm rất nhiều điều thú vị. Vì vậy, quy mô không nhất thiết phải có để hoạt động giống với các con số. Hãy làm một thang màu. 

Vì vậy, phạm vi của chúng tôi có thể be-- miền của chúng tôi là 1-200. Đó là điều đầu vào. Nhưng chúng ta có thể muốn để bản đồ từ màu xanh lá cây sang màu đỏ, cho ví dụ. Và bây giờ, nếu chúng ta vượt qua nó 1, chúng ta sẽ có được màu xanh lá cây. Nếu chúng ta cho nó 200, chúng tôi sẽ có được màu đỏ. Và nếu chúng ta vượt qua nó một cái gì đó ở giữa, nó sẽ là một sự pha trộn đó, ở đâu đó trên gradient giữa màu xanh lá cây và đỏ. 

Và thay vì phải loại logic clunky chúng tôi có ở đây với điều kiện phải có, chúng ta có thể có một something-- quy mô tuyến tính giữa những người. Vì vậy, chúng tôi muốn sử dụng quy mô chúng ta chỉ tạo ra, mà chúng ta gọi là màu sắc. Và chúng tôi muốn cung cấp cho nó d, mà là phần tử dữ liệu của chúng tôi. Và ở đó chúng ta đi. Chúng tôi có một thang màu. 

Vì vậy, đây là bản đồ. Vì vậy, bên trái là hoàn toàn màu xanh lá cây. Bên phải là hoàn toàn màu đỏ. Và tất cả mọi thứ ở giữa là một chức năng của d. Chúng tôi có một thú vị visualizations đây. Nhưng dữ liệu của chúng tôi là loại nhàm chán. Hãy xem những gì chúng tôi có thể làm gì nếu chúng tôi đã có dữ liệu thú vị hơn. 

Act IV, Làm việc với Data-- điều đầu tiên chúng tôi sẽ muốn làm gì để làm cho chúng tôi visualization thú vị hơn là để di chuyển dữ liệu ở một nơi khác. Nó rất cồng kềnh để có các dữ liệu được mã hóa cứng ở đây. Và nói chung, chúng tôi sẽ yêu cầu người khác cho dữ liệu. Chúng tôi sẽ có thể yêu cầu chính phủ, Cục điều tra dân số, dữ liệu của bạn là gì và sau đó âm mưu đó hoặc yêu cầu một số thực thể của bên thứ ba đối với một số dữ liệu và sau đó xây dựng một visualization trên đó. 

Vì vậy, điều đầu tiên chúng tôi muốn làm là di chuyển mà đến một nơi khác. Vì vậy, tôi sẽ tạo ra một nộp ở đây được gọi là data.json. JSON là định dạng dữ liệu. Bạn không cần phải biết nhiều về điều đó. Và chúng ta sẽ sao chép ít dữ liệu chúng tôi có ở đó, dán nó vào có đúng nguyên văn, đi lại mã trực quan của chúng tôi ở đây, và sử dụng chức năng này ngay tại đây. Bạn không cần phải biết các chi tiết. Nhưng điều này sẽ làm là, nó sẽ tìm tập tin đó, lấy nó, và gửi lại cho chúng tôi. Vì vậy, điều này không là, nó đi và nhận được các tập tin data.json. Và sau đó tất cả các mã số đó là thụt inside-- cơ bản, tất cả các mã có there-- sẽ chỉ chạy khi chúng tôi nhận được dữ liệu trở lại. Và sau đó nó sẽ chạy mà mã với các dữ liệu đã có. Tuyệt vời, chúng tôi có một hình dung rằng các truy vấn cho một số mã ở đâu đó khác, mà thường là nơi nó truy vấn một số dữ liệu từ ở một nơi khác, mà thường là cách trực quan làm việc. 

Nhưng tôi muốn quay trở lại các dữ liệu. Vì vậy, các dữ liệu cơ bản trong D3-- D3 tiêu thụ dữ liệu đó là một danh sách những thứ. D3 hy vọng các dữ liệu chỉ là một danh sách của sự vật, một mảng của sự vật. Nó không có vấn đề gì với những điều được, miễn là nó là một mảng của họ. 

Vì vậy, ở đây, ví dụ, chúng ta có thể của Tất nhiên đã nổi giá trị điểm. Chúng ta có thể có tiêu cực. D3 không quan tâm, miễn vì nó là một danh sách những thứ. 

Điều thú vị là chúng tôi có thể có, chúng ta cũng có thể có một danh sách các chuỗi như thế. Vì vậy, đây là những tiêu đề Crimson Tôi nhặt một vài ngày trước. Và có lẽ bạn có thể tìm thấy một số thú vị điều về những một tiêu đề. 

Vì vậy, một lần nữa, đây là một danh sách những thứ. D3 không quan tâm. Những xảy ra được một chuỗi. Chúng tôi đã thay đổi dữ liệu của chúng tôi. 

Hãy quay trở lại hình dung của chúng tôi. Bây giờ, sự hình dung của chúng tôi hy vọng đầu vào là số. Vì vậy, chúng ta sẽ có để thực hiện một vài thay đổi. Vì vậy, ví dụ, trước hết, có lẽ chúng tôi muốn đặt những vòng tròn này cùng bởi chiều dài của tiêu đề, số ký tự trong tiêu đề. 

Vì vậy, những gì chúng tôi sẽ làm is-- mỗi lần chúng tôi hàm được gọi với một chuỗi, chúng ta sẽ thấy nó dài Và sau đó qua đó để quy mô. Các màu sắc, tôi sẽ trở lại mà để màu xanh thép. Và ở đó chúng ta đi. Chúng tôi có một hình dung tiêu đề của Crimson. 

Quy mô của chúng tôi là một off bit. Hãy giả định rằng lâu nhất Tiêu đề là dài 100 ký tự, vì vậy mà kéo dài ra một chút. Và chúng ta có một hình dung. Vì vậy, nó dường như hầu hết các tiêu đề là khá gần nhau, về dòng nhân vật. Nhưng ai ở đó thực sự đứng ra. 

Chúng tôi có thể xây dựng một số công cụ để khám phá mà hơn. Nhưng khi tôi đã làm việc này, tôi đã tò mò liệu trong tập dữ liệu này, tiêu đề với một dấu hai chấm trong số họ sẽ được lâu hơn. Tôi giả định rằng họ sẽ. 

Vì vậy, chúng ta hãy tìm hiểu. Hãy sử dụng các màu sắc kênh như chúng ta đã làm trước đây, để mã hóa một số về việc liệu có một tràng hoặc không có. Vì vậy, chúng tôi sẽ sử dụng một điều kiện nữa. Bạn không cần phải biết các chi tiết này, nhưng đây là cách chúng tôi kiểm tra một chuỗi cho một nhân vật đặc biệt trong JavaScript, một lần nữa, không có liên quan. 

Nhưng nếu chúng ta không tìm thấy một ruột kết, chúng tôi sẽ trở lại màu xanh lá cây. Và nếu chúng ta làm, chúng tôi sẽ trở lại màu đỏ. Vì vậy, một lần nữa, rút ​​tít mà đã một tràng sẽ có màu đỏ. Đây là những gì này means-- đẹp. 

Vì vậy, có vẻ như tôi Giả thuyết được va đập. Có người chỉ có hai. Chúng tôi chỉ có sáu điểm dữ liệu và chỉ có hai người đã có dấu hai chấm. Nhưng có vẻ như nhiều hơn một chút vào cuối thấp hơn, trong thực tế. Headlines với dấu hai chấm có vẻ để thường ngắn hơn, ít nhất là trong dữ liệu của chúng tôi set-- thú vị. 

Hãy quay trở lại đó để xanh thép và sau đó xem những gì chúng ta có thể làm cho ngay cả với dữ liệu thú vị hơn. Vì vậy, một lần nữa, tôi đã đề cập rằng dữ liệu trong D3 là một danh sách những thứ. Chúng tôi đã nhìn thấy con số của nhiều loại. Chúng tôi đã nhìn thấy chuỗi. Nhưng điều này cũng có thể là đối tượng. 

Họ có thể là những thứ phức tạp bao gồm rất nhiều thứ. Để nói rằng rõ ràng hơn, trong hầu hết các trường hợp, chúng tôi muốn xây dựng mỗi điểm dữ liệu như phức tạp hơn so với chỉ một giá trị. Nếu bạn tưởng tượng một cơ sở dữ liệu về sinh viên, có thể là một sinh viên tên, một thẻ sinh viên, và rất nhiều thứ liên quan với một hồ sơ cụ thể, không chỉ là một chuỗi hoặc một số. Vì vậy, chúng ta hãy nhìn vào đó. 

Đây là một trong những dữ liệu đó được thiết lập. Đây là một tập hợp dữ liệu về động đất. Vì vậy, tất cả mọi thứ ở đây trên danh sách hoặc mảng của chúng tôi thứ chứa nhiều điều bản thân. Vì vậy, mỗi điểm dữ liệu có một độ lớn và phối hợp. Và tọa độ bản thân chứa hai thứ. 

Vì vậy, mỗi ngày hiện nay là rất nhiều phức tạp và rất nhiều chi tiết thú vị và chứa nhiều thông tin thú vị. Hãy xem chúng tôi có thể xây dựng ra khỏi đó. Quay trở lại đây, một lần nữa, sử dụng visualization vòng tròn biểu đồ của chúng tôi chúng tôi đã xây dựng, chúng ta hãy xem nếu chúng ta có thể xây dựng một hình dung về phân phối độ trong tập dữ liệu của chúng tôi. 

Vì vậy, ở đây, đó là một khái niệm. Nhưng bây giờ, d chứa nhiều điều. d chứa nhiều thành phần dữ liệu. Vì vậy, chúng tôi nhận được trở lại d. D3 cho chúng ta d. Và chúng ta phản ứng bằng cách tìm độ lớn của d và sau đó đi qua đó để quy mô. 

Và sau đó chúng ta cần phải thay đổi quy mô của chúng tôi, tất nhiên. Vì vậy, chỉ cần làm độ lớn không đi nhiều hơn 10. Trên thực tế, có bao giờ được một trận động đất 10 độ richter. Nhưng đó là loại thượng của chúng tôi kết thúc, phổ thượng của chúng tôi. 

Hãy làm mới. Nice, chúng tôi có một hình dung. Thật thú vị khi note-- vậy có hai điểm dữ liệu là gần như chính xác trên đầu trang của mỗi khác, xét về độ lớn. Bạn thấy điều này bằng các opacity chúng ta đang sử dụng. 

Chúng tôi có dữ liệu địa lý hiện nay. Chúng tôi có vĩ độ và kinh độ. Có lẽ chúng ta có thể làm một cái gì đó rất nhiều thú vị hơn với điều đó. Hãy tìm một số chi tiết cách thú vị để hình dung này phức tạp hơn dữ liệu chúng ta có thể truy cập. 

Act V, Mapping-- cơ bản, chúng tôi muốn đặt chúng trên bản đồ. Ý tôi là, đây là nơi này là đi. Chúng tôi muốn mã hóa các thông tin về vị trí của các bài đọc trận động đất, cũng độ lớn của họ, bởi vì chúng tôi có bây giờ. Chúng tôi hiểu làm thế nào để tiêu thụ dữ liệu phức tạp hơn. 

Điều đầu tiên chúng tôi sẽ làm là tạo ra một bản đồ, bản đồ nền. Tôi sẽ đi qua này rất nhanh chóng. Đây là mã khéo léo. Đó là một trong những người khác công thức nấu ăn bạn không thực sự có hiểu biết đầy đủ để bạn có thể sử dụng. Nhưng đây là code. Mã này đúng ở đây tạo ra một bản đồ. 

Chúng tôi sẽ không đi vào chi tiết. Nhưng bề ngoài, những gì nó làm là, nó truy vấn tập us.json này, mà là một tập tin dữ liệu như mà chúng ta có trước đây. Nó phức tạp hơn, tất nhiên. Nhưng trong trường hợp này, tất cả mọi thứ, mỗi điểm dữ liệu là trạng thái này và có một danh sách các vĩ độ và kinh độ xác định các đa giác, mà hình thức, trạng thái đó. 

Vì vậy, những gì D3 sẽ làm tương tự với những gì chúng tôi đã làm trước đây. Nó sẽ yêu cầu và ràng buộc rằng một phần tử. Và có một chức năng mà sẽ map yếu tố đó ra, dựa trên các vĩ độ và kinh độ. Bạn có thể đọc thêm về điều đó. Và tôi khuyên bạn nên nó. 

Có liên kết ở cuối của mã này được đăng. Và mã là nhận xét. Trong đó là các liên kết để biết thêm về điều này. Tôi khuyên bạn nên nhìn nó lên. Nhưng những gì chúng tôi quan tâm là chức năng chiếu này. Tôi muốn đi qua đó. 

Trước hết, hãy để tôi chỉ cho bạn rằng, vâng, chúng ta có một bản đồ. Maps là mát mẻ. Vì vậy, chúng ta hãy xem xét điều này hàm sản xuất. 

Chiếu là rất nhiều như một quy mô, quy mô một lần nữa. Vì vậy, những gì sản xuất chức năng chiếu này không có gì, chúng ta có thể vượt qua nó kinh độ và latitudes-- trong trường hợp này, các giá trị ở đây là lat-chờ đợi của tòa nhà chúng ta đang ngồi ở bên phải now-- để chiếu. Và dự đoán sẽ chuyển đổi đó vào x và y các giá trị pixel. 

Vì vậy, những gì được làm chiếu rất giống với quy mô của chúng tôi. Nó lấy vĩ tuyến của chúng tôi và kinh độ đại diện cho một thế giới toàn và co lại và định cỡ đó xuống quảng trường mà chúng ta muốn, rằng chúng tôi đã cho nó. Trong trường hợp này, chúng tôi đi qua những giá trị này. Và nó đem lại cho chúng ta, tốt, mà trên màn hình của bạn có nghĩa là 640 pixels. Toàn bộ màn hình này là 700 pixels rộng, vì vậy mà làm cho chúng tôi về đây, và 154 pixels, mà tôi sẽ ước tính là khá nhiều ở đây. 

Vì vậy, tham gia những lat-chờ đợi, mà đại diện cho một cái gì đó trên toàn thế giới và nứt và di chuyển xung quanh mà để cho chúng ta giá trị x và y pixel, đây là điều đầu tiên đó là thực hiện trong mã lập bản đồ này. Và sau đó phần còn lại của đang tiêu thụ dữ liệu và sau đó ánh xạ những lat-chờ đợi lên cái gì trên màn hình của bạn. 

Nhưng chúng ta sẽ sử dụng phép chiếu này chức năng, vì thực ra chúng tôi có lat-chờ đợi chờ đợi là tốt. Nhìn lại dữ liệu của chúng tôi, chúng tôi có vĩ độ và kinh độ cho mỗi quan sát. Vì vậy, hãy sử dụng chiếu. 

Vì vậy, nhìn vào triển lãm của chúng tôi, chúng tôi muốn exposition-- của chúng tôi chúng ta có một vĩ độ và kinh độ. Nhưng chúng tôi muốn các giá trị pixel. Và hóa ra, chúng tôi có chính xác những gì chúng ta want-- chiếu. Rất giống như chúng tôi đã sử dụng quy mô ngay tại đây, nay chúng tôi sẽ sử dụng chiếu và vượt qua nó tọa độ. Vì vậy, điều đầu tiên chúng tôi đang doing-- vì vậy chúng tôi d nhận được, đó là một dữ liệu cá nhân yếu tố của một trận động đất cá nhân đọc. Điều đầu tiên chúng tôi làm là có được các tọa độ. Được rồi, chúng ta có tọa độ. 

Điều thứ hai chúng tôi làm là qua đó để chiếu. Projection chuyển đổi những tọa độ vào giá trị pixel, x và y. Và sau đó là điều cuối cùng chúng tôi muốn làm là chỉ cần có được x, mà trường hợp này là một trong những đầu tiên. Đó là lần đầu tiên của hai điều được trả về bởi chiếu. 

Chúng tôi sẽ làm tương tự cho y. Nhưng thay vào đó, chúng tôi sẽ trở lại yếu tố thứ hai, các y. Hãy sẵn sàng để làm mới. Ooh, nhân vật phụ here-- tốt đẹp, chúng ta có một tài liệu hướng dữ liệu đó là che giấu tập tin JSON này của các đối tượng, vẽ bản đồ, và thay đổi thuộc tính liên quan đến các dữ liệu để dự án đó trên bản đồ. Điều này thực sự thú vị. Điều này là mát mẻ. 

Hãy đưa nó lên một notch. Tôi có nghĩa là, chúng ta có hai mảnh thông tin với tất cả các điểm dữ liệu. Ý tôi là, ba. Chúng tôi có tọa độ, đó là một x và y. Và chúng tôi có độ lớn. 

Chúng tôi cần mã hóa cường độ bằng cách nào đó. Chúng tôi có rất nhiều kênh. Chúng tôi có thể sử dụng màu sắc. Chúng tôi có thể sử dụng bán kính. Chúng ta có thể sử dụng opacity. Chúng ta có thể sử dụng nhiều thứ trong mã. Bất kỳ của các thuộc tính và nhiều hơn mà không được liệt kê ở đó, bởi vì họ không bắt buộc, chúng ta có thể sử dụng để mã hóa dữ liệu này, các cơn đột quỵ và tất cả những điều tôi đã đề cập. 

Hãy làm bán kính. Tôi nghĩ rằng bán kính là trực quan nhất. Vì vậy, một lần nữa, chúng tôi sẽ thay thế cho mã hóa cứng 40 và thực hiện một số tính toán. Chúng tôi sẽ sử dụng quy mô yêu thích của chúng tôi một lần nữa. Và chúng tôi đang trong quá khứ d. Nhưng không phải vì chúng tôi muốn d độ lớn d. d chỉ là các điểm dữ liệu. Chúng tôi sẽ vượt qua được mức độ quy mô. 

Hãy thử lại. Ooh, nó không hoạt động. Tại sao nó không làm việc? 

Vì vậy, hãy nhớ những gì quy mô nào. Hãy nhìn vào quy mô một lần nữa. Bản đồ quy mô 1-10 trên đến 22-600, nhiều hơn hoặc ít hơn. 600 là rất lớn. Đây là lý do tại sao chúng tôi đang nhận được điều này. 

Vì vậy, chúng tôi muốn thay đổi quy mô của chúng tôi một cái gì đó hợp lý hơn. Hãy nói rằng, chúng tôi muốn 0-60. 60 là lớn, nhưng 10 trận động đất là cực kỳ hiếm. Trong thực tế, họ đã không bao giờ xảy ra. 

Vì vậy, điều này sẽ làm được, nó sẽ mất độ lớn của chúng tôi mà đi 1-10 và bản đồ nó vào để mở rộng nó ra. Và bản đồ này vào 0-60. Hãy làm mới. 

Nice, chúng tôi có một hình dung. Điều này là rất tốt. Đây là dữ liệu thực tế. Bạn sẽ nhận thấy, trong đồ chơi nhỏ của tôi Ví dụ, các trận động đất lớn nhất là ngay trên đầu của chúng tôi. Nhưng đó là nó. Chúng tôi có một ngày lái xe trực quan mà tiêu thụ dữ liệu và cho chúng ta thực sự thông tin thú vị. Vâng, chúng ta hãy thêm một số tương tác với nó. Tôi đề cập đến đó là lực lượng mạnh mẽ của D3. 

Vì vậy, ở đây, cho từng yếu tố, chúng tôi mô tả một loạt các thuộc tính. Nhưng chúng ta cũng có thể mô tả những gì chúng ta muốn xảy ra với các yếu tố tương tác. Ví dụ, chúng ta có thể mô tả những gì sẽ xảy ra khi chúng ta rê chuột qua. Và rất tương tự, mà sẽ đưa một chức năng, rất giống với thuộc tính chúng ta có trước, nơi chúng tôi làm điều gì đó để các phần tử khi chúng ta di chuột qua nó. 

Vì vậy, điều đầu tiên chúng ta cần phải làm là chọn phần tử đó, để tìm nó về cơ bản, trong trình duyệt. và sau đó chúng ta có thể thiết lập một thuộc tính cho nó. Vì vậy, những gì tôi đang làm ở đây là, khi chúng ta di chuột trên một cái gì đó, chúng ta sẽ có được yếu tố đó và sau đó thiết lập Opacity của nó lại 1, để hoàn toàn mờ đục. Hãy xem những gì trông giống như. 

Dường như chúng ta có một thêm dấu chấm phẩy ở đây. Vì vậy, nếu chúng ta di chuột qua đây, nó được đầy đủ. Nhưng bây giờ, tất nhiên, nó vẫn đầy đủ, bởi vì chúng tôi phải mô tả những gì xảy ra khi bỏ con trỏ của chúng tôi. Vì vậy, chúng ta hãy làm chính xác điều đó trên mouseout, như trái ngược với di chuột lên. 

Và chúng tôi sẽ thiết lập lại nó để những gì chúng tôi đã có before-- 0.5. Và bây giờ, mỗi lần chúng tôi hover, chúng tôi nhận được một vòng tròn đầy đủ. Nó giúp chúng ta thấy những gì chúng tôi chúng tôi đang lựa chọn cơ bản. 

Và bây giờ chúng ta hãy làm điều này thực sự tuyệt vời. Hãy kết nối này vào dữ liệu thực tế. Vì vậy, hãy hỏi thể USGS về dữ liệu của họ. Vì vậy, khảo sát địa chất Mỹ có dữ liệu về động đất. Họ có một API nào đó là có thể được tiêu thụ ở định dạng JSON. Vì vậy, chúng ta hãy làm điều đó. 

Vì vậy, đây là một chút mã mà kết nối với các API USGS. Và có một chút chế biến trên nó. Đây không phải là liên quan, nhưng đơn giản hoá nó để một định dạng dữ liệu đơn giản như một trong những chúng tôi đã có trước đây. Vì vậy, tôi thoát khỏi cuộc gọi của chúng tôi để data.json giả của chúng tôi trên file. Và thay vào đó, tôi gọi điện thoại USGS cơ bản. 

Hãy làm mới, tốt đẹp. Đây là thực tế, dữ liệu thực tế cuộc sống từ tuần này với động đất. Điều này thực sự thú vị. Đây không phải là đáng ngạc nhiên cho chúng ta, nhưng có rất nhiều trận động đất trên Bờ biển phía tây ở California. Nhưng tôi nghĩ rằng nó là rất thú vị rằng có quá nhiều trận động đất ở Alaska, và dường như, đây ở Midwest. Ý tôi là, thú vị, và chúng tôi đang tốt. Đó là kết luận. 

Nhưng về cơ bản, điều này là những gì D3 giúp chúng ta làm. Nó giúp chúng ta lấy dữ liệu, ràng buộc nó đến các yếu tố trong DOM, và có những yếu tố thay đổi như là một chức năng của dữ liệu, có những đặc tính đó, tất cả các nhiều thuộc tính của các yếu tố, tất cả các thể hữu ích cho các kênh để truyền đạt thông tin. 

D3 là một sức mạnh không tưởng thư viện và cũng ngạc chạy. Đây là một số công cụ mạnh mẽ. Trực quan dữ liệu là một công cụ rất mạnh để truyền đạt đến người sâu những hiểu biết đó để được cốt lõi của họ và giúp họ hiểu, trong cách này sâu sắc và trực quan, cách dữ liệu công trình và làm thế nào dữ liệu thay đổi cuộc sống của chúng tôi.