Columna de explicación Streamlit (12): Visualización de datos: explicación detallada del dibujo del gráfico (Parte 2)

1. Introducción

La visualización de datos juega un papel vital en el campo del análisis de datos y la ciencia de datos. Al visualizar datos, podemos comprender mejor los patrones y tendencias detrás de ellos para tomar decisiones y predicciones precisas. Sin embargo, convertir datos sin procesar en gráficos significativos no es fácil. Por eso necesitamos herramientas poderosas y flexibles que nos ayuden a lograrlo.

En los últimos años, Streamlit ha surgido y rápidamente se ha convertido en una de las herramientas de referencia para crear aplicaciones de datos interactivas. Streamlit es una biblioteca de código abierto basada en Python. Su sintaxis concisa y su interfaz intuitiva permiten a los científicos y desarrolladores de datos crear rápidamente aplicaciones con potentes funciones de visualización.

En los dos últimos blogs de esta columna, explicamos en detalle varias funciones de visualización de datos comúnmente utilizadas en Streamlit. Ahora, en este blog, continuaré compartiendo el conocimiento de visualización de datos sobre Streamlit, enfocándome en el uso de las funciones st.vega_lite_chart, st.plotly_chart, st.bokeh_chart, st.pydeck_chart, st.graphviz_chart y el método y parámetros st.map. .

Al leer este blog, aprenderá a utilizar estas poderosas funciones para dibujar diferentes tipos de gráficos y mapas, y dominará cómo personalizar configuraciones, ajustar estilos y agregar funciones interactivas. ¡Comencemos a explorar el encanto de la visualización de datos en Streamlit!

2 Utilice st.vega_lite_chart para dibujar gráficos Vega-Lite

La función st.vega_lite_chart es una de las funciones de Streamlit para dibujar gráficos Vega-Lite. Vega-Lite es una gramática de alto nivel para describir gráficos interactivos que proporciona un conjunto de reglas simple pero poderoso para asignar datos a propiedades visuales.

A continuación mostraremos el uso de la función st.vega_lite_chart a través de dos ejemplos.

2.1 Ejemplo 1: dibujar un diagrama de dispersión

En este ejemplo, primero importamos las bibliotecas requeridas, generamos un conjunto de datos aleatorio y creamos un DataFrame con tres columnas 'a', 'b' y 'c'. Luego, usamos la función st.vega_lite_chart para dibujar un diagrama de dispersión, donde cada punto en el gráfico está determinado por los valores en las columnas 'a' y 'b', y el tamaño y color de los puntos están determinados por el valores en la columna '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'},
    },
})

En este ejemplo, especificamos el tipo de marcador del diagrama de dispersión como círculo y le proporcionamos información sobre herramientas. Al mismo tiempo, utilizamos el método de codificación Vega-Lite para especificar los nombres de los campos del eje x y del eje y, y utilizamos los atributos 'tamaño' y 'color' para determinar el tamaño y el color de los puntos.

2.2 Ejemplo 2: estilo de tema personalizado

Los gráficos Vega-Lite se muestran en Streamlit de forma predeterminada utilizando el tema Streamlit, que es simple, fácil de usar y está mejor integrado con el diseño de la aplicación. A partir de Streamlit 1.16.0, puede utilizar el tema Streamlit configurando theme="streamlit". Si desea deshabilitar el tema Streamlit, use theme=None para usar el tema nativo de Vega-Lite. A continuación se muestra un ejemplo que muestra gráficos que utilizan diferentes temas:

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
    )

En este ejemplo, utilizamos las bibliotecas streamlit y vega_datasets. Obtenemos la fuente de datos de data.cars() y creamos un diccionario que contiene la configuración del gráfico. Luego usamos la función st.tabs para crear dos pestañas, una con el tema Streamlit y la otra con el tema nativo Vega-Lite. En cada pestaña, dibujamos el gráfico correspondiente usando la función st.vega_lite_chart y configuramos use_container_width=True para que se ajuste al ancho del contenedor.

A través de este ejemplo, puede experimentar el impacto de diferentes temas en el estilo del diagrama y la aplicación general. Los temas Streamlit utilizan la paleta de colores de Streamlit, que combina mejor con el diseño de la aplicación. Los temas nativos de Vega-Lite, por otro lado, utilizan los estilos predeterminados de Vega-Lite, que pueden diferir ligeramente del diseño de la aplicación.

Espero que esta guía le ayude a comprender cómo utilizar la función st.vega_lite_chart para dibujar gráficos Vega-Lite y personalizar estilos de temas si es necesario. Al utilizar Streamlit y Vega-Lite, puede crear fácilmente gráficos de visualización de datos hermosos e interactivos.

