What is a single stream interactive dashboard?

Crea un Dashboard en Tiempo Real con Streamlit

26/03/2021

Valoración: 4.07 (16943 votos)

¿Alguna vez has pensado que podrías construir un dashboard que se actualiza en tiempo real utilizando únicamente Python, sin necesidad de escribir una sola línea de HTML, CSS o JavaScript? La respuesta es un rotundo ¡sí! Gracias a la poderosa y sencilla librería Streamlit, lo que antes requería equipos de desarrollo web y semanas de trabajo, ahora está al alcance de cualquier científico de datos o desarrollador de Python en cuestión de horas. Los dashboards en tiempo real son herramientas cruciales para monitorear indicadores clave de rendimiento (KPIs) en una variedad de campos, desde el seguimiento de los mercados financieros y datos de sensores IoT, hasta la supervisión del entrenamiento de modelos de inteligencia artificial. Si manejas datos que fluyen constantemente y necesitas visualizarlos de manera dinámica, este tutorial es para ti.

What is a streamlit analytics dashboard?
Analytics dashboards are a great way for data scientists to communicate insights to companies, but they can often be expensive and time-consuming to build. Streamlit is an easy-to-use library for Python that simplifies the process. Companies have a great interest in clearly communicating their ML-based predictive analytics to their clients.

En este artículo, te guiaremos a través de un completo recorrido para construir tu propio dashboard dinámico. Aprenderás desde la importación de las librerías necesarias y la configuración básica, hasta el diseño de una interfaz de usuario intuitiva y, lo más importante, cómo hacer que tu dashboard se actualice automáticamente para reflejar los datos más recientes. Prepárate para desbloquear un nuevo nivel en tus proyectos de visualización de datos.

Índice de Contenido

¿Qué es Streamlit y por qué es ideal para Dashboards?

Streamlit es una librería de código abierto para Python que permite a los científicos de datos y analistas crear y compartir aplicaciones web personalizadas para proyectos de machine learning y ciencia de datos con una facilidad asombrosa. Su principal atractivo radica en su simplicidad: convierte scripts de datos en aplicaciones web compartibles en minutos. Tradicionalmente, para comunicar los resultados de un modelo de machine learning o los insights de un análisis de datos, las empresas recurrían a herramientas costosas como Tableau o a desarrollos a medida con frameworks complejos como Django o Flask, procesos que suelen ser caros y lentos.

What is the streamelements dashboard?
The StreamElements dashboard allows you to manage chat commands, create an alert box that will show chat alerts, and has an overlays section where you can set up your own unique graphics. Its browser source design allows you to use it alongside other programs to take your streaming to the max.

Streamlit rompe con esa barrera. Permite a los equipos de datos construir aplicaciones interactivas sin necesidad de tener experiencia en desarrollo frontend. Puedes mostrar texto, visualizaciones, resultados de modelos y, lo que es más importante, permitir que los usuarios interactúen con los datos a través de widgets como deslizadores, botones y menús desplegables. Esto no solo facilita la presentación de resultados, sino que también aumenta la transparencia y la interpretabilidad de los modelos, un aspecto crucial para que los clientes y stakeholders confíen en las predicciones generadas.

Preparando el Terreno: Librerías y Datos

Antes de empezar a construir, necesitamos reunir nuestras herramientas. Para este proyecto, utilizaremos un conjunto de librerías de Python que trabajarán en conjunto para dar vida a nuestro dashboard.

  • Streamlit (st): El corazón de nuestra aplicación. Será el framework que usaremos para construir toda la interfaz web.
  • Pandas (pd): Indispensable para la manipulación y el análisis de datos. Lo usaremos para leer y filtrar nuestra fuente de datos.
  • NumPy (np): La librería fundamental para la computación científica en Python. La emplearemos para realizar cálculos y, crucialmente, para simular la llegada de datos en tiempo real.
  • Plotly Express (px): Una librería de visualización de datos de alto nivel que nos permitirá crear gráficos interactivos y atractivos con muy poco código.
  • Time: Un módulo estándar de Python que nos ayudará a simular el flujo de datos en vivo mediante la introducción de pausas en nuestro código.

Puedes instalar las librerías necesarias ejecutando pip install streamlit pandas numpy plotly en tu terminal. Una vez instaladas, el primer paso en nuestro script será importarlas:

import time import numpy as np import pandas as pd import plotly.express as px import streamlit as st

