如何用Python和Streamlit做交互式数据分析产品?

不用学前端编程,你就能用Python简单高效写出漂亮的交互式Web应用,将你的数据分析成果立即展示给团队和客户。

从我开始折腾数据分析工具的那一天,就没有想明白一件事儿——为什么我打算把数据分析的成果做成一个应用,这么难?

其实我需要的核心功能,无非是在网页上接收用户输入,然后做分析处理,把分析结果反馈给用户,完事儿。

可是这谈何容易?

很多人都会笑着告诉你,这得学前端编程,HTML+Javascript了解一下吧!

什么?你还需要在后台做数据分析?那你就得学Web框架了。

你说喜欢Python?那就学个Django或者Flask好了。

问题是我在学习中,提不起真正的兴趣。

因为教程里讲的那些功能,我根本不关心。

核心的功能,我早已实现了。我只是希望把输入输出弄成网页形式,方便用户来用。

我为什么要理解那么多的概念?为什么一定要跟那么繁重的数据库操作打交道?为什么几乎所有的样例,都要教我如何做一个blog?

我要是想用blog,可以直接注册一个免费的啊!难道我要自己开发?

你的教程为什么不干脆教我怎么把数据科学的分析结果,利用这些技术快速变成一个产品?

但是人家写书和做教程的人,就是不疾不徐,坚持一定要教会你,如何做一个blog出来……

我仿佛看见达芬奇的老师教学生画鸡蛋一样。

我相信,这绝不仅仅是我一个人的痛点。

我们都希望尽快把数据分析结果,或是其他的交互功能发布出来,和用户交流。但是因为缺乏这样的简单Web包裹,我们不得不每次都给别人展示一个包含了代码的JupyterNotebook。

那些不懂编程的用户,看到代码,就会觉得不适。再看到改变一个输入都需要编程(其实就是改语句中的一个赋值),立刻就决定不玩儿了。

万万没想到,这个痛点,如此容易就解决了。

我用纯Python脚本写了个Web应用。

我编写的程序里,没有一丝半毫的Web框架,Javascript,甚至是HTML。

这玩意儿能用吗?

你自己来试试看。

你会看到下面的初始化界面。

初始化完毕之后,页面会分成左右两栏。左面是两个下拉候选框,分别让你指定需要分析的数据范围。

上面一个,是事件类型;

下面一个,是事件发生归属地。

只不过,当时我们更注重的,是用循环神经网络搭建了一个严重拥堵事件预测模型。

而今天,我们是要进行探索性数据分析,也就是根据我们感兴趣的目标,对数据进行整理操作,然后可视化显示。

选定之后,你会看到右侧提示两个信息:

怎么样?

麻雀虽小,五脏俱全。

虽然咱们这个Web应用很简单,不过交互分析该有的功能和流程,基本上都涵盖了。

你可能会问:

王老师,编这么一个应用出来,不简单吧?

学完这篇教程,你就能自己开发出这样一个应用来。

可以看到,一共包含了4个文件。

有意思的是,其中3个,包括:

都只是部署到远程服务器时,需要用到的配置文件而已。

这些文件的具体使用方法,咱们后面会说明。

也就是说,只有最后一个helloworld.py是主角,它包含了实现咱们全部交互式数据分析功能的Python脚本文件。

这代码,少说也得有几百行吧?

别担心,打开来看看:

上面这张截图,就已经包含了实现交互数据分析功能的全部代码。

神奇吧?

这么短的代码,为什么能有如此强大的功能?

下面我通过实际操作,带你初步领略一下streamlit的威力。

然后,你需要打开终端,执行:

pipinstallstreamlit你可以创建一个新目录。然后在目录下新建一个helloworld.py文件,并且用任意编辑器打开它。

我这里用VisualStudioCode编辑器,来编辑和制作Python脚本文件。

然后,回到终端下,执行:

streamlitrunhelloworld.py如果一切顺利,你就会看到如下图的提示。

一般来说,你的浏览器会自动开启,并且访问上图中红色标识出的网址。

如果浏览器没有自动开启,你手动开启一个,并且输入上述网址即可。

为了演示方便,我这里把VisualStudioCode编辑器缩小到屏幕左侧半部;右边放置Chrome浏览器,来显示Web应用效果。

我们可以开始尝试了。

首先在helloworld.py中输入这些内容:

之后你会立即在右侧看到Web应用的运行效果。

这里前几行语句,只是引入了几个软件包,然后设置了一下标题。

下面我们尝试点儿好玩儿的。

我们定义了一个式子,让y总比x大3,并且显示y。

