Crear y mostrar gráficos de Matplotlib en Streamlit

Matplotlib es una biblioteca ampliamente utilizada para la creación de visualizaciones en Python. Para mostrar gráficos de Matplotlib en Streamlit, se utiliza la función st.pyplot(), que permite renderizar figuras directamente en la aplicación.

Para comenzar, es necesario importar las bibliotecas necesarias:

import streamlit as st
import matplotlib.pyplot as plt
import numpy as np

A continuación, se pueden generar datos y crear una figura de Matplotlib. Por ejemplo, para crear un gráfico de líneas que representa una función seno:

# Generar datos
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Crear la figura y los ejes
fig, ax = plt.subplots()

# Graficar los datos
ax.plot(x, y)

# Mostrar el gráfico en Streamlit
st.pyplot(fig)

En este ejemplo, se utiliza NumPy para crear un conjunto de datos y luego se grafica con Matplotlib. La figura fig se muestra en la aplicación mediante st.pyplot(fig).

Es posible personalizar el gráfico añadiendo títulos, etiquetas y estilos. Por ejemplo:

# Personalizar el gráfico
ax.set_title('Gráfico de la función Seno')
ax.set_xlabel('Eje X')
ax.set_ylabel('Eje Y')

# Aplicar un estilo de Matplotlib
plt.style.use('ggplot')

# Mostrar el gráfico actualizado
st.pyplot(fig)

Los gráficos de Matplotlib pueden ser interactivos en Streamlit cuando se combinan con widgets. Por ejemplo, se puede utilizar un slider para modificar los parámetros del gráfico en tiempo real:

# Slider para controlar la frecuencia
frecuencia = st.slider('Frecuencia', min_value=0.1, max_value=5.0, value=1.0, step=0.1)

# Actualizar los datos con la frecuencia seleccionada
y = np.sin(frecuencia * x)

# Actualizar el gráfico
ax.clear()
ax.plot(x, y)
ax.set_title(f'Función Seno con frecuencia {frecuencia}')
ax.set_xlabel('Eje X')
ax.set_ylabel('Eje Y')

# Mostrar el gráfico interactivo
st.pyplot(fig)

En este código, el valor de frecuencia se ajusta mediante el slider, y el gráfico se actualiza para reflejar el cambio.

Se pueden mostrar múltiples gráficos de Matplotlib en una aplicación de Streamlit utilizando estructuras de disposición como columnas o expansores. Por ejemplo:

# Crear columnas para organizar los gráficos
col1, col2 = st.columns(2)

with col1:
    # Gráfico de la función seno
    fig1, ax1 = plt.subplots()
    ax1.plot(x, np.sin(x))
    ax1.set_title('Seno de x')
    st.pyplot(fig1)

with col2:
    # Gráfico de la función coseno
    fig2, ax2 = plt.subplots()
    ax2.plot(x, np.cos(x))
    ax2.set_title('Coseno de x')
    st.pyplot(fig2)

Este enfoque permite presentar información de manera comparativa, lo cual es útil en análisis de datos.

La integración de Matplotlib en Streamlit permite aprovechar toda la potencia de visualización de Matplotlib dentro de aplicaciones interactivas y fáciles de crear, lo que es ideal para desarrollar herramientas de análisis y presentación de datos.

Ejemplo práctico

Aplicación con gráficos de matplotlib:

import streamlit as st
import pandas as pd
import seaborn as sns
import matplotlib.pyplot as plt
import plotly.express as px

# Cargar datos
df = sns.load_dataset('penguins').dropna()
st.title('Gráficos de Matplotlib, Seaborn y Plotly en Streamlit')
st.table(df.head())

# Matplotlib
st.header('1. Gráficos de Matplotlib')
fig, ax = plt.subplots(figsize=(6,4))
ax.hist(df['flipper_length_mm'], bins=20, color='skyblue', edgecolor='black')
ax.set_title('Histograma de flipper length')
ax.set_xlabel('flipper_length_mm')
ax.set_ylabel('Frecuencia')
st.pyplot(fig)

