Streamlit 讲解专栏(十二):数据可视化-图表绘制详解(下)

文章目录

  • 1 前言
  • 2 使用st.vega_lite_chart绘制Vega-Lite图表
    • 2.1 示例1:绘制散点图
    • 2.2 示例2:自定义主题样式
  • 3 使用st.plotly_chart函数创建Plotly图表
    • 3.1 st.plotly_chart函数的基本用法
    • 3.2 st.plotly_chart 函数的更多用法
  • 4 Streamlit 与 Bokeh 结合进行数据可视化
  • 5 使用 st.graphviz_chart 函数创建图形和网络图
    • 5.1 st.graphviz_chart 函数简介
  • 6 使用st.map函数显示地图和散点图
  • 7 结语

在这里插入图片描述

1 前言

数据可视化在数据分析和数据科学领域中扮演着至关重要的角色。通过可视化数据,我们能够更好地理解其背后的模式和趋势,从而作出准确的决策和预测。然而,要将原始数据转化为有意义的图表并不容易。这就是为什么我们需要强大而灵活的工具来帮助我们实现这一目标。

在过去的几年中,Streamlit逐渐崭露头角,并迅速成为构建交互式数据应用的首选工具之一。Streamlit是一个基于Python的开源库,其简洁的语法和直观的界面使得数据科学家和开发者能够快速构建出具备强大可视化功能的应用程序。

在本专栏的上二篇博客中,我们已经详细讲解了Streamlit中的几个常用数据可视化函数。现在,在本篇博客中,我将继续分享关于Streamlit的数据可视化知识,重点介绍st.vega_lite_chart、st.plotly_chart、st.bokeh_chart、st.pydeck_chart、st.graphviz_chart和st.map这几个函数的使用方法和参数。

通过阅读本篇博客,您将了解到如何使用这些强大的函数来绘制不同类型的图表和地图,并掌握如何自定义配置、调整样式和添加交互功能。让我们开始探索Streamlit中的数据可视化魅力吧!

2 使用st.vega_lite_chart绘制Vega-Lite图表

st.vega_lite_chart函数是Streamlit中用于绘制Vega-Lite图表的功能之一。Vega-Lite是一种用于描述交互式图形的高级语法,它提供了一套简单而强大的规则来映射数据到可视化属性。

下面我们将通过两个示例来展示st.vega_lite_chart函数的用法。

2.1 示例1:绘制散点图

在这个示例中,我们首先导入所需的库,生成随机的数据集,并创建一个包含’a’、'b’和’c’三个列的DataFrame。然后,我们使用st.vega_lite_chart函数来绘制一个散点图,图表中的每个点由’a’和’b’列的值确定,点的大小和颜色由’c’列的值确定。

import streamlit as st
import pandas as pd
import numpy as npchart_data = pd.DataFrame(np.random.randn(200, 3),columns=['a', 'b', 'c'])st.vega_lite_chart(chart_data, {'mark': {'type': 'circle', 'tooltip': True},'encoding': {'x': {'field': 'a', 'type': 'quantitative'},'y': {'field': 'b', 'type': 'quantitative'},'size': {'field': 'c', 'type': 'quantitative'},'color': {'field': 'c', 'type': 'quantitative'},},
})

在这个例子中,我们指定了散点图的标记类型为圆形,并为之提供了一个提示工具。同时,我们使用了Vega-Lite的编码方式来指定 x 轴和 y 轴的字段名称,并使用了 ‘size’ 和 ‘color’ 属性来决定点的大小和颜色。

在这里插入图片描述

2.2 示例2:自定义主题样式

Vega-Lite图表在Streamlit中默认使用Streamlit主题进行显示,这个主题简洁、用户友好,与应用程序的设计更好地结合在一起。从Streamlit 1.16.0版本开始,可以通过设置theme="streamlit"来使用Streamlit主题。如果想要禁用Streamlit主题,使用theme=None来使用Vega-Lite的原生主题。下面是一个示例展示了使用不同主题的图表:

