python 圖表

介紹 (Introduction)

I have been thinking of trying out Streamlit for a while. So last weekend, I spent some time tinkering with it. If you have never heard of this tool before, it provides a very friendly way to create custom interactive Data web-apps for your Data Science and Machine Learning projects using Python. You can interact with the user to get inputs and display dynamic charts, tables, maps etc. Their official gallery might be a good place to start. It will give you a glimpse of what you can achieve with Streamlit. You would also find a long list of tweets from the Streamlit community going creative with the tool in their own unique ways. Do check them out for some inspiration. Streamlit can be downloaded using the pip install command (pip install streamlit).

我一直在考慮嘗試Streamlit一段時(shí)間。 因此，上周末，我花了一些時(shí)間進(jìn)行修改。 如果您以前從未聽(tīng)說(shuō)過(guò)此工具，那么它提供了一種非常友好的方法，可以使用Python為您的數(shù)據(jù)科學(xué)和機(jī)器學(xué)習(xí)項(xiàng)目創(chuàng)建自定義的交互式數(shù)據(jù)Web應(yīng)用程序。 您可以與用戶進(jìn)行交互以獲取輸入并顯示動(dòng)態(tài)圖表，表格，地圖等。他們的官方畫(huà)廊可能是一個(gè)不錯(cuò)的起點(diǎn)。 它將使您了解Streamlit可以實(shí)現(xiàn)的目標(biāo)。 您還將從Streamlit社區(qū)中找到一長(zhǎng)串推文，以自己的獨(dú)特方式來(lái)使用該工具。 請(qǐng)檢查一下它們是否有啟發(fā)。 可以使用pip install命令( pip install streamlit )下載Streamlit。

In this article, I have shared a sample animated bar chart built using Streamlit. Although, some of the information to achieve this is available in bits and pieces, I couldn’t find much information on animated charts in one place. I hope this will help somebody who is looking to add an animated chart in their Streamlit Dashboard.

在本文中，我分享了使用Streamlit構(gòu)建的示例動(dòng)畫(huà)條形圖。 盡管實(shí)現(xiàn)這一目標(biāo)的一些信息是零碎的，但我無(wú)法在一處找到有關(guān)動(dòng)畫(huà)圖表的大量信息。 我希望這會(huì)對(duì)希望在其Streamlit儀表板中添加動(dòng)畫(huà)圖表的人有所幫助。

數(shù)據(jù)集 (The Dataset)

Photo by Carlo Bazzo on Unsplash Carlo Bazzo在Unsplash上拍攝的照片

Let’s talk about the data a little bit. Tennis being my favorite sport, I decided to do build something around it (and also because I really really really miss Wimbledon 💔). Anyway, after scouting the internet for a while, I stumbled across something that I thought I could use. Roger Federer, Rafael Nadal, Novak Djokovic & Andy Murray were fondly referred as the ‘Big Four’ until 2017. Between them, they have dominated the sport from 2004 to 2017.

讓我們來(lái)談?wù)剶?shù)據(jù)。 網(wǎng)球是我最喜歡的運(yùn)動(dòng)，我決定圍繞它做一些事情(也是因?yàn)槲艺娴姆浅Ｏ肽顪夭紶柕蔷W(wǎng)球公開(kāi)賽)。 無(wú)論如何，在搜尋互聯(lián)網(wǎng)一段時(shí)間后，我偶然發(fā)現(xiàn)了一些我認(rèn)為可以使用的東西。 羅杰·費(fèi)德勒(Roger Federer)，拉斐爾·納達(dá)爾(Rafael Nadal)，諾瓦克·德約科維奇(Novak Djokovic)和安迪·穆雷(Andy Murray)一直被譽(yù)為“ 四大 ”，直到2017年。他們?cè)?004年至2017年期間一直主導(dǎo)這項(xiàng)運(yùn)動(dòng)。

The data set has weekly ATP ranking data which has the information like the player name, ranking points, player ranking, and date of ranking. In streamlit, you can also view your dataframe as a table. After some basic formatting my final dataframe looks like below.

該數(shù)據(jù)集具有每周ATP排名數(shù)據(jù)，該數(shù)據(jù)具有諸如球員姓名，排名得分，球員排名和排名日期之類的信息。 在流式處理中，您還可以將數(shù)據(jù)框查看為表格。 經(jīng)過(guò)一些基本的格式化后，我的最終數(shù)據(jù)幀如下所示。

