Ví dụ này đang sử dụng Nodebox 3 để trực quan hóa dữ liệu bằng cách vẽ bong bóng/vòng tròn, được định kích thước theo khu vực. Chúng tôi sẽ sử dụng phương pháp tiếp cận theo hướng dữ liệu, sử dụng dữ liệu bên ngoài được cung cấp qua JSON bên ngoài bằng Google Trang tính. Kết thúc với một cái gì đó như
Costa có một lượng caffein vô lý - gấp đôi Caffè Nero
Biểu đồ Diện tích Tỷ lệ thường sử dụng hình vuông hoặc hình tròn, tuy nhiên, bất kỳ hình dạng nào cũng có thể được sử dụng, miễn là bạn sử dụng diện tích của hình dạng để biểu thị dữ liệu. Một lỗi kỹ thuật phổ biến với biểu đồ vùng là sử dụng một độ dài để xác định kích thước của hình dạng, trong khi thực tế bạn cần tính khoảng trống bên trong hình dạng để xác định kích thước của nó. Nếu không, bạn sẽ gây ra sự tăng giảm theo cấp số nhân. [nguồn. datavizcatalogue]
Bước 0. Đưa vào một số dữ liệu
Dữ liệu ví dụ của tôi chỉ là một số giá trị tùy ý, hiển thị caffein cà phê ở một số thương hiệu lớn ở Vương quốc Anh. Ví dụ: tôi sẽ sử dụng Google Trang tính để lưu trữ/tạo dữ liệu của mình
- Tạo một Google Trang tính mới. Nhập một số dữ liệu [chỉ sử dụng số cho các giá trị, không sử dụng dấu phẩy hoặc dấu £/$/%]. Hoặc bạn tạo một bản sao của
- Xuất bản tệp để nó có thể truy cập được. Sử dụng menu bảng tính trên cùng.
File
→Publish to the web
và nhấp vào nútPublish
- Đóng cửa sổ đó và đi tới nút
Share
trên cùng bên phải và chọnGet shareable link
, sau đó sử dụng trình đơn thả xuống bằng cách sử dụng các tùy chọnMore...
và chọnAnyone on the internet can find and view
. Sau đó, bạn có thể sử dụng nútCopy Link
để sao chép URL. [Đây là bảng tính Google đã xuất bản của tôi] - Sử dụng Sheetsee với Glitch qua liên kết này để chúng tôi có thể truy cập dữ liệu ở định dạng JSON. https. // bảng tính. trục trặc. tôi/ Chỉ cần dán liên kết đã sao chép của bạn từ bước 3 vào
Paste your spreadsheet key
và nhấnsubmit
Bây giờ bạn sẽ có một URL hiển thị dữ liệu JSON mà chúng tôi sẽ sử dụng để chuyển vào NodeBox. [Đây là liên kết dữ liệu JSON của tôi]
TIỀN BOA. Json-formatter là một plugin tuyệt vời để xem JSON trong Chrome
Hãy kết nối dữ liệu vào NodeBoxNodeBox có nhiều cách thuận tiện để nhập dữ liệu, chúng tôi sẽ kết nối với dữ liệu qua url, vì vậy nếu chúng tôi cập nhật bảng tính của mình, trực quan hóa của chúng tôi cũng sẽ cập nhật. Mở NodeBox và
- Thêm một nút
Publish to the web
0 và dán vào liên kết JSON [từ bước 4 ở trên] vào trườngPublish to the web
1 [e. g. https. // bảng tính. trục trặc. tôi/?key=1XsE6OHjsMEMeqb-Jlujw72bbDoGRPKPNdWu-SUkKeYg] - Chúng tôi kết nối nút
Publish to the web
0 với nútPublish to the web
3 với giá trịPublish to the web
4 được đặt thànhPublish to the web
5 - Nút
Publish to the web
3 được kết nối với nútPublish to the web
7 vào cổngPublish to the web
8, nên đặt trườngPublish to the web
9 của nó thànhPublish
0
Bước 1. Vẽ và định kích thước một số vòng tròn bằng cách sử dụng dữ liệu
- Lấy một nút
Publish to the web
3 khác và đặt nó làPublish to the web
4 thànhPublish
3 [hoặc bất kỳ tên cột dữ liệu nào mà bạn đang sử dụng cho các giá trị của mình] - Nhận nút
Publish
4 và kết nối nútPublish to the web
3 với nút đó làPublish
6 vàPublish
7. NodeBox sẽ tự động thêm cùng một lượng vòng kết nối dựa trên dữ liệu chúng tôi đã chuyển vào - Chúng ta không thể nhìn thấy các vòng tròn khi chúng được xếp chồng lên nhau. Để chúng ta có thể thấy điều gì đang xảy ra, hãy thêm một nút
Publish
8 và kết nối nútPublish
4 với cổngShare
0 của nó. Bây giờ chúng ta có thể thay đổi màu sắc, tôi đang sử dụngShare
1 từ bộ chọn màu phong cách Thụy Sĩ tuyệt vời. Sau đó chuyển alpha xuống để chúng tôi có thể nhìn thấy tất cả các vòng kết nối
Bây giờ chúng ta có thể thấy các vòng tròn nằm trên mỗi vòng tròn có đường kính được đặt thành giá trị trong dữ liệu. Đây không phải là cách chúng tôi muốn thể hiện kích thước, chúng tôi sẽ khắc phục điều này trong Bước 3, khi chúng tôi định cỡ chúng theo khu vực
Bước 2. Trải chúng ra trên một dòng
Chúng ta có thể sử dụng nút Share
2 để tạo khoảng trống cho các vòng tròn, vì chúng ta có thể chuyển các vòng tròn trong mỗi Share
3 của nó. Độ dài của dòng [được kiểm soát từ các tham số Share
4] sẽ xác định khoảng cách
- Thêm nút
Share
2 và nútShare
6 - Kết nối nút
Publish to the web
3 với nútShare
6. Điều này sẽ cung cấp cho chúng tôi tổng số mục trong dữ liệu của chúng tôi - Kết nối nút
Share
6 với cổngShare
3 trong nútShare
2. Bây giờ nó sẽ có một điểm cho mỗi mục dữ liệu. [Bạn có thể thấy điều này bằng cách nhấp đúp vào nútShare
2 và chọn hộp kiểmGet shareable link
3 ở menu trên cùng bên trái - Kết nối nút
Share
2 với cổngGet shareable link
5 theo hình elip. Điều này sẽ lặp qua từng điểm trên đường để định vị các vòng tròn. [Thay đổi độ dài củaShare
2 để thay đổi khoảng cách của các vòng tròn]
Bước 3. Kích thước các vòng tròn một cách chính xác
Kích thước của các vòng tròn cần được vẽ dựa trên diện tích của vòng tròn, không phải bán kính hoặc đường kính của nó. Để định kích thước bán kính một cách chính xác, chúng ta tìm đến phương trình diện tích hình tròn
Diện tích hình tròn = πr2
Trong trường hợp này, diện tích hình tròn là số lần lặp lại. Chúng tôi muốn biết r. Di chuyển một số thứ xung quanh và chúng tôi nhận được điều này
r = √[Diện tích hình tròn / π]
[nguồn. chảy dữ liệu. com]
Chúng tôi có thể làm điều này khá dễ dàng với NodeBox
Nhưng không thực sự cần PI, chỉ cần căn bậc hai là được
Việc nhân với một hệ số không đổi [chẳng hạn như 1/π] không ảnh hưởng đến
tỷ lệ của mối quan hệ giữa dữ liệu và diện tích. Ví
ví dụ: nếu bạn xem hình ảnh trực quan từ xa hơn, thì tất cả
vòng tròn sẽ nhỏ hơn nhưng tỷ lệ vẫn giữ nguyên.
Về mặt toán học.sqrt[diện tích / π] = sqrt[diện tích] * sqrt[1 / π]
sqrt[1 / π] = 0. 5641895835477…Vì vậy, miễn là bạn sử dụng Toán. sqrt hoặc d3. tỉ lệ. sqrt, mã hóa
chính xác; .
[]
Hãy bỏ số pi và phép chia, và chỉ cần thêm một nút Get shareable link
7 vào bản phác thảo của chúng ta
Để cung cấp cho chúng tôi quyền kiểm soát kích thước trực quan của các vòng kết nối, chúng tôi cần sử dụng Get shareable link
8, điều này sẽ cho phép chúng tôi ánh xạ dữ liệu nguồn của mình tới một giá trị đích. Trong ví dụ của chúng tôi, Get shareable link
9 sẽ là kích thước tối đa của vòng kết nối [hãy thử thay đổi kích thước của nó để tăng hoặc giảm tỷ lệ vòng kết nối
- Thêm một nút
Get shareable link
8 và kết nối đầu ra của nó với các cổngPublish
6 vàPublish
7 của cổngPublish
4 - Đưa nút
Get shareable link
7 vào cổngMore...
5 của nútGet shareable link
8 - Thêm một nút
More...
7 và kết nối nó với đầu ra của nútGet shareable link
7 và đưa nó vào cổngMore...
9 của nútGet shareable link
8
Bây giờ chúng tôi có các vòng tròn diện tích tỷ lệ được điều khiển bởi dữ liệu của chúng tôi
Bước 4. Thêm một số nhãn
Chúng tôi có thể thêm một số nhãn bằng cách sử dụng nút Anyone on the internet can find and view
1. Chúng tôi sử dụng cùng một nútShare
2 để tách chúng ra và một nút khác Publish to the web
3 để lấy nhãn từ dữ liệu. Nút Anyone on the internet can find and view
4 cho phép chúng tôi xem/kết hợp các phần tử của chúng tôi
Tất cả các bước trong bài viết này đều có tệp mã riêng trong repo này để dễ tham khảo. https. //github. com/eesur/nodebox-proportional-area-chart
Mẹo. Nếu bạn không sử dụng GitHub, chỉ cần tải xuống thư mục zip bằng nút Anyone on the internet can find and view
5 màu xanh lục [trên cùng bên phải]
Đây là một loạt các khám phá của tôi về việc sử dụng nodeBox, chia sẻ những gì tôi đã học được để hỗ trợ việc tìm hiểu về nền tảng tuyệt vời này. Hãy cho tôi biết nếu có bất cứ điều gì bỏ lỡ và cảm ơn vì đã đọc