你可以试试,在滑动条拖拽x的效果。

y值紧随你的拖动变化,对吧?

从这个简单的例子里,你可以看到streamlit响应用户的输入和输出是多么方便。

而且应用上的控件一直运行。你输入的变化,会实时带来输出的变化。

下面我们还是步入正题吧。先注释掉刚才这三条语句,免得碍事儿。

然后,我们把这几个列分别用小写的名称来命名。

值得一提的,是@st.cache,这是一个新玩意儿。

它是什么呢?

这在Python里面,叫做装饰器(decorator)。其实这里没有什么魔法,它只是streamlit软件包里,一个预先定义的函数。

只不过这样写,相当于是你在自己的load_data()函数之外,又包裹了一个st.cache()函数的功能。每次执行的时候,st.cache()都会参与进来。

st.cache()这个函数做什么用呢?

那作用可太大了。

因为你每次更新代码,或者用户更新输入,整个儿Python脚本都相当于被重新执行了一遍。

而st.cache()装饰器可以告诉Python:

查查看,我包裹的这个函数,内容或者输入改过没有?如果没有,就用已存储的上次调用结果好了,别再费事重新执行一遍了。

我们这里是从一个外部文件读入数据。就这样一个300MB的文件,每次读起来也得花上近10秒钟。更别说是那些上GB规模,甚至更大的文件了。

所以,如果Streamlit能够帮助我们跳过一些无意义的重复操作,将节省大量的用户等待时长。

不过这一步,你也看到了,输出没有变化。

因为我们什么也没有输出啊。

下面我们让Python实际读数据,并且把读后的数据框前5行用列表形式(st.table())展示给用户。

这一读数据不要紧,右上角会出现一个小人儿,做各种健身运动。

这就是告诉我们,程序在忙着呢。

忙完之后,这是结果:

下面我们要让程序给用户选项,首先是选择观察哪一种事件类型。

下面一段,采用了st.sidebar.selectbox()构造了一个左边栏里的下拉选择框。里面两个参数,第一个是显示给用户的提示语句,第二个,是选择列表内容。

问题是,我们存储了之后,好像什么也没有发生啊。

没关系,看到上图里面红色标出的这个箭头没有?

点击它,选项就出现了。

照葫芦画瓢,我们顺便把事件发生所在郡的下拉选择框一并做出来。

然后,我们根据用户的输入做出反应,提示给用户经过他的选择,现在符合要求的行数还有多少。

然后,我们把一个格式化后的字符串,用st.write()直接输出在网页上。

运行结果如下图所示。

好了,下面可能是你最关心的一刻了。

老师,别卖关子了,那张标示了事件位置的叠层地图怎么画啊?一共都没有多少行语句,你都讲了这么多了,怎么还没讲到?

请你输入下面这一行语句:

st.map(part_df)然后保存。你就会看到下面的效果了。

是不是很惊讶?

我第一次用的时候,也是这感觉。

还是集成在Web应用里,可以发布给全球用户与合作者,进行展示。

不是我不明白,这世界变化快啊。

我知道,你又开始着急了。

老师,这么好的东西,我可不想在本地一个人玩儿。我也想把结果发布到网络上,让别人看到我的成果。快告诉我怎么办!

别急。

咱们部署(deploy)一下它就行。

虽然你写了半天,只是Python脚本。但是Streamlit已经把它转换成了一个动态的Web应用。

所以,只要是常见的Web应用发布平台,理论上你都可以用来部署你的交互式数据分析作品。

这些平台,常见的包括:

这列表列下去就太多了。咱们这里只介绍Heroku,也就是前文给你展示的,样例使用的部署平台。

这东西的好处,就是基础款免费。

对咱们今天的教程来说,基础款就足够了。

我这里起的名字,叫做helloworld-streamlit。

你可以根据自己的喜好,起名称。

之后我们就要部署了。

部署的步骤,在上图中,你可以参考。

注意,上图中,右上角的OpenApp按钮,就是你的应用链接地址,你可以把它记下来。

首先你需要准备一些配置文件。

这里需要说明的是,几个不同配置文件的用途。

setup.sh做一些初始设置,设定一些参数。

requirements.txt告诉机器,需要安装哪些Python依赖包。

显然,教程这里需要的依赖包不多。

Procfile是远端服务器上,Web应用启动的时候,需要调用的脚本。其实里面只有一行。

请你下载,或者自行编辑上述3个文件后,与你的Python文件放在一个文件夹下面。

下载后,根据提示安装即可。