Arindom BhattacharjeeArindom Bhattacharjee

圖表將顯示什么？ (What the chart will show?)

I wanted to build an animated bar chart that shows how the Big Four ranked against each other for this period of almost two decades. For the animation, I kept replacing the weekly data in the in chart after a certain time delay inside a for loop . This gave it an animated look and feel.

我想制作一個(gè)動(dòng)畫(huà)的條形圖，以顯示在過(guò)去的二十年中四大巨頭之間的排名。 對(duì)于動(dòng)畫(huà)，在for循環(huán)內(nèi)經(jīng)過(guò)一定時(shí)間延遲后，我一直替換圖表中的每周數(shù)據(jù)。 這賦予了它生動(dòng)的外觀。

For visualization purposes, initially I started with the good old Matplotlib library but I ran into some issues and decided to go forward with Altair, which is another visualization library you can use with python. In my experience, I found it to have a better look and feel than Matplotlib to use in my data app. Streamlit supports both of these libraries and a few others as well.

出于可視化的目的，最初我是從舊的M atplotlib庫(kù)開(kāi)始的，但是遇到了一些問(wèn)題，并決定繼續(xù)使用Altair ，后者是另一個(gè)可以與python一起使用的可視化庫(kù)。 根據(jù)我的經(jīng)驗(yàn)，我發(fā)現(xiàn)它在數(shù)據(jù)應(yīng)用程序中使用的效果比Matplotlib更好。 Streamlit支持這兩個(gè)庫(kù)以及其他一些庫(kù)。

用戶界面 (User Interface)

For the UI, I decided to give users the ability to select the range of year themselves and run the animation for the time period of their choice. After selecting the time range, once they press the button ‘Cue Chart’ the animations would begin. I have used the ‘Range Slider’ & ‘Button’ features to perform this.

對(duì)于用戶界面，我決定讓用戶自己選擇年份范圍并在所選時(shí)間段內(nèi)運(yùn)行動(dòng)畫(huà)。 選擇時(shí)間范圍后，一旦他們按下“ 提示圖表 ”按鈕，動(dòng)畫(huà)就會(huì)開(kāi)始。 我已經(jīng)使用了“ 范圍滑塊 ”和“ 按鈕 ”功能來(lái)執(zhí)行此操作。

Range Slider: The purpose of the range slider is to select a range of numbers. It can be created with this single line of code. The function returns a tuple with values selected by the user.

范圍滑塊 ： 范圍滑塊的目的是選擇一個(gè)數(shù)字范圍。 可以使用這一行代碼創(chuàng)建它。 該函數(shù)返回具有用戶選擇的值的元組。

x = st.slider('Select the year range',1996, 2017, (1996, 2017))# 'Select the year range' -> Text to display
# 1996 -> The lower bound
# 2017 -> The higher bound
# (1996, 2017) -> Default selected rangeArindom BhattacharjeeArindom Bhattacharjee制作的滑塊圖像

Button: I added a button because I didn’t want the animation to start on its own after the user selects the time range. The button can be created as shown below. I run the animation code inside this ‘if’ statement. The st.button() function returns a boolean true when user performs a click event.

按鈕 ：我添加了一個(gè)按鈕，因?yàn)槲也幌Ｍ麆?dòng)畫(huà)在用戶選擇時(shí)間范圍后自行開(kāi)始。 可以如下所示創(chuàng)建按鈕。 我在“ if ”語(yǔ)句中運(yùn)行動(dòng)畫(huà)代碼。 當(dāng)用戶執(zhí)行click事件時(shí)，st.button()函數(shù)將返回布爾值true。

if(st.button('Cue Chart')):
#run the animation. Value is 'True' when user clicks on it.Arindom BhattacharjeeArindom Bhattacharjee

圖表動(dòng)畫(huà) (Chart Animation)

I used the Altair python library for creating the bar chart. I created a function (plot_bar_animated_altair) that takes two inputs - the weekly data for the Big Four players and week name. It then plots a bar chart. My final formatted dataframe looks like below which will be used to plot the charts. The streamlit function st.dataframe(df) displays a dataframe object in the following fashion.

