datatable使用_使用Streamlit从简单的Python脚本创建交互式WebApp

如果有人告诉您可以使用150-200行代码创建交互式Web应用程序,该怎么办? 有趣的权利。 Streamlit为您提供了使用简单的python脚本和一些streamlit调用来创建漂亮的Web应用程序的相同机会。

e43695314f4ef73533ff6da0c563b075.png

Streamlit是一个开放源代码框架,用于以最快的方式创建数据科学和机器学习应用程序以进行数据探索。 我最喜欢streamlit的地方是它为您提供了实时编码体验。 您可以启动流式应用程序,并且每次保存时,您都会看到代码同时反映在浏览器中。 整齐吧!

2e8335dc26f41a02c5c602fb760674d1.gif

在这篇文章中,我们将为印度的Covid-19 Impact Analysis构建一个Streamlit Web应用程序。 我已经创建了完整的网站,您可以在这里浏览它-www.corona-updates.in。 我们不会深入研究Pandas,但是本教程将更侧重于Streamlit。 我们将研究一些Pandas库函数,但将深入探讨Streamlit。 因此,让我们开始吧!

要求:

· Streamlit

· Pandas

· plotly.express

使用pip安装streamlit:

pip install streamlit

安装完成后,您可以通过运行示例应用程序对其进行测试。

streamlit hello

您可以使用以下命令运行名为app.py的流式Web应用程序:

streamlit run app.py

精通Streamlit之后,现在就创建我们的网络应用。 创建一个python文件app.py,然后导入您需要创建的库和python脚本以及streamlit。

f2f0ec7de42392aa2384b3dccb3cf2d6.png

1.导入数据库

我们正在使用以下惊人的API导入数据库,以了解Covid-19印度的影响:https://api.covid19india.org。

a33e34fab762eb5e222b1a975a9469d7.png

在这里,在load_data()方法中,我们正在使用pandas库读取.csv文件,并且通过缓存数据来提高代码效率。 但是随着Covid-19的数据不断变化,我们每5分钟或最多20个条目清除一次缓存。 如果您有一个不经常更改数据的用例,则只需使用@ st.cache(persist = True)

2.创建标题,文本内容和侧边菜单

Streamlit支持markdown,因此在我们的网络应用中使用不同的字体大小非常容易。 它还通过传递参数来支持HTML:unsafe_allow_html =对st.markdown()调用正确,因此,我们可以按需要的方式设置文本样式。

1788c25dd0394827e84829540504c3d9.png
fea2aadb80e67e0d1bd1bb9bf0f367d0.png

由于我们使用HTML将自定义颜色设为蓝色,因此说明显示为蓝色。 我们也可以使用标头和子标头,就像我们将st.title()用于不同的标题一样。 或者我们可以为此使用markdown。

//will also give the same result as st.title()st.markdown("#  Covid-19 Impact in India")
st.sidebar.title('Select the parameters to analyze Covid-19 situation')

3.插入复选框,单选按钮和滑块

34971b8ae268e32cf0285c30d0294b6b.png
st.sidebar.checkbox("Show Analysis by State", True, key=1)select = st.sidebar.selectbox('Select a State',data['State'])#get the state selected in the selectboxstate_data = data[data['State'] == select]select_status = st.sidebar.radio("Covid-19 patient's status", ('Confirmed','Active', 'Recovered', 'Deceased'))

· 复选框-复选框中的第一个参数定义复选框的标题,第二个参数定义True或False,即默认情况下是否选中它,第三个参数定义复选框的唯一键。

· 选择框—此选择框包含所有印第安州。 第一个参数是选择框的标题,第二个参数定义要在选择框中填充的值的列表。 在这里,第二个参数是我们之前加载的.csv文件中的列名"州"。 您可以自己打开和浏览表格。 在下一行中,我们仅从选择框中获取state_data中针对所选状态的数据条目。 我们也可以在此处传递关键参数。

· 单选按钮—仅供您参考,我们目前尚未真正在Web应用程序中使用它。 与往常一样,第一个参数是广播组的标题,第二个参数接受选项的元组。 我们也可以在此处传递关键参数。

Plotting a graph

faa1d8129d8aeb4fc3563a6604ad0bf9.png
def get_total_dataframe(dataset):    total_dataframe = pd.DataFrame({    'Status':['Confirmed', 'Active', 'Recovered', 'Deaths'],    'Number of cases':(dataset.iloc[0]['Confirmed'],    dataset.iloc[0]['Active'], dataset.iloc[0]['Recovered'],    dataset.iloc[0]['Deaths'])})    return total_dataframestate_total = get_total_dataframe(state_data)if st.sidebar.checkbox("Show Analysis by State", True, key=2):    st.markdown("## **State level analysis**")    st.markdown("### Overall Confirmed, Active, Recovered and " +    "Deceased cases in %s yet" % (select))    if not st.checkbox('Hide Graph', False, key=1):        state_total_graph = px.bar(        state_total,         x='Status',        y='Number of cases',        labels={'Number of cases':'Number of cases in %s' % (select)},        color='Status')        st.plotly_chart(state_total_graph)