import streamlit as st
from vega_datasets import datasource = data.cars()chart = {"mark": "point","encoding": {"x": {"field": "Horsepower","type": "quantitative",},"y": {"field": "Miles_per_Gallon","type": "quantitative",},"color": {"field": "Origin", "type": "nominal"},"shape": {"field": "Origin", "type": "nominal"},},
}tab1, tab2 = st.tabs(["Streamlit 主题(默认)", "Vega-Lite 原生主题"])with tab1:# 使用 Streamlit 主题,这是默认主题,您也可以省略 theme 参数st.vega_lite_chart(source, chart, theme="streamlit", use_container_width=True)with tab2:st.vega_lite_chart(source, chart, theme=None, use_container_width=True)

在这个示例中,我们使用了streamlit和vega_datasets库。我们从data.cars()中获取数据源,并创建一个包含图表配置的字典。然后,我们使用st.tabs函数创建两个选项卡,一个使用Streamlit主题,另一个使用Vega-Lite原生主题。在每个选项卡中,我们使用st.vega_lite_chart函数绘制了相应的图表,并设置了use_container_width=True以适应容器的宽度。

通过这个示例,您可以体验到不同主题对图表样式和整体应用程序的影响。Streamlit主题使用Streamlit的颜色调色板,能够与应用程序的设计更好地融合在一起。而Vega-Lite原生主题则是使用Vega-Lite的默认样式,可能与应用程序的设计略有不同。

希望这个指南能够帮助您理解如何使用st.vega_lite_chart函数来绘制Vega-Lite图表,并在需要时自定义主题样式。通过使用Streamlit和Vega-Lite,您可以轻松地创建交互式和美观的数据可视化图表。

在这里插入图片描述

在这里插入图片描述

3 使用st.plotly_chart函数创建Plotly图表

Plotly 是一个强大而受欢迎的 Python 库,用于创建交互式图表和可视化。结合 Streamlit,我们可以轻松地将 Plotly 图表嵌入到我们的应用中。在本篇文章中,我将详细介绍 st.plotly_chart 函数的使用方法和参数,并通过示例代码演示其功能。

3.1 st.plotly_chart函数的基本用法

在使用st.plotly_chart函数之前,我们需要先导入必要的库,如下所示:

import streamlit as st
import plotly.express as px

接下来,我们可以使用 Plotly 生成图表,并使用 st.plotly_chart 函数将其嵌入到 Streamlit 应用中。以下是一个示例代码:

# 添加直方图数据
x1 = np.random.randn(200) - 2
x2 = np.random.randn(200)
x3 = np.random.randn(200) + 2# 将数据分组在一起
hist_data = [x1, x2, x3]
group_labels = ['Group 1', 'Group 2', 'Group 3']# 使用自定义 bin_size 创建 distplot
fig = ff.create_distplot(hist_data, group_labels, bin_size=[.1, .25, .5])# 绘制图表
st.plotly_chart(fig, use_container_width=True)

在这个示例中,我们使用 plotly.figure_factory 中的 create_distplot 函数创建了一个直方图。然后,我们通过调用 st.plotly_chart 函数将图表嵌入到 Streamlit 应用中。通过设置参数 use_container_width=True,图表将根据容器的宽度自适应调整大小。

在这里插入图片描述

3.2 st.plotly_chart 函数的更多用法

除了基本用法外,st.plotly_chart 函数还支持其他参数,可以进一步定制图表的外观和行为。下面是一些常用的参数:

  • theme:设置图表的主题。可以设置为 “streamlit”(使用 Streamlit 的默认主题)或 None(使用 Plotly
    的原生主题)。
  • sharing:设置图表的共享模式。可以设置为 “streamlit”(共享数据和回调函数)或 “auto”(自动检测共享模式)。
  • config:设置 Plotly 的配置选项。可以通过字典传递多个配置选项。

让我们通过一个例子来演示更多的用法:

import plotly.express as px
import streamlit as stdf = px.data.gapminder()fig = px.scatter(df.query("year==2007"),x="gdpPercap",y="lifeExp",size="pop",color="continent",hover_name="country",log_x=True,size_max=60,
)tab1, tab2 = st.tabs(["Streamlit 主题(默认)", "Plotly 原生主题"])
with tab1:# 使用 Streamlit 主题,这是默认的方式,也可以省略 theme 参数st.plotly_chart(fig, theme="streamlit", use_container_width=True)
with tab2:# 使用 Plotly 的原生主题st.plotly_chart(fig, theme=None, use_container_width=True)

在这个示例中,我们使用了一个自定义的颜色映射(color_continuous_scale=“reds”),并使用 st.tabs 函数将两个不同主题的图表放置在选项卡中。这样,我们可以轻松切换主题并比较两种不同外观的图表。

我们还可以通过其他参数来进一步定制图表的外观和行为,例如调整图表的大小、添加交互功能等。通过熟悉 Plotly 和 Streamlit 的文档,我们可以发现更多的配置选项和用法。

在这里插入图片描述

在这里插入图片描述

4 Streamlit 与 Bokeh 结合进行数据可视化

在数据科学和数据分析工作中,数据可视化是一种强大的工具,可以帮助我们更好地理解数据、发现模式和趋势,并向他人传达我们的发现。Streamlit 是一种用于构建交互式数据应用的Python库,而Bokeh是一款用于构建交互式Web应用的Python可视化库。本文将介绍如何在Streamlit中使用Bokeh进行数据可视化,并通过一个实例来演示其用法。

首先,我们需要导入所需的库和模块。以下是示例代码:

import streamlit as st
from bokeh.plotting import figure

接下来,我们创建一些示例数据,并使用Bokeh创建一个简单的折线图。以下是示例代码:

x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]p = figure(title='simple line example',x_axis_label='x',y_axis_label='y')p.line(x, y, legend_label='Trend', line_width=2)

在以上代码中,我们创建了一个Bokeh的figure对象p,并设置了折线图的标题、x轴和y轴的标签。然后,我们使用line方法在图表上绘制了一条折线,指定了数据x和y,并设置了图例标签和线宽。

现在,我们已经创建了一个Bokeh图表对象p,接下来我们将在Streamlit应用程序中展示它。我们可以使用st.bokeh_chart函数将Bokeh图表p嵌入到Streamlit应用程序中。以下是示例代码:

st.bokeh_chart(p, use_container_width=True)

以上代码中,我们使用st.bokeh_chart函数将Bokeh图表对象p嵌入到Streamlit应用程序中,并通过参数use_container_width=True使图表自适应容器的宽度。

在这里插入图片描述

5 使用 st.graphviz_chart 函数创建图形和网络图

在数据可视化中,除了常见的统计图表外,图形和网络图也是非常有用的工具。Streamlit 提供了 st.graphviz_chart 函数,使我们能够轻松地在博文、应用程序或报告中创建图形和网络图。本文将介绍如何使用 st.graphviz_chart 函数,并结合示例代码来演示它的用法。

5.1 st.graphviz_chart 函数简介

st.graphviz_chart 函数是 Streamlit 中的一个内置函数,用于绘制图形和网络图。它接受一个图形对象或用 DOT 语言表示的图形字符串作为输入,并在 Streamlit 应用程序的界面上呈现图像。

示例 1

让我们从一个简单的示例开始。在这个示例中,我们将使用 graphviz 库创建一个有向图,并使用 st.graphviz_chart 函数显示它。

import streamlit as st
import graphviz# 创建一个图形对象
graph = graphviz.Digraph()
graph.edge('run', 'intr')
graph.edge('intr', 'runbl')
graph.edge('runbl', 'run')
graph.edge('run', 'kernel')
graph.edge('kernel', 'zombie')
graph.edge('kernel', 'sleep')
graph.edge('kernel', 'runmem')
graph.edge('sleep', 'swap')
graph.edge('swap', 'runswap')
graph.edge('runswap', 'new')
graph.edge('runswap', 'runmem')
graph.edge('new', 'runmem')
graph.edge('sleep', 'runmem')# 使用 st.graphviz_chart 函数显示图形
st.graphviz_chart(graph)

