DEV Community

Cover image for Streamlit desde cero: cómo crear una app para explorar y visualizar datos
Mirina-Gonzales
Mirina-Gonzales

Posted on • Edited on

Streamlit desde cero: cómo crear una app para explorar y visualizar datos

#python #streamlit #datascience #dataengineering

Streamlit desde cero: cómo cargar, explorar y graficar datos desde un archivo CSV

Introducción

En este artículo se usará Streamlit desde cero para construir una aplicación interactiva que permita cargar, explorar y visualizar datos desde un archivo CSV en un ambiente local.

El objetivo es crear rápidamente una aplicación para visualizar datos.

El repositorio es el siguiente: https://github.com/Mirina-Gonzales/tech-talks-with-miri

Streamlit

Es un framework de Python de código abierto que permite a profesionales del área de datos crear aplicaciones interactivas de manera simple.

  • Permite agilidad para trabajar, porque la actualización de los cambios es rápida.
  • Tiene una gran variedad de componentes listos para usar, por ejemplo: botones, tablas, mapas, cuadros, etc.
  • Permite reducir los tiempos de carga porque cuenta con sistema de cache, que almacena los datos en memoria y permite reutilizarlos en diferentes páginas dentro de una misma aplicación.

Otras Tecnologías Utilizadas

  • Python es un lenguaje de programación de alto nivel, fácil de aprender y muy versátil, utilizado ampliamente en desarrollo web, automatización, ciencia de datos, inteligencia artificial y muchas otras áreas.
  • Pandas es una biblioteca de Python diseñada para manipular, limpiar y analizar datos de forma eficiente, ofreciendo estructuras como DataFrames.
  • Github es una plataforma en la nube basada en el sistema de control de versiones git, que se utiliza para alojar, compartir y colaborar en proyectos de software.

Arquitectura

Esta es la arquitectura implementada: los datos están almacenados en un CSV en el ambiente local, como lenguaje de programación se usará Python con la librería de Pandas para una mejor manipulación de los datos y finalmente Streamlit será el framework que permitirá la visualización de los datos en un web local.

Arqutectura a implementar

Análisis del código

En esta sección conoceremos algunos de los comandos que se utilizan en la demo, para mayor información en la sección de recursos está el enlace de la documentación.

  • Se pueden usar st.header, st.subheader y st.write para mostrar títulos y textos en la aplicación. 
st.header("Probar Streamlit de manera local")

st.subheader("3. Presentación de gráficos para análisis exploratorio de datos (EDA)")

st.write("¿Cuál es la distribución de los diferentes estados de fumador dentro de los grupos de personas con y sin diabetes?")
Enter fullscreen mode Exit fullscreen mode

Imprimir las tres opciones de texto

  • Configuración de la página 
st.set_page_config( page_title="Streamlit local", page_icon="📁", layout="wide" )
st.title("💻 Probar Streamlit de manera local")
st.write("""
Esta aplicación demuestra cómo cargar y explorar un conjunto de datos localmente usando Streamlit.
El conjunto de datos utilizado es un conjunto de datos ficticio sobre diabetes.
""")
Enter fullscreen mode Exit fullscreen mode
  • Para importar los datos desde un archivo CSV local se utiliza Pandas. 
uploaded_file = "data/diabetes_dataset.csv"
df = pd.read_csv(uploaded_file)
st.success(" ✅ Archivo cargado correctamente.")
Enter fullscreen mode Exit fullscreen mode
  • Para imprimir un dataframe usar st.dataframe 
st.dataframe(df.head())
st.dataframe(df.describe())
st.write("Filas y columnas:", df.shape)
Enter fullscreen mode Exit fullscreen mode

Imprimir dataframe

  • Se puede experimentar con diferentes filtros para las visualizaciones de datos en este caso st.slider 
visualizacionn = st.slider("Número de filas", 5, 100, 5)
st.dataframe(df.head(n))
Enter fullscreen mode Exit fullscreen mode

visualizar el filtro de slide

  • Imprimir un Treemap 
fig = px.treemap(
    df,
    path=["diagnosed_diabetes", "smoking_status"],
    title="Treemap jerárquico: Diabetes → Fumador"
)
st.plotly_chart(fig, use_container_width=True)
Enter fullscreen mode Exit fullscreen mode

imprimir treemap

  • Imprimir Pie Chart 
st.subheader("Diabéticos")
diab = df[df["diagnosed_diabetes"] == 1]["smoking_status"].value_counts()

fig1, ax1 = plt.subplots(figsize=(5,5))
ax1.pie(diab, labels=diab.index, autopct="%1.1f%%")
ax1.set_title("Fumadores (Diabéticos)")
st.pyplot(fig1)
Enter fullscreen mode Exit fullscreen mode

imprimir pie chart

Implementación Paso a Paso

Preparar ambiente

Clonar o descargar el repositorio desde GitHub: https://github.com/Mirina-Gonzales/tech-talks-with-miri

Luego:

  • Abrir el proyecto en un IDE como Visual Studio Code.
  • Abrir una terminal.
  • Navega hasta la carpeta: 
demo-local-streamlit
Enter fullscreen mode Exit fullscreen mode

Crear ambiente virtual

Se llamará al ambiente: _env-local-streamlit _

# Crear ambiente
python -m venv env-local-streamlit

# Activar ambiente
source env-local-streamlit/bin/activate

# Listar librerías antes de instalar 
pip list
Enter fullscreen mode Exit fullscreen mode

comandos de crear ambiente

Instalar dependencias

Usando el archivo requirements.txt que se encuentra en el proyecto se instalaran los paquetes.

pip install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

Validar la instalación

pip list
Enter fullscreen mode Exit fullscreen mode

Listar librerías luego de ejecutar el requirements

Ejecutar aplicación

Con el ambiente virtual activo y las dependencias instaladas, ejecutar la aplicación con el siguiente comando:

streamlit run src/main.py
Enter fullscreen mode Exit fullscreen mode

ejemplo de ejecutar aplicacion streamlit

Imagen de la aplicación ejecutandose

Conclusiones

En este blog se creó una demo de Streamlit, utilizando como fuente de datos un archivo csv almacenado en el ambiente local. Se analizó y procesó los datos utilizando Pandas y finalmente con Streamlit se desplegó una aplicación web para visualizar los datos procesados. Experimentando lo simple que es usar el framework.

Recursos Recomendados

Sobre la Autora

Mirina Gonzales

Data Engineer | Women Techmakers Ambassador

🔗 LinkedIn: linkedin.com/in/mirina-gonzales-rodriguez/

💻 GitHub: github.com/Mirina-Gonzales

✍️ Blog: dev.to/mirinagonzales | medium.com/@mirina.gonzales

Top comments (0)