Skip to content

lab2.dev is launched! Build python web apps with plain English, no code required.

Streamlit AgGrid: Desatando el Poder de la Visualización de Datos

En el campo del análisis y la visualización de datos, las herramientas que simplifican el proceso y mejoran el resultado siempre están en alta demanda. Una de esas herramientas que ha estado causando sensación en la comunidad de Python es Streamlit AgGrid. Esta poderosa herramienta combina la simplicidad de Streamlit con la versatilidad de AgGrid, proporcionando una plataforma fácil de usar para crear aplicaciones interactivas de datos. En este artículo, nos adentraremos en el mundo de Streamlit AgGrid, explorando sus características, proceso de instalación, opciones de personalización y aplicaciones prácticas.

¿Has oído hablar de esta increíble herramienta de análisis de datos 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 insertar fácilmente una interfaz similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo.

PyGWalker para visualización de datos en Streamlit (opens in a new tab)

Comprendiendo Streamlit AgGrid

¿Qué es Streamlit AgGrid?

Streamlit AgGrid es un sistema de cuadrícula de código abierto diseñado para aplicaciones web de Python. Fue creado por Pablo Fonseca y se basa en AgGrid, un sistema de cuadrícula basado en JavaScript conocido por su velocidad y facilidad de uso. Streamlit AgGrid lleva el poder de AgGrid a Streamlit, un marco popular para crear aplicaciones web de aprendizaje automático y ciencia de datos. El resultado es una herramienta que no solo simplifica la visualización de datos, sino que también mejora la experiencia general del usuario.

¿Cómo funciona Streamlit AgGrid?

En su núcleo, Streamlit AgGrid es un sistema de cuadrícula basado en JavaScript. Esto significa que opera utilizando código JavaScript, que se integra con Python a través del uso de la biblioteca JsCode. Esta biblioteca permite que se utilice código JavaScript dentro de la cuadrícula, proporcionando un alto nivel de flexibilidad y personalización.

Streamlit AgGrid funciona creando un objeto GridOptionsBuilder, que se configura con un marco de datos leído de un archivo CSV local. Este objeto se utiliza luego para decidir qué columnas son editables, si se utiliza una casilla de verificación y si se permite la selección múltiple.

Características de Streamlit AgGrid

Streamlit AgGrid viene con una serie de características empresariales. Permite la creación de gráficos y tablas elegantes, mejorando el atractivo visual de tus datos. Una de sus características destacadas es GridOptionsBuilder. Esta herramienta proporciona la configuración de AgGrid con diversos métodos, incluyendo configure_columns, configure_selection, configure_pagination y configure_grid_options. Estos métodos permiten un alto nivel de personalización, permitiéndote adaptar la cuadrícula a tus necesidades específicas.

Instalación y Personalización de Streamlit AgGrid

Instalando Streamlit AgGrid

Poner en marcha Streamlit AgGrid en tu sistema es pan comido. Es tan sencillo como importar algunas bibliotecas específicas para crear una tabla mutable e interactiva. Aquí tienes un resumen rápido:

pip install streamlit-aggrid

Este comando te ayudará a empezar con Streamlit AgGrid. Pero recuerda, el diablo está en los detalles. Nos adentraremos más en el proceso de instalación paso a paso y las bibliotecas necesarias en la siguiente sección de este artículo.

Personalizando Streamlit AgGrid

Streamlit AgGrid no es solo una solución única para todos. Es una herramienta que puedes ajustar y adaptar a tus necesidades únicas. ¿Quieres cambiar las propiedades de fondo de las columnas o celdas? ¡No hay problema! Puedes hacerlo agregando código JavaScript al código de Python.

Aquí tienes un ejemplo rápido:

from streamlit_aggrid import AgGrid, JsCode
 
js_code = JsCode("""
function(params) {
    if (params.value > 0) {
        return {backgroundColor: 'green'}
    } else {
        return {backgroundColor: 'red'}
    }
}
""")
 
gridOptions = {
    'columnDefs': [
        {'headerName': "Value", 'field': "value", 'cellStyle': js_code},
    ],
    ...
}
 
AgGrid(df, gridOptions=gridOptions)

En este ejemplo, estamos utilizando la biblioteca JsCode, que permite el uso de código JS en la Cuadrícula. Esto nos permite cambiar el color de fondo de la celda en función del valor de la celda.

Guía Práctica para Usar Streamlit AgGrid

Usando Streamlit AgGrid con Tus Datos

Una vez que hayas instalado y personalizado Streamlit AgGrid, es hora de ponerlo a trabajar. Esto implica crear el objeto AgGrid y hacer que aparezca en la pantalla. Aquí tienes un ejemplo rápido:

from streamlit_aggrid import AgGrid
 
df = pd.DataFrame(
    np.random.randint(-100, 100, size=(100, 10)),
    columns=list('ABCDEFGHIJ'))
 