方法get_total_dataframe()用于获取数据框,以绘制选定状态的图。 dataset.iloc [0] [Confirmed]将返回" Confirmed"列的第一项,并且由于我们仅传递所选状态的数据,因此在" Confirmed"," Recovered"," Active"和" Deceased"列中将只有一个条目。 (检出.csv文件)

未选中"按状态显示分析"复选框,我们不会在主屏幕上看到"状态级别分析"部分。 同样,如果选中了"隐藏图形"复选框,我们将不会看到图形。

要绘制图形,我们将使用plotly.express库的bar方法。 第一个参数是我们要绘制的数据框,第二个参数是x轴的列,第三个参数是y轴的列,如果要更改列名,则labels参数是可选的 对于图形和颜色参数,此处是根据数据框中的"状态"列对图形进行颜色编码。

最后,为了显示该图在我们的Web应用程序中,我们使用st.plotly_chart()方法。 我们也可以使用st.write()来显示图形。

5.显示数据框或表

bb477bc15c3515ca75f5ac516ed057a5.png

· st.dataframe():第一张图片是st.dataframe()的结果,用于第二张图片中的同一数据集。 您还可以使用内部调用st.datframe()的st.write()。

· st.table():我们使用st.table()获得了第二张图片中的表格。 这显示了数据框中的所有数据,而没有任何滚动。

def get_table():    datatable = data[['State', 'Confirmed', 'Active', 'Recovered', 'Deaths']].sort_values(by=['Confirmed'], ascending=False)    datatable = datatable[datatable['State'] != 'State Unassigned']    return datatabledatatable = get_table()st.markdown("### Covid-19 cases in India")st.markdown("The following table gives you a real-time analysis of the confirmed, active, recovered and deceased cases of Covid-19 pertaining to each state in India.")st.dataframe(datatable) # will display the dataframest.table(datatable)# will display the table

在get_table()中,我们通过从选择框获得的状态的最高"已确认"情况获得排序后的数据框。 我们还会从数据集中删除状态为"未分配状态"的行。

而已! 是的,就是这么简单。 :)

您已经准备创建自己的Web应用程序并尝试使用Streamlit。 这篇文章是关于如何使用简单的Python脚本创建Streamlit应用程序的,我希望您喜欢它。 我创建了另一本有关如何使用AWS EC2部署此Web应用程序的详细教程。 请检查一下,让我知道您的意见。

我已经为印度的Covid-19 Impact创建了完整的Streamlit Web应用程序,并使用AWS EC2进行了部署。 您可以在这里查看它-www.corona-updates.in。 请在评论部分提供您的宝贵反馈。 谢谢 :)

