¡Descarga Visualización de datos con Streamlit: Controles, gráficas y mapas y más Tesis en PDF de Programación Informática solo en Docsity!
Tutorial sobre interfaz, gráficas y mapas
El nuevo reto es mejorar la experiencia del usuario con controles avanzados, explicas que, si la aplicación web debe mostrar datos y cifras relacionadas según la entrada del usuario, es una buena idea colocar widgets relevantes en la barra lateral ( sidebar ).
Esta separación deja en claro la intención de la interactividad para los usuarios: la barra lateral (sidebar) es para proporcionar parámetros (es decir, la entrada) mientras que la pantalla principal es para proporcionar comentarios (es decir, la salida) en respuesta a la entrada de los usuarios, muestran también la manera de crear un componente st.sidebar : sidebar = st.sidebar
Ya que tenemos creada la barra lateral, lo que tenemos que agregar es un título y un párrafo que explique qué es lo que vamos a encontrar en dicha sección. Y las instrucciones para hacer eso se muestran a continuación: sidebar.title("Esta es la barra lateral.") sidebar.write("Aquí van los elementos de entrada.")
Nuevamente propones nuevas prácticas de entrenamiento utilizando la misma libreta de Colab para realizar la práctica con st.sidebar :
- Generar una nueva aplicación Streamlit.
- Definir un st.sidebar.
- Agrega controles al st.sidebar y a la sección principal.
Propones abrir nuevamente el Notebook y experimentar con el nuevo control st.sidebar con los siguientes pasos:
- Repetimos el comando para iniciar el túnel para nuestro proyecto de sidebar.
Creamos la nueva URL para la aplicación.
Creamos nuestra aplicación de Streamlit para demostrar el uso de st.sidebar.
Ejecutamos nuestra aplicación.
sistema la fecha actual con la función datetime.data.today() para sugerirla como fecha por default al control st.date_input().
En caso que la fecha haya sido seleccionada de forma adecuada usaremos st.sucess() para enviar un mensaje con la fecha: # Give user the current date today = datetime.date.today() today_date = st.date_input('Current date', today) st.success('Current date: %s' % (today_date))
La siguiente figura muestra el componente st.date_input generado con el código anterior.
Quienes están en la reunión se asombran con la versatilidad del control st.date_input, facilidad de uso y enormes aplicaciones, mencionas que procederás con el control st.checkbox.
Control checkbox Mencionas que para esta sección se asume la existencia de un conjunto de datos ( dataframe ) llamado titatic_data.csv , e implementa un control st.checkbox , para preguntar al usuario si desea o no mostrar una tabla de datos.
Una vez que se obtiene la respuesta se evalúa usando un if , si el resultado es true entonces se imprime el dataframe: # Display the content of the dataset if checkbox is true st.header("Dataset") agree = st.checkbox("show DataSet Overview? ") if agree: st.dataframe(titanic_data)
Mencionas que el control st.checkbox es sumamente útil para interactuar con el usuario ya que le permite mostrar o no secciones de la página Web, comentas que la salida del programa anterior sería así:
Control radio Todo evoluciona muy bien, pero ya que se analizó el control st.checkbox , lo natural es continuar con un control tipo radio que permita seleccionar solo una opción dentro de una lista.
Afirmas que Streamlit posee un botón de opción ( st.radio ) y que la instrucción st.radio se debe aplicar a una variable o columna dentro de un dataframe. Para este ejemplo se denominará selected_class ; la instrucción tiene dos secciones, una que indica el título
mínimos. Cabe mencionar que esta instrucción utiliza datos que son numéricos, como precios, costos, temperatura, etc.
Adicionalmente hay que definir una variable que para este ejemplo se denomina “ subset_fare ” misma que contendrà el conjunto de datos máximos y mínimos de los datos que se utilizarán para generar las barras deslizantes.
Con el widget de control deslizante ( st.slider ), especifica el nombre del widget. Mientras tanto, establece los valores mínimo y máximo. La siguiente figura muestra un control deslizante interactivo de este tipo.
Propones utilizar la misma libreta de Colab para crear un ejemplo que incluya los controles de st.date_input, st.selectbox, st.radio y st.slider:
- Generar una nueva aplicación Streamlit.
- Cargar el dataset titanic_data.
- Agrega controles al sidebar y a la sección principal.
- Agregar controles slider, radio, checkbox y date_input.
Una vez abierto el Notebook, sugieres ejecutar los siguientes pasos:
Repetimos el comando para iniciar el túnel para nuestro proyecto de sidebar.
Creamos la nueva URL para la aplicación.
Creamos nuestra aplicación de Streamlit para demostrar el uso de controles checkbox, slider y radio.
Ejecutamos nuestra aplicación.
deck.gl (mapas y gráficos en 3D). Sin embargo, también proporciona algunos tipos de gráficos que son nativos de Streamlit como st.line_chart que te permite crear un gráfico de líneas o st.area_chart que te permite crear un gráfico de área.
Sin embargo, continúas diciendo que Streamlit también puede generar gráficas con Matplotib y que esta librería es una de las más populares ya que fue la primera utilizada para la graficación de datos en Python.
Tutorial básico de graficación con Matplotlib y Streamlit Para agilizar y dejar más claro este tema, propones realizar un tutorial básico de como graficar con Matplotlib y compartirlo con el equipo de desarrollo.
En la parte superior del proyecto, se importan las dependencias necesarias. En este caso, utilizaremos las 3 principales, como se muestra a continuación: import pandas as pd import streamlit as st import matplotlib.pyplot as ptl
Las 3 librerías que vamos a usar serán pandas para la manipulación de los datos; Streamlit para construir la aplicación Web y matplotlib.pyplot para visualizar las gráficas.
En cuanto al conjunto de datos, usaremos el conjunto de datos del titanic_data , que puedes encontrar al final de este documento y en materiales adicionales. titanic_link = '/content/titanic.csv' titanic_data = pd.read_csv(titanic_link)
Ahora que ya tenemos la parte introductoria, vamos a construir nuestra primera gráfica. Vamos a graficar un histograma, para lo cual las instrucciones se muestran a continuación:
La primera instrucción inicializa la variable fig que contendrá el histograma y la variable ax que nos servirá para construirlo. La siguiente instrucción nos permite construir el histograma con el campo “ fare ” de la base de datos del Titanic.
La instrucción st.header nos sirve para poner un encabezado para nuestra gráfica. La instrucción st.pyplot nos ayuda a graficar nuestro histograma en Streamlit: fig, ax = plt.subplots() ax.hist(titanic_data.fare) st.header("Histograma del Titanic") st.pyplot(fig)
El siguiente paso será generar una gráfica de barras. Para lo cual vamos a utilizar dos campos de nuestro conjunto de datos, el campo “ class ” que tiene que ver con la clase de pasajeros del Titanic y el campo “ fare ” que indica la tarifa que pagó el pasajero. Para construir nuestra gráfica solo necesitamos las siguientes instrucciones: fig2, ax2 = plt.subplots()
y_pos = titanic_data['class'] x_pos = titanic_data['fare']
ax2.barh(y_pos, x_pos) ax2.set_ylabel("Class") ax2.set_xlabel("Fare") ax2.set_title('¿Cuanto pagaron las clases del Titanic')
st.header("Grafica de Barras del Titanic") st.pyplot(fig2)
La primera instrucción inicializa la variable fig que contendrá la gráfica de barras y la variable ax que nos servirá para construirlo. Las variables x_pos y y_pos nos sirven para cargar los datos que corresponden a los campos “ class ” y “ fare ” respectivamente y que vamos a pasarle a la gráfica de barras. Posteriormente la instrucción ax2.barh nos sirve para generar una gráfica de barras horizontal que contendrá los campos antes mencionados. Las instrucciones ax2.set_xlabel y ax2.set_ylabel nos sirven para poner etiquetas para el eje de las x y el de las y. La instrucción ax2.set_title nos ayuda a poner
Proyecto de práctica
Ahora comentas que para poner en práctica todos estos conocimientos sobre gráficas crearàn un ejemplo usando el mismo Notebook, dicho proyecto se construye con la siguiente serie de pasos:
Creamos la nueva URL para la aplicación.
Creamos nuestra aplicación de Streamlit para demostrar el uso de gráficas:
Repetimos el comando para iniciar el tùnel para nuestro proyecto de gràficas.
Ejecutamos el programa graficas.py.
La siguiente figura muestra la salida del código explicado anteriormente:
import pandas as pd import numpy as np import streamlit as st
Las 3 librerías que vamos a usar serán pandas para la manipulación de los datos; Streamlit para construir la aplicación Web y numpy para la generación de los puntos GPS aleatorios: map_data = pd.DataFrame( np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4], columns=['lat', 'lon'])
La primera sección que va a tener nuestra aplicación web será la correspondiente al título y a un encabezado de nuestro sitio web: # Create the title for the web app st.title("San francisco Map") st.header("Using Streamlit and Mapbox")
Posteriormente vamos a desplegar el conjunto de datos GPS para que el usuario pueda visualizar la información que vamos a pintar en el mapa: st.map(map_data)
Propones continuar con el mismo Notebook de Colab para probar nuestro primer ejemplo de mapas.
Para probar este proyecto, repetimos el comando para iniciar el túnel para nuestro proyecto de sidebar.
Creamos la nueva URL para la aplicación.
Creamos el código para el proyecto mapa.py.
Ejecutamos el programa mapa.py.
La salida del código anterior se muestra a continuación.
● Una sección que contenga el mapa.
Notas adicionales ● Considere el uso de crear una función para la obtención de datos, ejemplo de función: @st.cache def load_data(nrows): data = pd.read_csv(DATA_URL, nrows=nrows) lowercase = lambda x: str(x).lower() data.rename(lowercase, axis='columns', inplace=True) data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN]) return data
● Debido a que la base de datos en muy grande, se sugiere recuperar solo una muestra: data = load_data(10000) # probar con 100, 1000, etc
● Como la columna Date/Time es de tipo Fecha y hora, se sugiere aplicar un filtro por hora: filtered_data = data[data[DATE_COLUMN].dt.hour == hour_to_filter]
Para reforzar el tema de mapas propones resolver reto Uber en el mismo Notebook de Colab, y asi todos puedan reafirmar sus propuestas de solución.
Repetimos el comando para iniciar el túnel para nuestro proyecto de sidebar.
Creamos la nueva URL para la aplicación.
Creamos nuestra aplicación de Streamlit para demostrar el uso de st.map con el dataset de Uber.
Ejecutamos el programa uber_ny.py.
