第5章

体验Web数据分析





第4章简要介绍了如何使用Pandas进行数据分析，并将数据分析的结果通过Matplotlib等第三方图库可视化展现出来，但是相对而言，这种形式展示的图形偏向于静态，数据互动性小，界面过于简陋，美观性和优雅性不足，因此如果想让自己的数据分析的结果优雅地展示出来，很多时候需要借助于网页，在网页上进行样式设置和界面美化，使展示出来的数据图表更加美观，这就是Web端数据分析可视化，但实际上，Web界面代码编写也十分复杂，色彩、界面、功能搭配也是一门大学问，很多专业的数据分析人员及后端人员并不擅长此道，因此为帮助读者简单领略Web端数据分析可视化的功能及效果，本章特意介绍一个第三方库Streamlit，借助Streamlit即便是纯后端数据分析人员也能构建简单的Web程序，将数据分析结果展示在网页端。

5.1Streamlit简介
Streamlit是一个第三方库，借助Streamlit不懂前端的科研人员和数据分析人员也可以将自己的数据分析脚本快速地转换为网页应用，而不需要去考虑路由、协议、HTML、CSS这些网站专业技术。Streamlit开包即用，如果脚本更改或者数据发生改变，前端则会相应地做出变化，十分便捷。Streamlit的官网为https：//streamlit.io/，在浏览器网址栏输入这个网址即可访问Streamlit的官网。如图51所示，在官网可以查看相应的代码示例和说明文档，本章仅抛砖引玉，进行简要介绍，并使用Streamlit构建一个简单的Web可视化界面。



图51Streamlit官网