3 Utilice la función st.plotly_chart para crear un gráfico Plotly

Plotly es una biblioteca Python potente y popular para crear visualizaciones y gráficos interactivos. Combinado con Streamlit, podemos integrar fácilmente gráficos Plotly en nuestras aplicaciones. En este artículo, presentaré en detalle el uso y los parámetros de la función st.plotly_chart y demostraré su funcionalidad mediante código de muestra.

3.1 Uso básico de la función st.plotly_chart

Antes de usar la función st.plotly_chart, necesitamos importar la biblioteca necesaria de la siguiente manera:

import streamlit as st
import plotly.express as px

A continuación, podemos usar Plotly para generar un gráfico e incrustarlo en una aplicación Streamlit usando la función st.plotly_chart. Aquí hay un código de muestra:

# 添加直方图数据
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)

En este ejemplo, creamos un histograma usando la función create_distplot de plotly.figure_factory. Luego, incrustamos el gráfico en la aplicación Streamlit llamando a la función st.plotly_chart. Al establecer el parámetro use_container_width=True, el tamaño del gráfico cambiará de forma adaptativa según el ancho del contenedor.

3.2 Más usos de la función st.plotly_chart

Además del uso básico, la función st.plotly_chart también admite parámetros adicionales que pueden personalizar aún más la apariencia y el comportamiento del gráfico. A continuación se muestran algunos parámetros de uso común:

• tema: establece el tema del gráfico. Se puede configurar en "streamlit" (use el tema predeterminado de Streamlit) o ​​Ninguno (use el
  tema nativo de Plotly).
• compartir: establece el modo de compartir del gráfico. Se puede configurar en "streamlit" (compartir datos y funciones de devolución de llamada) o "auto" (detectar automáticamente el modo de compartir).
• config: establece las opciones de configuración para Plotly. Se pueden pasar múltiples opciones de configuración como diccionario.

Demostremos más uso con un ejemplo:

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)

En este ejemplo, usamos un mapa de colores personalizado (color_continuous_scale="reds") y usamos la función st.tabs para colocar dos gráficos con diferentes temas en pestañas. De esta manera, podemos cambiar fácilmente de tema y comparar gráficos con dos apariencias diferentes.

También podemos personalizar aún más la apariencia y el comportamiento del gráfico a través de otros parámetros, como ajustar el tamaño del gráfico, agregar funciones interactivas, etc. Al familiarizarnos con la documentación de Plotly y Streamlit, podemos descubrir más opciones de configuración y uso.

4 Streamlit combinado con Bokeh para visualización de datos

En el trabajo de ciencia y análisis de datos, la visualización de datos es una herramienta poderosa que puede ayudarnos a comprender mejor los datos, detectar patrones y tendencias y comunicar nuestros hallazgos a otros. Streamlit es una biblioteca de Python para crear aplicaciones de datos interactivas y Bokeh es una biblioteca de visualización de Python para crear aplicaciones web interactivas. Este artículo presentará cómo utilizar Bokeh en Streamlit para la visualización de datos y demostrará su uso mediante un ejemplo.

Primero, necesitamos importar las bibliotecas y módulos necesarios. Aquí hay un código de muestra:

import streamlit as st
from bokeh.plotting import figure

A continuación, creamos algunos datos de muestra y usamos Bokeh para crear un gráfico de líneas simple. Aquí hay un código de muestra:

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)

En el código anterior, creamos un objeto de figura Bokeh p y configuramos el título, las etiquetas del eje x y del eje y del gráfico de líneas. Luego dibujamos una línea en el gráfico usando el método de línea, especificando los datos xey, y configurando la etiqueta de la leyenda y el ancho de la línea.

Ahora que hemos creado un objeto de gráfico Bokeh p, lo mostraremos en la aplicación Streamlit. Podemos incrustar un gráfico Bokeh p en una aplicación Streamlit usando la función st.bokeh_chart. Aquí hay un código de muestra:

st.bokeh_chart(p, use_container_width=True)

En el código anterior, usamos la función st.bokeh_chart para incrustar el objeto del gráfico Bokeh p en la aplicación Streamlit y usamos el parámetro use_container_width=True para hacer que el gráfico se adapte al ancho del contenedor.

5 Cree gráficos y diagramas de red usando la función st.graphviz_chart

En visualización de datos, además de los cuadros estadísticos comunes, los gráficos y diagramas de red también son herramientas muy útiles. Streamlit proporciona la función st.graphviz_chart, que nos permite crear fácilmente gráficos y diagramas de red en publicaciones de blogs, aplicaciones o informes. Este artículo presentará cómo utilizar la función st.graphviz_chart y demostrará su uso con código de muestra.

5.1 Introducción a la función st.graphviz_chart