Para este ejemplo, utilizaremos un conjunto de datos público en formato CSV. Sin embargo, es importante recordar que tu fuente de datos podría ser cualquier cosa: una API, un archivo JSON, una base de datos SQL o un archivo que se actualiza periódicamente. Para optimizar el rendimiento, cargaremos los datos dentro de una función y utilizaremos el decorador @st.cache_data (o @st.experimental_memo en versiones más antiguas). Esto se conoce como caching, y le dice a Streamlit que ejecute la función solo una vez; en las siguientes ejecuciones de la app, reutilizará el resultado almacenado en memoria, evitando así descargar o procesar los datos repetidamente.

What can Streamlit dashboards do?
Streamlit dashboards can be updated in real time. Its ability to render dynamic dashboards that can be updated in real time is one of the main reasons people use Streamlit. I gather that most users are using Streamlit to create static dashboards or at most are utilizing the multitude of widgets available to redact dataframes that are then fed back into their visualizations.
dataset_url = "https://raw.githubusercontent.com/Lexie88rus/bank-marketing-analysis/master/bank.csv" @st.cache_data def get_data() -> pd.DataFrame: return pd.read_csv(dataset_url) df = get_data()

Diseñando la Estructura y la Interfaz del Dashboard

Con los datos cargados, es hora de dar forma a nuestra aplicación. Un buen dashboard debe ser claro, informativo y fácil de usar. Seguiremos una estructura típica que incluye una configuración de página, un título, filtros, KPIs y gráficos.

Configuración Básica de la Página

Lo primero es configurar los metadatos de nuestra página web. Usamos st.set_page_config() para definir el título que aparecerá en la pestaña del navegador, un ícono y el diseño de la página. Usar layout="wide" es ideal para dashboards, ya que aprovecha todo el ancho de la pantalla.

How to build a real-time live dashboard with streamlit?
Execute streamlit run app.py for the dashboard to start running on your localhost and the link would be displayed in your Terminal and also opened as a new Tab in your default browser. Congratulations! You have learned how to build your own real-time live dashboard with Streamlit.
st.set_page_config( page_title="Dashboard de Datos en Tiempo Real", page_icon="✅", layout="wide", )

Título y Filtros de Alto Nivel

Todo dashboard necesita un título claro. Con st.title(), podemos añadir un encabezado principal a nuestra aplicación. A continuación, implementaremos un filtro interactivo. Un st.selectbox() es perfecto para crear un menú desplegable que permita al usuario seleccionar una categoría para filtrar todos los datos del dashboard. En nuestro caso, permitiremos filtrar por la columna "job". El valor seleccionado se guarda en una variable que luego usamos para filtrar nuestro DataFrame de Pandas.

st.title("Dashboard de Datos de Marketing en Tiempo Real") job_filter = st.selectbox("Seleccionar Profesión", pd.unique(df["job"])) df = df[df["job"] == job_filter]

Visualización de KPIs y Gráficos

Los KPIs (Indicadores Clave de Rendimiento) son métricas que resumen la información más importante. Para organizarlos de manera ordenada, podemos usar st.columns() para dividir la pantalla en varias columnas. Dentro de cada columna, usaremos st.metric() para mostrar un KPI. Esta función nos permite definir una etiqueta, un valor y un "delta", que indica el cambio con respecto a un valor anterior, muy útil para mostrar tendencias.

De manera similar, podemos organizar nuestros gráficos. Crearemos dos columnas y usaremos Plotly Express para generar un mapa de calor de densidad y un histograma. Streamlit integra Plotly a la perfección; simplemente creando la figura y llamándola o pasándola a st.write() es suficiente para que se renderice de forma interactiva.

Why should you choose streamline stock management software?
They root for us, and they aren’t shy about it. Streamline is the best choice on the market to manage and optimize stock levels. This software is the easiest way to start the demand planning and inventory optimization journey because it’s easy to implement.
# Creando columnas para KPIs kpi1, kpi2, kpi3 = st.columns(3) # ... (código para calcular y mostrar métricas con kpi1.metric, etc.) # Creando columnas para gráficos fig_col1, fig_col2 = st.columns(2) with fig_col1: st.markdown("### Mapa de Calor de Densidad") fig = px.density_heatmap(data_frame=df, y="age", x="marital") st.write(fig) with fig_col2: st.markdown("### Histograma de Edad") fig2 = px.histogram(data_frame=df, x="age") st.write(fig2)

Finalmente, para ofrecer una vista más granular, podemos mostrar la tabla de datos filtrada usando st.dataframe(df).

La Magia del Tiempo Real: Actualización Automática con `st.empty()`

Aquí llega la parte más emocionante: hacer que nuestro dashboard se actualice en tiempo real. Como no tenemos una fuente de datos que emita eventos constantemente, simularemos este comportamiento con un bucle. Dentro de este bucle, modificaremos nuestro DataFrame en cada iteración, por ejemplo, multiplicando algunas columnas numéricas por un factor aleatorio. La función time.sleep(1) pausará la ejecución durante un segundo, creando el efecto de una actualización por segundo.

