¿Alguna vez has mirado una hoja de cálculo hasta que se te cruzaron los ojos?
Yo, sin duda, lo he hecho.
Pasamos horas limpiando datos, analizando tendencias y encontrando ese valioso hallazgo.
Pero entonces llega la parte difícil.
Tenemos que presentarlo.
Por lo general, esto significa diapositivas estáticas de PowerPoint o capturas de pantalla de gráficos de Excel.
La emoción muere al instante.
Tu audiencia no quiere ver una tabla estática.
Quieren jugar con los datos.
Quieren preguntar: "¿Qué pasa si cambio esta variable?" o "¿Cómo se ve esto para la región X?".
Ahí es donde entra la narración de datos (data storytelling).
Y no necesitas ser un desarrollador web para construir una herramienta que les permita hacer eso.
Hoy, te voy a mostrar cómo tomar un conjunto de datos simple y convertirlo en una aplicación web totalmente interactiva.
Vamos a usar Python y una biblioteca que se siente como magia: Streamlit.
Por qué confío ciegamente en Streamlit
Solía temer la creación de paneles de control (dashboards).
En el pasado, si quería compartir un modelo o una visualización, tenía que aprender Flask o Django.
Tenía que luchar con HTML, CSS y JavaScript.
Era una pesadilla para un científico de datos que solo quería programar en Python.
Entonces encontré Streamlit.
Streamlit convierte scripts de datos en aplicaciones web compartibles en minutos.
Todo en Python puro.
No se requiere experiencia en front-end.
Crea un puente entre tu Jupyter Notebook y un producto pulido.
Te permite iterar increíblemente rápido.
Cambias una línea de Python, le das a guardar y la aplicación web se actualiza al instante.
Para este tutorial, representamos a 'My Core Pick', así que nos estamos enfocando en la calidad y la velocidad.
Sumerjámonos en cómo puedes construir tu primer panel narrativo.
Preparando el escenario: Tu entorno
Antes de escribir una sola línea de código, necesitamos configurar nuestro espacio de trabajo.
Asumo que tienes Python instalado.
Si no, obtén la última versión en python.org.
Siempre recomiendo trabajar en un entorno virtual para mantener limpias las dependencias.
Abre tu terminal o símbolo del sistema.
Crea una nueva carpeta para tu proyecto.
bash
mkdir streamlit_dashboard
cd streamlit_dashboard
Ahora, crea un entorno virtual.
bash
python -m venv venv
Actívalo (en Windows usa venv\Scripts\activate, en Mac/Linux usa source venv/bin/activate).
Ahora, instalemos a las estrellas del espectáculo.
Necesitamos Streamlit para la aplicación, Pandas para la manipulación de datos y Plotly para hermosos gráficos interactivos.
bash
pip install streamlit pandas plotly
Eso es todo.
Estamos listos para programar.
La base: Cargando tus datos
Crea un nuevo archivo llamado app.py.
Ábrelo en tu editor de código favorito (yo uso VS Code).
Empecemos importando nuestras bibliotecas.
python
import streamlit as st
import pandas as pd
import plotly.express as px
Ahora, necesitamos un título.
Streamlit hace esto increíblemente fácil.
python
st.set_page_config(page_title="Panel de Ventas", layout="wide")
st.title("📊 Narrativa de Ventas Globales")
st.markdown("## Analiza el rendimiento de las ventas en diferentes regiones.")
A continuación, necesitamos datos.
Para este ejemplo, imaginemos que tenemos un archivo CSV llamado sales_data.csv.
(Puedes usar cualquier conjunto de datos que tengas, o descargar una muestra del conjunto de datos de Superstore Sales en línea).
Escribiremos una función para cargar los datos.
¿Por qué una función?
Porque queremos usar el mecanismo de caché de Streamlit.
El poder del almacenamiento en caché
Cada vez que un usuario interactúa con una aplicación Streamlit (hace clic en un botón, cambia un filtro), todo el script se vuelve a ejecutar de arriba a abajo.
Si estás cargando un archivo CSV de 500 MB, eso será dolorosamente lento.
Usamos el decorador @st.cache_data para solucionar esto.
Le dice a Streamlit: "Si esta función se ha ejecutado antes, solo dame el resultado guardado. No la ejecutes de nuevo".
Así es como lo escribo:
```python
@st.cache_data
def get_data():
df = pd.read_csv("sales_data.csv")
# Un poco de limpieza ayuda
df["Order Date"] = pd.to_datetime(df["Order Date"])
return df
df = get_data()
```
Ahora, verifiquemos que funcionó.
Me gusta mostrar los datos sin procesar inicialmente solo para comprobar mi cordura.
python
if st.checkbox("Mostrar datos sin procesar"):
st.dataframe(df.head())
Guarda tu archivo.
Ve a tu terminal y ejecuta:
bash
streamlit run app.py
Aparecerá una ventana del navegador.
Felicidades, tienes una aplicación web en funcionamiento.
Construyendo la narrativa: Barra lateral y filtros
Una historia es mejor cuando el oyente elige el camino.
Los paneles estáticos son aburridos porque intentan mostrar todo a todos.
Queremos darle el control al usuario.
Streamlit proporciona una barra lateral específicamente para este propósito.
Mantiene el área principal limpia para las visualizaciones.
Agregemos un filtro para la "Región" y el "Año".
Creando la barra lateral
Usamos st.sidebar para colocar elementos a la izquierda.
```python
st.sidebar.header("Opciones de filtro")
Crear una selección múltiple para la Región
region = st.sidebar.multiselect(
"Seleccionar Región:",
options=df["Region"].unique(),
default=df["Region"].unique()
)
```
Ahora, necesitamos filtrar realmente el dataframe basado en esta selección.
Aquí es donde ocurre la interactividad.
python
df_selection = df.query("Region == @region")
Si el usuario elimina "North America" de la barra lateral, df_selection se actualiza al instante.
Verifiquemos que los datos están reaccionando.
Podemos mostrar algunas métricas de alto nivel (KPIs) justo en la parte superior de la página principal.
Mostrando KPIs
Me encanta usar el componente st.metric.
Se ve profesional y resalta los números que importan.
Calculemos las Ventas Totales y la Calificación Promedio basándonos en los datos filtrados.
```python
total_sales = int(df_selection["Sales"].sum())
average_rating = round(df_selection["Rating"].mean(), 1)
left_column, right_column = st.columns(2)
with left_column:
st.metric(label="Ventas Totales", value=f"${total_sales:,}")
with right_column:
st.metric(label="Calificación Promedio", value=f"{average_rating} ⭐")
```
¿Notas el st.columns(2)?
Así es como manejamos el diseño.
Divide la pantalla en dos columnas de igual ancho.
Rompe el flujo vertical y hace que el panel parezca diseñado, no solo volcado en la pantalla.
Visualizando la historia
Ahora tenemos datos que reaccionan a la entrada del usuario.
Es hora de visualizarlos.
Si bien Streamlit tiene gráficos básicos, prefiero Plotly Express.
Los gráficos de Plotly son interactivos por defecto.
Puedes pasar el cursor sobre los puntos de datos, hacer zoom y descargar el gráfico como PNG.
El gráfico de barras
Respondamos a la pregunta: "¿Qué línea de productos está funcionando mejor?".
Crearemos un gráfico de barras que muestre las Ventas por Línea de Producto.
```python
sales_by_product = (
df_selection.groupby(by=["Product Line"]).sum()[["Sales"]].sort_values(by="Sales")
)
fig_product_sales = px.bar(
sales_by_product,
x="Sales",
y=sales_by_product.index,
orientation="h",
title="Ventas por Línea de Producto",
color_discrete_sequence=["#0083B8"] * len(sales_by_product),
template="plotly_white",
)
```
Ahora tenemos el objeto de figura (fig_product_sales).
Necesitamos renderizarlo en Streamlit.
python
st.plotly_chart(fig_product_sales, use_container_width=True)
El argumento use_container_width=True es crucial.
Asegura que el gráfico se expanda para llenar el ancho de la columna o pantalla.
Hace que la aplicación parezca responsiva en diferentes tamaños de pantalla.
La serie temporal
Toda historia de datos necesita una línea de tiempo.
Mostremos cómo han tendido las ventas a lo largo del tiempo.
Esto ayuda a identificar la estacionalidad o caídas repentinas.
```python
Agrupar por mes
df_selection["month_year"] = df_selection["Order Date"].dt.to_period("M")
line_chart_data = df_selection.groupby(df_selection["month_year"].astype(str))["Sales"].sum().reset_index()
fig_sales_over_time = px.line(
line_chart_data,
x="month_year",
y="Sales",
title="Ventas a lo largo del tiempo",
template="plotly_white"
)
st.plotly_chart(fig_sales_over_time, use_container_width=True)
```
Ahora, cuando cambias la Región en la barra lateral, tanto el Gráfico de Barras como el Gráfico de Líneas se actualizan inmediatamente.
El usuario está explorando la historia, no solo leyéndola.
Puliendo la experiencia del usuario
Tenemos la funcionalidad lista.
Pero un panel profesional necesita un poco de brillo.
En 'My Core Pick', creemos que la diferencia entre bueno y grandioso está en los detalles.
Ocultando el estilo predeterminado
Streamlit viene con un menú "hamburguesa" en la parte superior derecha y un pie de página "Made with Streamlit".
Para un aspecto limpio y profesional, generalmente los oculto usando inyección de CSS.
Sí, dije que no necesitamos CSS, pero este es un pequeño fragmento opcional que guardo bajo la manga.
python
hide_st_style = """
<style>
#MainMenu {visibility: hidden;}
footer {visibility: hidden;}
header {visibility: hidden;}
</style>
"""
st.markdown(hide_st_style, unsafe_allow_html=True)
Agregando contexto
No muestres solo un gráfico.
Cuéntale al usuario qué está mirando.
Usa st.markdown para agregar comentarios o explicar anomalías en los datos.
Por ejemplo, debajo del gráfico de líneas, podrías agregar:
python
st.markdown("---")
st.caption("Nota: Las ventas cayeron en el Q2 debido a la escasez en la cadena de suministro en la región Norte.")
Este contexto convierte los números brutos en verdadera inteligencia empresarial.
Despliegue: Compartiendo tu historia
Lo construiste. Se ejecuta localmente.
Pero está atrapado en tu computadora portátil.
Para que tu equipo o el mundo lo vean, necesitas desplegarlo.
La forma más fácil, con diferencia, es Streamlit Community Cloud.
Aquí está el flujo de trabajo:
-
Crea un archivo requirements.txt. Esto le dice al servidor qué bibliotecas instalar.
Ejecuta esto en tu terminal: pip freeze > requirements.txt.
-
Sube tu código a GitHub. Crea un repositorio y sube tu app.py, sales_data.csv y requirements.txt.
-
Regístrate en Streamlit Cloud. Conéctalo a tu cuenta de GitHub.
-
Selecciona tu repositorio. Haz clic en "Deploy" (Desplegar).
En unos dos minutos, tendrás una URL en vivo.
Puedes enviar ese enlace por correo electrónico a tu jefe, a tu cliente, o publicarlo en LinkedIn.
Pueden abrirlo en su teléfono o computadora portátil.
No se requiere instalación por su parte.
Conclusión
Acabamos de pasar de un archivo CSV estático a una aplicación web completamente interactiva y desplegada.
Y lo hicimos con menos de 100 líneas de código Python.
Este es el poder de Streamlit.
Democratiza la visualización de datos.
Permite a los científicos de datos convertirse en desarrolladores full-stack sin la empinada curva de aprendizaje.
Tus datos tienen una historia que contar.
No la sofoques en una hoja de cálculo.
Dale voz.
Construye el panel, despliégalo y deja que tus usuarios exploren la narrativa por sí mismos.
Te animo a intentarlo este fin de semana.
Toma un conjunto de datos que te importe, tal vez tu historial de escucha de Spotify o tus datos de seguimiento de actividad física.
Construye un panel para ti mismo.
Una vez que comiences a construir herramientas que reaccionen a ti, nunca querrás volver a las diapositivas estáticas.