fig, ax = plt.subplots(figsize=(6,4))
ax.boxplot(df['bill_length_mm'], showmeans=True)
ax.set_title('Boxplot de bill_length_mm')
ax.set_xlabel('bill_length_mm')
ax.set_ylabel('Frecuencia')
st.pyplot(fig)

species_colors = {'Adelie': 'blue', 'Gentoo': 'green', 'Chinstrap': 'red'}
fig, ax = plt.subplots(figsize=(6,4))
for specie, color in species_colors.items():
    df_specie = df[df['species'] == specie]
    ax.scatter(x=df_specie['bill_length_mm'], y=df_specie['body_mass_g'], color=color, label=specie)
    
ax.set_title('Relación entre bill_length_mm y body_mass_g')
ax.set_xlabel('bill_length_mm')
ax.set_ylabel('body_mass_g')
ax.legend()
ax.grid()
st.pyplot(fig)

Resultado:

Crear y mostrar gráficos de Seaborn en Streamlit

Seaborn es una biblioteca de visualización de datos basada en Matplotlib que proporciona una interfaz de alto nivel para dibujar gráficos estadísticos atractivos. Integrar Seaborn en Streamlit permite crear aplicaciones interactivas y dinámicas para análisis de datos avanzados.

Para comenzar, es necesario importar las bibliotecas necesarias:

import streamlit as st
import seaborn as sns
import matplotlib.pyplot as plt

Seaborn ofrece conjuntos de datos de ejemplo que facilitan la demostración de sus capacidades. Por ejemplo, utilizaremos el conjunto de datos **'tips'** que viene incluido en Seaborn:

# Cargar conjunto de datos
data = sns.load_dataset('tips')

Para crear un gráfico, como un diagrama de dispersión (scatter plot), se puede hacer lo siguiente:

# Crear gráfico con Seaborn
fig, ax = plt.subplots()
sns.scatterplot(data=data, x='total_bill', y='tip', hue='day', ax=ax)

# Mostrar el gráfico en Streamlit
st.pyplot(fig)

En este ejemplo, se crea un diagrama de dispersión que muestra la relación entre el total de la cuenta y la propina, diferenciando por día de la semana. La figura fig se muestra en la aplicación utilizando st.pyplot(fig).

Es posible personalizar el gráfico añadiendo títulos, etiquetas y ajustando la estética:

# Personalizar el gráfico
ax.set_title('Relación entre Total de la Cuenta y Propina')
ax.set_xlabel('Total de la Cuenta ($)')
ax.set_ylabel('Propina ($)')
sns.despine()

# Mostrar el gráfico actualizado
st.pyplot(fig)

Seaborn soporta una variedad de estilos predefinidos que pueden mejorar la apariencia de los gráficos. Por ejemplo, se puede establecer el estilo darkgrid:

# Aplicar estilo de Seaborn
sns.set_style('darkgrid')

Para hacer que los gráficos sean interactivos, se pueden utilizar los widgets de Streamlit. Por ejemplo, permitir al usuario seleccionar las variables a graficar:

# Lista de opciones para el usuario
opciones = data.columns.tolist()

# Widgets de selección
x_var = st.selectbox('Selecciona la variable del eje X', opciones, index=0)
y_var = st.selectbox('Selecciona la variable del eje Y', opciones, index=1)

# Recrear el gráfico con las variables seleccionadas
fig, ax = plt.subplots()
sns.scatterplot(data=data, x=x_var, y=y_var, ax=ax)

# Mostrar el gráfico interactivo
st.pyplot(fig)

En este código, los usuarios pueden elegir qué variables del conjunto de datos desean visualizar, lo que proporciona una experiencia más dinámica.