How to build a real-time live dashboard with streamlit?
Execute streamlit run app.py for the dashboard to start running on your localhost and the link would be displayed in your Terminal and also opened as a new Tab in your default browser. Congratulations! You have learned how to build your own real-time live dashboard with Streamlit.

El componente clave para lograr la actualización visual es st.empty(). Esta función crea un contenedor vacío, un marcador de posición en nuestra aplicación. Luego, podemos rellenar este contenedor con cualquier elemento de Streamlit. Al colocar todo el código que dibuja nuestro dashboard (KPIs, gráficos, tablas) dentro de un bloque with asociado a este contenedor, y al poner todo esto dentro de nuestro bucle de simulación, logramos el efecto deseado. En cada iteración del bucle, el contenido antiguo del contenedor se borra y se reemplaza por el nuevo contenido generado con los datos actualizados. Esto crea una actualización fluida y sin parpadeos en la pantalla del usuario.

placeholder = st.empty() # Bucle de simulación for seconds in range(200): # Modificar el dataframe para simular nuevos datos df["age_new"] = df["age"] * np.random.choice(range(1, 5)) df["balance_new"] = df["balance"] * np.random.choice(range(1, 5)) with placeholder.container(): # Aquí va TODO el código de la UI que se debe actualizar: # KPIs, gráficos, tabla, etc. # ... (código de kpi.metric, st.write(fig), st.dataframe) time.sleep(1)

Tabla Comparativa: Streamlit vs. Otras Herramientas

CaracterísticaStreamlitFlask/DjangoTableau/Power BI
Curva de AprendizajeMuy baja (horas)Alta (semanas/meses)Baja-Media (días/semanas)
Velocidad de DesarrolloExtremadamente rápidaLentaRápida para dashboards estándar
Conocimientos RequeridosSolo PythonPython, HTML, CSS, JS, conceptos de backendInterfaz de arrastrar y soltar, DAX/M
CostoGratis (código abierto)Gratis (código abierto)Licencias costosas por usuario
PersonalizaciónAlta, con el poder de PythonTotal, control absoluto sobre todoLimitada a las opciones de la herramienta

Preguntas Frecuentes (FAQ)

¿Necesito saber HTML, CSS o JavaScript para usar Streamlit?
No, en absoluto. Esa es una de sus mayores ventajas. Streamlit se encarga de todo el frontend por ti, permitiéndote concentrarte en la lógica de datos en Python.
¿Puedo conectar Streamlit a una fuente de datos real en lugar de simularla?
¡Por supuesto! La simulación es solo para este tutorial. En una aplicación real, dentro del bucle, en lugar de generar datos aleatorios, harías una llamada a tu API, ejecutarías una consulta a tu base de datos o leerías de tu fuente de streaming para obtener los datos más recientes.
¿Es `st.empty()` la única forma de hacer actualizaciones en tiempo real?
Es el método principal y más efectivo para reemplazar una sección completa de la aplicación y lograr una apariencia de "dashboard en vivo". Para actualizaciones más simples que dependen de la interacción del usuario (como cambiar un filtro), el flujo de re-ejecución natural de Streamlit se encarga de ello automáticamente sin necesidad de `st.empty()`.
¿Qué tan escalable es una aplicación de Streamlit para producción?
Streamlit es excelente para prototipos rápidos, herramientas internas y dashboards con un tráfico moderado. Para aplicaciones públicas a gran escala con miles de usuarios concurrentes, aunque es posible con una infraestructura robusta (usando contenedores y balanceadores de carga), podrías considerar otros frameworks más tradicionales diseñados para ese propósito.

Conclusión

¡Felicidades! Has aprendido a construir un dashboard funcional y en tiempo real utilizando exclusivamente Python y Streamlit. Hemos visto cómo esta increíble librería simplifica enormemente el proceso de creación de aplicaciones web de datos, permitiéndote pasar de una idea a un prototipo interactivo en un tiempo récord. La combinación de una sintaxis intuitiva, una potente capacidad de visualización y trucos como el uso de `st.empty()` para actualizaciones dinámicas, convierten a Streamlit en una herramienta indispensable en el arsenal de cualquier profesional de los datos. Ahora tienes el conocimiento para crear tus propias aplicaciones, ya sea para monitorear modelos, explorar datos de forma interactiva o presentar tus hallazgos de una manera atractiva y profesional.

Si quieres conocer otros artículos parecidos a Crea un Dashboard en Tiempo Real con Streamlit puedes visitar la categoría Juegos.

Subir