DEV Community

RenzoFlv
RenzoFlv

Posted on

Herramientas de Visualización en Python: Streamlit, Dash y Bokeh

#python #datascience #visualization #dashboard

Introducción

En el mundo de la ciencia de datos y el análisis, la visualización efectiva de información es fundamental para comunicar insights y tomar decisiones informadas. Python ofrece diversas herramientas para crear dashboards interactivos y aplicaciones de visualización. En este artículo, exploraremos tres de las más populares: Streamlit, Dash y Bokeh.

1. Streamlit: Simplicidad y Rapidez

¿Qué es Streamlit?

Streamlit es un framework de código abierto que permite crear aplicaciones web de datos de forma rápida y sencilla, sin necesidad de conocimientos profundos de desarrollo web.

Características Principales

  • Sintaxis simple: Escribe Python puro, sin HTML, CSS o JavaScript
  • Reactividad automática: La aplicación se actualiza automáticamente cuando cambian los datos
  • Componentes integrados: Widgets interactivos listos para usar
  • Despliegue sencillo: Compatible con Streamlit Cloud, Heroku, AWS, etc.

Ejemplo Práctico con Streamlit 

import streamlit as st
import pandas as pd
import numpy as np

# Título de la aplicación
st.title("Dashboard de Ventas con Streamlit")

# Crear datos de ejemplo
data = pd.DataFrame({
    'Mes': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'],
    'Ventas': [15000, 18000, 22000, 19000, 25000],
    'Gastos': [12000, 14000, 15000, 13000, 16000]
})

# Mostrar tabla
st.subheader("Datos de Ventas y Gastos")
st.dataframe(data)

# Gráfico de líneas
st.subheader("Tendencia de Ventas y Gastos")
st.line_chart(data.set_index('Mes'))

# Widget interactivo
mes_seleccionado = st.selectbox(
    'Selecciona un mes:',
    data['Mes']
)

# Mostrar información del mes seleccionado
info_mes = data[data['Mes'] == mes_seleccionado]
st.write(f"**Ventas en {mes_seleccionado}**: ${info_mes['Ventas'].values[0]:,}")
st.write(f"**Gastos en {mes_seleccionado}**: ${info_mes['Gastos'].values[0]:,}")
Enter fullscreen mode Exit fullscreen mode

Instalación y Ejecución 

# Instalar Streamlit
pip install streamlit

# Ejecutar la aplicación
streamlit run app.py
Enter fullscreen mode Exit fullscreen mode

2. Dash: Potencia y Flexibilidad

¿Qué es Dash?

Dash, desarrollado por Plotly, es un framework para construir aplicaciones web analíticas con capacidades avanzadas de visualización interactiva.

Características Principales

  • Basado en React.js: Componentes modernos y reactivos
  • Integración con Plotly: Gráficos profesionales e interactivos
  • Callbacks potentes: Control total sobre la interactividad
  • Escalabilidad: Ideal para aplicaciones empresariales complejas

Ejemplo Práctico con Dash 

import dash
from dash import dcc, html, Input, Output
import plotly.graph_objs as go
import pandas as pd

# Crear la aplicación
app = dash.Dash(__name__)

# Datos de ejemplo
df = pd.DataFrame({
    'Mes': ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'],
    'Ventas': [15000, 18000, 22000, 19000, 25000],
    'Clientes': [120, 135, 150, 142, 168]
})

# Layout de la aplicación
app.layout = html.Div([
    html.H1("Dashboard Interactivo con Dash"),

    html.Div([
        html.Label("Selecciona una métrica:"),
        dcc.Dropdown(
            id='metrica-dropdown',
            options=[
                {'label': 'Ventas', 'value': 'Ventas'},
                {'label': 'Clientes', 'value': 'Clientes'}
            ],
            value='Ventas'
        )
    ], style={'width': '50%', 'margin': '20px'}),

    dcc.Graph(id='grafico-principal')
])

# Callback para actualizar el gráfico
@app.callback(
    Output('grafico-principal', 'figure'),
    [Input('metrica-dropdown', 'value')]
)
def actualizar_grafico(metrica_seleccionada):
    figura = go.Figure()

    figura.add_trace(go.Bar(
        x=df['Mes'],
        y=df[metrica_seleccionada],
        name=metrica_seleccionada,
        marker_color='lightblue'
    ))

    figura.update_layout(
        title=f'Análisis de {metrica_seleccionada}',
        xaxis_title='Mes',
        yaxis_title=metrica_seleccionada,
        hovermode='x unified'
    )

    return figura