También se pueden incorporar filtros adicionales para segmentar los datos. Por ejemplo, usar un widget para seleccionar el día de la semana:

# Widget para seleccionar el día
dias = data['day'].unique()
dia_seleccionado = st.multiselect('Selecciona el día', dias, default=dias)

# Filtrar los datos según selección
data_filtrada = data[data['day'].isin(dia_seleccionado)]

# Crear el gráfico con los datos filtrados
fig, ax = plt.subplots()
sns.scatterplot(data=data_filtrada, x='total_bill', y='tip', hue='day', ax=ax)

# Mostrar el gráfico filtrado
st.pyplot(fig)

Este enfoque permite al usuario explorar los datos de manera más profunda, centrándose en los segmentos que le interesen.

Seaborn también ofrece gráficos más complejos, como diagramas de cajas (box plots) y violines (violin plots), que pueden ser incorporados fácilmente:

# Seleccionar tipo de gráfico
tipo_grafico = st.radio('Selecciona el tipo de gráfico', ['Box Plot', 'Violin Plot'])

# Crear el gráfico según selección
fig, ax = plt.subplots()

if tipo_grafico == 'Box Plot':
    sns.boxplot(data=data, x='day', y='total_bill', ax=ax)
else:
    sns.violinplot(data=data, x='day', y='total_bill', ax=ax)

ax.set_title(f'{tipo_grafico} de Total de la Cuenta por Día')

# Mostrar el gráfico
st.pyplot(fig)

Al proporcionar opciones de visualización, se mejora la interactividad y se ayuda al usuario a entender mejor los datos.

Para visualizar distribuciones, Seaborn ofrece funciones como sns.histplot y sns.kdeplot. Por ejemplo:

# Widget para seleccionar variable numérica
variable_numerica = st.selectbox('Selecciona una variable numérica para el histograma', ['total_bill', 'tip', 'size'])

# Crear histograma
fig, ax = plt.subplots()
sns.histplot(data=data, x=variable_numerica, kde=True, ax=ax)
ax.set_title(f'Histograma de {variable_numerica}')

# Mostrar el histograma
st.pyplot(fig)

Con este código, se genera un histograma de la variable seleccionada, incluyendo una estimación de densidad de Kernel para visualizar mejor la distribución.

Es importante considerar la sincronización entre los widgets y los gráficos para asegurar que los cambios en los controles se reflejen inmediatamente en las visualizaciones.

Además, es posible utilizar mapas de calor (heatmaps) para visualizar matrices de correlación:

# Selecciona solo las columnas numéricas
num_cols = data.select_dtypes(include=['int64', 'float64']).columns

# Calcular matriz de correlación
correlacion = data[num_cols].corr()

# Crear mapa de calor
fig, ax = plt.subplots()
sns.heatmap(correlacion, annot=True, cmap='coolwarm', ax=ax)
ax.set_title('Matriz de Correlación')

# Mostrar el mapa de calor
st.pyplot(fig)

Este tipo de visualización es útil para identificar relaciones entre variables numéricas y detectar patrones en los datos.

Para garantizar un rendimiento óptimo en la aplicación, es recomendable manejar correctamente las figuras:

# Cerrar la figura si no se va a reutilizar
plt.close(fig)

Al integrar Seaborn en Streamlit, se combina la potencia estadística de Seaborn con la interactividad de Streamlit, permitiendo crear aplicaciones avanzadas para el análisis y visualización de datos.

Ejemplo

# Seaborn
st.header('2. Gráficos de seaborn')

fig, ax = plt.subplots(figsize=(6,4))
sns.kdeplot(df, x='body_mass_g')
sns.rugplot(df, x='body_mass_g')
sns.histplot(df, x='body_mass_g', kde=True)
ax.set_title('Análisis univariante body_mass_g')
st.pyplot(fig)

