Plotly

Plotly crea gráficos interactivos listos para la web con la capacidad de pasar el ratón por encima, hacer zoom y desplazarse. Exporta a HTML o incrusta en aplicaciones Dash.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

import plotly.express as px
import pandas as pd
 
df = pd.read_csv("sales.csv", parse_dates=["ordered_at"])
fig = px.line(df, x="ordered_at", y="revenue", color="region", title="Tendencia de ingresos")
fig.update_layout(hovermode="x unified")
fig.write_html("revenue.html", include_plotlyjs="cdn")

Cuándo usar esto:

• Paneles de control y exploración autoservicio para partes interesadas
• Dispersión densa que necesita detalles al pasar el ratón
• Cepillado enlazado entre facetas (Dash)
• Incrustar gráficos en herramientas web internas

Ejemplo de trabajo

import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
 
rng = np.random.default_rng(42)
df = pd.DataFrame(
    {
        "region": np.repeat(["East", "West"], 100),
        "month": np.tile(np.arange(1, 13).repeat(8)[:100], 2),
        "revenue": rng.integers(80, 200, 200),
        "units": rng.integers(5, 50, 200),
    }
)
 
# Dispersión Express con hover personalizado
fig_scatter = px.scatter(
    df,
    x="units",
    y="revenue",
    color="region",
    hover_data=["month"],
    opacity=0.7,
    title="Unidades vs ingresos",
)
fig_scatter.update_traces(marker=dict(size=8))
 
# Objetos de gráfico para combinación de doble eje
monthly = df.groupby(["month", "region"], observed=True)["revenue"].sum().reset_index()
fig_combo = go.Figure()
for region, sub in monthly.groupby("region"):
    fig_combo.add_trace(
        go.Scatter(x=sub["month"], y=sub["revenue"], mode="lines+markers", name=region)
    )
fig_combo.update_layout(
    xaxis_title="Mes",
    yaxis_title="Ingresos",
    legend_title="Región",
    template="plotly_white",
)
 
fig_scatter.write_html("scatter.html", include_plotlyjs="cdn")
fig_combo.write_html("combo.html", include_plotlyjs="cdn")

Lo que esto demuestra:

• Plotly Express para dispersiones rápidas con hover_data
• Objetos de Gráfico para figuras multitraza
• template para un tema claro y coherente
• JS alojado en CDN para archivos HTML más pequeños

Inmersión Profunda

Cómo funciona

• Las figuras son diccionarios serializables en JSON renderizados por plotly.js en el navegador.
• Express envuelve graph_objects con valores predeterminados sensatos de las columnas del DataFrame.
• Las trazas contienen datos; el diseño controla los ejes, leyendas y anotaciones.
• Dash crea aplicaciones reactivas que comparten el mismo modelo de figura.

Express vs. Objetos de Gráfico

Notas de Python

import plotly.io as pio
 
# La exportación de imágenes estáticas requiere kaleido
pio.write_image(fig, "chart.png", scale=2)

Errores comunes

• Graficar millones de puntos - el navegador se cuelga. Solución: agregar, hexbin o datashader primero.
• HTML enorme por JS en línea - include_plotlyjs=True infla los archivos. Solución: usar "cdn" o "directory".
• Eje X categórico tratado como numérico - las líneas se conectan incorrectamente. Solución: astype(str) o category_orders.
• Fechas sin zona horaria - el hover muestra el desplazamiento local incorrecto. Solución: UTC en el origen, formato en hovertemplate.
• Kaleido faltante para PNG - write_image falla en CI. Solución: uv pip install kaleido en trabajos de exportación.

Alternativas

Preguntas frecuentes

fig.update_traces(hovertemplate="Ingresos: %{y:$,.0f}<extra></extra>")

fig.update_layout(legend_traceorder="reversed")

fig.add_hline(y=150, line_dash="dash", annotation_text="objetivo")

fig.update_layout(template="plotly_dark")

Relacionado

• Paneles de control (Streamlit / Dash / Gradio) - Aplicaciones Dash
• Graficar datos grandes - muestreo descendente
• Altair - alternativa declarativa
• Conceptos básicos de visualización - cuándo la interactividad ayuda

Versiones de la pila: Esta página fue escrita para Python 3.14.0 (estable 3.14, mantenimiento 3.13), FastAPI 0.115+, Django 5.2, Flask 3.1, Pydantic 2, PyTorch 2.6+, pandas 2.2+, Polars 1.x, ruff 0.9+ y uv 0.6+.