Biểu đồ diện tích theo tỷ lệ Google Trang tính

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

1. 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
2. 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út Publish
3. Đóng cửa sổ đó và đi tới nútShare trên cùng bên phải và chọn Get shareable link, sau đó sử dụng trình đơn thả xuống bằng cách sử dụng các tùy chọn More... và chọn Anyone on the internet can find and view. Sau đó, bạn có thể sử dụng nút Copy Link để sao chép URL. (Đây là bảng tính Google đã xuất bản của tôi)
4. 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ấn submit

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 NodeBox

NodeBox 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à

1. Thêm một nút Publish to the web0 và dán vào liên kết JSON (từ bước 4 ở trên) vào trườngPublish to the web1 (e. g. https. // bảng tính. trục trặc. tôi/?key=1XsE6OHjsMEMeqb-Jlujw72bbDoGRPKPNdWu-SUkKeYg)
2. Chúng tôi kết nối nútPublish to the web0 với nút Publish to the web3 với giá trị Publish to the web4 được đặt thành Publish to the web5
3. Nút Publish to the web3 được kết nối với nút Publish to the web7 vào cổng Publish to the web8, nên đặt trường Publish to the web9 của nó thành Publish0

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

1. Lấy một nút Publish to the web3 khác và đặt nó là Publish to the web4 thành Publish3 (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)
2. Nhận nút Publish4 và kết nối nút Publish to the web3 với nút đó là Publish6 và Publish7. 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
3. 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 Publish8 và kết nối nút Publish4 với cổng Share0 của nó. Bây giờ chúng ta có thể thay đổi màu sắc, tôi đang sử dụng Share1 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 Share2 để 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 Share3 của nó. Độ dài của dòng (được kiểm soát từ các tham số Share4) sẽ xác định khoảng cách

1. Thêm nút Share2 và nút Share6
2. Kết nối nút Publish to the web3 với nút Share6. Đ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
3. Kết nối nút Share6 với cổng Share3 trong nút Share2. 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út Share2 và chọn hộp kiểm Get shareable link3 ở menu trên cùng bên trái
4. Kết nối nút Share2 với cổng Get shareable link5 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ủa Share2 để 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 link7 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 link8, đ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 link9 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

1. Thêm một nút Get shareable link8 và kết nối đầu ra của nó với các cổng Publish6 và Publish7 của cổng Publish4
2. Đưa nút Get shareable link7 vào cổng More...5 của nútGet shareable link8
3. Thêm một nút More...7 và kết nối nó với đầu ra của nút Get shareable link7 và đưa nó vào cổng More...9 của nútGet shareable link8

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 view1. Chúng tôi sử dụng cùng một nútShare2 để tách chúng ra và một nút khác Publish to the web3 để lấy nhãn từ dữ liệu. Nút Anyone on the internet can find and view4 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 view5 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