SundayTheQuant

Crea Dashboards Interactivos para Análisis de Datos con Streamlit y Python

¡Hola a todos! Hoy estoy emocionado de compartir con ustedes cómo podemos llevar nuestras visualizaciones de datos al siguiente nivel creando dashboards interactivos con una de mis librerías favoritas de Python: Streamlit. Si alguna vez pensaste que construir aplicaciones web requería un conocimiento profundo de frontend, ¡prepárate para cambiar de opinión! Streamlit hace que sea increíblemente sencillo transformar tus scripts de Python en hermosas aplicaciones web interactivas.

Introducción: El Poder de los Dashboards Interactivos

En el mundo del análisis de datos, la visualización es clave. No basta con tener datos; necesitamos presentarlos de una manera que sea fácil de entender, explorar y que permita tomar decisiones informadas. Los dashboards interactivos nos permiten hacer precisamente eso: transformar datos crudos en historias visuales dinámicas.

Python, con su vasto ecosistema de librerías, es una herramienta formidable para el análisis de datos. Sin embargo, compartir esos análisis más allá de un Jupyter Notebook puede ser un desafío. Aquí es donde Streamlit brilla. Con unas pocas líneas de código Python, podemos desplegar aplicaciones web con sliders, selectores y gráficos que reaccionan a las interacciones del usuario, todo sin necesidad de saber HTML, CSS o JavaScript. En este artículo, les guiaré paso a paso para construir su propio dashboard.

Metodología: Preparando el Terreno

Preparación del Entorno de Desarrollo

Lo primero es asegurarnos de que tenemos todas las herramientas necesarias. Siempre recomiendo trabajar con entornos virtuales para mantener nuestras dependencias de proyecto aisladas. Si usas `conda`, puedes crear un entorno así:

conda create -n streamlit_dashboard python=3.9
conda activate streamlit_dashboard

Si prefieres `venv`, los comandos serían:

python -m venv streamlit_dashboard
source streamlit_dashboard/bin/activate  # En Linux/macOS
.\streamlit_dashboard\Scripts\activate   # En Windows

Una vez activado el entorno, instalaremos las librerías esenciales: Streamlit para la interfaz, Pandas para la manipulación de datos, y Matplotlib, Seaborn y Plotly para las visualizaciones.

pip install streamlit pandas matplotlib seaborn plotly

Selección de Datasets Públicos

Para este tutorial, he seleccionado dos datasets clásicos y fácilmente accesibles que nos permitirán demostrar diversas capacidades de visualización:

  • Iris Dataset: Un conjunto de datos muy popular en Machine Learning, ideal para mostrar relaciones entre variables numéricas y categorizar datos. Lo obtendremos directamente desde un repositorio de GitHub.
https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv
  • Palmer Penguins Dataset: Otro excelente dataset para visualización que contiene medidas de diferentes especies de pingüinos. Nos permitirá crear gráficos de dispersión y distribuciones. También lo cargaremos desde GitHub.
https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins_linter.csv

Diseño de la Arquitectura de la Interfaz de Usuario

Antes de escribir el código, es útil tener una idea de cómo queremos que se vea y funcione nuestro dashboard. Mi plan es el siguiente:

  • Una barra lateral (sidebar) para la selección del dataset y los controles de filtro. Esto mantendrá la interfaz limpia y organizada.
  • El área principal del dashboard mostrará la tabla de datos seleccionada y los gráficos correspondientes.
  • Los usuarios podrán elegir el dataset con un selector.
  • Tendremos filtros interactivos (sliders y selectores múltiples) para las columnas numéricas y categóricas.
  • Una opción para descargar los datos filtrados.

Este diseño busca una experiencia de usuario intuitiva, permitiendo una exploración de datos eficiente.

Codigos: Construyendo Nuestro Dashboard

Script Streamlit Base: Cargando Datos y Visualizaciones Iniciales

