Crear un dashboard con Streamlit

Streamlit es un framework de código abierto que permite a los científicos de datos convertir secuencias de comandos de python en aplicaciones web de forma rápida. En este tutorial vamos a crear un dashboard con Streamlit.

Crear un dashboard rápidamente con Streamlit

Este artículo describe un ejemplo simple de cómo crear un tablero interactivo, como el que se muestra arriba, usando Streamlit. Streamlit se integra muy bien con la biblioteca de gráficos Plotly, por lo que la experiencia de usar esto es una ventaja y hace que la transición a Streamlit sea muy fluida.

Crear un dashboard rápidamente con Streamlit

Antes de empezar, tienes disponible el código fuente de este proyecto en Github: https://github.com/jdzuri/streamlit-dashboard

Cómo instalar Streamlit

El primer paso es instalar Streamlit y Plotly, proceso muy sencillo ya que basta solamente con el siguiente comando:

pip install streamlit
pip install plotly

y una vez termine la instalación, podemos verificarlo mediante el siguiente comando:

streamlit hello

que levanta un server en localhost con algunos ejemplos y documentación oficial.

Importar Streamlit

Importar la librería Streamlit es tan sencillo como poner estas dos líneas de código en nuestro fichero python, llamado dashboard.py mismamente:

import streamlit as st
import plotly.express as px

Encabezado y uso de imágenes

En esta sección, observamos el código relacionado con la inserción del título y la imagen de la aplicación Streamlit. Para hacer esto, necesitamos usar la función de columnas st.columns(), que nos permite insertar contenedores dispuestos como columnas una al lado de la otra. Dentro de estas columnas, usamos st.image() y st.title() para insertar el contenido deseado.

# -- Create three columns
col1, col2, col3 = st.columns([5, 5, 20])
# -- Put the image in the middle column
# - Commented out here so that the file will run without having the image downloaded
# with col2:
# st.image("streamlit.png", width=200)
# -- Put the title in the last column
with col3:
    st.title("Streamlit Demo")
# -- We use the first column here as a dummy to add a space to the left

Hay muchas otras opciones para insertar diferentes estilos de texto.

Inserción de un gráfico y filtrado de datos

La forma más fácil de insertar gráficos interactivos en Streamlit es usar Plotly, que es una biblioteca de visualización de datos en Python (y también en otros lenguajes). Cuando se ha creado un gráfico en Plotly, es extremadamente fácil mostrarlo en Streamlit usando st.plotly_chart().

En este ejemplo, utilizaremos el conjunto de datos de esperanza de vida frente al PIB integrado en Plotly, ya que tiene una serie de variables que demuestran muy bien la funcionalidad de Streamlit.

A partir de estos datos, podemos crear un gráfico muy agradable usando Plotly, pero queremos usar Streamlit para permitir que el usuario cambie la forma en que se muestran los datos. En particular:

  • Use st.slider() para permitir que el usuario elija qué año de los datos mostrar
  • Use st.selectbox() para permitir que el usuario elija qué continente mostrar
  • Use st.checkbox() para permitir que el usuario elija si desea registrar el eje x

Filtrado de datos

Para filtrar datos, primero incluyamos el control deslizante, el cuadro de selección y la casilla de verificación como se muestra arriba. Nuevamente, usaremos st.columns() para que los elementos aparezcan uno al lado del otro en lugar de verticalmente, que es el valor predeterminado en Streamlit.

# -- Get the user input
year_col, continent_col, log_x_col = st.columns([5, 5, 5])
with year_col:
    year_choice = st.slider(
        "What year would you like to examine?",
        min_value=1952,
        max_value=2007,
        step=5,
        value=2007,
    )
with continent_col:
    continent_choice = st.selectbox(
        "What continent would you like to look at?",
        ("All", "Asia", "Europe", "Africa", "Americas", "Oceania"),
    )
with log_x_col:
    log_x_choice = st.checkbox("Log X Axis?")

Tenga en cuenta aquí que, a diferencia de st.image() y st.title() vistos anteriormente, st.slider(), st.selectbox() y st.checkbox() devuelven valores basados en lo que ingresa el usuario, que debe ser asignado a las variables como se ve en el código anterior.