进入终端。用cd命令切换到你的工作文件夹,也就是包含了你的Python脚本的目录。

输入:

这时按任意键,会跳出一个浏览器窗口。

下面我们来设置git,这是推送我们文件和更新改动的途径。

在终端下执行:

gitinit之后设置一下与远端的heroku服务器的连接:

herokugit:remote-ahelloworld-streamlit若是看到下图,证明成功了:

然后执行:

gitpushherokumaster这样就可以把全部内容推送到heroku了。

推送的第一步,是上传文件。

Heroku发现咱们推送的是一个PythonApp,所以自动执行许多安装设置工作。

这些安装和配置做完后,会出现下面这样的提示。

到这里,你的Web应用部署就搞定了。

回到浏览器里,用下图中标红的这个按钮开启你自己的应用吧。

很有成就感吧?

尝试过之后,你应该不难发现,Streamlit给你带来了什么。

如果你学过Javascript和Flask,Django等Web应用开发技术,Streamlit可以加快你的Web应用开发与测试进程。

如果你还没有学过上述技术,Streamlit就可以给你赋能,让你一下子有了把数据分析结果变成产品的能力。

给你讲点儿更激进的。

有人已经希望能用它替代掉Flask用于产品发布了。

还有人说,将来写技术文档,也应该充分使用Streamlit。

甚至,还把它比作了数据科学界的iPhone。

这里,它是借喻iPhone开启智能手机时代,说明Streamlit的划时代性。

我不希望你也变得如此激进。

因为这里提到的每一种功用,现在还都有非常专业的工具做的更好,而且新的工具也在不断涌现。

但是,你可以看到,一个新的工具,以一种简单,而不是更繁复的办法,解决一个功能痛点,是一件多么令人欣喜的事儿。

其实不是这样的。

可以想象,开发门槛降低以后,将来会有更多的人使用Python来做Web应用。

用Streamlit这样的方法,他们只是开发出了一个原型。

要是想打造精品,就必须精细调控很多细节。

这时候,Javascript是绕不过去的。

如果你精通Javascript,那你潜在的合作对象一下子就多了起来,你掌握的这门技术,也就有了更大的价值。

这就好像印刷术的发明,不是让会写字这件事儿变得失去价值,而是全社会都增大了对好作品的渴求。深刻的思考,加上有效的文字表达,会让你生存得更好。

当然,如果你不希望精通写作技艺,只是想做一个抄书匠糊口。那么印刷术就可能会替代你的工作,结果就不那么美妙了。

本文我为你介绍了Streamlit,它可以让你用Python脚本编写简洁实用的交互式Web应用。

通过学习本文,希望你掌握了以下知识点:

咱们是以数据分析和可视化为例,进行了讲解。而且为了讲解的清晰,我们只介绍了Streamlit可实现功能的一小部分。但请注意,即便是目前,Streamlit能帮你达成的目标,也远远不止于此。