fig, ax = plt.subplots(figsize=(6,4))
sns.scatterplot(df, x='bill_length_mm', y='body_mass_g', hue='species', palette='viridis', ax=ax)
ax.set_title('Relación entre bill_length_mm y body_mass_g')
ax.set_xlabel('bill_length_mm')
ax.set_ylabel('body_mass_g')
ax.legend()
ax.grid()
st.pyplot(fig)
# ax=ax si solo creamos una gráfica y no necesitamos controlar los ejes de manera explícita entonces no hace falta.
# ax=ax si queremos insertar la gráfica en un eje específico, creando varias subplots dentro del mismo gráfico podría hacer falta.


fig, ax = plt.subplots(figsize=(6,4))
sns.heatmap(df.corr(numeric_only=True).round(2), annot=True, cmap='viridis')
ax.set_title('Correlaciones')
st.pyplot(fig)

Resultado:

Crear y mostrar gráficos de Plotly en Streamlit

Plotly es una biblioteca de visualización interactiva que permite crear gráficos sofisticados y altamente configurables. En Streamlit, es posible integrar gráficos de Plotly de manera sencilla, aprovechando su interactividad dentro de las aplicaciones.

Para comenzar, es necesario importar las bibliotecas requeridas:

import streamlit as st
import plotly.express as px
import pandas as pd

Se puede utilizar Plotly Express para crear gráficos de forma rápida y conveniente. Por ejemplo, para crear un gráfico de dispersión utilizando un conjunto de datos de muestra:

# Cargar conjunto de datos de ejemplo
df = px.data.iris()

# Crear gráfico de dispersión
fig = px.scatter(df, x='sepal_width', y='sepal_length', color='species')

# Mostrar el gráfico en Streamlit
st.plotly_chart(fig)

En este ejemplo, se utiliza el conjunto de datos Iris proporcionado por Plotly Express. El gráfico fig se muestra en la aplicación mediante st.plotly_chart(fig).

Los gráficos de Plotly son interactivos por defecto, permitiendo al usuario acercar, alejar y desplazar la vista, así como mostrar información al pasar el cursor sobre los puntos de datos.

Es posible personalizar el gráfico añadiendo títulos y ajustando parámetros. Por ejemplo:

# Personalizar el gráfico
fig.update_layout(title='Relación entre Ancho y Largo de los Sépalos')

# Mostrar el gráfico actualizado
st.plotly_chart(fig)

Para hacer que los gráficos sean dinámicos, se pueden incorporar widgets de Streamlit. Por ejemplo, permitir al usuario seleccionar la especie a mostrar:

# Lista de especies disponibles
especies = df['species'].unique()

# Widget de selección múltiple
especie_seleccionada = st.multiselect('Selecciona la especie', especies, default=especies)

# Filtrar el conjunto de datos
df_filtrado = df[df['species'].isin(especie_seleccionada)]

# Crear gráfico con datos filtrados
fig = px.scatter(df_filtrado, x='sepal_width', y='sepal_length', color='species')

# Mostrar el gráfico interactivo
st.plotly_chart(fig)

Con este código, el gráfico se actualiza dinámicamente de acuerdo a las especies seleccionadas, mejorando la experiencia del usuario.

Plotly también permite la creación de otros tipos de gráficos, como gráficos de líneas, barras, histogramas, y más. Por ejemplo, para crear un histograma de distribución:

# Crear histograma
fig = px.histogram(df, x='sepal_length', nbins=20, title='Distribución del Largo del Sépalo')

# Mostrar el histograma
st.plotly_chart(fig)

La interactividad de Plotly se puede combinar con los controles de Streamlit para crear aplicaciones más complejas. Por ejemplo, utilizar un slider para ajustar el número de bins en el histograma:

# Slider para ajustar el número de bins
bins = st.slider('Número de bins', min_value=1, max_value=50, value=5)

# Crear histograma con el número de bins seleccionado
fig = px.histogram(df, x='sepal_length', nbins=bins, title='Distribución del Largo del Sépalo')