Empecemos con la estructura básica de nuestra aplicación Streamlit. Creamos un archivo `app.py` y empezamos a codificar. Utilizaremos `@st.cache_data` para cargar nuestros datasets, lo que mejora significativamente el rendimiento al evitar recargar los datos en cada interacción.

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

st.set_page_config(layout="wide")

st.title("📊 Dashboards Interactivos con Streamlit y Python")

# Función para cargar datos con caché
@st.cache_data
def load_data(dataset_name):
    if dataset_name == "Iris":
        data_url = "https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv"
    elif dataset_name == "Palmer Penguins":
        data_url = "https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins_linter.csv"
    else:
        return pd.DataFrame() # Retorna un DataFrame vacío si no se selecciona

    df = pd.read_csv(data_url)
    return df

# Barra lateral para selección de dataset
st.sidebar.header("Configuración del Dashboard")
dataset_selected = st.sidebar.selectbox(
    "Selecciona un Dataset:",
    ("Iris", "Palmer Penguins")
)

df = load_data(dataset_selected)

if not df.empty:
    st.subheader(f"Explorando el Dataset: {dataset_selected}")
    st.dataframe(df.head())

    st.markdown("---")

    st.subheader("Visualizaciones Básicas")

    # Visualizaciones para el dataset Iris
    if dataset_selected == "Iris":
        st.write("#### Relación entre Largo y Ancho de Sépalo por Especie (Iris)")
        fig_iris_scatter = px.scatter(df, x="sepal_length", y="sepal_width", color="species",
                                      title="Largo vs Ancho de Sépalo")
        st.plotly_chart(fig_iris_scatter, use_container_width=True)

        st.write("#### Conteo de Especies (Iris)")
        fig_iris_bar = px.bar(df, x="species", title="Conteo de Especies de Iris")
        st.plotly_chart(fig_iris_bar, use_container_width=True)

    # Visualizaciones para el dataset Palmer Penguins
    elif dataset_selected == "Palmer Penguins":
        # Limpiar datos nulos que Plotly no maneja bien directamente
        df_penguins_cleaned = df.dropna(subset=['bill_length_mm', 'flipper_length_mm', 'body_mass_g', 'species'])

        st.write("#### Largo de Pico vs Largo de Aleta por Especie (Penguins)")
        fig_penguins_scatter = px.scatter(df_penguins_cleaned, x="bill_length_mm", y="flipper_length_mm", color="species",
                                          hover_data=['island', 'sex'],
                                          title="Largo de Pico vs Largo de Aleta de Pingüinos")
        st.plotly_chart(fig_penguins_scatter, use_container_width=True)

        st.write("#### Distribución de Masa Corporal (Penguins)")
        fig_penguins_hist = px.histogram(df_penguins_cleaned, x="body_mass_g", color="species",
                                         title="Distribución de Masa Corporal de Pingüinos")
        st.plotly_chart(fig_penguins_hist, use_container_width=True)

else:
    st.warning("Selecciona un dataset para comenzar.")

Para ejecutar esta aplicación, guarda el código como `app.py` y luego abre tu terminal, navega al directorio donde guardaste el archivo y ejecuta:

streamlit run app.py

Esto abrirá la aplicación en tu navegador web. Verás una barra lateral con el selector de dataset y, al seleccionar uno, aparecerá una vista previa de los datos y los gráficos básicos.

Dashboard principal con gráficos de línea, barra y dispersión

Implementando Funcionalidades Adicionales: Filtros y Descarga de Datos

Ahora, hagamos nuestro dashboard realmente interactivo añadiendo filtros y la opción de descargar los datos. Añadiremos estos elementos a la barra lateral.

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

st.set_page_config(layout="wide")

st.title("📊 Dashboards Interactivos con Streamlit y Python")