# Ejecutar la aplicación
if __name__ == '__main__':
    app.run_server(debug=True)
Enter fullscreen mode Exit fullscreen mode

Instalación 

# Instalar Dash
pip install dash plotly pandas
Enter fullscreen mode Exit fullscreen mode

3. Bokeh: Visualizaciones Elegantes e Interactivas

¿Qué es Bokeh?

Bokeh es una biblioteca de visualización interactiva que genera gráficos en navegadores web modernos, ofreciendo alta interactividad y rendimiento.

Características Principales

  • Interactividad nativa: Pan, zoom, selección, hover incorporados
  • Visualizaciones complejas: Soporte para grandes conjuntos de datos
  • Servidor Bokeh: Para aplicaciones más dinámicas
  • Integración con notebooks: Jupyter, JupyterLab

Ejemplo Práctico con Bokeh 

from bokeh.plotting import figure, output_file, show
from bokeh.models import HoverTool
from bokeh.layouts import column
import pandas as pd

# Crear datos
data = pd.DataFrame({
    'meses': ['Ene', 'Feb', 'Mar', 'Abr', 'May'],
    'ventas': [15000, 18000, 22000, 19000, 25000],
    'utilidad': [3000, 4000, 7000, 6000, 9000]
})

# Configurar salida
output_file("dashboard_bokeh.html")

# Crear figura para ventas
p1 = figure(
    title="Ventas Mensuales",
    x_range=data['meses'],
    height=350,
    toolbar_location="above"
)

p1.vbar(
    x=data['meses'],
    top=data['ventas'],
    width=0.5,
    color='navy',
    alpha=0.7
)

# Añadir herramienta hover
hover1 = HoverTool(tooltips=[("Mes", "@x"), ("Ventas", "@top{$0,0}")])
p1.add_tools(hover1)

# Crear figura para utilidad
p2 = figure(
    title="Utilidad Mensual",
    x_range=data['meses'],
    height=350,
    toolbar_location="above"
)

p2.line(
    data['meses'],
    data['utilidad'],
    line_width=3,
    color='green',
    alpha=0.8
)

p2.circle(
    data['meses'],
    data['utilidad'],
    size=10,
    color='darkgreen'
)

# Añadir herramienta hover
hover2 = HoverTool(tooltips=[("Mes", "@x"), ("Utilidad", "@y{$0,0}")])
p2.add_tools(hover2)

# Mostrar ambos gráficos
show(column(p1, p2))
Enter fullscreen mode Exit fullscreen mode

Instalación 

# Instalar Bokeh
pip install bokeh pandas
Enter fullscreen mode Exit fullscreen mode

Comparación de las Herramientas

Característica Streamlit Dash Bokeh
Curva de aprendizaje Muy fácil Moderada Moderada
Velocidad de desarrollo Muy rápida Media Media
Personalización Limitada Alta Alta
Interactividad Automática Manual (callbacks) Nativa
Despliegue Muy sencillo Requiere configuración Archivos HTML o servidor
Mejor para Prototipos rápidos, demos Apps empresariales Visualizaciones científicas

¿Cuál elegir?

Elige Streamlit si:

  • Necesitas crear un prototipo rápidamente
  • Tu equipo no tiene experiencia en desarrollo web
  • Quieres compartir análisis de datos de forma sencilla

Elige Dash si:

  • Desarrollas aplicaciones empresariales complejas
  • Necesitas control total sobre la UI y la lógica
  • Requieres integración con sistemas existentes

Elige Bokeh si:

  • Te enfocas en visualizaciones científicas o estadísticas
  • Trabajas con grandes volúmenes de datos
  • Necesitas gráficos altamente interactivos embebidos

Conclusión

Las tres herramientas son excelentes opciones para visualización de datos en Python. La elección dependerá de tus necesidades específicas, experiencia técnica y el tipo de aplicación que deseas desarrollar.

Streamlit brilla por su simplicidad, Dash por su robustez empresarial, y Bokeh por sus capacidades de visualización avanzada. Lo ideal es familiarizarse con las tres y elegir la más apropiada para cada proyecto.

Recursos Adicionales

¿Qué herramienta prefieres para tus proyectos de visualización? ¡Comparte tu experiencia en los comentarios!

Top comments (0)