5.2安装Streamlit
与安装其他第三方库一样，在PyCharm左下角单击Terminal按钮，会弹出当前虚拟环境(venv开头)的路径，在后面输入pip install streamlit命令,输入后按Enter键，程序会自动下载并安装。由于版本兼容问题，此次并没有指定pip的镜像源参数(如i https：//pypi.tuna.tsinghua.cn/simple)，而是直接下载并安装，安装完成后的提示如图52所示。


图52Streamlit安装完成示例图


5.3Streamlit开发
本次使用Streamlit开发一个简单的Web界面，展示不同可视化库的绘图效果，这里选用Matplotlib、Plotly、Altair及Streamlit自带的图表。当然在正式开发之前，读者需先参照上述Streamlit的安装方法，自行安装Plotly、Altair两个库。最后的界面效果如图53～图56所示。



图53Web效果图（1）




图54Web效果图（2）




图55Web效果图（3）




图56Web效果图（4）


此次开发的Streamlit Web程序较为简单，主要由左侧侧边栏和右侧图表展示区两部分组成。左侧侧边栏采取下拉菜单方式完成，可以查看几种可视化图表库的不同图表效果，分别是Streamlit自带图表、Matplotlib图表、Plotly图表和Altair图表。单击后下拉列表下方的文字会相应地显示选项，右侧则是简单的展示每种图表库的一张图表示例。下面分步讲述如何开发这样一个简单的Web脚本。


5.3.1导入第三方库
5.2节讲解了如何安装Streamlit，并建议将其他第三方库（如Matplotlib、Plotly、Altair）一并安装，为方便后续使用，下面将这几个库一并导入，代码如下： 




//第5章/5.3.1/引入第三方库

import streamlit as st

import pandas as pd

import numpy as np

import altair as alt

import plotly.figure_factory as ff

import matplotlib

matplotlib.use('TkAgg')

matplotlib.get_backend()

import matplotlib.pyplot as plt

plt.rcParams［'font.sans-serif'］=［'SimHei'］

plt.rcParams［'axes.unicode_minus'］=False



细心的读者可能会发现这段代码在导入Matplotlib之后，又添加了其他内容，这是为了避免Matplotlib图标不显示及汉字字体不显示等问题。如果一切正常，则导入后的效果如图57所示，如果提示缺少一些库，则按提示安装即可。


图57导入第三方库示意图



5.3.2添加标题和侧边栏
下面先为程序添加一个标题，相当于网站的名称，这里的标题为Streamlit Web Example，代码非常简单，代码如下： 



#标题

st.title("Streamlit Web Example")



然后增加一个侧边栏的下拉选择框，代码如下： 



#侧边栏选择框

option = st.sidebar.selectbox(

'请在下拉列表选择需要呈现的页面',

［'Home','Matplotlib','Plotly','Altair'］)

st.sidebar.write('You selected:', option)



这段代码将下拉菜单的按钮设置为4个，名称分别为Home、Matplotlib、Plotly、Altair，并将用户选取的按钮值赋值给变量option。代码完成后，如果要查看代码的运行效果，在PyCharm左下角单击Terminal按钮，则会弹出当前虚拟环境(venv开头)的路径，在后面输入streamlit run 5.py命令并按Enter键即可。5.py是当前脚本的文件名，读者可以根据自己的实际情况命名。streamlit run 5.py命令执行后PyCharm左下角会弹出页面的URL网址，同时弹出默认浏览器打开页面。如果用户没有设置默认浏览器或者浏览器没有弹出，则可以自行复制URL并在任意浏览器打开。程序执行的界面如图58所示，页面显示效果如图59～图510所示。



图58Streamlit执行示意图





图59Streamlit标题界面





图510Streamlit侧边栏界面



5.3.3为Home选项制作界面
Home为option的默认值，本节为Home页设计了4个元素，分别是一个小标题、一个视频、一个数据表和一个折线图，这4个元素都是通过运用Streamlit自带函数实现的。视频预先放到与5.py同级的文件夹中，名为Streamlit简介，读者可以自行寻找一个视频替代。图表和折线图则是随机生成的一些数据，读者可以参考示例代码也可以自己制订。这部分的代码如下： 



//第5章/Home设计:

if option =='Home':

st.header('Streamlit简介')

video_file = open('video1.mp4', 'rb')

video_Bytes = video_file.read()

st.video(video_Bytes)

#数据表

st.write('数据表')

chart_data = pd.DataFrame(

np.random.randn(20, 7),

columns=［'a', 'b', 'c','d','e','f','g'］)

chart_data

#条形图

st.write('条形图')

st.bar_chart(［1,2,3,4,5,6,7］)



这段代码的含义是当option选项值为Home时，执行代码后创建页面并显示4个元素。代码执行完成后在浏览器中刷新，执行的效果如图511所示，因内容过多，纵向无法完全显示，所以图511中的值只保留了一部分供读者对比。



图511Home页面


5.3.4为Matplotlib选项制作界面
下面为Matplotlib页面编写代码，也需要指定option的值。同时为对应下拉列表的功能，使用ifelifelse结构。Matplotlib页面比较简单，此处只设计了一个元素，即简单柱状图，代码如下： 



//第5章/5.3.4/Matplotlib设计

elif option=='Matplotlib':

st.header('Matplotlib图表')

a = np.random.rand(100)

plt.hist(a,bins=20)  #100个值进行20等分

plt.ylim(0, 15)  #限制y轴高度:0→15

st.pyplot()

else:

pass



代码完成后在浏览器中刷新，执行的效果如图512所示。


图512Matplotlib页面



5.3.5为Plotly选项制作界面
下面为Plotly页面编写代码，也要指定option的值，同时为对应下拉列表的功能，继续使用ifelifelse结构。与Matplotlib页面相同，只设计了一个元素，即一幅复合图，代码如下： 



//第5章/5.3.3/Plotly设计

elif option=='Plotly':

st.header('Plotly图表')

x1 = np.random.randn(100) - 2

x2 = np.random.randn(100)

x3 = np.random.randn(100) + 2

#分组

hist_data = ［x1, x2, x3］

group_labels = ［'项目1', '项目2', '项目3'］

#创建图表

fig = ff.create_distplot(

hist_data, group_labels, bin_size=［.1, .25, .5］)

#Plot!

st.plotly_chart(fig)

else:

pass



代码完成后在浏览器中刷新，执行的效果如图513所示。



图513Plotly页面



5.3.6为Altair选项制作界面
下面为Altair页面编写代码，也需要指定option的值，同时为对应下拉列表的功能，继续使用ifelifelse结构。与Matplotlib页面相同，同样只设计了一个元素，即一幅复合图，代码如下： 



//第5章/5.3.4/Altair设计

else:

st.header('Altair图表')

data = pd.DataFrame({

'a': ［'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'］,

'b': ［28, 55, 43, 91, 81, 53, 19, 87, 52］

})

c1 =alt.Chart(data).mark_bar(

color="red"

).encode(

x='a',

y='b'

).properties(

width=500,

height=300

)

st.altair_chart(c1)



代码完成后在浏览器中刷新，执行的效果如图514所示。

至此，已经借助Streamlit完成了一个小型的Web数据可视化项目。当然有兴趣的读者可以结合第4章的数据分析可视化，尝试进行数据分析Web可视化，即在Web端单击选项后，后端再进行计算，然后将参数返回前端，以便呈现计算后的效果。不过细心的读者可以发现，借助Streamlit完成的Web项目反应相对较慢，虽然Streamlit提供了一些方法进行优化，相比纯正的Web项目来讲还是略显不足。Streamlit自带审查系统，每次数据或者后台代码发生更改时，Streamlit都会重新运行，只不过反应没有那么快速，当然也可以每次手动刷新。虽然Streamlit有很多不足，但对于一个简单的数据分析人员来讲，仍不失为一件利器，有兴趣的读者可以仔细阅读Streamlit的官方文档，用Streamlit构建自己的Web应用。如果读者对性能和外观比较看重，则可继续学习后续章节，逐步掌握自主构建一个完整Web可视化项目的所有技术。


图514Altair页面