# Función para cargar datos con caché
@st.cache_data
def load_data(dataset_name):
    if dataset_name == "Iris":
        data_url = "https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv"
    elif dataset_name == "Palmer Penguins":
        data_url = "https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins_linter.csv"
    else:
        return pd.DataFrame()

    df = pd.read_csv(data_url)
    return df

# Barra lateral para selección de dataset y filtros
st.sidebar.header("Configuración del Dashboard")
dataset_selected = st.sidebar.selectbox(
    "Selecciona un Dataset:",
    ("Iris", "Palmer Penguins")
)

df = load_data(dataset_selected)

if not df.empty:
    st.subheader(f"Explorando el Dataset: {dataset_selected}")
    st.dataframe(df.head())

    st.markdown("---")

    # --- Lógica de Filtrado ---
    st.sidebar.subheader("Filtros de Datos")
    filtered_df = df.copy() # Trabajar con una copia para no modificar el original

    # Obtener columnas numéricas y categóricas
    numerical_cols = filtered_df.select_dtypes(include=['number']).columns.tolist()
    categorical_cols = filtered_df.select_dtypes(include=['object', 'category']).columns.tolist()

    # Filtros para columnas numéricas (sliders)
    for col in numerical_cols:
        if col in filtered_df.columns and not filtered_df[col].isnull().all(): # Solo si la columna existe y no es todo NaN
            min_val = float(filtered_df[col].min())
            max_val = float(filtered_df[col].max())
            step_val = (max_val - min_val) / 100 # Pequeño paso para el slider

            selected_range = st.sidebar.slider(
                f"Rango para {col}",
                min_value=min_val,
                max_value=max_val,
                value=(min_val, max_val),
                step=step_val
            )
            filtered_df = filtered_df[(filtered_df[col] >= selected_range[0]) & (filtered_df[col] <= selected_range[1])]

    # Filtros para columnas categóricas (multiselect)
    for col in categorical_cols:
        if col in filtered_df.columns and not filtered_df[col].isnull().all():
            unique_values = filtered_df[col].unique().tolist()
            selected_values = st.sidebar.multiselect(
                f"Selecciona {col}",
                options=unique_values,
                default=unique_values # Por defecto, todos seleccionados
            )
            filtered_df = filtered_df[filtered_df[col].isin(selected_values)]

    st.subheader("Datos Filtrados")
    st.dataframe(filtered_df)

    st.markdown("---")

    st.subheader("Visualizaciones Interactivas")

    # Visualizaciones para el dataset Iris
    if dataset_selected == "Iris":
        st.write("#### Relación entre Largo y Ancho de Sépalo por Especie (Iris)")
        fig_iris_scatter = px.scatter(filtered_df, x="sepal_length", y="sepal_width", color="species",
                                      title="Largo vs Ancho de Sépalo")
        st.plotly_chart(fig_iris_scatter, use_container_width=True)

        st.write("#### Conteo de Especies (Iris)")
        fig_iris_bar = px.bar(filtered_df, x="species", title="Conteo de Especies de Iris")
        st.plotly_chart(fig_iris_bar, use_container_width=True)

    # Visualizaciones para el dataset Palmer Penguins
    elif dataset_selected == "Palmer Penguins":
        # Limpiar datos nulos que Plotly no maneja bien directamente para los gráficos
        df_penguins_cleaned_filtered = filtered_df.dropna(subset=['bill_length_mm', 'flipper_length_mm', 'body_mass_g', 'species'])

        st.write("#### Largo de Pico vs Largo de Aleta por Especie (Penguins)")
        fig_penguins_scatter = px.scatter(df_penguins_cleaned_filtered, x="bill_length_mm", y="flipper_length_mm", color="species",
                                          hover_data=['island', 'sex'],
                                          title="Largo de Pico vs Largo de Aleta de Pingüinos")
        st.plotly_chart(fig_penguins_scatter, use_container_width=True)

        st.write("#### Distribución de Masa Corporal (Penguins)")
        fig_penguins_hist = px.histogram(df_penguins_cleaned_filtered, x="body_mass_g", color="species",
                                         title="Distribución de Masa Corporal de Pingüinos")
        st.plotly_chart(fig_penguins_hist, use_container_width=True)

    # Opción de descarga de datos
    st.markdown("---")
    st.subheader("Descargar Datos Filtrados")
    csv_download = filtered_df.to_csv(index=False).encode('utf-8')
    st.download_button(
        label="Descargar datos filtrados como CSV",
        data=csv_download,
        file_name=f"{dataset_selected}_filtered.csv",
        mime="text/csv",
    )