在上面的代码中,我们首先导入了必要的库,并创建了一个 Digraph 对象 graph。然后,我们使用 graph.edge 方法来添加边,构建了一个有向图。最后,我们使用 st.graphviz_chart 函数将图形显示在 Streamlit 应用程序的界面上。

运行上述代码段,在 Streamlit 应用程序的界面上你将看到一个呈现了我们创建的图形的图形视图。

在这里插入图片描述

示例 2

除了使用 graphviz 库创建图形对象外,st.graphviz_chart 函数还支持直接使用 DOT 语言表示的图形字符串。让我们通过另一个示例来说明这一点。

st.graphviz_chart('''digraph {run -> intrintr -> runblrunbl -> runrun -> kernelkernel -> zombiekernel -> sleepkernel -> runmemsleep -> swapswap -> runswaprunswap -> newrunswap -> runmemnew -> runmemsleep -> runmem}
''')

在上述代码中,我们将图形字符串直接传递给了 st.graphviz_chart 函数。此图形使用 DOT 语言表示,通过指定顶点和边的关系来描述图形结构。

运行上述代码段,在 Streamlit 应用程序的界面上你将看到一个与示例 1 中相同的图形视图。

6 使用st.map函数显示地图和散点图

在数据可视化中,地图可视化是一种常用的方式。st.map函数是Streamlit中用于创建地图可视化的函数,它结合了地图和散点图,具备自动居中和自动缩放的功能。

使用步骤:

Step1:导入必要的库和模块:

import streamlit as st
import pandas as pd
import numpy as np

Step2:准备数据:

df = pd.DataFrame(np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],columns=['lat', 'lon'])

Step3:使用st.map函数进行地图可视化:

st.map(df)

示例1:基本地图可视化

import streamlit as st
import pandas as pd
import numpy as npdf = pd.DataFrame(np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],columns=['lat', 'lon'])st.map(df)

此示例中,我们首先创建一个包含随机经纬度的DataFrame,然后使用st.map函数在地图上绘制散点图,自动进行居中和缩放。

在这里插入图片描述

示例2:自定义散点图样式

import streamlit as st
import pandas as pd
import numpy as npdf = pd.DataFrame(np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],columns=['lat', 'lon'])st.map(df, size=20, color='#0044ff')

在上述示例中,我们可以通过设置size参数和color参数来自定义数据点的大小和颜色。

示例3:使用其他列动态设置经纬度、大小和颜色

import streamlit as st
import pandas as pd
import numpy as npdf = pd.DataFrame({"col1": np.random.randn(1000) / 50 + 37.76,"col2": np.random.randn(1000) / 50 + -122.4,"col3": np.random.randn(1000) * 100,"col4": np.random.rand(1000, 4).tolist(),
})st.map(df,latitude='col1',longitude='col2',size='col3',color='col4')

在此示例中,我们使用了一个包含多列数据的DataFrame,并指定了latitude、longitude、size和color的列名参数来动态设置经纬度、大小和颜色。

在这里插入图片描述

7 结语

本文全面介绍了Streamlit库在数据可视化中的应用及其各个函数的使用方法和参数。我们首先认识到数据可视化在数据分析和数据科学领域的重要性,以及Streamlit作为一款Python库的优势和便捷性。随后,我们详细探讨了st.vega_lite_chart、st.plotly_chart、st.bokeh_chart、st.pydeck_chart、st.graphviz_chart和st.map这些常用的Streamlit函数。