Entonces, con todo el código hasta este punto, el frontend nuestro dashboard ahora se verá así 👇:

 

Leer datos y aplicar filtros

Después de leer los datos, podemos aplicar los filtros que nos proporciona el usuario.

# -- Read in the data
df = px.data.gapminder()
# -- Apply the year filter given by the user
filtered_df = df[(df.year == year_choice)]
# -- Apply the continent filter
if continent_choice != "All":
    filtered_df = filtered_df[filtered_df.continent == continent_choice]

Cada vez que el usuario actualice una de las entradas, la aplicación se actualizará para reflejar la actualización. ¡Veremos cómo optimizar esto más adelante!

Producir y mostrar un gráfico

Para producir un gráfico, podemos usar Plotly de la misma manera que lo haría normalmente, excepto que fig.show() ya no se usa para mostrar la imagen; en su lugar, usaremos st.plotly_chart() para mostrar el gráfico dentro del tablero.

# -- Create the figure in Plotly
fig = px.scatter(
    filtered_df,
    x="gdpPercap",
    y="lifeExp",
    size="pop",
    color="continent",
    hover_name="country",
    log_x=log_x_choice,
    size_max=60,
)
fig.update_layout(title="GDP per Capita vs. Life Expectancy")
# -- Input the Plotly chart to the Streamlit interface
st.plotly_chart(fig, use_container_width=True)

 

El resultado final sería este código:

import streamlit as st
import plotly.express as px

st.set_page_config(layout="wide")

# -- Create three columns
col1, col2, col3 = st.columns([5, 5, 20])
# -- Put the image in the middle column
# - Commented out here so that the file will run without having the image downloaded
# with col2:
# st.image("streamlit.png", width=200)
# -- Put the title in the last column
with col3:
    st.title("Streamlit Demo")
    st.write("[Tutorial](https://jovid.win/crear-un-dashboard-con-streamlit/) - [Github](https://github.com/jdzuri/streamlit-dashboard)")
# -- We use the first column here as a dummy to add a space to the left

# -- Get the user input
year_col, continent_col, log_x_col = st.columns([5, 5, 5])
with year_col:
    year_choice = st.slider(
        "What year would you like to examine?",
        min_value=1952,
        max_value=2007,
        step=5,
        value=2007,
    )
with continent_col:
    continent_choice = st.selectbox(
        "What continent would you like to look at?",
        ("All", "Asia", "Europe", "Africa", "Americas", "Oceania"),
    )
with log_x_col:
    log_x_choice = st.checkbox("Log X Axis?")

# -- Read in the data
df = px.data.gapminder()
# -- Apply the year filter given by the user
filtered_df = df[(df.year == year_choice)]
# -- Apply the continent filter
if continent_choice != "All":
    filtered_df = filtered_df[filtered_df.continent == continent_choice]

# -- Create the figure in Plotly
fig = px.scatter(
    filtered_df,
    x="gdpPercap",
    y="lifeExp",
    size="pop",
    color="continent",
    hover_name="country",
    log_x=log_x_choice,
    size_max=60,
)
fig.update_layout(title="GDP per Capita vs. Life Expectancy")
# -- Input the Plotly chart to the Streamlit interface
st.plotly_chart(fig, use_container_width=True)

 

El dashboard final

Ejecutando su aplicación Streamlit

Después de haber escrito todo el código para crear un bonito dashboard, ahora veamos cómo ejecutarlo . La forma más fácil de desplegar una aplicación Streamlit es en su máquina local.

Para hacerlo, simplemente abra su consola o terminal de línea de comandos, navegue hasta el directorio raíz donde guardó su archivo dashboard.py y ejecute el comando que se muestra a continuación:

streamlit run dashboard.py

 

La aplicación ahora debería abrirse en su navegador web predeterminado, mostrando un dashboard completamente interactivo con la que puede jugar.

Demo dashboard rápidamente con Streamlit

En ~50 líneas de código, tenemos un tablero completamente funcional 🎉


 

Espero que el artículo «Crear un dashboard con Streamlit» te haya sido de ayuda ❤️

Compartir:

Deja un comentario