我使用Altair python庫(kù)創(chuàng)建條形圖。 我創(chuàng)建了一個(gè)函數(shù)( plot_bar_animated_altair )，該函數(shù)需要兩個(gè)輸入-四大玩家的每周數(shù)據(jù)和周名稱。 然后繪制條形圖。 我最終格式化的數(shù)據(jù)框如下所示，將用于繪制圖表。 簡(jiǎn)化函數(shù)st.dataframe(df)以以下方式顯示數(shù)據(jù)框對(duì)象。

Arindom BhattacharjeeArindom Bhattacharjee import streamlit as st
import pandas as pd
import time
import altair as alt
from altair import Chart, X, Y, Axis, SortField, OpacityValue#---------------------------------------------------------------#
# Creating an empty chart in the beginning when the page loads
#---------------------------------------------------------------#
bars = alt.Chart(data).mark_bar().encode(
x=X('1:Q',axis=Axis(title='ATP Ranking Points'),
y=Y('0:Q',axis=Axis(title='The Big Four'))
).properties(
width=650,
height=400
)# This global variable 'bar_plot' will be used later onbar_plot = st.altair_chart(bars)
def plot_bar_animated_altair(df,week):
bars = alt.Chart(df, title="Ranking as of week :"+week).encode(
x=X('ranking_points:Q',axis=Axis(title='ATP Ranking
Points'),
y=Y('full_name:N',axis=Axis(title='The Big Four'), sort='-x'),
color=alt.Color('full_name:N'),
.properties(
width=650,
height=400
)if st.button('Cue Chart'):
for week in week_list: # weekly_df -> this dataframe (sample shown above) contains
# data for a particular week which is passed to
# the 'plot_bar_animated_altair' function. # week -> Current week title, eg:- 2016-06-10

bars = plot_bar_animated_altair(weekly_df,week)
time.sleep(0.01)

bar_plot.altair_chart(bars)

st.balloons() # Displays some celebratory balloons for glamour!

演示版 (Demo)

In the demonstration below, I have selected the entire range from 1996 to 2017 and in the beginning you will notice only one bar here (for Roger Federer) because the other three had not turned professional yet. As the weeks pass, you can see the overall ATP Ranking points change and the other players enter in the subsequent years. Their current ranking is displayed as a label against the bars. The bars are sorted so that the higher ranked player always appears on the top.

在下面的演示中，我選擇了1996年至2017年的整個(gè)范圍，一開(kāi)始您會(huì)注意到這里只有一個(gè)標(biāo)桿(對(duì)Roger Federer而言)，因?yàn)槠渌齻€(gè)標(biāo)桿還沒(méi)有變成專業(yè)人士。 隨著星期的過(guò)去，您可以看到ATP排名的整體得分發(fā)生了變化，其他球員也在隨后的幾年中進(jìn)入。 他們當(dāng)前的排名顯示為條形標(biāo)簽。 條形圖經(jīng)過(guò)排序，以便排名較高的玩家始終出現(xiàn)在頂部。

Arindom BhattacharjeeArindom Bhattacharjee

結(jié)論 (Conclusion)

In conclusion, by the end of this side project I was quite impressed with the simplicity of Streamlit. To achieve this using any other tool would have definitely taken me a lot more time. I hope this article helps save you some time if you are looking to create an animated chart.

最后，在本項(xiàng)目結(jié)束時(shí)， Streamlit的簡(jiǎn)單性給我留下了深刻的印象。 要使用其他任何工具來(lái)實(shí)現(xiàn)此目標(biāo)，肯定會(huì)花費(fèi)我更多時(shí)間。 如果希望創(chuàng)建動(dòng)畫(huà)圖表，希望本文能為您節(jié)省一些時(shí)間。

Given the growing support that it is receiving lately, I am sure they will add a ton of other useful features. Thank you for reading and wish you a great week ahead!

鑒于最近它得到越來(lái)越多的支持，我相信他們會(huì)添加很多其他有用的功能。 感謝您的閱讀，并祝您度過(guò)愉快的一周！

翻譯自: https://towardsdatascience.com/add-animated-charts-to-your-dashboards-with-streamlit-python-f41863f1ef7c

python 圖表

總結(jié)

以上是生活随笔為你收集整理的python 图表_使用Streamlit-Python将动画图表添加到仪表板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。