Cốt truyện tương tác Python trên trang web

Trực quan hóa dữ liệu là một trong những bước quan trọng nhất trong các dự án khoa học dữ liệu và phân tích dữ liệu, vì nó hữu ích cho cả việc khám phá và hiểu dữ liệu cũng như để chia sẻ kết quả một cách hiệu quả

Trong Python, các thư viện phổ biến nhất để tạo trực quan hóa là Matplotlib và Seaborn, nhưng có rất nhiều công cụ khác nhau để tạo trực quan hóa

Trong hướng dẫn này, chúng ta sẽ khám phá các công cụ HoloViz và chính xác nhất là chúng ta sẽ xem xét Panel và hvPlot, đây là các thư viện nguồn mở có thể được sử dụng để tạo biểu đồ và bảng điều khiển tương tác. Chúng ta cũng sẽ thấy việc triển khai và chia sẻ trang tổng quan của mình bằng Jupyter Notebook dễ dàng như thế nào

Vì học rất thú vị nên trong dự án này, chúng tôi sẽ sử dụng dữ liệu về Pokémon. Cụ thể, chúng tôi sẽ sử dụng dữ liệu có sẵn trên Kaggle và về các Pokémon khác nhau, cũng như dữ liệu về doanh số trò chơi Pokémon

Ghi chú. tất cả các hình ảnh là của tác giả trừ khi có ghi chú khác

Tổng quan

Trong dự án này, chúng tôi sẽ

• Tạo một cốt truyện tương tác đơn giản bằng hvPlot và Pandas
• Tạo các trực quan hóa nâng cao hơn bằng cách sử dụng Bảng điều khiển để tạo các tiện ích để lọc dữ liệu và hvPlot để trực quan hóa dữ liệu này
• Tạo bảng điều khiển hiển thị dữ liệu dạng bảng, thông tin về dự án cũng như các biểu đồ tương tác khác nhau
• Xem cách triển khai bảng điều khiển trên Heroku để chia sẻ dự án của chúng tôi

Bạn có thể truy cập mã đầy đủ trên GitHub và khám phá bảng điều khiển cuối cùng cũng như tương tác với các hình ảnh trực quan trên Heroku

Trực quan hóa nhanh với Pandas và hvPlot

Nếu bạn đang sử dụng Pandas, bạn có thể tạo các ô bằng cách sử dụng pandas.DataFrame.plot, theo mặc định sử dụng phụ trợ Matplotlib

Ví dụ: chúng ta có thể tạo biểu đồ dòng sau để trực quan hóa Doanh số trò chơi Pokémon theo thời gian

Bằng cách cài đặt hvPlot, bạn có thể tạo các biểu đồ gấu trúc tương tác bằng cách thay đổi chương trình phụ trợ mặc định. pd.options.plotting.backend = 'holoviews'

Sau đó, bằng cách áp dụng mã giống như trước đây, chúng tôi có được

Như đã thấy ở trên, ở phía bên phải của hình ảnh, với cốt truyện mới này, chúng tôi có một danh sách các cách khác nhau để tương tác với các ô của chúng tôi. Chúng tôi có thể phóng to đến một vị trí nhất định, di chuyển đến một khu vực cụ thể hoặc chỉ cần di chuột vào một điểm dữ liệu để có thêm thông tin

Hơn nữa, sử dụng logic hvPlot, chúng ta có thể tạo và kết hợp các ô khác nhau bằng cách thêm * vào giữa chúng. Chúng tôi cũng có thể thêm thông tin không được hiển thị bằng cách sử dụng đối số hover_cols

Bằng cách chỉ sử dụng gấu trúc và hvPlot, chúng tôi đã tạo trên một vài dòng mã một hình ảnh trực quan tương tác

Đường ống dữ liệu và Widget

Bây giờ chúng ta có thể xem cách kết hợp Bảng điều khiển để tạo các biểu đồ nâng cao hơn

Để tạo biểu đồ nơi chúng tôi có thể lọc dữ liệu thành một tập hợp con cụ thể, chúng tôi có thể sử dụng tiện ích Bảng điều khiển. Có nhiều tiện ích khác nhau để khám phá như hộp kiểm, thanh trượt và nhập văn bản

Tại đây, chúng tôi sẽ lọc dữ liệu của mình bằng tiện ích 'Chọn', sau đó để giữ cho dữ liệu của chúng tôi được đồng bộ hóa với lựa chọn 'loại' hiện tại của chúng tôi, chúng tôi sẽ tạo một đường dẫn dữ liệu

Điều này dẫn đến bộ chọn sau

Bây giờ, bằng cách sử dụng 'data_pipeline' này làm dữ liệu của chúng tôi để tạo các ô mới, chúng tôi sẽ có thể lọc các ô của mình theo một loại Pokémon cụ thể

Ví dụ: chúng ta có thể tạo biểu đồ thanh để hiển thị điểm yếu của một loại cụ thể

Ở đây, chúng tôi đã tạo một biểu đồ thanh hiển thị thiệt hại trung bình đối với từng loại cụ thể. Sau đó, chúng tôi có thể chọn bất kỳ loại nào với tiện ích của mình, để chỉ hiển thị điểm yếu của loại này

Như bạn có thể thấy, chúng ta có thể sử dụng các bản đồ màu của Matplotlib cũng như chọn một cột cụ thể để áp dụng dải màu của chúng ta. Ví dụ: ở đây bằng cách chọn áp dụng độ dốc của chúng tôi đối với 'thiệt hại', chúng tôi có thể thấy rõ màu đỏ các loại mà loại được chọn dễ bị tổn thương nhất

