Làm cách nào để bạn nhúng trực quan hóa dữ liệu của mình vào email html và gửi chúng bằng python?
Không giống như các đối tác phổ biến trong không gian trực quan hóa Python, như Matplotlib và Seaborn, Bokeh kết xuất đồ họa của nó bằng HTML và JavaScript. Điều này làm cho nó trở thành một ứng cử viên tuyệt vời để xây dựng các ứng dụng và bảng điều khiển dựa trên web. Tuy nhiên, đây là một công cụ mạnh mẽ không kém để khám phá và hiểu dữ liệu của bạn hoặc tạo các biểu đồ tùy chỉnh đẹp mắt cho một dự án hoặc báo cáo Show
Sử dụng một số ví dụ trên bộ dữ liệu trong thế giới thực, mục tiêu của hướng dẫn này là giúp bạn bắt đầu và sử dụng Bokeh Bạn sẽ học cách
Vì vậy, hãy nhảy vào. Bạn có thể tải xuống các ví dụ và đoạn mã từ repo Real Python GitHub Tải xuống miễn phí. Nhận một chương mẫu từ Thủ thuật Python. Cuốn sách chỉ cho bạn các phương pháp hay nhất về Python với các ví dụ đơn giản mà bạn có thể áp dụng ngay lập tức để viết mã Pythonic + đẹp hơn Từ dữ liệu đến trực quan hóaXây dựng trực quan hóa với Bokeh bao gồm các bước sau
Hãy khám phá từng bước chi tiết hơn Loại bỏ các quảng cáoChuẩn bị dữ liệuBất kỳ hình ảnh hóa dữ liệu tốt nào cũng bắt đầu bằng—bạn đoán rồi—dữ liệu. Nếu bạn cần xem lại nhanh cách xử lý dữ liệu trong Python, hãy xem số lượng ngày càng tăng của các hướng dẫn Real Python xuất sắc về chủ đề này Bước này thường liên quan đến các thư viện xử lý dữ liệu như Pandas và tất cả là về việc thực hiện các bước cần thiết để chuyển đổi dữ liệu thành dạng phù hợp nhất cho hình ảnh hóa dự định của bạn Xác định nơi trực quan hóa sẽ được hiển thịỞ bước này, bạn sẽ xác định cách bạn muốn tạo và cuối cùng xem trực quan hóa của mình. Trong hướng dẫn này, bạn sẽ tìm hiểu về hai tùy chọn phổ biến mà Bokeh cung cấp. tạo tệp HTML tĩnh và hiển thị nội tuyến trực quan hóa của bạn trong Notebook Jupyter Thiết lập (các) HìnhTừ đây, bạn sẽ lắp ráp hình của mình, chuẩn bị canvas cho hình ảnh của bạn. Trong bước này, bạn có thể tùy chỉnh mọi thứ từ tiêu đề đến dấu tích. Bạn cũng có thể thiết lập một bộ công cụ có thể cho phép nhiều người dùng tương tác với hình ảnh trực quan của bạn Kết nối và vẽ dữ liệu của bạnTiếp theo, bạn sẽ sử dụng vô số trình kết xuất của Bokeh để tạo hình cho dữ liệu của mình. Tại đây, bạn có thể linh hoạt vẽ dữ liệu của mình từ đầu bằng cách sử dụng nhiều tùy chọn hình dạng và điểm đánh dấu có sẵn, tất cả đều có thể dễ dàng tùy chỉnh. Chức năng này mang đến cho bạn sự tự do sáng tạo đáng kinh ngạc trong việc thể hiện dữ liệu của mình Ngoài ra, Bokeh có một số chức năng tích hợp sẵn để xây dựng những thứ như và rất nhiều ví dụ để tạo các hình ảnh trực quan nâng cao hơn như biểu đồ mạng và bản đồ Sắp xếp bố cụcNếu bạn cần nhiều hơn một con số để thể hiện dữ liệu của mình, Bokeh sẽ giúp bạn. Bokeh không chỉ cung cấp các tùy chọn bố cục dạng lưới tiêu chuẩn mà còn cho phép bạn dễ dàng sắp xếp các hình ảnh trực quan của mình thành một bố cục theo thẻ chỉ trong một vài dòng mã Ngoài ra, các ô của bạn có thể được liên kết nhanh chóng với nhau, do đó, lựa chọn trên một ô sẽ được phản ánh trên bất kỳ sự kết hợp nào của các ô khác Xem trước và lưu quá trình tạo dữ liệu tuyệt đẹp của bạnCuối cùng, đã đến lúc xem những gì bạn đã tạo Cho dù bạn đang xem hình ảnh trực quan của mình trong trình duyệt hay sổ ghi chép, bạn sẽ có thể khám phá hình ảnh trực quan của mình, kiểm tra các tùy chỉnh của mình và chơi với bất kỳ tương tác nào đã được thêm vào Nếu bạn thích những gì bạn thấy, bạn có thể lưu trực quan của mình vào một tệp hình ảnh. Nếu không, bạn có thể xem lại các bước ở trên nếu cần để biến tầm nhìn dữ liệu của mình thành hiện thực Đó là nó. Sáu bước này là các khối xây dựng cho một mẫu gọn gàng, linh hoạt có thể được sử dụng để đưa dữ liệu của bạn từ bảng lên màn hình lớn
Một số đoạn mã phổ biến được tìm thấy trong mỗi bước được xem trước ở trên và bạn sẽ thấy cách điền phần còn lại khi bạn chuyển qua phần còn lại của hướng dẫn Loại bỏ các quảng cáoTạo hình đầu tiên của bạnCó trong Bokeh. Trong hướng dẫn này, bạn sẽ thấy hai tùy chọn này
Điều quan trọng cần lưu ý là không chức năng nào thực sự hiển thị cho bạn hình ảnh trực quan. Điều đó không xảy ra cho đến khi 1 được gọi. Tuy nhiên, họ sẽ đảm bảo rằng, khi 1 được gọi, hình ảnh trực quan sẽ xuất hiện ở nơi bạn dự địnhBằng cách gọi cả 3 và 0 trong cùng một lần thực thi, trực quan hóa sẽ được hiển thị thành cả tệp HTML tĩnh và nội tuyến trong sổ ghi chép. Tuy nhiên, nếu vì bất kỳ lý do gì mà bạn chạy nhiều lệnh 3 trong cùng một lần thực thi, thì chỉ lệnh cuối cùng sẽ được sử dụng để hiển thịĐây là cơ hội tuyệt vời để mang đến cho bạn cái nhìn đầu tiên về Bokeh 6 mặc định bằng cách sử dụng 3 0Như bạn có thể thấy, một cửa sổ trình duyệt mới được mở với một tab có tên là Hình Bokeh trống và một hình trống. Không hiển thị là tệp được tạo với tên output_file_test. html trong thư mục làm việc hiện tại của bạn Nếu bạn chạy cùng một đoạn mã với 0 thay cho 3, giả sử bạn đã kích hoạt Máy tính xách tay Jupyter và sẵn sàng hoạt động, bạn sẽ nhận được thông tin sau 3Như bạn có thể thấy, kết quả vẫn như vậy, chỉ hiển thị ở một vị trí khác Thông tin thêm về cả 3 và 0 có thể được tìm thấy trongGhi chú. Đôi khi, khi hiển thị nhiều hình ảnh hóa theo tuần tự, bạn sẽ thấy rằng các kết xuất trước đó không bị xóa sau mỗi lần thực hiện. Nếu bạn gặp phải vấn đề này, hãy nhập và chạy phần sau giữa các lần thực thi
Trước khi tiếp tục, bạn có thể nhận thấy rằng hình Bokeh mặc định được tải sẵn một thanh công cụ. Đây là một bản xem trước quan trọng về các yếu tố tương tác của Bokeh xuất hiện ngay lập tức. Bạn sẽ tìm hiểu thêm về thanh công cụ và cách cấu hình nó trong phần ở cuối hướng dẫn này Chuẩn bị hình của bạn cho dữ liệuBây giờ bạn đã biết cách tạo và xem hình Bokeh chung trong trình duyệt hoặc Jupyter Notebook, đã đến lúc tìm hiểu thêm về cách định cấu hình đối tượng 6Đối tượng 6 không chỉ là nền tảng trực quan hóa dữ liệu của bạn mà còn là đối tượng mở khóa tất cả các công cụ có sẵn của Bokeh để trực quan hóa dữ liệu. Hình Bokeh là một lớp con của , cung cấp nhiều tham số giúp bạn có thể định cấu hình các yếu tố thẩm mỹ cho hình của mìnhĐể chỉ cho bạn cái nhìn thoáng qua về các tùy chọn tùy chỉnh có sẵn, hãy tạo hình xấu nhất từ trước đến nay
Sau khi đối tượng 6 được khởi tạo, bạn vẫn có thể định cấu hình nó sau khi thực tế. Giả sử bạn muốn loại bỏ các đường lưới 1Các thuộc tính đường lưới có thể truy cập thông qua thuộc tính 15 của hình. Trong trường hợp này, đặt 16 thành 17 sẽ loại bỏ hoàn toàn các đường lưới một cách hiệu quả. có thể được tìm thấy dưới màn hình đầu tiên trong tài liệu lớp PlotGhi chú. Nếu bạn đang làm việc trên sổ ghi chép hoặc IDE có chức năng tự động hoàn thành, tính năng này chắc chắn có thể là bạn của bạn. Với rất nhiều yếu tố có thể tùy chỉnh, nó có thể rất hữu ích trong việc khám phá các tùy chọn có sẵn Mặt khác, thực hiện tìm kiếm nhanh trên web, với từ khóa hiệu ứng bokeh và những gì bạn đang cố gắng thực hiện, thường sẽ chỉ cho bạn đúng hướng Còn rất nhiều điều tôi có thể chạm vào ở đây, nhưng đừng cảm thấy như bạn đang bỏ lỡ. Tôi đảm bảo sẽ giới thiệu các chỉnh sửa hình khác nhau khi hướng dẫn tiến triển. Dưới đây là một số liên kết hữu ích khác về chủ đề này
Dưới đây là một vài tùy chọn tùy chỉnh cụ thể đáng để kiểm tra
Đôi khi, không rõ hình của bạn cần được tùy chỉnh như thế nào cho đến khi nó thực sự có một số dữ liệu được hiển thị trong đó, vì vậy, tiếp theo bạn sẽ tìm hiểu cách biến điều đó thành hiện thực Loại bỏ các quảng cáoVẽ dữ liệu với GlyphsMột con số trống không phải là tất cả những gì thú vị, vì vậy hãy nhìn vào glyphs. các khối xây dựng của hình ảnh Bokeh. Hình tượng là một hình dạng đồ họa hoặc điểm đánh dấu được véc tơ hóa dùng để thể hiện dữ liệu của bạn, chẳng hạn như hình tròn hoặc hình vuông. Có thể tìm thấy nhiều ví dụ hơn trong thư viện Bokeh. Sau khi bạn tạo hình của mình, bạn được cấp quyền truy cập vào một loạt các phương thức glyph có thể định cấu hình Hãy bắt đầu với một ví dụ rất cơ bản, vẽ một số điểm trên lưới tọa độ x-y 7Sau khi hình của bạn được khởi tạo, bạn có thể xem cách nó có thể được sử dụng để vẽ dữ liệu tọa độ x-y bằng cách sử dụng glyphs 70 tùy chỉnhDưới đây là một vài loại glyphs
Thông tin về các hình tượng ở trên, cũng như các hình khác, có thể được tìm thấy trong Hướng dẫn tham khảo của Bokeh Những nét chạm này có thể được kết hợp khi cần thiết để phù hợp với nhu cầu trực quan hóa của bạn. Giả sử tôi muốn tạo một hình ảnh trực quan cho biết tôi đã viết bao nhiêu từ mỗi ngày để thực hiện hướng dẫn này, với một đường xu hướng bao phủ số lượng từ tích lũy 1Để kết hợp các cột và dòng trên hình, chúng được tạo đơn giản bằng cách sử dụng cùng một đối tượng 6Ngoài ra, bạn có thể thấy ở trên mức độ liền mạch của một chú giải có thể được tạo bằng cách đặt thuộc tính 74 cho mỗi glyph. Truyền thuyết sau đó được chuyển đến góc trên bên trái của cốt truyện bằng cách gán 75 cho 76bạn có thể kiểm tra. giới thiệu. chúng sẽ xuất hiện lại sau trong hướng dẫn khi chúng ta bắt đầu đào sâu vào các yếu tố tương tác của trực quan hóa Thông tin nhanh về dữ liệuBất cứ khi nào bạn đang khám phá một thư viện trực quan hóa mới, bạn nên bắt đầu với một số dữ liệu trong miền mà bạn quen thuộc. Vẻ đẹp của Bokeh là gần như mọi ý tưởng bạn có đều có thể thực hiện được. Đó chỉ là vấn đề bạn muốn tận dụng các công cụ có sẵn như thế nào để làm điều đó Các ví dụ còn lại sẽ sử dụng dữ liệu có sẵn công khai từ Kaggle, dữ liệu này có thông tin về mùa giải 2017-18 của Hiệp hội Bóng rổ Quốc gia (NBA), cụ thể là
Dữ liệu này không liên quan gì đến công việc của tôi, nhưng tôi yêu bóng rổ và thích suy nghĩ về các cách để trực quan hóa lượng dữ liệu ngày càng tăng liên quan đến nó Nếu bạn không có dữ liệu để chơi từ trường học hoặc nơi làm việc, hãy nghĩ về điều gì đó mà bạn quan tâm và cố gắng tìm một số dữ liệu liên quan đến điều đó. Nó sẽ đi một chặng đường dài trong việc làm cho cả quá trình học tập và sáng tạo trở nên nhanh hơn và thú vị hơn Để làm theo các ví dụ trong hướng dẫn, bạn có thể tải xuống bộ dữ liệu từ các liên kết ở trên và đọc chúng vào Pandas 77 bằng cách sử dụng các lệnh sau 7Đoạn mã này đọc dữ liệu từ ba tệp CSV và tự động diễn giải các cột ngày thành đối tượng 78Đã đến lúc bạn có được một số dữ liệu thực tế Loại bỏ các quảng cáoSử dụng đối tượng # Bokeh Libraries from bokeh.io import output_notebook from bokeh.plotting import figure, show # The figure will be rendered inline in my Jupyter Notebook output_notebook() # Example figure fig = figure(background_fill_color='gray', background_fill_alpha=0.5, border_fill_color='blue', border_fill_alpha=0.25, plot_height=300, plot_width=500, h_symmetry=True, x_axis_label='X Label', x_axis_type='datetime', x_axis_location='above', x_range=('2018-01-01', '2018-06-30'), y_axis_label='Y Label', y_axis_type='linear', y_axis_location='left', y_range=(0, 100), title='Example Figure', title_location='right', toolbar_location='below', tools='save') # See what it looks like show(fig) 79Các ví dụ trên đã sử dụng và mảng Numpy để biểu thị dữ liệu và Bokeh được trang bị tốt để xử lý các kiểu dữ liệu này. Tuy nhiên, khi nói đến dữ liệu trong Python, rất có thể bạn sẽ bắt gặp các từ điển Python và , đặc biệt nếu bạn đang đọc dữ liệu từ một tệp hoặc nguồn dữ liệu ngoài Bokeh được trang bị tốt để hoạt động với những cấu trúc dữ liệu phức tạp hơn này và thậm chí còn có chức năng tích hợp sẵn để xử lý chúng, cụ thể là 79Bạn có thể tự hỏi: “Tại sao lại sử dụng 79 khi Bokeh có thể giao tiếp trực tiếp với các loại dữ liệu khác?”Thứ nhất, cho dù bạn tham chiếu trực tiếp một danh sách, mảng, từ điển hay DataFrame, Bokeh sẽ biến nó thành một 79 đằng sau hậu trường. Quan trọng hơn, 79 giúp triển khai khả năng chi trả tương tác của Bokeh dễ dàng hơn nhiều 79 là nền tảng trong việc truyền dữ liệu tới các hình tượng mà bạn đang sử dụng để trực quan hóa. Chức năng chính của nó là ánh xạ tên tới các cột dữ liệu của bạn. Điều này giúp bạn dễ dàng tham chiếu các yếu tố dữ liệu hơn khi xây dựng trực quan hóa của mình. Nó cũng giúp Bokeh làm điều tương tự dễ dàng hơn khi xây dựng hình ảnh trực quan của bạn 79 có thể giải thích ba loại đối tượng dữ liệu
Hãy bắt đầu bằng cách hình dung cuộc đua giành vị trí đầu tiên tại NBA’s Western Conference năm 2017-18 giữa nhà đương kim vô địch Golden State Warriors và kẻ thách thức Houston Rockets. Thành tích thắng-thua hàng ngày của hai đội này được lưu trữ trong DataFrame có tên là 73>>> 4Từ đây, bạn có thể tải 77 này thành hai đối tượng 79 và trực quan hóa cuộc đua 00Lưu ý cách các đối tượng 79 tương ứng được tham chiếu khi tạo hai dòng. Bạn chỉ cần chuyển các tên cột ban đầu làm tham số đầu vào và chỉ định sử dụng 79 nào thông qua thuộc tính 78Hình dung cho thấy cuộc đua chặt chẽ trong suốt mùa giải, với việc Warriors xây dựng một bước đệm khá lớn vào khoảng giữa mùa giải. Tuy nhiên, một chút sa sút vào cuối mùa giải đã giúp Rockets bắt kịp và cuối cùng vượt qua các nhà đương kim vô địch để kết thúc mùa giải với tư cách là hạt giống số một của Western Conference. Ghi chú. Trong Bokeh, bạn có thể chỉ định màu theo tên, giá trị hex hoặc mã màu RGB Đối với hình ảnh ở trên, một màu được chỉ định cho các dòng tương ứng đại diện cho hai đội. Thay vì sử dụng các tên màu CSS như 79 cho Rockets và 40 cho Warriors, bạn có thể muốn thêm một điểm nhấn trực quan đẹp mắt bằng cách sử dụng màu chính thức của đội ở dạng mã màu hex. Ngoài ra, bạn có thể đã sử dụng các bộ đại diện cho mã màu RGB. ________ 541 cho Rockets, ________ 542 cho WarriorsBokeh cung cấp một hiệu ứng hữu ích. Ngoài ra, mã màu html. com là một trang web tuyệt vời để tìm mã màu CSS, hex và RGB Các đối tượng 79 có thể làm được nhiều việc hơn là chỉ phục vụ như một cách dễ dàng để tham khảo các cột 77. Đối tượng 79 có ba bộ lọc tích hợp có thể được sử dụng để tạo chế độ xem trên dữ liệu của bạn bằng đối tượng 46
Trong ví dụ trước, hai đối tượng 79 đã được tạo, mỗi đối tượng từ một tập hợp con của Khung dữ liệu 73. Ví dụ tiếp theo sẽ tạo lại cùng một đầu ra từ một 79 dựa trên tất cả các 73 bằng cách sử dụng một 47 tạo chế độ xem trên dữ liệu 01Lưu ý cách 47 được chuyển đến 46 trong một danh sách. Điều này cho phép bạn kết hợp nhiều bộ lọc với nhau để tách dữ liệu bạn cần khỏi 79 khi cầnĐể biết thông tin về cách tích hợp các nguồn dữ liệu, hãy xem bài đăng của hướng dẫn sử dụng Bokeh trên 79 và các đối tượng nguồn khác có sẵnHội nghị phía Tây kết thúc là một cuộc đua thú vị, nhưng hãy nói rằng bạn muốn xem liệu Hội nghị phía Đông có chặt chẽ như vậy không. Không chỉ vậy, mà bạn còn muốn xem chúng trong một hình ảnh trực quan duy nhất. Đây là một sự khác biệt hoàn hảo cho chủ đề tiếp theo. bố cục Loại bỏ các quảng cáoSắp xếp nhiều hình ảnh hóa với bố cụcBảng xếp hạng của Hội nghị phía Đông đã có hai đối thủ trong Phân khu Đại Tây Dương. Boston Celtics và Toronto Raptors. Trước khi sao chép các bước được sử dụng để tạo 73, hãy thử kiểm tra 79 một lần nữa bằng cách sử dụng những gì bạn đã học ở trênTrong ví dụ này, bạn sẽ thấy cách nạp toàn bộ DataFrame vào một 79 và tạo các dạng xem để cô lập dữ liệu liên quan 02 79 có thể cô lập dữ liệu liên quan trong một 77 5.040 x 39 mà không tốn công sức, tiết kiệm một vài dòng mã Pandas trong quá trình nàyNhìn vào hình dung có thể thấy cuộc đua Hội nghị miền Đông không hề lép vế. Sau khi Celtics gầm rú ngoài cổng, Raptors lội ngược dòng để vượt qua đối thủ cùng hạng và kết thúc mùa giải thường với năm trận thắng nữa Với hai hình ảnh trực quan của chúng tôi đã sẵn sàng, đã đến lúc kết hợp chúng lại với nhau Tương tự như chức năng của , Bokeh cung cấp các chức năng 019, 020 và 021 trong mô-đun 022 của nó. Các chức năng này nói chung có thể được phân loại là bố cụcCách sử dụng rất đơn giản. Nếu bạn muốn đặt hai trực quan hóa trong một cấu hình dọc, bạn có thể làm như vậy bằng cách sau 03Tôi sẽ lưu cho bạn hai dòng mã, nhưng hãy yên tâm rằng việc hoán đổi 019 cho 020 trong đoạn mã trên sẽ định cấu hình tương tự hai ô theo cấu hình ngangGhi chú. Nếu bạn đang thử các đoạn mã khi xem hướng dẫn, tôi muốn đi nhanh để giải quyết một lỗi mà bạn có thể thấy khi truy cập 025 và 026 trong các ví dụ sau. Khi làm như vậy, bạn có thể nhận được một lỗi như thế này 04Đây là một trong nhiều lỗi thuộc mô-đun xác thực của Bokeh, trong đó cụ thể là 027 đang cảnh báo về việc sử dụng lại 025 và 026 trong một bố cục mớiĐể tránh lỗi này khi bạn kiểm tra các ví dụ, hãy mở đầu đoạn mã minh họa từng bố cục như sau 05Làm như vậy sẽ làm mới các thành phần có liên quan để hiển thị trực quan, đảm bảo rằng không cần cảnh báo Thay vì sử dụng 019 hoặc 020, bạn có thể muốn sử dụng 021 để thay thếMột điểm khác biệt chính của 021 là nó sẽ tự động hợp nhất thanh công cụ trên tất cả các hình con của nó. Hai hình minh họa trên không có thanh công cụ, nhưng nếu có thì mỗi hình sẽ có hình riêng khi sử dụng 019 hoặc 020. Cùng với đó, nó cũng có thuộc tính 036 của riêng mình, xem bên dưới được đặt thành 037Về mặt cú pháp, bạn cũng sẽ nhận thấy bên dưới rằng 021 khác ở chỗ, thay vì được chuyển một bộ làm đầu vào, nó yêu cầu một danh sách các danh sách, trong đó mỗi danh sách con đại diện cho một hàng trong lưới 06Cuối cùng, 021 cho phép truyền các giá trị 17, được hiểu là các ô con trống. Do đó, nếu bạn muốn để lại một trình giữ chỗ cho hai ô bổ sung, thì bạn có thể làm điều gì đó như thế này 07Nếu bạn muốn chuyển đổi giữa cả hai hình ảnh trực quan ở kích thước đầy đủ của chúng mà không cần phải nén chúng xuống để vừa với nhau hoặc chồng lên nhau, thì một tùy chọn tốt là bố cục theo thẻ Bố cục theo thẻ bao gồm hai chức năng tiện ích Bokeh. 041 và 042 từ mô-đun phụ 043. Giống như sử dụng 044, việc tạo bố cục theo tab khá đơn giản 08Bước đầu tiên là tạo một 042 cho mỗi tab. Điều đó nghe có vẻ hơi khó hiểu, nhưng hãy nghĩ về hàm 046 như cơ chế tổ chức các tab riêng lẻ được tạo bằng 042Mỗi 042 lấy đầu vào là một phần tử con, có thể là một 6 đơn lẻ hoặc một bố cục. (Hãy nhớ rằng bố cục là tên chung cho 019, 020 hoặc 021. ) Sau khi bảng điều khiển của bạn được lắp ráp, chúng có thể được chuyển làm đầu vào cho 046 trong danh sáchBây giờ bạn đã hiểu cách truy cập, vẽ và sắp xếp dữ liệu của mình, đã đến lúc chuyển sang điều kỳ diệu thực sự của hiệu ứng Bokeh. sự tương tác. Như thường lệ, hãy xem Hướng dẫn sử dụng của Bokeh để biết thêm thông tin về bố cục Loại bỏ các quảng cáoThêm tương tácTính năng làm nên sự khác biệt của Bokeh là khả năng dễ dàng triển khai tính tương tác trong hình ảnh của bạn. Bokeh thậm chí còn đi xa hơn khi mô tả chính nó như một thư viện hình ảnh tương tác
Trong phần này, chúng tôi sẽ đề cập đến năm cách bạn có thể thêm tính tương tác
Việc triển khai các yếu tố tương tác này mở ra khả năng khám phá dữ liệu của bạn mà bản thân các hình ảnh tĩnh không thể thực hiện được Định cấu hình Thanh công cụNhư bạn đã thấy trong suốt quá trình quay trở lại, Bokeh 6 mặc định đi kèm với một thanh công cụ ngay bên ngoài hộp. Thanh công cụ mặc định đi kèm với các công cụ sau (từ trái qua phải)
Có thể xóa thanh công cụ bằng cách chuyển 055 khi khởi tạo đối tượng 6 hoặc di chuyển vị trí bằng cách chuyển bất kỳ 057, 058, 059 hoặc 037Ngoài ra, thanh công cụ có thể được định cấu hình để bao gồm bất kỳ tổ hợp công cụ nào bạn muốn. Bokeh cung cấp 18 công cụ cụ thể trên năm loại
Để tìm hiểu về các công cụ, hãy nhớ truy cập. Mặt khác, chúng sẽ được minh họa trong việc đề cập đến các tương tác khác nhau được đề cập ở đây Chọn điểm dữ liệuThực hiện hành vi lựa chọn dễ dàng như thêm một vài từ khóa cụ thể khi khai báo glyphs của bạn Ví dụ tiếp theo sẽ tạo một biểu đồ phân tán liên quan đến tổng số lần bắn ba điểm của một người chơi với tỷ lệ phần trăm thực hiện được (đối với những người chơi có ít nhất 100 lần bắn ba điểm) Dữ liệu có thể được tổng hợp từ Khung dữ liệu 079 09Đây là một mẫu của kết quả 77>>> 30Giả sử bạn muốn chọn một nhóm người chơi trong bản phân phối và khi làm như vậy, hãy tắt màu của các nét tượng trưng cho những người chơi không được chọn 31Đầu tiên, chỉ định các công cụ lựa chọn bạn muốn cung cấp. Trong ví dụ trên, 081, 082, 083 và 084 (cùng với nút đặt lại) được chỉ định trong danh sách có tên là 085. Khi hình được khởi tạo, thanh công cụ được định vị ____1058 biểu đồ và danh sách được chuyển đến ____1087 để cung cấp các công cụ được chọn ở trênMỗi người chơi ban đầu được biểu thị bằng một hình vuông màu xanh hoàng gia, nhưng các cấu hình sau được đặt khi một người chơi hoặc nhóm người chơi được chọn
Đó là nó. Chỉ với một vài bổ sung nhanh chóng, trực quan hóa bây giờ trông như thế này Để biết thêm thông tin về những gì bạn có thể làm khi lựa chọn, hãy xem Loại bỏ các quảng cáoThêm hành động di chuộtVì vậy, khả năng chọn các điểm dữ liệu người chơi cụ thể có vẻ quan tâm trong biểu đồ phân tán của tôi đã được triển khai, nhưng nếu bạn muốn nhanh chóng xem biểu tượng đại diện cho từng người chơi thì sao? . Tất cả những gì bạn cần làm là thêm đoạn mã sau vào đoạn mã trên 32 091 hơi khác so với các công cụ lựa chọn mà bạn đã thấy ở trên ở chỗ nó có các thuộc tính, cụ thể là 093Trước tiên, bạn có thể định cấu hình chú giải công cụ được định dạng bằng cách tạo danh sách các bộ chứa mô tả và tham chiếu đến 79. Danh sách này đã được chuyển làm đầu vào cho 091 và sau đó chỉ cần thêm vào hình bằng cách sử dụng 096. Đây là những gì đã xảy raLưu ý việc bổ sung nút Di chuột vào thanh công cụ, có thể bật và tắt nút này Nếu bạn muốn nhấn mạnh hơn nữa những người chơi khi di chuột, Bokeh có thể thực hiện điều đó bằng kiểm tra khi di chuột. Đây là phiên bản được sửa đổi một chút của đoạn mã đã thêm chú giải công cụ 33Điều này được thực hiện bằng cách tạo một hình tượng hoàn toàn mới, trong trường hợp này là hình tròn thay vì hình vuông và gán nó cho 097. Lưu ý rằng độ mờ ban đầu được đặt thành 0 để nó ẩn cho đến khi con trỏ chạm vào nó. Các thuộc tính xuất hiện khi di chuột được ghi lại bằng cách đặt 098 thành 099 cùng với 300Bây giờ bạn sẽ thấy một vòng tròn nhỏ màu đen xuất hiện trên hình vuông ban đầu khi di chuột qua các điểm đánh dấu khác nhau Để khám phá thêm các khả năng của 091, hãy xem và hướng dẫnLiên kết trục và lựa chọnLiên kết là quá trình đồng bộ hóa các phần tử của các hình ảnh hóa khác nhau trong một bố cục. Chẳng hạn, có thể bạn muốn liên kết các trục của nhiều ô để đảm bảo rằng nếu bạn phóng to một ô thì nó sẽ được phản ánh trên ô khác. Hãy xem nó được thực hiện như thế nào Đối với ví dụ này, trực quan hóa sẽ có thể chuyển sang các phân đoạn khác nhau trong lịch trình của một nhóm và kiểm tra các số liệu thống kê khác nhau của trò chơi. Mỗi chỉ số sẽ được thể hiện bằng cốt truyện riêng của nó trong một 044 hai nhân haiDữ liệu có thể được thu thập từ Khung dữ liệu 303, chọn Philadelphia 76ers làm đội quan tâm 34Sau đây là kết quả 5 trận đầu tiên của 76ers >>> 35Bắt đầu bằng cách nhập các thư viện Bokeh cần thiết, chỉ định các tham số đầu ra và đọc dữ liệu vào một 79 36Mỗi trò chơi được biểu thị bằng một cột và sẽ có màu xanh lục nếu kết quả là thắng và màu đỏ nếu thua. Để thực hiện điều này, có thể sử dụng 305 của Bokeh để ánh xạ các giá trị dữ liệu thành các màu được chỉ định 37Đối với trường hợp sử dụng này, một danh sách chỉ định các giá trị dữ liệu phân loại sẽ được ánh xạ được chuyển tới 306 và một danh sách có các màu mong muốn tới 307. Để biết thêm về 305, hãy xem phần Hướng dẫn sử dụng BokehCó bốn số liệu thống kê để hình dung trong 021 hai nhân hai. điểm, hỗ trợ, phục hồi và doanh thu. Khi tạo bốn hình và định cấu hình biểu đồ tương ứng của chúng, có rất nhiều phần dư thừa trong các thuộc tính. Vì vậy, để hợp lý hóa mã, có thể sử dụng vòng lặp 310 38Như bạn có thể thấy, các tham số duy nhất cần được điều chỉnh là 311 của hình và dữ liệu sẽ chỉ ra 312 trong 72. Các giá trị này dễ dàng được lưu trữ trong một 16 được lặp đi lặp lại để tạo các số liệu cho từng chỉ sốBạn cũng có thể xem triển khai của 305 trong cấu hình của glyph 72. Thuộc tính 317 được thông qua một 16 với trường trong 79 được ánh xạ và tên của 305 được tạo ở trênChế độ xem ban đầu sẽ chỉ hiển thị 10 trận đầu tiên trong mùa giải của 76ers, vì vậy cần có cách xoay theo chiều ngang để điều hướng qua phần còn lại của các trận đấu trong mùa giải. Do đó, việc định cấu hình thanh công cụ để có công cụ 065 cho phép xoay toàn bộ cốt truyện mà không phải lo lắng về việc vô tình làm lệch chế độ xem dọc theo trục tungBây giờ các số liệu đã được tạo, có thể thiết lập 021 bằng cách tham khảo các số liệu từ 16 được tạo ở trên 39Liên kết các trục của bốn ô cũng đơn giản như đặt 324 của mỗi hình bằng nhau 0Để thêm thanh tiêu đề vào trực quan hóa, bạn có thể thử làm điều này trên hình điểm, nhưng nó sẽ bị giới hạn trong không gian của hình đó. Do đó, một mẹo hay là sử dụng khả năng diễn giải HTML của Bokeh để chèn phần tử 325 chứa thông tin tiêu đề. Sau khi được tạo, chỉ cần kết hợp nó với 044 trong bố cục 019 1Đặt tất cả các mảnh lại với nhau dẫn đến kết quả sau Tương tự như vậy, bạn có thể dễ dàng thực hiện các lựa chọn được liên kết, trong đó một lựa chọn trên một biểu đồ sẽ được phản ánh trên các biểu đồ khác Để xem điều này hoạt động như thế nào, hình ảnh tiếp theo sẽ chứa hai biểu đồ phân tán. một màn hình hiển thị tỷ lệ mục tiêu hai điểm so với ba điểm của 76ers và màn hình còn lại hiển thị điểm của đội 76ers so với điểm của đối thủ trên cơ sở từng trận đấu Mục tiêu là có thể chọn các điểm dữ liệu trên biểu đồ phân tán bên trái và có thể nhanh chóng nhận ra liệu điểm dữ liệu tương ứng trên biểu đồ phân tán bên phải là thắng hay thua Khung dữ liệu cho hình ảnh này rất giống với khung dữ liệu từ ví dụ đầu tiên 2Đây là dữ liệu trông như thế nào >>> 3Mã để tạo trực quan hóa như sau 4Đây là một minh họa tuyệt vời về sức mạnh trong việc sử dụng một 79. Miễn là các trình kết xuất glyph (trong trường hợp này, glyph 270 cho tỷ lệ phần trăm và glyph 1330 cho thắng và thua) chia sẻ cùng một 79, thì các lựa chọn sẽ được liên kết theo mặc địnhĐây là giao diện của nó khi hoạt động, nơi bạn có thể thấy các lựa chọn được thực hiện trên một trong hai hình sẽ được phản ánh trên hình kia Bằng cách chọn một mẫu điểm dữ liệu ngẫu nhiên ở góc phần tư phía trên bên phải của biểu đồ phân tán bên trái, những điểm tương ứng với cả tỷ lệ phần trăm mục tiêu trường hai điểm và ba điểm cao, các điểm dữ liệu trên biểu đồ phân tán bên phải được tô sáng Tương tự, việc chọn các điểm dữ liệu trên biểu đồ phân tán bên phải tương ứng với tổn thất có xu hướng xa hơn về phía dưới bên trái, tỷ lệ bắn thấp hơn, trên biểu đồ phân tán bên trái Tất cả chi tiết về liên kết các ô có thể được tìm thấy tại Liên kết các ô trong Hướng dẫn sử dụng Bokeh Loại bỏ các quảng cáoLàm nổi bật dữ liệu bằng chú giảiĐiều đó đưa chúng ta đến ví dụ tương tác cuối cùng trong hướng dẫn này. truyền thuyết tương tác Trong phần này, bạn đã thấy việc triển khai chú thích dễ dàng như thế nào khi tạo cốt truyện của mình. Với chú thích tại chỗ, việc thêm tính tương tác chỉ là vấn đề chỉ định một 332. Sử dụng một dòng mã, bạn có thể nhanh chóng thêm khả năng vào dữ liệu 333 hoặc 334 bằng cách sử dụng chú giảiTrong ví dụ này, bạn sẽ thấy hai biểu đồ phân tán giống hệt nhau so sánh điểm từng trận và số lần bật lại của LeBron James và Kevin Durant. Sự khác biệt duy nhất là một người sẽ sử dụng 333 làm 332 của nó, trong khi người kia sử dụng 334Bước đầu tiên là định cấu hình đầu ra và thiết lập dữ liệu, tạo chế độ xem cho từng người chơi từ Khung dữ liệu 079 5Trước khi tạo hình, các tham số phổ biến trên hình, điểm đánh dấu và dữ liệu có thể được tổng hợp thành từ điển và sử dụng lại. Điều này không chỉ tiết kiệm dự phòng trong bước tiếp theo mà còn cung cấp một cách dễ dàng để điều chỉnh các tham số này sau này nếu cần 6Bây giờ các thuộc tính khác nhau đã được thiết lập, hai biểu đồ phân tán có thể được xây dựng theo cách ngắn gọn hơn nhiều 7Lưu ý rằng 339 có một tham số phụ gọi là 340. Tham số này kiểm soát độ mờ của các điểm đánh dấu khi 334 được sử dụng làm 332Cuối cùng, 332 cho mỗi hình được đặt và chúng được hiển thị theo cấu hình nằm ngang 8Khi đã có chú thích, tất cả những gì bạn phải làm là gán 333 hoặc 334 cho thuộc tính 332 của hình. Thao tác này sẽ tự động biến chú giải cơ bản của bạn thành chú giải tương tácCũng lưu ý rằng, cụ thể đối với ________ 1334, thuộc tính bổ sung của ________ 1340 được đặt trong ký tự 70 tương ứng cho LeBron James và Kevin Durant. Điều này chỉ ra hiệu ứng hình ảnh được thúc đẩy bởi tương tác huyền thoạiĐể biết thêm về mọi thứ tương tác trong Bokeh, Thêm tương tác trong Hướng dẫn sử dụng Bokeh là một nơi tuyệt vời để bắt đầu Tóm tắt và các bước tiếp theoXin chúc mừng. Bạn đã hoàn thành phần cuối của hướng dẫn này Bây giờ bạn sẽ có một bộ công cụ tuyệt vời để bắt đầu biến dữ liệu của mình thành hình ảnh trực quan tương tác đẹp mắt bằng Bokeh. Bạn có thể tải xuống các ví dụ và đoạn mã từ repo Real Python GitHub Bạn đã học cách
Để khám phá thêm về khả năng của Bokeh, Hướng dẫn sử dụng Bokeh chính thức là một nơi tuyệt vời để tìm hiểu một số chủ đề nâng cao hơn. Tôi cũng khuyên bạn nên xem Bokeh's Gallery để có vô số ví dụ và nguồn cảm hứng Đánh dấu là đã hoàn thành Xem ngay Hướng dẫn này có một khóa học video liên quan do nhóm Real Python tạo. Xem nó cùng với hướng dẫn bằng văn bản để hiểu sâu hơn. Trực quan hóa dữ liệu tương tác bằng Python với Bokeh 🐍 Thủ thuật Python 💌 Nhận một Thủ thuật Python ngắn và hấp dẫn được gửi đến hộp thư đến của bạn vài ngày một lần. Không có thư rác bao giờ. Hủy đăng ký bất cứ lúc nào. Được quản lý bởi nhóm Real Python Gửi cho tôi thủ thuật Python » Giới thiệu về Leon D'Angio Leon là nhà khoa học dữ liệu tại Apple, Pythonista tự học và là người đóng góp cho Real Python » Thông tin thêm về LeónMỗi hướng dẫn tại Real Python được tạo bởi một nhóm các nhà phát triển để nó đáp ứng các tiêu chuẩn chất lượng cao của chúng tôi. Các thành viên trong nhóm đã làm việc trong hướng dẫn này là Geir Arne Joanna Bậc thầy Kỹ năng Python trong thế giới thực Với quyền truy cập không giới hạn vào Python thực Tham gia với chúng tôi và có quyền truy cập vào hàng nghìn hướng dẫn, khóa học video thực hành và cộng đồng các Pythonistas chuyên gia Nâng cao kỹ năng Python của bạn » Bậc thầy Kỹ năng Python trong thế giới thực Tham gia với chúng tôi và có quyền truy cập vào hàng ngàn hướng dẫn, khóa học video thực hành và cộng đồng Pythonistas chuyên gia Nâng cao kỹ năng Python của bạn » Bạn nghĩ sao? Đánh giá bài viết này Tweet Chia sẻ Chia sẻ EmailBài học số 1 hoặc điều yêu thích mà bạn đã học được là gì? Mẹo bình luận. Những nhận xét hữu ích nhất là những nhận xét được viết với mục đích học hỏi hoặc giúp đỡ các sinh viên khác. và nhận câu trả lời cho các câu hỏi phổ biến trong cổng thông tin hỗ trợ của chúng tôi Làm cách nào để hiển thị đầu ra Python trên trang HTML?Để hiển thị tệp HTML dưới dạng đầu ra python, chúng tôi sẽ sử dụng thư viện codec . Thư viện này được sử dụng để mở các tệp có mã hóa nhất định. Nó nhận một mã hóa tham số làm cho nó khác với hàm open() tích hợp.
Làm cách nào để chạy PyScript trong HTML?Giới thiệu về PyScript. Chạy Python trong trình duyệt . Tạo chỉ mục. tệp html Tạo chính. tập tin py Liên kết chính. tệp py trong tệp HTML Mở chỉ mục. tập tin html trong trình duyệt Chúng tôi có thể gửi email bằng tập lệnh Python không?Python cung cấp ` thư viện để gửi email- “SMTP lib” . “smtplib” tạo một đối tượng phiên máy khách Giao thức chuyển thư đơn giản được sử dụng để gửi email đến bất kỳ id email hợp lệ nào trên internet. Số Cổng được sử dụng ở đây là '587'. |