# Mostrar el histograma interactivo
st.plotly_chart(fig)

La biblioteca Plotly también soporta la creación de gráficos tridimensionales. Por ejemplo:

# Crear gráfico 3D
fig = px.scatter_3d(df, x='sepal_length', y='sepal_width', z='petal_length', color='species')

# Mostrar el gráfico 3D
st.plotly_chart(fig)

Este gráfico permite al usuario rotar y explorar los datos en tres dimensiones, ofreciendo una perspectiva más profunda de las relaciones entre variables.

Además, es posible utilizar gráficos geoespaciales con Plotly. Por ejemplo, mostrar datos en un mapa:

# Cargar conjunto de datos geoespaciales de ejemplo
df_mapa = px.data.gapminder().query("year==2007")

# Crear mapa de coropletas
fig = px.choropleth(df_mapa, locations='iso_alpha', color='lifeExp',
                    hover_name='country', color_continuous_scale=px.colors.sequential.Plasma)

# Mostrar el mapa en Streamlit
st.plotly_chart(fig)

Este mapa muestra la esperanza de vida por país, permitiendo una visualización clara de datos geográficos.

Para crear gráficos más sofisticados, se puede utilizar la biblioteca Plotly Graph Objects. Por ejemplo, para crear un gráfico de cajas:

import plotly.graph_objects as go

# Crear gráfico de cajas
fig = go.Figure()

for especie in especies:
    df_especie = df[df['species'] == especie]
    fig.add_trace(go.Box(y=df_especie['sepal_length'], name=especie))

# Personalizar el gráfico
fig.update_layout(title='Distribución del Largo del Sépalo por Especie')

# Mostrar el gráfico
st.plotly_chart(fig)

Este código genera un gráfico de cajas que compara la distribución del largo del sépalo entre las diferentes especies.

Además, Plotly soporta la creación de gráficos financieros, tales como los gráficos de velas:

# Cargar datos financieros de ejemplo
df_finanzas = px.data.stocks()

# Crear gráfico de velas
fig = go.Figure(data=[go.Candlestick(x=df_finanzas['date'],
                                     open=df_finanzas['AAPL'],
                                     high=df_finanzas['AAPL'] + 5,
                                     low=df_finanzas['AAPL'] - 5,
                                     close=df_finanzas['AAPL'])])

# Mostrar el gráfico financiero
st.plotly_chart(fig)

Con este código, se muestra un gráfico financiero básico, útil para aplicaciones relacionadas con mercados bursátiles.

Es importante mencionar que st.plotly_chart() admite un parámetro **use_container_width=True**, que permite ajustar el gráfico al ancho del contenedor:

# Mostrar el gráfico ajustado al ancho del contenedor
st.plotly_chart(fig, use_container_width=True)

Esto mejora la responsividad de la aplicación en diferentes dispositivos y tamaños de pantalla.

Ejemplo

# Plotly:
st.header('3. Gráficos de Plotly')
df_grouped = df.groupby('species', as_index=False)['body_mass_g'].mean()
st.table(df_grouped)
# fig = px.bar(df_grouped)
fig = px.bar(df_grouped, x='species', y='body_mass_g', color='species', title='Peso medio por especie')
st.plotly_chart(fig)


fig = px.scatter(df, x='bill_length_mm', y='body_mass_g', color='species')
st.plotly_chart(fig)

fig = px.scatter(df, x='bill_length_mm', y='flipper_length_mm', color='species', size='body_mass_g', width=800, height=700)
st.plotly_chart(fig)

fig = px.scatter(df, x='bill_length_mm', y='flipper_length_mm', color='species', facet_col='sex')
st.plotly_chart(fig)

# alternativa, cargar datos demo directamente con plotly.
df_tips = px.data.tips()

Resultado:

La diferencia es que Plotly genera gráficos interactivos, en comparación a los gráficos estáticos de matplotlib y seaborn.