14. Dashboards Interactivos con Plotly

Crea visualizaciones interactivas para web con Plotly, ideales para dashboards profesionales.

Introducción a Plotly

import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np

# Dataset de ejemplo
df = pd.DataFrame({
    'fecha': pd.date_range('2024-01-01', periods=100, freq='D'),
    'ventas': np.random.normal(50000, 10000, 100).clip(min=0),
    'producto': np.random.choice(['Laptop', 'Mouse', 'Teclado'], 100),
    'region': np.random.choice(['Norte', 'Sur', 'Este', 'Oeste'], 100)
})

# Gráfico de línea interactivo
fig = px.line(df, x='fecha', y='ventas', title='Ventas Diarias 2024')
fig.update_layout(hovermode='x unified')
fig.show()

Gráficos principales

# Scatter plot interactivo
fig = px.scatter(df, x='fecha', y='ventas', color='producto', size='ventas',
                 title='Ventas por Producto', hover_data=['region'])
fig.show()

# Gráfico de barras
ventas_por_region = df.groupby('region')['ventas'].sum().reset_index()
fig = px.bar(ventas_por_region, x='region', y='ventas',
             title='Ventas Totales por Región')
fig.show()

# Box plot
fig = px.box(df, x='producto', y='ventas', color='region',
             title='Distribución de Ventas')
fig.show()

Dashboard interactivo completo

from plotly.subplots import make_subplots

# Preparar datos
ventas_mensuales = df.groupby(df['fecha'].dt.month)['ventas'].sum()
ventas_por_producto = df.groupby('producto')['ventas'].sum()

# Crear subplot con 2 filas y 2 columnas
fig = make_subplots(
    rows=2, cols=2,
    subplot_titles=('Tendencia Mensual', 'Por Producto', 'Por Región', 'Distribución'),
    specs=[[{'type': 'scatter'}, {'type': 'bar'}],
           [{'type': 'bar'}, {'type': 'histogram'}]]
)

# Gráfico 1: Línea de tendencia
fig.add_trace(go.Scatter(x=list(range(1, 13)), y=ventas_mensuales, mode='lines+markers',
                         name='Ventas'), row=1, col=1)

# Gráfico 2: Barras por producto
fig.add_trace(go.Bar(x=ventas_por_producto.index, y=ventas_por_producto.values,
                     name='Producto'), row=1, col=2)

# Gráfico 3: Por región
ventas_region = df.groupby('region')['ventas'].sum()
fig.add_trace(go.Bar(x=ventas_region.index, y=ventas_region.values,
                     name='Región'), row=2, col=1)

# Gráfico 4: Histograma
fig.add_trace(go.Histogram(x=df['ventas'], name='Distribución'), row=2, col=2)

fig.update_layout(height=800, showlegend=False, title_text="Dashboard de Ventas 2024")
fig.show()

Resumen de la lección

✅ Plotly Express (px) para gráficos rápidos e interactivos ✅ Graph Objects (go) para control granular ✅ Dashboards con subplots y layouts personalizados ✅ Interactividad automática (zoom, pan, hover) ✅ Exporta a HTML para compartir

🎯 Próxima lección: 15. Mejores Prácticas de Visualización

En la siguiente lección aprenderás principios de diseño, color y storytelling con datos. 🚀