通过使用这些函数,我们可以利用Vega-Lite、Plotly、Bokeh、PyDeck和Graphviz等强大的可视化工具,轻松创建各种交互式图表、地图和网络图。我们学会了如何加载数据、选择图表类型、自定义样式和布局,并通过设置参数实现丰富的交互功能。这使得数据科学家和分析师能够更有效地探索、解释和传达数据的见解。

Streamlit的使用简单且灵活,使得开发交互式数据应用变得更加高效。我们还强调了Streamlit在数据可视化方面的优势,例如便捷的部署、即时的反馈和方便的共享。它为数据相关的任务提供了一个更加直观和动态的展示方式,帮助我们更好地理解数据、发现模式和展示结果。

通过进一步的学习和探索,我们可以掌握更多Streamlit的功能和扩展,进一步提升数据可视化的能力。请参考相关文档、教程和示例,继续挖掘Streamlit在数据科学和可视化领域的潜力。

在这里插入图片描述

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

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

相关文章

软件测试/测试开发丨Python 学习笔记 之 链表

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接:https://ceshiren.com/t/topic/26458 链表与数组的区别 复杂度分析 时间复杂度数组链表插入删除O(n)O(1)随机访问O(1)O(n) 其他角度分析 内存连续,利用CPU的机制&#xff0…

ABAP FICO 凭证替代 凭证校验

凭证校验 1.T-CODE--->GGX2--->GBLR-->ZRGGBR000 2.将程序RGGBR000 复制为ZRGGBR000 3.GGB0--》财务会计--》凭证抬头或者行项目维护检验规则 4.OB28 维护特定的公司代码和调用点和确认,活动等级设置为1 5.GGB4-->激活校验 凭证替代 1.T-CODE--->GG…

设计模式之建造者模式与原型模式

目录 建造者模式 简介 使用场景 优缺点 模式结构 实现 原型模式 简介 应用场景 优缺点 模式结构 实现 建造者模式 简介 将复杂对象的构建与表示进行分离,使得同样的构建过程可以创建不同的表示。是一个将复杂的对象分解为多个简单的对象,然…

计算机毕设之基于python+django+mysql的影片数据爬取与数据分析(包含源码+文档+部署教程)

影片数据爬取与数据分析分为两个部分,即管理员和用户。该系统是根据用户的实际需求开发的,贴近生活。从管理员处获得的指定账号和密码可用于进入系统和使用相关的系统应用程序。管理员拥有最大的权限,其次是用户。管理员一般负责整个系统的运…

浏览器输入URL后的执行过程

浏览器输入URL后,在结果返回浏览器前,主要有以下过程:1、用户输入网址后,浏览器发起DNS查询请求;2、建立TCP连接;3、发送HTTP请求;4、服务器处理请求;5、返回HTTP响应;6、…

linux操作系统的权限的深入学习

1.Linux权限的概念 Linux下有两种用户:超级用户(root)、普通用户。 超级用户:可以再linux系统下做任何事情,不受限制 普通用户:在linux下做有限的事情。 超级用户的命令提示符是“#”,普通用户…

骨传导耳机会影响听力吗?这是真的吗?

首先正常的使用骨传导耳机并不会影响我们的听力!那是为什么呢?? 因为骨传导是一种声音传导方式,可以通过人的颅骨、骨迷路、内耳淋巴液传递、螺旋器、听神经、听觉中枢来传递声波。 相对于通过耳道声波的经典声音传导方式&#x…

哪吒汽车“三头六臂”之「浩智电驱」

撰文 / 翟悦 编审 / 吴晰 8月21日,在哪吒汽车科技日上,哪吒汽车发布“浩智战略2025”以及浩智技术品牌2.0。根据公开信息,主编梳理了以下几点:◎浩智滑板底盘支持400V/800V双平台◎浩智电驱包括180kW 400V电驱系统和250kW 800…

【Vue3 知识第五讲】条件渲染、列表渲染知识详解