THE END
1.HTML实例本例演示如何在 HTML 源代码中插入隐藏的注释。 背景颜色 本例演示如何为 HTML 页面添加背景颜色。 本例演示:如何使用三份不同的文档制作一个垂直框架。 水平框架 本例演示:如何使用三份不同的文档制作本例演示如何在网页中显示图像。 从不同的位置插入图片 本例演示如何将其他文件夹或服务器的图片显示https://www.w3school.com.cn/example/html_examples.asp
2.jQuery网页特效最全网页模板和网站模板jQuery代码17素材网主要收集jQuery网页特效、jQuery网页代码、网站模板、网页模板、企业模板、商城模板、图标等素材,为html网站模板开发人员提供高效率的工作方式。https://www.17sucai.com/
3.Arduino库教程EthernetWebClient样例代码 /* Web client This sketch connects to a website (http://www.google.com) using an Arduino Wiznet Ethernet shield. Circuit: * Ethernet shield attached to pins 10, 11, 12, 13 created 18 Dec 2009 by David A. Mellis modified 9 Apr 2012 https://www.ncnynl.com/archives/201608/569.html
4.H5制作二维码扫描和解析的代码实例H5教程web端或者是 h5端可以直接完成扫码的工作; 3.缺点: 图片不清晰很容易解析失败(拍照扫描图片需要镜头结构在网页上面是有固定的显示样式,为了能够自定义按钮样式,我们可以按照下面的示例代码结构嵌套代码 样例展示 1.呼起前的页面 2.呼起后的页面 【相关推荐】 1. Html5免费视频教程 2. H5完成多图片https://m.php.cn/faq/363143.html
5.自动生成工具范文10篇(全文)国内外许多大型的软件公司为了解决代码的重用问题, 都有自己的解决方案, 有的从开发框架和类库入手来解决系统的复杂性和代码量过多的问题, 有的从编程模式入手, 通过新的编程方式来解决这类问题;还有的通过代码生成工具方式来解决重复性问题。其中采用代码自动生成工具成为提高开发效率的一种很好的选择。代码生成工具https://www.99xueshu.com/w/ikeyqz1sk4o9.html
6.androidwebview加载网页样例webview资源在Android开发中,WebView是一个非常重要的组件,它允许我们在应用程序中内嵌网页内容,实现与网页的交互。本文将深入探讨`Android webview`的相关知识点,并结合提供的代码示例进行详细解析。 首先,WebView的基本 5星 · 资源好评率100% webview的简单样例 在Android开发中,WebView是一个非常重要的组件,它允许我们https://download.csdn.net/download/q610098308/8886225
7.网页拖拽元素生成java代码网页实现拖拽功能网页拖拽元素生成java代码 网页实现拖拽功能,Javascript的特点是dom的处理与网页效果,大多数情况我们只用到了这个语言的最简单的功能,比如制作图片轮播/网页的tab等等,这篇文章将向你展示如何在自己的网页上制作拖拽.有很多理由让你的网站加入拖拽功能,最简单的一个是https://blog.51cto.com/u_16099211/8807477
8.超全整理:程序员都在用什么工具?any-rule 维护了一个常用正则表达式合集,并且本身是一个支持 Web/VS Code/idea/Alfred Workflow 多平台的正则表达式工具。 4. tool.lu(在线工具): https://tool.lu 程序员总是有很多小工具要使用,比如图片、Base64 编码、Markdown 编辑器时间戳转换,进制转换等,在线运行各种语言代码。这个网站包含了太多程序员需https://xie.infoq.cn/article/3808624e50341691b5e44c647
9.公司网站建设总结/学生个人网页制作成品公司网站建设总结,学生个人网页制作成品,如何建国际商城网站,团队云智能网站建设from me: web动画能够带来一个非常酷炫的效果,能够让页面有一个更好的用户体验。对于良好的动画性能没有高招,除了将大量的时间放在测试和优化,当然最重要的还是要易于维护。 流畅web动画的十大法则: 不要改变除了opacity和trans… http://www.mhkc.cn/news/375229.html
10.大学生html网页制作——食品香菇品牌网页制作html+css+js+视频品牌类网页制作期末大作业html+css共5个页面,网页代码包含表达元素、图片等内容,logo,导航栏切换, 原始HTML+CSS页面设计,web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常话合初学者学习使用。 发布于 2024-12-16 14:47?IP 属地江苏 https://zhuanlan.zhihu.com/p/12663593915
11.网页设计与制作案例教程(HTML5+CSS3)全套PPT课件(436页)项目1 走进网页世界 1.1 任务1:制作“念奴娇?赤壁怀古” 网页 1.2 前端修炼手册:网页基础知识 1.3 任务2:制作“苏轼介绍”网页 1.4 前端修炼手册:Dreamweaver 2021的 工作界面和使用技巧 1.5 能力提升:制作“青春颂歌”网页 1.6 能力挑战:制作“速度滑冰”网页目录1.1 任务1:制作“念奴娇?赤壁怀古”网页1.1 任务1:https://m.book118.com/html/2023/0317/5242323311010123.shtm
12.盘点三款高可用的机器学习模型web页面化的工具(一)python︱写markdown一样写网页,代码快速生成web工具:streamlit介绍(一)python︱写markdown一样写网页,代码快速生成web工具:streamlit 重要组件介绍(二)python︱写markdown一样写网页,代码快速生成web工具:streamlit 展示组件(三)python︱写markdown一样写网页,代码快速生成web工具:streamlit lay-out布局(四)python︱写marhttps://cloud.tencent.com/developer/article/2169864
13.Swift一、实现一个静态的文件目录网站(Static Website) GCDWebServer 内置的处理程序可以递归服务端目录,从而实现一个静态的文件目录浏览功能(只读)。同时我们还可以自由设置“Cache - Control”头。 1,样例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import UIKit class ViewController: UIhttps://www.hangge.com/blog/cache/detail_1563.html
14.网页设计论文[2]李艳新.网页设计中计算机图像处理技术的应用价值[J].电子技术与软件工程,20xx(09). 网页设计论文2 摘要:DIV+CSS是Web设计标准,随着Web2.0标准化设计理念的普及,国内很多大型站采用DIV+CSS网页布局制作方法。从实际应用情况证明,该技术具有代码简洁、表现和内容相分离等优势。 https://www.ruiwen.com/lunwen/6161857.html
15.WebGL编程指南的书本源代码webGL编程示例源码 WebGL 是一项在网页上渲染三维图形的技术,也是HTML5 草案的一部分。 《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,也讲解了使用WebGL 渲染三维场景的一般技巧,如光照、阴影、雾化等等。《WebGL编程指南https://www.iteye.com/resource/qfire-10371055
16.向web中添加矢量图形本文提供了矢量图形和 SVG 的简单教程,让你了解他们的作用,以及如何在网页中引入 SVG。本文并非学习 SVG 的完整教程,只是一个指南,让你在 Web 上遇到 SVG 时知道它是什么。所以不要因为觉得你不是一个 SVG 专家而担心。如果你想了解更多它的工作原理,我们在下面列出了一些可能会帮助你的链接。 http://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
17.rss阅读器java代码,开源rss阅读器创新互联公司主要从事网站设计制作、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务古塔,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询RSS 2.0 以下是RSS 2.0的代码样例 !-- XML版本和字符集 -- ?xml version="1.0"? !-- RSS版本 -- rss version="2.0" !-- 以下为频道信息及新http://chengdu.cdxwcx.cn/article/hcoghs.html
18.代码图形化的设计和执行爬虫任务。别名:ServiceWrapper面向Web易采集/EasySpider: Visual Code-Free Web Crawler 一个可视化浏览器自动化测试/数据采集/爬虫软件,可以使用图形化界面,无代码可视化的设计和执行任务。只需要在网页上选择自己想要操作的内容并根据提示框操作即可完成任务的设计和执行。同时软件还可以单独以命令行的方式进行执行,从而可以很方便的嵌入到其他系统中。 https://github.com/NaiboWang/EasySpider
19.Airflow代码示例开源大数据平台EMapReduce(EMR)本文通过示例为您介绍如何使用OSS Sensor、WebHDFS Sensor、Spark Operator、Hive Operator、Bash Operator和给DAG配置告警。 背景信息 本文为您介绍以下代码示例: 使用OSS Senser 使用WebHDFS Sensor 使用Spark Operator 使用Hive Operator 使用Bash Operator 使用ZeppelinOperator 使用JupyterOperator 给DAG配置告警 前提条件https://help.aliyun.com/zh/emr/emr-on-ecs/user-guide/sample-code-1
20.单点登录我用J2EE的技术(JSP和Servlet)完成了一个具有Web-SSO的简单样例。样例包含一个身份认证的服务器和两个简单的 Web应用,使得这两个 Web应用通过统一的身份认证服务来完成Web-SSO的功能。此样例所有的源代码和二进制代码都可以从网站地址http://gceclub.sun.com.cn/wangyu/下载。 样例部 署和运行的环境有一定的要https://www.coder100.com/index/index/content/id/1491786
21.Web应用(精选十篇)随着应用和服务的兴盛, 网页浏览的安全问题也日益凸显, 各种针对于网页服务器端的攻击层出不穷, 网页的信息容易遭到篡改并植入有害代码, 个人信息大量泄露利用浏览器的漏洞的挂马网站大量泛滥, 据相关安全机构统计, 80%的电脑中毒都来源于用户浏览了带病毒的网页和链接, 网页攻击成为黑客入侵的主要手段之一。 2 WEBhttps://www.360wenmi.com/f/cnkey0nsxmsc.html
22.SpringMVC通过模型视图ModelAndView渲染视图的实现javaspring.mvc.view.prefix=/WEB-INF/jsp/ spring.mvc.view.suffix=.jsp C.为了定制InternalResourceViewResolver初始化,可以在配置文件application.properties(或yml文件)中进行配置,代码如上。 D.它会以前缀(prefix)和后缀(suffix)以及视图名称组成全路径定位视图。 https://www.jb51.net/article/201086.htm
23.全国计算机一级考试试题及答案(精选14套)(5)将制作好的演示文稿以文件名为Web,文件类型为演示文稿(*.ppt)保存,同时另存为Web页Web.htm,文件均存放于考生文件夹下的Web站点中; (6)为下框架网页中文字点击参考创建超级链接,指向Web.htm,目标框架为新建窗口。 7.将所有修改过的网页以原文件名保存,文件均存放于考生文件夹下Web站点中。 样页: 第3题https://www.oh100.com/kaoshi/ncre1/tiku/231476.html