Tương tự, chúng ta có thể tạo các loại biểu đồ khác, chẳng hạn như biểu đồ phân tán biểu thị mối quan hệ chiều cao và cân nặng của các loại khác nhau

Ở đây chúng ta có thể thấy mối quan hệ giữa cân nặng và chiều cao và sự khác biệt như thế nào đối với các loại khác nhau. Như trước đây, chúng ta vẫn có thể di chuột để xem thêm chi tiết, cũng như thu phóng đến một khu vực cụ thể

Cuối cùng, để tạo khung dữ liệu tương tác mà sau này chúng tôi có thể thêm vào trang tổng quan của mình, chúng tôi áp dụng cấu trúc tương tự như trước đây

Tạo trang tổng quan

Cuối cùng, chúng ta có thể tạo một bảng điều khiển kết hợp các loại biểu đồ khác nhau

Để làm điều này, chúng ta có thể sử dụng Mẫu bảng điều khiển. Có các mẫu sẵn sàng sử dụng khác nhau mà chúng tôi có thể tùy chỉnh nhưng chúng tôi cũng có thể tạo mẫu của riêng mình

Bất kể lựa chọn của chúng tôi là gì, tất cả các mẫu này đều cho phép chúng tôi dễ dàng phân biệt giữa bốn khu vực chính trên trang của chúng tôi

• tiêu đề,
• thanh bên,
• khu vực chính và
• khu vực phương thức (cửa sổ bật lên)

Sau đó, bên trong các khu vực này, chúng tôi có thể thêm văn bản bằng định dạng Markdown, chúng tôi có thể phân chia thêm các phần của mình bằng Hàng và Cột và tùy thuộc vào mẫu chúng tôi đã chọn, chúng tôi có các tùy chọn khác nhau để tùy chỉnh bố cục của mình

Bên trong các hàng và cột này, chúng ta có thể thêm các ô trước đây của mình. Ở đây, chúng tôi sẽ sử dụng FastListTemplate và chúng tôi sẽ chỉ định làm chủ đề mặc định là ‘DarkTheme’. Sau đó, chúng tôi thêm tiêu đề, một thanh bên với một số văn bản và hình ảnh, phần chính với các ô của chúng tôi và cuối cùng, chúng tôi chỉ định một số tham số để điều chỉnh màu sắc

Phương pháp .servable() phục vụ bảng điều khiển để nó có thể được triển khai. Lưu ý rằng chúng tôi cũng có thể xem cục bộ trang tổng quan của bạn trên một cửa sổ khác bằng cách sử dụng _______________

Kết quả cuối cùng trông như thế này

Triển khai bảng điều khiển của chúng tôi trên Heroku

Hầu hết các công việc đã được thực hiện bây giờ

Nếu bây giờ bạn muốn chia sẻ các dự án trong tương lai của mình, Panel có hướng dẫn về Triển khai máy chủ. Trong hướng dẫn này, bạn có thể xem cách triển khai lên Heroku, nơi có bậc triển khai miễn phí

Sau khi tạo hoặc đăng nhập vào tài khoản Heroku của bạn, bạn sẽ cần tạo một ứng dụng mới và sau đó để triển khai, bạn sẽ cần

• Jupyter Notebook chứa bảng điều khiển hoặc biểu đồ của bạn (sử dụng .servable() trên những gì bạn muốn triển khai) cũng như dữ liệu cơ bản được sử dụng
• Một Procfile để chỉ định cho Heroku những lệnh cần thực thi
• một yêu cầu. txt với các thư viện bạn đã sử dụng cũng như nbconvert để chuyển đổi mã Jupyter Notebook
• một runtitme. txt bằng phiên bản Python bạn đã sử dụng

Và đó là tất cả

Phần kết luận

Trực quan hóa dữ liệu là một phần thực sự quan trọng của quy trình phân tích dữ liệu và khoa học dữ liệu. Do đó, điều cần thiết đối với một người làm việc với dữ liệu là có thể tạo ra các hình ảnh trực quan có tác động

Trong bài viết này, chúng tôi đã xem cách tạo biểu đồ và bảng điều khiển tương tác bằng Công cụ HoloViz và chính xác hơn là chúng tôi đã xem cách

• Sử dụng hvPlot làm phụ trợ cho biểu đồ gấu trúc
• Tạo tiện ích con và đường dẫn dữ liệu để lọc và tương tác thêm với biểu đồ của chúng tôi
• Tạo một bảng điều khiển kết hợp các lô của chúng tôi cũng như thêm một số thông tin hữu ích
• Hãy xem cách triển khai bảng điều khiển của chúng tôi trên Heroku

Dữ liệu có sẵn trên Kaggle được cung cấp theo CC-BY-SA 4. 0 Giấy phép. Dữ liệu từ Wikipedia có sẵn theo CC BY-SA 3. 0 Giấy phép

Trở thành thành viên và đọc mọi câu chuyện trên Medium. Phí thành viên của bạn hỗ trợ trực tiếp cho tôi và các nhà văn khác mà bạn đọc. Bạn cũng sẽ có toàn quyền truy cập vào mọi câu chuyện trên Phương tiện

Bạn có thể tạo một cốt truyện tương tác bằng Python không?

Cái nào tạo cốt truyện tương tác có thể được nhúng trong trình duyệt Web?

Làm cách nào để nhúng trực quan hóa Python tương tác trên trang web của bạn bằng Python và matplotlib?

Những thư viện Python nào có thể được sử dụng để vẽ biểu đồ tương tác thời gian thực?