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

2023-11-03

在这里插入图片描述

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 np

chart_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 data

source = 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 st

df = 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 -> intr
        intr -> runbl
        runbl -> run
        run -> kernel
        kernel -> zombie
        kernel -> sleep
        kernel -> runmem
        sleep -> swap
        swap -> runswap
        runswap -> new
        runswap -> runmem
        new -> runmem
        sleep -> 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 np

df = 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 np

df = 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 np

df = 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在数据科学和可视化领域的潜力。

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • 为什么opencv用GPU实现比用CPU实现的慢?

    问题 打算通过OpenCV的GPU模块优化现有代码的运行效率 怀抱着美好愿望开始了代码的改写工作 改写的过程并不顺利 遇到了不少问题 例如 gpu模块提供的接口非常坑爹 相当一部分不支持浮点类型 像histogram integral这类常
  • SpringCloud实践(四) 通过Feign组件实现消费者

    在前面使用了RestTemplate和Ribbon来实现了服务消费者 Feign 是一个集成了Ribbon和Eureka的组件 通过声明的方式 就可以实现Http客户端 简化了http客户端 服务消费者 对于Feign 我们只要记得两个特点
  • Aspose工具实现word和ppt转pdf功能及遇到的一些问题

    Aspose工具包从word和ppt转到pdf的实现过程 直接放项目地址 说一下实现过程中遇到的坑 直接放项目地址 https github com lichangliu1098 File2Pdf 说一下实现过程中遇到的坑 jar包的引入
  • Zabbix部署详细步骤

    以下是在Ubuntu上安装Zabbix的详细步骤 1 更新系统 使用以下命令更新Ubuntu系统 sudo apt get update sudo apt get upgrade 2 安装依赖项 在安装Zabbix之前 需要先安装一些依赖项
  • 教你快速上手Flex弹性盒布局(容器属性)

    目录 简介 一 Flex布局语法 1 1 display flex 二 Flex属性 三 容器属性 3 1 flex direction 3 2 flex direction row 3 3 flex direction row rever
  • 【华为OD统一考试B卷

    在线OJ 已购买本专栏用户 请私信博主开通账号 在线刷题 运行出现 Runtime Error 0Aborted 请忽略 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一修改为 2023A卷和2023B卷 你收
  • Tachyon内存文件系统

    Tachyon内存文件系统 Tachyon是以内存为中心的分布式文件系统 拥有高性能和容错能力 能够为集群框架 如Spark MapReduce 提供可靠的内存级速度的文件共享服务 从软件栈的层次来看 Tachyon是位于现有大数据计算框架
  • 使用GitHub的一些小知识合集

    文章目录 一 FastGithub 1 稳定可靠的github加速神器 FastGithub 2 github加速神器 FastGithub 二 README md添加图片 1 怎么给README md添加图片 两种方法 图文教程 2 在R
  • OpenCV代码提取:morphologyEx函数的实现

    Morphological Operations A set of operations that process images based on shapes Morphological operations apply a struct
  • keil软件安装与破解

    目录 目录 下载 安装 破解 下载 学习51单片机必要的开发工具是 KEIL C51 下载密码dsfs 安装 按照一般安装软件顺序即可 此处随便填写 破解 注意 需以管理员身份 运行 按照如下图片步骤 弹出如下对话框 再打开软件按如下操作
  • 解决pycharm错误:Error updating package list: connect timed out解决

    方法是在 Manage Repositories 中 修改数据来源 默认的是 https pypi python org simple 我们可将其替换为如下的几个数据来源 这些都是国内的pip镜像 清华 https pypi tuna ts
  • Vue3 emits选项将Emit派发事件可以对参数进行验证。

    Vue官方建议我们在组件中所有的emit事件都能在组件的emits选项中声明 emits参数有俩种形式对象和数组 对象里面可以配置带校验emit事件 为null的时候代表不校验 校验的时候 会把emit事件的参数传到校验函数的参数里面 当校
  • Python第三方库之MedPy

    文章目录 1 MedPy简介 2 MedPy安装 3 MedPy常用函数 3 1 medpy io load image 3 2 medpy metric binary dc result reference 3 3 medpy metri
  • < Linux >:环境变量

    目录 环境变量 常见的环境变量 基本概念 查看环境变量内容的方法 测试环境变量PATH 与环境变量相关的命令 Linux操作系统下C C 程序代码中获取环境变量的方式 环境变量的组织方式 环境变量通常具有全局属性 环境变量 问题 注意 可执
  • JavaScript基础语言

    1 JavaScript采用Unicode字符集编写的 区分大小写 但HTML不区分大小写 与JavaScript同名的标签和属性 可以大写也可以小写 2 JavaScript存在两种形式的注释 行尾注释 和 多行注释 3 标识符就是一个名
  • 光束平差法(Bundle Adjust)

    光束平差法 代价函数 代价函数求解 Levenberg Marquardt方法 代码实现 流程图 光束平差法 采用光束平差法对射影空间下的多个相机运动矩阵及非编码元三维结构进行优化 光束平差法一般在各种重建算法的最后一步使用 这种优化方法的
  • 虚幻官方项目《CropOut》技术解析 之 程序化岛屿生成器(IslandGenerator)

    开个新坑详细分析一下虚幻官方发布的 CropOut 文章会同步发布到我在知乎 CSDN的专栏里 文章目录 概要 Create Island 几何体生成部分 随机种子 Step 1 Step 2 Step 3 Step 4 Step 5 St
  • Python—爬虫之BeautifulSoup模块(解析—提取数据)

    Python 爬虫之BeautifulSoup模块 解析 提取数据 安装BeautifulSoup模块 解析数据 提取数据 find 提取出满足条件的第一个数据 find all 提取出满足条件所有数据 Tag 对象的属性和方法 安装Bea
  • .NET混淆器 Dotfuscator保护机制——重命名

    Dotfuscator是一个 NET的Obfuscator 它提供企业级的应用程序保护 大大降低了盗版 知识产权盗窃和篡改的风险 Dotfuscator的分层混淆 加密 水印 自动失效 防调试 防篡改 报警和防御技术 为世界各地成千上万的应
  • Streamlit 讲解专栏(十二):数据可视化-图表绘制详解(下)

    文章目录 1 前言 2 使用st vega lite chart绘制Vega Lite图表 2 1 示例1 绘制散点图 2 2 示例2 自定义主题样式 3 使用st plotly chart函数创建Plotly图表 3 1 st plotl