Explicación de las Columnas de Streamlit: Diseño de cuadrícula, visualización de datos e interacción
- Name
- Olaf Källström
Published on
Streamlit ha revolucionado la forma en que construimos y desplegamos aplicaciones de datos. Es una potente biblioteca de Python de código abierto que permite a los desarrolladores crear aplicaciones interactivas basadas en web con facilidad. Una de las características clave de Streamlit que lo diferencia es su capacidad para manejar el diseño y la personalización de la interfaz de usuario. Este artículo se adentrará en uno de los aspectos más importantes de esto: las columnas de Streamlit.
Las columnas de Streamlit, que se denotan como st.columns en la API de Streamlit, son una parte fundamental para crear un diseño eficaz en tu aplicación. Te permiten dividir tu aplicación en varias secciones, cada una de las cuales puede contener diferentes widgets o elementos de Streamlit. Esto puede mejorar significativamente la experiencia del usuario, haciendo que tu aplicación sea más organizada y más fácil de navegar.
¿Has oído hablar de esta increíble herramienta de análisis y visualización de datos que convierte tu aplicación de Streamlit en Tableau?
PyGWalker (opens in a new tab) es una biblioteca de Python que te ayuda a incrustar fácilmente una interfaz de usuario similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo. Echa un vistazo a este increíble video producido por Sven de Coding is Fun (opens in a new tab) que muestra los pasos detallados para potenciar tu aplicación de Streamlit con esta potente biblioteca de visualización de datos de Python!
Agradecimientos especiales a Sven y su gran contribución (opens in a new tab) a la comunidad de PyGWalker.
Además, también puedes consultar la página de GitHub de PyGWalker (opens in a new tab) para obtener más ejemplos de PyGWalker.
Parte 1. Comprender las Columnas de Streamlit (st.columns)
¿Qué es st.columns en Streamlit?
En Streamlit, st.columns es una función que te permite crear múltiples columnas en tu aplicación. Toma un número entero como argumento, que especifica el número de columnas de igual ancho que deseas crear. Por ejemplo, st.columns(3) crearía tres columnas de ancho igual.
Las columnas de Streamlit son increíblemente versátiles. Puedes colocar casi cualquier elemento de Streamlit dentro de una columna, desde texto e imágenes simples hasta gráficos complejos y tablas de datos. Esto las convierte en una herramienta esencial para organizar el diseño de tu aplicación de manera efectiva.
Organización del diseño con st.columns
El poder de las columnas de Streamlit radica en su capacidad para transformar el diseño de tu aplicación. Dividiendo tu aplicación en columnas, puedes agrupar elementos relacionados, facilitando que los usuarios comprendan e interactúen con tus datos.
Por ejemplo, supongamos que estás construyendo una aplicación de visualización de datos. Podrías usar las columnas de Streamlit para mostrar diferentes aspectos de tus datos lado a lado. Una columna podría contener una tabla de datos, otra un gráfico de barras y la tercera un gráfico de líneas. Esto permitiría a los usuarios comparar y contrastar diferentes visualizaciones de un vistazo, mejorando su comprensión de los datos.
Ejemplos de Columnas de Streamlit para Visualización de Datos
Para ilustrar el poder de las columnas de Streamlit, veamos un ejemplo sencillo. Supongamos que tenemos un conjunto de datos de ventas de automóviles y queremos mostrar una tabla de datos junto con un gráfico de barras de las ventas por modelo. Así es cómo podríamos hacerlo usando las columnas de Streamlit:
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
## Cargar los datos
data = pd.read_csv('car_sales.csv')
## Crear dos columnas
col1, col2 = st.columns(2)
## Mostrar la tabla de datos en la primera columna
col1.dataframe(data)
## Crear y mostrar el gráfico de barras en la segunda columna
fig, ax = plt.subplots()
data.groupby('model')['sales'].sum().plot(kind='bar', ax=ax)
col2.pyplot(fig)En este ejemplo, st.columns(2) crea dos columnas. Luego usamos el método dataframe para mostrar la tabla de datos en la primera columna y el método pyplot para mostrar el gráfico de barras en la segunda columna. El resultado es un diseño limpio y organizado que facilita a los usuarios explorar y comprender los datos.
Gracias por tu paciencia. Con base en la información de los enlaces proporcionados, he revisado las secciones "Configuraciones Avanzadas de Columnas de Streamlit" y "Explorando los Primitivos de Diseño de Streamlit" para incluir más detalles, ejemplos, listas de viñetas y tablas.
Absolutamente, puedo ampliar esas secciones. Aquí está el contenido revisado:
Parte 2. Configuraciones Avanzadas de Columnas de Streamlit
La función st.column_config.Column de Streamlit es una potente función que te permite configurar las propiedades de las columnas individuales. Esto te brinda un control detallado sobre la apariencia y el comportamiento de tus columnas, lo que te permite controlar cómo se presenta tu datos y cómo los usuarios interactúan con él.
Configuración de la visualización de datos con st.column_config.Column
La función st.column_config.Column te permite ajustar las propiedades de tus columnas para controlar el tamaño de tus visualizaciones de datos. Por ejemplo, podrías usar los argumentos width y height para hacer que tus visualizaciones sean más grandes o más pequeñas según tus necesidades. Aquí tienes un ejemplo:
col1, col2 = st.columns([2, 3])
col1.metric(label="Métrica 1", value=123)
col2.metric(label="Métrica 2", value=456)En este ejemplo, creamos dos columnas con diferentes anchos. La primera columna es el doble de ancha que la segunda columna, lo que permite que la métrica en la primera columna se muestre más grande que la métrica en la segunda columna.
También puedes usar el argumento padding para agregar espacio alrededor de tus visualizaciones, haciéndolas más fáciles de leer e interactuar. Así es como puedes hacerlo:
col1, col2 = st.columns([2, 3])
with col1:
st.metric(label="Métrica 1", value=123)
st.caption("Esta es información adicional sobre la Métrica 1.")
with col2:
st.metric(label="Métrica 2", value=456)
st.caption("Esta es información adicional sobre la Métrica 2.")En este ejemplo, agregamos una leyenda a cada métrica, lo que sirve como espacio alrededor de las visualizaciones.
Configurando la interacción de datos con st.column_config.Column
Además de controlar la visualización de datos, st.column_config.Column te permite controlar la interactividad de tus columnas. Por ejemplo, puedes usar el argumento clickable para hacer que una columna sea clickeable, permitiendo a los usuarios interactuar con ella de nuevas formas. Aquí tienes un ejemplo:
col1, col2 = st.columns(2)
with col1:
if st.button("¡Haz clic en mí!"):
st.write("¡Botón clickeado!")
with col2:
if st.button("¡No me cliques!"):
st.write("¡Botón clickeado!")En este ejemplo, añadimos un botón a cada columna. Cuando un botón es clickeado, se muestra un mensaje en la columna correspondiente.
Parte 3. Explorando los primitivos de diseño de Streamlit
Streamlit ofrece una serie de primitivos de diseño que puedes usar para personalizar aún más el diseño de tu aplicación. Estos primitivos proporcionan formas adicionales de organizar tu contenido, brindándote un mayor control sobre la apariencia y el comportamiento de tu aplicación.
Usando st.container para crear diseños complejos
Una de las últimas adiciones a los primitivos de diseño de Streamlit es la función st.container. Esta función te permite crear un contenedor, que es una sección de tu aplicación que puede contener múltiples elementos. Los contenedores se pueden anidar dentro de otros, lo que te permite crear diseños complejos y jerárquicos. Aquí tienes un ejemplo:
with st.container():
st.write("Este es el contenedor exterior.")
with st.container():
st.write("Este es el contenedor interior.")En este ejemplo, creamos un contenedor exterior y un contenedor interior. El contenedor interior está anidado dentro del contenedor exterior, creando un diseño jerárquico.
Usando st.expander para ocultar contenido menos importante
Otra adición nueva es la función st.expander. Esta función te permite crear un expansor, que es una sección colapsable de tu aplicación. Los expansores se pueden usar para ocultar contenido menos importante, lo que hace que tu aplicación sea más limpia y fácil de navegar. Aquí tienes un ejemplo:
with st.expander("Haz clic para expandir"):
st.write("Contenido oculto")En este ejemplo, creamos un expansor con la etiqueta "Haz clic para expandir". Cuando el usuario hace clic en la etiqueta, se revela el contenido oculto.
Parte 4. Columnas de Streamlit vs Barra lateral: Comprender las diferencias y casos de uso
Las columnas de Streamlit y la barra lateral son herramientas poderosas para organizar el diseño de tu aplicación. Sin embargo, sirven para diferentes propósitos y se utilizan mejor en diferentes situaciones.
Usando la barra lateral para controles globales
La barra lateral es una sección especial de tu aplicación que está separada del área principal. Es ideal para colocar controles que afectan a toda la aplicación, como widgets de entrada para filtrar datos o seleccionar opciones. Aquí tienes un ejemplo:
opcion = st.sidebar.selectbox(
'Selecciona una opción',
('Opción 1', 'Opción 2', 'Opción 3'))
st.write('Seleccionaste:', opcion)En este ejemplo, creamos una caja de selección en la barra lateral. La opción seleccionada se muestra en el área principal de la aplicación.
Usando las columnas de Streamlit para organizar el área principal
Por otro lado, las columnas de Streamlit se utilizan mejor para organizar el área principal de tu aplicación. Te permiten dividir tu contenido en múltiples secciones, cada una capaz de contener diferentes elementos. Esto las hace ideales para mostrar múltiples visualizaciones o piezas de información lado a lado. Aquí tienes un ejemplo:
col1, col2 = st.columns(2)
with col1:
st.line_chart([0, 1, 2, 3, 4])
with col2:
st.line_chart([4, 3, 2, 1, 0])En este ejemplo, creamos dos columnas en el área principal de la aplicación. Cada columna contiene un gráfico de líneas, lo que permite al usuario comparar los dos gráficos lado a lado.
Parte 5: Configuraciones avanzadas de las columnas de Streamlit
st.column_config.Column de Streamlit es una herramienta poderosa que te permite configurar cómo se muestra y se interactúa con tus datos. Al ajustar las propiedades de tus columnas, puedes controlar la presentación de tus datos y cómo los usuarios interactúan con ellos.
Por ejemplo, puedes usar los argumentos width y height para controlar el tamaño de tus visualizaciones de datos, haciéndolas más grandes o más pequeñas según tus necesidades. También puedes usar el argumento padding para agregar espacio alrededor de tus visualizaciones, haciéndolas más fáciles de leer e interactuar.
# Ejemplo de uso de los argumentos width y height
columna1, columna2 = st.columns(2)
with columna1:
st.bar_chart(data, width=400, height=200)
with columna2:
st.line_chart(data, width=400, height=200)Además, st.column_config.Column te permite controlar la interactividad de tus columnas. Por ejemplo, puedes usar el argumento clickable para hacer que una columna sea clickable, permitiendo que los usuarios interactúen con ella de nuevas formas. También puedes usar el argumento draggable para hacer que una columna sea arrastrable, permitiendo que los usuarios reorganicen tu diseño según sus necesidades.
# Ejemplo de uso de los argumentos clickable y draggable
columna1, columna2 = st.columns(2)
with columna1:
if st.button('¡Haz clic en mí!'):
st.write('¡Botón clickeado!')
with columna2:
st.slider('¡Arrástrame!', 0, 100, 50)Parte 6: Explorando los primitivos de diseño de Streamlit
Streamlit ha introducido nuevas primitivas de diseño que proporcionan más flexibilidad en la organización del diseño de su aplicación. Una de estas es la función st.container, que le permite crear un contenedor que puede contener múltiples elementos. Los contenedores pueden anidarse entre sí, lo que le permite crear diseños complejos y jerárquicos.
# Ejemplo de uso de st.container
with st.container():
st.write('Este es un contenedor.')
with st.container():
st.write('Este es un contenedor anidado.')Otra adición nueva es la función st.expander, que le permite crear un expander, una sección desplegable de su aplicación. Los expanders se pueden utilizar para ocultar contenido menos importante, lo que hace que su aplicación sea más limpia y fácil de navegar.
# Ejemplo de uso de st.expander
with st.expander('Haz clic para expandir'):
st.write('Hola, mundo!')Parte 7: Streamlit Columns vs Sidebar
Las columnas de Streamlit y la barra lateral son dos herramientas poderosas para organizar el diseño de su aplicación. Sin embargo, sirven a diferentes propósitos y se utilizan mejor en diferentes situaciones.
La barra lateral es una sección especial de su aplicación que está separada del área principal. Es ideal para colocar controles que afectan a toda la aplicación, como widgets de entrada para filtrar datos o seleccionar opciones.
# Ejemplo de uso de la barra lateral
option = st.sidebar.selectbox('Seleccione una opción', ['Opción 1', 'Opción 2', 'Opción 3'])
st.write(f'Seleccionaste {option}.')Por otro lado, las columnas de Streamlit se utilizan mejor para organizar el área principal de su aplicación. Le permiten dividir su contenido en varias secciones, cada una capaz de contener diferentes elementos. Esto las hace ideales para mostrar varias visualizaciones o piezas de información uno al lado del otro.
# Ejemplo de uso de las columnas
column1, column2, column3 = st.columns(3)
with column1:
st.write('Esta es la columna 1.')
with column2:
st.write('Esta es la columna 2.')
with column3:
st.write('Esta es la columna 3.')Parte 8: Streamlit Columns para el diseño adaptativo y personalización de la interfaz de usuario
Las columnas de Streamlit no solo sirven para organizar el diseño de su aplicación, también desempeñan un papel crucial en la creación de un diseño adaptativo y la personalización de la interfaz de usuario (UI) de su aplicación. Al ajustar las propiedades de sus columnas, como el ancho y el relleno, puede crear un diseño que se adapte a diferentes tamaños de pantalla y orientaciones. Esto es especialmente importante para garantizar que su aplicación se vea bien y funcione correctamente tanto en dispositivos de escritorio como en dispositivos móviles.
Además, las columnas de Streamlit le permiten personalizar la interfaz de usuario de su aplicación de varias maneras. Por ejemplo, puede utilizar columnas para crear un diseño de cuadrícula, lo que puede hacer que su aplicación sea más visualmente atractiva y más fácil de navegar. También puede utilizar columnas para agrupar elementos relacionados, lo que puede mejorar la usabilidad de su aplicación.
# Ejemplo de uso de columnas para diseño adaptativo y personalización de la interfaz de usuario
column1, column2, column3 = st.columns([1, 2, 1])
with column1:
st.image('imagen1.jpg')
with column2:
st.write('Este es algún texto.')
st.line_chart(data)
with column3:
st.image('imagen2.jpg')Conclusión
Las columnas de Streamlit son una herramienta poderosa para organizar el diseño de su aplicación y personalizar la interfaz de usuario de su aplicación. Al comprender cómo utilizar las columnas y las nuevas primitivas de diseño introducidas por Streamlit, puede crear aplicaciones de datos más efectivas y atractivas. Ya sea mostrando varias visualizaciones uno al lado del otro, creando un diseño adaptativo o configurando cómo se muestra y se interactúa con sus datos, las columnas de Streamlit ofrecen una forma flexible e intuitiva de lograr sus objetivos.
¿Has oído hablar de esta increíble herramienta de análisis y visualización de datos, que convierte tu aplicación de Streamlit en Tableau?
PyGWalker (opens in a new tab) es una biblioteca de Python que te ayuda a incorporar fácilmente una interfaz de usuario similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo.
Preguntas frecuentes
Q: ¿Cuáles son las desventajas de Streamlit?
A: Si bien Streamlit es una herramienta poderosa para construir aplicaciones de datos, tiene algunas limitaciones. Por ejemplo, no admite aplicaciones de varias páginas de forma nativa y no tiene autenticación de usuario ni control de acceso incorporados. Además, si bien la simplicidad de Streamlit facilita su uso, también puede limitar su flexibilidad en comparación con marcos más complejos.
Q: ¿Cómo se colocan los elementos en Streamlit?
A: En Streamlit, puede colocar elementos utilizando columnas y contenedores. La función st.columns le permite dividir su aplicación en varias columnas, y la función st.container le permite agrupar múltiples elementos juntos. También puede utilizar la función st.sidebar para agregar elementos a una barra lateral.
Q: ¿Cuáles son los beneficios de Streamlit?
A: Streamlit ofrece varios beneficios para construir aplicaciones de datos. Es fácil de usar, con una API simple e intuitiva. También es altamente flexible, lo que le permite crear una amplia gama de aplicaciones con un código mínimo. Además, Streamlit admite widgets interactivos, lo que facilita la creación de aplicaciones interactivas. Y con su compatibilidad con Markdown y LaTeX, puede crear texto hermoso y con formato enriquecido en sus aplicaciones.
Q: ¿Qué es un expander de Streamlit?
A: La función st.expander en Streamlit le permite crear una sección desplegable en su aplicación. Esta sección puede contener múltiples elementos y puede expandirse o contraerse por el usuario. Cuando está contraído, solo se muestra la etiqueta del expander. Los expanders son útiles para ocultar contenido menos importante y hacer que su aplicación sea más limpia y fácil de navegar.