(本文翻译自Nishtha Goswami的文章《Using Streamlit to create interactive WebApps from simple Python scripts》,参考:https://medium.com/swlh/using-streamlit-to-create-interactive-webapps-from-simple-python-scripts-f78b08e486e7)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/336216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

opengl如何画出一个球_OpenGL-Controlling and Monitoring the Pipeline

全球图形学领域教育的领先者、自研引擎的倡导者、底层技术研究领域的技术公开者,东汉书院在致力于使得更多人群具备内核级竞争力的道路上,将带给小伙伴们更多的公开技术教学和视频,感谢一路以来有你的支持。我们正在用实际行动来帮助小伙伴们…

【WebRTC---入门篇】(二十)WebRTC核心之SDP详解

SDK规范 会话层 媒体层 SDP规范相关参考 WebRTC中的SDP

junit5和junit4_JUnit 5 –条件

junit5和junit4最近,我们了解了JUnit的新扩展模型以及它如何使我们能够将自定义行为注入测试引擎。 我向你保证要看情况。 现在就开始吧! 条件允许我们在应该执行或不应该执行测试时定义灵活的标准。 它们的正式名称是“ 条件测试执行” 。 总览 本系列…

python opencv输出mp4_10分钟学会使用YOLO及Opencv实现目标检测

点击边框调出视频工具条 计算机视觉领域中,目标检测一直是工业应用上比较热门且成熟的应用领域,比如人脸识别、行人检测等,国内的旷视科技、商汤科技等公司在该领域占据行业领先地位。相对于图像分类任务而言,目标检测会更加复杂一…

捍卫者usb管理控制系统_捍卫Java

捍卫者usb管理控制系统因此,我们不时发布了一本电子书,名为“十大Java性能问题” 。 毫无例外,一些人回答了一些“问题是您正在使用Java”。 显然,Java一直在受到批评,人们已经预测了它的消亡已有一段时间了。 当然&a…

html怎么上传qq空间,qq空间怎么上传照片

当我们想要把照片上传到qq空间里,应该怎么办呢?下面就让学习啦小编告诉你空间上传照片的方法,希望对大家有所帮助。空间上传照片的方法打开QQ主界面,在主界面头像的右则有个小星星,那就是进入空间的快捷方式,点一下小…

android gridview控件使用详解_Android开发实现自定义日历、日期选择控件

点击上方蓝字关注 ??来源: wenzhihao123https://www.jianshu.com/p/a2f102c728ce前言最近项目需要日历效果,考虑用第三方的反而不太适合设计需求,修改复杂,与其这样不入自己重新写一个干净的控件。虽不是什么牛逼控件&#xff0…

HTML设置字体颜色1008无标题,如何在HTML中设置字体颜色,你知道这几种方式吗?...

color设置字体颜色在color设置字体颜色之前,我们首先了解color在css中有几种取值方式,一共有4种方式,若有不全还请在评论区告知谢谢,4种方式如下:十六进制、十进制、 英文单词、十六进制的缩写。现在让我们进入字体颜色…

gram矩阵_Skip-gram

Skip-gram标签(空格分隔):NLP一. skip-gram和cbow的对比 skip-gram与cbow相比,好处在于对于不常用的词,skip-gram的效果要更好;举个简单的例子,一个句子w1w2w3w4,window_size1;对于cbow&#xf…

C++ 11 深度学习(十五)多线程

线程创建 方式一:调用函数 #include<thread>void CreateThread() {int a100;cout<<"This is Thread: "<<a<<endl; }int main() {thread Threadone(CreateThread);//join是一种阻塞的方式&#xff0c;需要子线程处理完毕之后&#xff0c;…

计算机的好处和坏处的英语作文,电脑的利弊英语作文

电脑的利弊英语作文在学习、工作或生活中&#xff0c;大家都写过作文吧&#xff0c;通过作文可以把我们那些零零散散的思想&#xff0c;聚集在一块。那么你有了解过作文吗&#xff1f;下面是小编为大家整理的电脑的利弊英语作文&#xff0c;希望能够帮助到大家。Computer is in…

servlet容器_SpringBoot是否内置了Servlet容器?

SpringBoot是否内置了Servlet容器&#xff1f;SpringBoot内置了Servlet容器&#xff0c;这样项目的发布、部署就不需要额外的Servlet容器&#xff0c;直接启动jar包即可。SpringBoot官方文档上有一个小章节内置servlet容器支持用于说明内置Servlet的相关问题。在SpringBoot源码…

计算机专业开学要带电脑吗,大学上课要带电脑吗

大学刚开学&#xff0c;上课的时候学生们要不要带电脑呢&#xff0c;想必这个问题一直对还没进入大学的准大学生来说很困扰&#xff0c;下面是小编整理的详细内容&#xff0c;一起来看看吧&#xff01;大学上课要带电脑吗大学上课能否带电脑需要看老师的要求。大学课程书本知识…

突然讨厌做前端,讨厌代码_不要讨厌HATEOAS

突然讨厌做前端,讨厌代码或我如何学会不再担心和爱HATEOAS REST已成为实现Web服务的事实上的解决方案&#xff0c;至少已成为一种流行的解决方案。 这是可以理解的&#xff0c;因为REST在使用HTTP规范时提供了一定程度的自我文档。 它经久耐用&#xff0c;可扩展&#xff0c;并…

【WebRTC---进阶篇】(三)各流媒体服务器的比较

多人音视频架构 Mesh方案 多对多大多进行P2P,在国内P2P直连穿越会出现很大问题。 MCU方案 客户端连接后,对应每个终端都有一个模块进项上传。再将音视频进行拆分解码。进行混屏,压缩编码分别推动给每个终端。 SFU方案 sfu不进行编解码,只是进行转发。只对订阅的终端进行…

汇编 cmp_汇编复习

第一章计算机组成五部分&#xff1a;&#xff08;运算器、控制器&#xff09;、存储器、输入/输出设备↑↑ CPU ↑↑ ↑内存↑三条总线&#xff1a;控制总线、地址总线、数据总线不同进制及BCD码的转换特殊ascll ‘0’~‘9’—— 30H ~ 39H‘A’~‘F’—— 41H ~ 46H回车 —— …

junit5和junit4_JUnit 5 –设置

junit5和junit42015年11月&#xff0c; JUnit Lambda团队展示了他们的原型 。 此后&#xff0c;该项目更名为JUnit 5&#xff0c;并于2016年2月发布了Alpha版本。我们将在一系列简短文章中进行探讨&#xff1a; 建立 基本 建筑 条件 注射 … 本节讨论JUnit 5的设置&…

markdown 生成目录_github上如何为markdown文件生成目录

写在前面熟悉markdown都知道可以使用[TOC]自动生成markdown文件的标题目录&#xff0c;比如在typora&#xff0c;vscode(需要插件)等本地编辑器中&#xff0c;或者在CSDN等网页编辑器中&#xff0c;但是github却不支持[TOC]标签&#xff0c;至于为什么不支持感兴趣的可以深入搜…

【WebRTC---进阶篇】(五)mediasoup的信令系统

mediasoup demo分析 app 客户端部分 broadcasters 推拉流部分 server 服务端部分 config.js 相当于一个配置文件&#xff0c;获取一些基本配置信息。获取的信息来交给server.js。 server.js 先从config.js获取信息&#xff0c;然后启动HTTPS webSocket服务等&#xff0c;…