Trong bài viết này, tôi sẽ hướng dẫn nhanh về cách tạo ứng dụng web dữ liệu của riêng bạn bằng Streamlit và Altair — hai thư viện cung cấp khung nhanh chóng và dễ dàng để tạo bảng điều khiển tương tác và công cụ khám phá dữ liệu
Chúng tôi sẽ sử dụng dữ liệu từ Thế vận hội Tokyo 2020 để tìm ra quốc gia nào giành được nhiều huy chương nhất và so sánh mức độ đóng góp của các vận động viên nam và nữ vào thành công của đội họ. Bộ dữ liệu tôi đang sử dụng cho hướng dẫn có sẵn trên Kaggle
Nhưng trước khi chúng tôi bắt đầu, đôi lời về mỗi trong hai thư viện
1. Streamlit là một thư viện mã nguồn mở giúp biến mã Python của bạn thành các ứng dụng web tùy chỉnh. Dễ sử dụng và chia sẻ, nó hoạt động với hầu hết các gói phổ biến cho Khoa học dữ liệu và Máy học
Streamlit trở nên đơn giản. py thành ứng dụng web sẵn sàng sử dụng mà bạn có thể sử dụng cục bộ hoặc triển khai tới máy chủ để chia sẻ với người khác. Thậm chí còn có một dịch vụ miễn phí để lưu trữ các ứng dụng web do Streamlit cung cấp [hãy xem tại đây]
Ví dụ về các ứng dụng Streamlit từ https. // luồng sáng. io/
2. Altair là một thư viện trực quan cho Python, dựa trên Vega và Vega-Lite. Nó kết hợp ngữ pháp đồ họa đơn giản và thân thiện với người dùng với các khả năng mạnh mẽ để tạo các biểu đồ tương tác phức tạp thuộc hầu hết mọi loại
Theo kinh nghiệm cá nhân của tôi, so với pyplot, thư viện cung cấp cú pháp rõ ràng hơn và dễ dàng hơn nhiều để làm việc với dữ liệu trực tiếp từ cơ sở dữ liệu mà không cần chuyển đổi bổ sung. Và đó là lý do tại sao chúng ta sẽ sử dụng nó trong hướng dẫn này
Ví dụ về trực quan hóa Alltair từ https. // altair-viz. github. io/Bước 1. Nghiên cứu dữ liệu và phác thảo
Dữ liệu tôi tìm thấy trên Kaggle có hai loại bộ dữ liệu. Cái đầu tiên chứa tổng số huy chương của mỗi đội tuyển quốc gia được chia theo loại [Vàng, Bạc và Đồng], cái thứ hai ít nhiều có cùng dữ liệu, nhưng có thêm một thứ nguyên - giới tính của vận động viên [không bao gồm một số môn trong đó . Trong nguồn ban đầu, các vận động viên nam và nữ được liệt kê trong hai tệp riêng biệt, nhưng đối với trường hợp sử dụng của chúng tôi, tôi đã hợp nhất hai thành một tệp có sẵn với tất cả các mã khác trên Github
Vì vậy, chúng tôi có dữ liệu, bây giờ chúng tôi cần nghĩ xem bảng điều khiển sẽ trông như thế nào. Đây là phần mà chúng ta có thể giải phóng nghệ sĩ bên trong, nhà thiết kế hình ảnh, chuyên gia UI hoặc UX hoặc bất kỳ ai đang ẩn náu dưới bề mặt nhà khoa học dữ liệu khắc nghiệt này
Đang phác thảo. Hình ảnh của tác giả
Có hai loại thông tin khác nhau, vì vậy sẽ rất tuyệt nếu có các biểu đồ riêng cho từng loại thông tin. Có dữ liệu theo quốc gia gần như kêu gọi sử dụng bản đồ làm hình thức trực quan hóa và dữ liệu được cung cấp theo giới tính là cơ hội tốt để tạo biểu đồ khám phá cho người dùng chơi.
Sau một số bản phác thảo, đây là cách tôi muốn xem kết quả cuối cùng
- Bản đồ tương tác hiển thị tổng số huy chương theo quốc gia, với bộ lọc cho các loại huy chương [Vàng, Bạc, Đồng]. Tôi muốn bản đồ được mã hóa màu tùy thuộc vào số lượng huy chương của mỗi quốc gia và cũng có chú giải công cụ cung cấp thông tin bổ sung khi di chuột
- Một biểu đồ phân tán với số lượng huy chương mà các vận động viên nam và nữ giành được dưới dạng trục và màu sắc khác nhau cho từng loại huy chương. Ngoài ra, sẽ rất thú vị nếu cung cấp cho người dùng khả năng thêm nhiều quốc gia hơn [hoặc xóa chúng] trên biểu đồ
Hãy xem cách tạo các biểu đồ này bằng Altair
Bước 2. Sử dụng Altair để tạo trực quan hóaĐể làm cho mọi thứ dễ dàng hơn, chúng tôi sẽ bắt đầu với số liệu thống kê theo giới tính và để lại bản đồ sau. Sau đây ta sẽ làm việc với số huy chương giành được của các vận động viên nữ và nam dưới dạng trục và màu sắc khác nhau của từng loại huy chương
Hãy đọc tệp huy chương_count_by_gender. csv và xem tập dữ liệu trước
Hình ảnh của tác giả
Có một cột cho mỗi đội tuyển quốc gia với một loại huy chương, tên quốc gia và số vận động viên của mỗi giới đã giành được huy chương
Sẽ thật tuyệt nếu giữ càng nhiều thông tin này càng tốt trên biểu đồ. Vì vậy, chúng tôi sẽ tạo một biểu đồ phân tán với trục X và Y đại diện cho các vận động viên nam và nữ. Màu sắc trên biểu đồ này sẽ đại diện cho các loại huy chương khác nhau và chúng tôi sẽ thêm các chú giải công cụ để người dùng có thể biết đó là quốc gia nào cũng như các thông tin hữu ích khác
Vì vậy, chúng tôi bắt đầu vẽ biểu đồ phân tán với Count_male là trục X và Count_woman là trục Y. chức năng thay thế. Chart[] lấy tập dữ liệu làm đối số và tạo biểu đồ Altair cơ bản. Bạn có thể chọn giữa các phương pháp khác nhau tùy thuộc vào loại biểu đồ bạn muốn hiển thị. mark_line[], mark_bar[], v.v. Đối với biểu đồ phân tán, chúng tôi chỉ định loại biểu đồ bằng cách sử dụng. dấu_circle[]
Phương pháp. encode[] phụ trách chính xác cốt truyện sẽ như thế nào. dữ liệu nào chuyển đến Trục và màu sắc, nếu bạn muốn chia biểu đồ thành các hàng hoặc cột riêng biệt. Hiện tại, chúng tôi chỉ xác định X và Y bằng cách sử dụng alt. X[] và thay thế. Y[] với tên cột làm đối số [tên cột trong tập dữ liệu cần phải là chuỗi]
Đoạn mã trên tạo biểu đồ này
Hình ảnh của tác giả
Mỗi quốc gia trong tập dữ liệu có 3 hàng [một hàng cho mỗi loại huy chương] và hiện tại không thể xem mỗi dấu chấm đại diện cho loại nào, vì vậy hãy mã màu cho quốc gia đó. Để đánh dấu các huy chương khác nhau bằng các màu khác nhau, chúng ta cần thêm tham số “màu” vào. encode[] sẽ chỉ định màu nào sẽ hiển thị. Tham số được xác định bởi alt. Color[] và lấy một tên cột [trong trường hợp này là 'Loại huy chương'] từ tập dữ liệu và chỉ định màu trên biểu đồ cho phù hợp
Biểu đồ sẽ dễ đọc hơn nhiều nếu nó sử dụng các màu có liên quan trực quan đến huy chương. cam cho Vàng, xám cho Bạc và nâu cho Đồng. Để làm được điều đó, chúng ta sẽ cần thêm một tham số nữa scale=alt. Tỷ lệ [] với miền được chỉ định [các tùy chọn có thể có cho các phần tử được tô màu và thứ tự của chúng] và phạm vi [màu cho từng phần tử tương ứng trong miền]
Hình ảnh của tác giả
tốt hơn nhiều bây giờ. Điều duy nhất còn thiếu. chúng tôi không biết quốc gia nào nằm trên mỗi vị trí, vì vậy hãy thêm nó làm chú giải công cụ tương tác cho người dùng bằng tham số chú giải công cụ
Hình ảnh của tác giả
Đây có vẻ là một biểu đồ đẹp, nhưng vẫn còn thiếu một thứ. Tôi muốn có một đường chéo chia biểu đồ thành hai phần [có nhiều huy chương nam và nữ hơn]. Để làm như vậy, chúng tôi sẽ cần thêm một đối tượng Altair nữa vào mã và đặt tên cho cả hai đối tượng. biểu đồ phân tán và biểu đồ mới. Đối tượng mới sẽ là một dòng, vì vậy chúng tôi sử dụng phương thức mark_line[] để hiển thị và chỉ định màu sắc, kiểu dáng [đường gạch ngang trong trường hợp này] và độ mờ bên trong phương thức
Hình ảnh của tác giả
Đây ít nhiều là mã cuối cùng, điều duy nhất còn lại là thêm khả năng lọc các quốc gia để hiển thị và gói mọi thứ vào một chức năng, vì vậy chúng tôi có thể dễ dàng gọi nó khi cần vẽ biểu đồ cho một số quốc gia nhất định. Hãy kết hợp mọi thứ lại với nhau trong hàm huy chương_by_gender[]. Hàm chỉ có một tham số - quốc gia - được sử dụng để lọc khung dữ liệu huy chương_count_by_gender bằng cách sử dụng. lộc[]. Ngoài ra, vì chúng tôi có ít dấu chấm hơn trên cốt truyện, tôi sẽ tăng kích thước của chúng từ 60 lên 300 bằng cách sử dụng. mark_circle[size=300] nên nhìn đẹp hơn
Đây là kết quả trông như thế nào, ví dụ, đối với đội Hoa Kỳ. Chúng tôi thấy rằng đối với cả ba loại huy chương, các vận động viên nữ đều dẫn trước các đồng nghiệp nam của họ
Chúng tôi có thể thêm nhiều quốc gia hơn vào chức năng đầu vào để nhận kết quả cho nhiều đội tuyển quốc gia. Chẳng hạn, chúng ta có thể thêm Trung Quốc và Nhật Bản như sau
Hình ảnh của tác giả
Bây giờ khi biểu đồ phân tán đã sẵn sàng để sử dụng, hãy truy cập vào bản đồ. Chúng tôi có một bộ dữ liệu có tên olympic_medal_count. csv, có mã cho mọi quốc gia trong danh sách. Nhưng để sử dụng nó trên bản đồ Altair, chúng tôi cũng cần phải có mã số ISO 3166–1 cho từng quốc gia. Chúng tôi có dữ liệu này trong một tệp khác [ country_codes. csv], vì vậy bước đầu tiên là hợp nhất cả hai bộ dữ liệu
Kết quả trông như sau
Hình ảnh của tác giả
Từ đây, chúng ta có thể tiếp tục và tạo bản đồ bằng Altair. Như trước đây, chúng tôi sử dụng alt. Chart[] để tạo biểu đồ, nhưng bây giờ với. phương thức mark_geoshape[] và nguồn dữ liệu mới được tạo từ dữ liệu vega_datasets. thế giới_110m. url sử dụng phương pháp của Altair alt. topo_feature[dữ liệu. thế giới_110m. url, “quốc gia”]. Bằng cách đó, chúng tôi thêm một bản đồ với các quốc gia, nhưng nó chưa có bất kỳ giá trị nào được đính kèm
Sau khi thay thế. Chart[] có một. encode[] với các tham số cho màu sắc và chú giải công cụ. Cả màu sắc và chú giải công cụ đều sử dụng dữ liệu từ tập dữ liệu olympic_medal_map mà chúng tôi vẫn cần tham gia. Để làm được như vậy, sau. encode[] có một phương thức khác —. transform_lookup[] — tìm kiếm id quốc gia phù hợp trong olympic_medal_map và thêm các giá trị từ các cột “Đội/NOC” và “Tổng số" vào nền bản đồ
Sau đó, chúng ta có thể thêm một số phương thức khác để kiểm soát biểu đồ trông như thế nào. . configure_view[] cho khung biểu đồ [chúng tôi đặt thành 0],. properties[] cho kích thước hình ảnh và. project[] để xác định bản đồ sẽ trông như thế nào
Đây là cách nó trông giống như trong kịch bản
Đoạn mã trên sẽ tạo ra bức ảnh đẹp này với chú giải công cụ xuất hiện khi chuột di chuột qua một quốc gia
Hình ảnh của tác giả
Là một tính năng bổ sung, tôi muốn bản đồ thay đổi tùy thuộc vào loại huy chương [Tổng, Vàng, Bạc hoặc Đồng], vì vậy chúng tôi tạo một hàm gọi là draw_map[] với loại huy chương làm tham số. Tham số này sẽ xác định cột sẽ được hiển thị cũng như chủ đề màu, vì vậy đối với huy chương Vàng, bản đồ sẽ có độ cam, trong khi đối với Bạc - độ xanh lam
Đó là cách nó sẽ trông như thế nào trong một chức năng
Bây giờ cả hai biểu đồ đã sẵn sàng, đã đến lúc kết hợp mọi thứ thành một ứng dụng Streamlit đẹp mắt
Bước 3. Biến đồ thị Altair thành ứng dụng web với StreamlitChúng tôi có mã để hiển thị tất cả các biểu đồ trong Altair và bây giờ chỉ cần gói mọi thứ vào các lệnh hợp lý để biến nó thành một ứng dụng web
Chúng tôi muốn thêm hai chế độ xem vào ứng dụng streamlit của mình. tổng số huy chương theo quốc gia [bản đồ] và thống kê theo giới tính [biểu đồ phân tán]
Để làm như vậy, chúng ta sẽ cần tạo một tập lệnh Python. py và thêm cả hai chức năng draw_map[] và huy chương_by_gender[] cùng với mã để đọc bộ dữ liệu. Khi điều này được thực hiện, chúng ta chỉ cần thêm một vài dòng mã bằng cách sử dụng st. write[] để hiển thị biểu đồ Alrair trên trang ứng dụng Streamlit
Bây giờ chúng tôi lưu tập lệnh trong một tệp có tên olympic_medal_tokyo2020. py và chạy lệnh sau trong Terminal
giải chạy truyền thống olympic_medal_tokyo2020. py
Streamlit lo mọi thứ và chúng tôi có bảng điều khiển tương tác này trên localhost
Hình ảnh của tác giả
Đây đã là một bảng điều khiển, nhưng nó không cho phép chúng tôi chọn quốc gia hoặc chọn các loại huy chương khác nhau. Đối với điều này, chúng tôi sẽ cần thêm các tiện ích tương tác
Hàm draw_map[] lấy một loại huy chương làm tham số và mỗi lần chỉ có thể sử dụng một huy chương, vì vậy sẽ hợp lý khi sử dụng st. selectbox[] để chọn từ bốn loại khác nhau [Tổng, Vàng, Bạc hoặc Đồng]
Bây giờ người dùng sẽ có thể chọn từ các tùy chọn và bản đồ được hiển thị sẽ thay đổi tùy theo lựa chọn
Hình ảnh của tác giả
Đối với số liệu thống kê về giới tính, chúng tôi muốn cho phép người dùng chọn đội tuyển quốc gia nào sẽ hiển thị. Đây là câu trắc nghiệm nên chúng ta có thể sử dụng st. nhiều lựa chọn[]. Chúng tôi cũng có thể đặt giá trị mặc định cho bộ chọn, vì vậy ba quốc gia sẽ được hiển thị theo mặc định. Nhật Bản vì đây là nước đăng cai Thế vận hội, Trung Hoa Dân Quốc [hay còn gọi là Nga] vì đó là quê hương thân yêu của tôi và Thụy Điển vì tôi đang ngồi viết mã này một cách thoải mái trong căn hộ của mình ở Stockholm. . ]
Hình ảnh của tác giả
Bây giờ chúng tôi có mọi thứ được hiển thị trên cùng một màn hình, nhưng sẽ rất tuyệt nếu cung cấp cho người dùng tùy chọn để chọn bản đồ hoặc biểu đồ phân tán. Vì vậy, hãy thêm một công tắc trong menu bên cho công tắc đó bằng cách sử dụng st. thanh bên. radio[] và hiển thị một hoặc một biểu đồ khác tùy thuộc vào sự lựa chọn. Ngoài ra, chúng tôi sẽ hiển thị tất cả các giá trị theo quốc gia dưới dạng bảng dữ liệu dưới mỗi biểu đồ với st. bàn[]
Kết quả là, chúng tôi sẽ nhận được một biểu đồ đẹp với một lựa chọn trong thanh bên bên trái và các bộ lọc trên trang chính
Hình ảnh của tác giả
Sắp xong
Điều cuối cùng là thêm một số giải thích thử nghiệm trên trang bằng st. viết [], st. tiêu đề[] và st. image[] cho biểu tượng Olympic
Đó là kết quả cuối cùng sẽ như thế nào
Hình ảnh của tác giảVà đây là mã đầy đủ
Bước 4. Chia sẻ trang tổng quan StreamlitBây giờ khi bạn đã có ứng dụng của mình, bạn có thể muốn cung cấp ứng dụng đó cho người khác, hay còn gọi là triển khai ứng dụng ở đâu đó. Có một số tùy chọn mà tôi biết [nhưng nếu bạn biết những tùy chọn khác, vui lòng để lại nhận xét. ]]