else:
    st.warning("Selecciona un dataset para comenzar.")

Con estos cambios, tu dashboard ahora es mucho más dinámico. Los sliders y selectores en la barra lateral te permitirán refinar los datos en tiempo real, y los gráficos se actualizarán automáticamente. ¡Es la magia de Streamlit en acción!

GIF: Demostración de filtro interactivo

Además, he añadido un botón de “Descargar datos filtrados como CSV” que permite a los usuarios exportar el subconjunto de datos que están visualizando en ese momento, una funcionalidad muy útil para compartir o realizar análisis adicionales.

Personalización y Despliegue (Un Breve Apunte)

Streamlit ofrece muchas opciones para personalizar el diseño de tu dashboard. Puedes usar `st.columns` para organizar elementos en columnas, `st.expander` para secciones colapsables, y `st.markdown` para formatear texto con Markdown.

Cuando estés listo para compartir tu dashboard con el mundo, Streamlit Cloud es la forma más sencilla de desplegarlo. Simplemente conecta tu repositorio de GitHub (que crearemos a continuación), y Streamlit se encargará del resto. Alternativamente, puedes desplegar tu aplicación en servicios de cloud como Heroku, AWS, o Google Cloud utilizando Docker.

Repositorio de Código en GitHub

Para que puedan replicar fácilmente este proyecto, he configurado un repositorio en GitHub donde encontrarán el código completo de `app.py`, así como instrucciones detalladas en el archivo `README.md`. Pueden acceder a él aquí:

[ENLACE A REPOSITORIO GITHUB]

El `README.md` incluirá:

  • Una descripción del proyecto.
  • Instrucciones de configuración del entorno.
  • Cómo ejecutar la aplicación.
  • Los enlaces a los datasets utilizados.
  • Una breve explicación de las funcionalidades.

Conclusiones: Tu Camino Hacia Dashboards Excepcionales

¡Y ahí lo tienen! Hemos construido juntos un dashboard interactivo completo utilizando Streamlit y Python. Hemos cubierto desde la preparación del entorno y la selección de datos hasta la creación de visualizaciones básicas y la implementación de funcionalidades avanzadas como filtros y descarga de datos.

Streamlit democratiza la creación de aplicaciones de datos, permitiéndonos a los desarrolladores y científicos de datos enfocarnos en la lógica del negocio y las visualizaciones, en lugar de perdernos en la complejidad del desarrollo web. Espero que este tutorial les inspire a explorar aún más las posibilidades que Streamlit ofrece para sus propios proyectos.

Promocion: Lleva tus Habilidades al Siguiente Nivel

Si te ha gustado este contenido y quieres profundizar en el fascinante mundo de la ciencia de datos con Python y R, te invito a conocer mi curso completo en Udemy. En él, cubro desde los fundamentos hasta técnicas avanzadas de análisis y visualización de datos, preparando para enfrentar cualquier desafío en el campo.

🔗 [Accede al curso de Ciencia de Datos con Python y R aquí](https://www.udemy.com/course/ciencia-de-datos-con-python-r/?referralCode=B9A5A600EEECE5E538C1)

¡Recuerda que siempre siempre vas a aprender un bit a la vez!

🤖 Automatiza tu trading en 5 días con Python

Únete a mi Mini-Curso gratuito por email. Aprende a extraer datos reales, crear indicadores cuantitativos y hacer backtesting profesional.