AgGrid(df)

En este ejemplo, estamos creando un DataFrame con valores aleatorios y mostrándolo usando AgGrid. Después de que el usuario realice las actualizaciones necesarias, el dataframe actual en AgGrid se puede obtener utilizando la función get_data.

Ejemplos y Tutoriales de Streamlit AgGrid

Para entender verdaderamente el poder y la versatilidad de Streamlit AgGrid, es útil verlo en acción. En las secciones próximas, recorreremos ejemplos prácticos de uso de Streamlit AgGrid, desde la creación de tablas interactivas hasta la visualización de conjuntos de datos complejos. También proporcionaremos tutoriales para principiantes, asegurándonos de que tengas todo el conocimiento y las habilidades necesarias para aprovechar al máximo esta poderosa herramienta.

Echemos un vistazo a estos ejemplos:

Ejemplo 1. Crear una tabla interactiva básica

En el primer ejemplo, usemos Streamlit AgGrid para crear una tabla interactiva.

from st_aggrid import AgGrid
import pandas as pd
 
# Cargar los datos en un DataFrame de pandas
df = pd.read_csv('tu_conjunto_de_datos.csv')
 
# Mostrar el DataFrame en una tabla AgGrid
AgGrid(df)

Ejemplo 2: Visualización de conjuntos de datos complejos

Trabajemos con un conjunto de datos de muestra y demos cómo crear gráficos y diagramas interactivos basados en los datos mostrados en la tabla AgGrid.

import streamlit as st
from st_aggrid import AgGrid
import pandas as pd
import plotly.express as px
 
# Cargar los datos en un DataFrame de pandas
df = pd.read_csv('tu_conjunto_de_datos.csv')
 
# Mostrar el DataFrame en una tabla AgGrid
table = AgGrid(df)
 
# Obtener los datos actualizados de la tabla
datos_actualizados = table['data']
 
# Crear un gráfico basado en los datos actualizados
fig = px.bar(datos_actualizados, x='columna1', y='columna2')
 
# Mostrar el gráfico
st.plotly_chart(fig)

Ejemplo 3. Conexión a bases de datos externas en Streamlit

También puedes conectar Streamlit AgGrid a bases de datos externas, como hojas de cálculo de Google o bases de datos SQL. Aprenderás cómo establecer una conexión, obtener datos de la base de datos y mostrarlos en una tabla AgGrid interactiva. También cubriremos técnicas para actualizar y persistir datos de vuelta a la base de datos, permitiendo la colaboración en tiempo real y la integración perfecta con fuentes de datos externas.

from st_aggrid import AgGrid
import pandas as pd
import gspread
 
# Conectar a las Hojas de Google
gc = gspread.service_account(filename='credenciales.json')
sh = gc.open('tu_hoja_de_google')
hoja = sh.get_worksheet(0)
 
# Obtener datos de las Hojas de Google en un DataFrame de pandas
datos = hoja.get_all_records()
df = pd.DataFrame(datos)
 
# Mostrar el DataFrame en una tabla AgGrid
AgGrid(df)

Ten en cuenta que los ejemplos de código proporcionados son ejemplos simplificados y pueden requerir modificaciones para adaptarse a tu caso específico, como adaptar las rutas de archivos, credenciales o configuraciones de API para que coincidan con tu entorno.

¿Qué más puedes hacer con Streamlit AgGrid?

Streamlit AgGrid para visualización de datos

La visualización de datos es el corazón de Streamlit AgGrid. Con sus elegantes gráficos y tablas, proporciona una forma visualmente atractiva de presentar tus datos. Estas son algunas características destacadas:

  • Definiciones de columna personalizables: Puedes personalizar la apariencia y el comportamiento de las columnas en Streamlit AgGrid.
  • Funciones interactivas: Streamlit AgGrid admite funciones interactivas como ordenamiento, filtrado y cambio de tamaño de columna.

Streamlit AgGrid para conjuntos de datos grandes

Una de las principales fortalezas de Streamlit AgGrid es su capacidad para manejar conjuntos de datos grandes. Esto lo convierte en una excelente herramienta para el análisis y la visualización de big data. Estas son algunas formas en que Streamlit AgGrid maneja conjuntos de datos grandes:

  • Renderización eficiente: Streamlit AgGrid solo renderiza las filas que actualmente están visibles en la ventana de visualización. Esto significa que puede manejar conjuntos de datos grandes sin ninguna degradación del rendimiento.
  • Operaciones en el lado del servidor: Streamlit AgGrid admite operaciones en el lado del servidor como ordenamiento, filtrado y agrupación. Esto le permite manejar conjuntos de datos grandes que no cabrían en la memoria del navegador.

Streamlit AgGrid para aplicaciones web