La función st.graphviz_chart es una función incorporada en Streamlit para dibujar gráficos y diagramas de red. Toma como entrada un objeto gráfico o una cadena de gráfico representada en el lenguaje DOT y representa la imagen en la interfaz de la aplicación Streamlit.

Ejemplo 1

Comencemos con un ejemplo simple. En este ejemplo, crearemos un gráfico dirigido usando la biblioteca Graphviz y lo mostraremos usando la función 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)

En el código anterior, primero importamos la biblioteca necesaria y creamos un gráfico de objeto Digraph. Luego, usamos el método graph.edge para agregar aristas, construyendo un gráfico dirigido. Finalmente, usamos la función st.graphviz_chart para mostrar el gráfico en la interfaz de la aplicación Streamlit.

Ejecute el fragmento de código anterior y verá una vista gráfica en la interfaz de la aplicación Streamlit que presenta el gráfico que creamos.

Ejemplo 2

Además de utilizar la biblioteca Graphviz para crear objetos gráficos, la función st.graphviz_chart también admite cadenas de gráficos representadas directamente en el lenguaje DOT. Ilustremos esto con otro ejemplo.

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
    }
''')

En el código anterior, pasamos la cadena del gráfico directamente a la función st.graphviz_chart. Este gráfico se expresa utilizando el lenguaje DOT y la estructura del gráfico se describe especificando la relación de vértices y aristas.

Ejecute el fragmento de código anterior y verá la misma vista de gráfico que en el Ejemplo 1 en la interfaz de la aplicación Streamlit.

6 Utilice la función st.map para mostrar mapas y diagramas de dispersión.

En la visualización de datos, la visualización de mapas es una forma común. La función st.map es una función utilizada para crear una visualización de mapa en Streamlit, combina un mapa y un diagrama de dispersión, y tiene las funciones de centrado y zoom automáticos.

Pasos de uso:

Paso 1: Importe las bibliotecas y módulos necesarios:

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

Paso 2: preparar datos:

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

Paso 3: utilice la función st.map para visualizar el mapa:

st.map(df)

Ejemplo 1: visualización de mapas básica

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)

En este ejemplo, primero creamos un DataFrame que contiene latitud y longitud aleatorias, luego usamos la función st.map para dibujar un diagrama de dispersión en el mapa, centrándolo y escalando automáticamente.

Ejemplo 2: estilo de diagrama de dispersión personalizado

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')

En el ejemplo anterior, podemos personalizar el tamaño y el color de los puntos de datos configurando el parámetro de tamaño y el parámetro de color.

Ejemplo 3: establecer dinámicamente la latitud, la longitud, el tamaño y el color utilizando otras columnas

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')

En este ejemplo, utilizamos un DataFrame con varias columnas de datos y especificamos los parámetros del nombre de la columna de latitud, longitud, tamaño y color para establecer dinámicamente la latitud, la longitud, el tamaño y el color.

7 Epílogo

Este artículo presenta de manera integral la aplicación de la biblioteca Streamlit en la visualización de datos y el uso y parámetros de cada función. Primero nos dimos cuenta de la importancia de la visualización de datos en el campo del análisis de datos y la ciencia de datos, y de las ventajas y conveniencia de Streamlit como biblioteca de Python. Luego, analizamos en detalle las funciones Streamlit comúnmente utilizadas st.vega_lite_chart, st.plotly_chart, st.bokeh_chart, st.pydeck_chart, st.graphviz_chart y st.map.

Al utilizar estas funciones, podemos aprovechar potentes herramientas de visualización como Vega-Lite, Plotly, Bokeh, PyDeck y Graphviz para crear fácilmente varios gráficos, mapas y diagramas de red interactivos. Aprendimos cómo cargar datos, seleccionar tipos de gráficos, personalizar estilos y diseños e implementar funciones interactivas enriquecidas mediante la configuración de parámetros. Esto permite a los científicos y analistas de datos explorar, interpretar y comunicar conocimientos a partir de los datos de forma más eficaz.

Streamlit es fácil de usar y flexible, lo que hace que el desarrollo de aplicaciones de datos interactivas sea más eficiente. También destacamos las ventajas de Streamlit en la visualización de datos, como una fácil implementación, retroalimentación instantánea y fácil intercambio. Proporciona una visualización más intuitiva y dinámica para tareas relacionadas con datos, lo que nos ayuda a comprender mejor los datos, descubrir patrones y presentar resultados.

A través de más estudio y exploración, podemos dominar más funciones y extensiones de Streamlit y mejorar aún más la capacidad de visualización de datos. Consulte la documentación, los tutoriales y los ejemplos relevantes para continuar explorando el potencial de Streamlit en el campo de la ciencia y la visualización de datos.