文章目录 一、条件渲染1.1 概述1.2 演示代码 二、列表渲染2.1 使用 指令 v-for 遍历数组2.2 **使用 指令 v-for 遍历对象** 十、案例作业十一、总结 在前端开发过程中,条件和循环是经常被用到的逻辑。vue中封装了自己的组件渲染指令,可以更加方便的帮助开…

ARM寄存器组

CM3 拥有通用寄存器 R0‐R15 以及一些特殊功能寄存器。 R0-R7,通用目的寄存器 R0-R7也被称为低组寄存器,所有指令可以访问它们,它们的字长为32位,复位后的初始值是不可预料的。 R8-R12,通用目的寄存器 R8-R12也被称…

LeetCode(力扣)700. 二叉搜索树中的搜索Python

LeetCode20. 有效的括号 题目链接代码 题目链接 https://leetcode.cn/problems/search-in-a-binary-search-tree/ 代码 递归法 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val #…

基于stm32的烟雾浓度检测报警proteus仿真设计(仿真+程序+讲解)

基于STM32的烟雾浓度检测报警仿真设计(仿真程序讲解) 1.主要功能2.仿真3. 程序4. 资料清单&下载链接 基于STM32的烟雾浓度检测报警仿真设计(仿真程序讲解) 仿真图proteus 8.9 程序编译器:keil 5 编程语言:C语言 设计编号&a…

只考一门数据结构!安徽工程大学计算机考研

安徽工程大学 考研难度(☆) 内容:23考情概况(拟录取和复试分析)、院校概况、23专业目录、23复试详情、各专业考情分析、各科目考情分析。 正文992字,预计阅读:3分钟 2023考情概况 安徽工程大…

乱糟糟的YOLOv8-detect和pose训练自己的数据集

时代在进步,yolo在进步,我还在踏步,v8我浅搞了一下detect和pose,记录一下,我还是要吐槽一下,为啥子这个模型就放在了这个文件深处,如图。 以下教程只应用于直接应用yolov8,不修改。…

内网实战1

1、信息收集: 使用nmap做端口扫描: nmap -sV -Pn -T4 192.168.26.174重要端口:80、445、139、135、3306 目录扫描: 访问80端口:发现一个网站是phpstudy搭建的; 发现一个mysql数据库,那我们…

BTC价格预测:灰度突如其来的胜利是否会打破“九月魔咒”?

加密市场即将进入第三季度交易的最后阶段,由于9月份被视为是比特币的下跌时期,大多数投资者都预测加密货币之王将会进一步下跌。然而,事情却发生了逆转,灰度突如其来的胜利是否会打破“九月魔咒”? 受该事件影响&#…

解决win10 wsl子系统安装的ubuntu环境中lsof,netstat命令查看端口没有任何输出的问题

最近有个以前的ssm项目需要在新电脑上运行测试一下,发现需要redis环境,看了官网说:有两种选择: 1. 要么在虚拟机比如vmware安装linux基础环境,然后再安装redis 2. 要么可以利用win10的wsl linux子系统安装ubuntu&…

JVM-性能优化工具 MAT

一、MAT下载和安装 1、概述 MAT(Memory Analyzer Tool)工具是一款功能强大的]ava堆内存分析器。可以用于查找内存泄漏以及查看内存消耗情况。MAT是基于Eclipse开发的,不仅可以单独使用,还可以作为插件的形式嵌入在Eclipse中使用…

022-从零搭建微服务-短信服务(二)

写在最前 如果这个项目让你有所收获,记得 Star 关注哦,这对我是非常不错的鼓励与支持。 源码地址(后端):https://gitee.com/csps/mingyue 源码地址(前端):https://gitee.com/csps…

(笔记一)利用open_cv在图像上进行点标记,文字注记,画圆、多边形、椭圆

(1)CV2中的绘图函数: cv2.line() 绘制线条cv2.circle() 绘制圆cv2.rectangle() 绘制矩形cv2.ellipse() 绘制椭圆cv2.putText() 添加注记 (2)注释 img表示需要绘制的图像color表示线条的颜色,采用颜色矩阵…