Streamlit AgGrid no es solo para el análisis de datos, también es una poderosa herramienta para el desarrollo de aplicaciones web. Su sistema de cuadrícula basado en JavaScript se integra perfectamente con aplicaciones web de Python, brindando una plataforma fácil de usar para crear aplicaciones de datos interactivas. Ya sea que estés construyendo un panel de control para el análisis de datos o una aplicación web completa, Streamlit AgGrid puede ser una valiosa adición a tus herramientas.

Streamlit AgGrid para aprendizaje automático y análisis de datos

Streamlit AgGrid también es una herramienta valiosa en el campo del aprendizaje automático y el análisis de datos. Su capacidad para manejar conjuntos de datos grandes y crear visualizaciones interactivas lo convierte en una excelente opción para estas aplicaciones. Estas son algunas formas en que puedes usar Streamlit AgGrid en el aprendizaje automático y el análisis de datos:

  • Análisis exploratorio de datos (EDA): Las funciones interactivas de Streamlit AgGrid lo convierten en una gran herramienta para el EDA.
  • Selección de características: Puedes usar Streamlit AgGrid para visualizar la importancia de diferentes características en tu conjunto de datos.
  • Evaluación de modelos: Streamlit AgGrid se puede utilizar para visualizar el rendimiento de diferentes modelos.

Alternativas a Streamlit AgGrid

Si bien Streamlit AgGrid es una herramienta poderosa, no es la única opción disponible para la visualización de datos en Python. PyGWalker (opens in a new tab) es otra herramienta impresionante que también funciona como alternativa a Streamlit AgGrid.

Demo en línea de PyGWalker + Streamlit (opens in a new tab)

PyGWalker (opens in a new tab) es una biblioteca de Python que te ayuda a incrustar fácilmente una interfaz similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo.

Echa un vistazo a este increíble video producido por Cómo explorar datos con PyGWalker en Python (opens in a new tab) que muestra los pasos detallados para potenciar tu aplicación de Streamlit con esta poderosa Biblioteca de Visualización de Datos en 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 estos recursos:

Visualizar datos en Streamlit con PyGWalker (opens in a new tab)

Además de PyGWalker, aquí hay algunas alternativas, cada una con sus propias fortalezas y debilidades:

  • Matplotlib: una biblioteca versátil para crear visualizaciones estáticas, animadas e interactivas en Python.
  • Seaborn: una biblioteca de visualización de datos en Python basada en Matplotlib. Proporciona una interfaz de alto nivel para dibujar gráficos estadísticos atractivos e informativos.
  • Plotly: una biblioteca de gráficos que crea gráficos interactivos y de calidad editorial.

Conclusión

Streamlit AgGrid es una potente herramienta que combina la simplicidad de Streamlit con la versatilidad de AgGrid, proporcionando una plataforma fácil de usar para crear aplicaciones de datos interactivas. Ya sea que seas un científico de datos que busca visualizar conjuntos de datos complejos, un desarrollador web que construye aplicaciones interactivas o un ingeniero de aprendizaje automático que realiza análisis exploratorios de datos, Streamlit AgGrid tiene algo que ofrecer. Su capacidad para manejar grandes conjuntos de datos, combinada con sus características personalizables y facilidad de uso, lo convierten en una excelente opción para una amplia gama de aplicaciones. ¿Entonces, qué esperas? ¡Sumérgete en el mundo de Streamlit AgGrid y descubre el poder de la visualización interactiva de datos!

Preguntas frecuentes

¿Qué es Streamlit AgGrid?

Streamlit AgGrid es un sistema de cuadrícula de código abierto diseñado para aplicaciones web de Python. Combina la simplicidad de Streamlit con la versatilidad de AgGrid, proporcionando una plataforma fácil de usar para crear aplicaciones de datos interactivas.

¿Cómo hago que mi AgGrid sea adaptable?

Para hacer que tu AgGrid sea adaptable, puedes usar la propiedad domLayout y establecerla en "autoHeight". Esto hará que la altura de la cuadrícula se ajuste automáticamente para adaptarse a su contenido. También puedes usar CSS para establecer el ancho y la altura de la cuadrícula en porcentajes, lo que hará que la cuadrícula se redimensione en función del tamaño de su contenedor.

¿Cuál es la altura del filtro de AgGrid?

La altura del filtro de AgGrid no está fija y se puede ajustar según tus necesidades. De forma predeterminada, el filtro mostrará suficientes filas para que el contenido encaje sin necesidad de desplazamiento. Sin embargo, puedes establecer una altura máxima para el filtro utilizando la propiedad maxDisplayedRows en los parámetros del filtro.

¿Qué es un componente de Streamlit?

Los componentes de Streamlit son bibliotecas de Python que te permiten ampliar la funcionalidad de Streamlit. Se pueden utilizar para integrarse con otras bibliotecas y marcos de JavaScript, crear nuevos tipos de visualizaciones o agregar nuevos elementos de interfaz de usuario. Streamlit AgGrid es un ejemplo de un componente de Streamlit.