Show code cell source
import os
# Por precaución, cambiamos el directorio activo de Python a aquel que contenga este notebook
if "PAD-book" in os.listdir():
os.chdir(r"PAD-book/Laboratorio-Computacional-de-Analytics/S7 - Visualizacion e interactividad/S7.TU1/")
Visualización interactiva#
Cuando abordamos un proyecto de analítica de datos nos enfrentamos al siguiente reto: ¿Cómo generar valor a partir de grandes volúmenes de información recolectada? Visualizar la información a través de mapas o gráficos simplifica este reto, ya que facilita la identificación de tendencias, patrones y valores atípicos. Usualmente utilizamos las visualizaciones para decidir cómo orientar nuestro análisis.
En este tutorial establecemos nociones fundamentales sobre el uso de las librerías plotly y ipywidgets para integrarlas en procesos de visualización de datos.
Requisitos#
Para desarrollar este tutorial necesitarás:
Utilizar estructuras de datos.
Implementar estructuras de control.
Utilizar la librería
pandas.
Objetivos#
Al final de este tutorial podrás:
1. Crear diferentes tipos de visualizaciones en plotly y personalizarlas de manera amigable.
2. Utilizar ipywidgets para explorar datos de forma interactiva.
3. Crear visualizaciones interactivas en plotly con ipywidgets.
1. Librería plotly#
plotly es una librería interactiva de uso abierto para el lenguaje Python, que soporta más de 40 tipos de visualizaciones únicas. Estas cubren una amplia gama de casos de uso estadístico, financiero, geográfico y científico. Esta librería nos permite crear visualizaciones interactivas que podemos mostrar en Jupyter Notebook, guardar en archivos HTML o utilizar como parte de aplicaciones web construidas con Python utilizando Dash.
1.1. Declarar una figura en plotly#
Declarar una figura como un diccionario#
Declarar una figura haciendo uso de una estructura de datos conocida como un diccionario es el primer paso para entender el funcionamiento de plotly. Te recomendamos importar el módulo plotly.io utilizando el nombre pio(su alias más frecuentemente usado), como se muestra a continuación.
import plotly.io as pio
A continuación definimos los componentes necesarios para declarar una figura haciendo uso de un diccionario.
# Declaramos una figura.
fig = {
# Definimos los datos para crear una figura.
"data": [
# Definimos la primera serie de datos de nuestra figura.
{
"type": "bar", # Tipo de visualización. En este caso definimos un gráfico de barras.
"x": [1, 2, 3], # Eje x. En este caso corresponde a los nombres de las categorías del eje.
"y": [1, 3, 2] # Eje y. En este caso corresponde a la frecuencia observada para cada categoría.
},
# Definimos la segunda serie de datos de nuestra figura.
{
"type": "bar",
"x": [1, 2, 3],
"y": [3, 4, 5]
}
]
}
Después de definir la figura utilizamos la función show para mostrarla.
pio.show(fig)
Declarar una figura como un objeto gráfico#
Declarar una figura haciendo uso de un objeto gráfico tiene ventajas frente a declararla como un diccionario. De esta manera, podemos:
Realizar una validación de los datos de manera precisa.
Acceder a las propiedades de los objetos gráficos utilizando dos tipos de sintaxis: la de los diccionarios (e. g.,
fig['layout']) y la de las clases (e. g.,fig.layout).Acceder a funciones útiles al momento de modificar figuras (e. g.,
add_traceyupdate_layout).
Para declarar una figura haciendo uso de un objeto gráfico, te recomendamos importar el módulo plotly.graph_objects utilizando el nombre go (su alias más frecuentemente usado), como se muestra a continuación.
import plotly.graph_objects as go
A continuación definimos los componentes necesarios para declarar una figura haciendo uso de un objeto gráfico.
# Declaramos una figura.
fig = go.Figure(
# Definimos los datos para crear una figura.
data = [
# Definimos la primera serie de datos de nuestra figura.
# Tipo de visualización. En este caso definimos un gráfico de barras.
go.Bar(
x = [1, 2, 3], # Eje x. En este caso corresponde a los nombres de las categorias del eje.
y = [1, 3, 2] # Eje y. En este caso corresponde a la frecuencia observada para cada categoria.
),
# Definimos la segunda serie de datos de nuestra figura.
go.Bar(
x = [1, 2, 3],
y = [3, 4, 5]
)
]
)
Despúes de definir la figura, utilizamos el método show para mostrarla.
fig.show()
1.2. Tipos de visualizaciones#
Principales tipos de visualizaciones#
La siguiente tabla asocia algunos de los métodos del módulo go con el respectivo tipo de visualización que genera.
|
Gráfico de línea, dispersión y burbuja |
|
Histogramas |
|
Gráfico de barras |
|
Gráfico de cascada |
|
Diagrama de torta |
|
Diagrama de caja |
|
Matriz de dispersión |
Gráfico de línea#
Para crear un gráfico de línea utilizamos colecciones de objetos llamadas trazos (traces). En primer lugar, creamos un objeto figura. Posteriormente, utilizamos el método add_trace para agregar un trazo por cada una de las series de datos que queremos mostrar en nuestra figura. Para finalizar, modificaremos el gráfico añadiéndole títulos y leyendas.
# Creamos el objeto figura.
fig = go.Figure()
# Agregamos el primer trazo.
fig.add_trace(
go.Scatter(
x = [2017,2018,2019,2020], # Coordenadas en el eje x.
y = [10,20,30,40], # Coordenadas en el eje y.
name = "A" # Nombre de la serie.
)
)
# Agregamos el segundo trazo.
fig.add_trace(
go.Scatter(
x = [2017,2018,2019,2020], # Coordenadas en el eje x.
y = [32,34,36,38], # Coordenadas en el eje y.
name = "B" # Nombre de la serie.
)
)
# Modificamos el estilo del diseño.
fig.update_layout(
# Definimos el título del gráfico.
title = "Unidades Vendidas entre 2017 y 2020",
# Definimos el título del eje x.
xaxis_title = "Año",
# Definimos el título del eje y.
yaxis_title = "Unidades Vendidas",
# Definimos el título de la leyenda.
legend_title = "Producto",
# Agregamos los años como etiquetas del eje x.
xaxis = dict(
tickmode = 'linear', # Modo de las etiquetas.
tick0 = 2017, # Etiqueta de inicio. En este caso, 2017.
dtick = 1 # Aumento entre etiquetas. En este caso, 1.
)
)
# Mostramos la figura.
fig.show()
Serie de tiempo#
A continuación, crearemos una serie de tiempo y modificaremos los siguientes elementos del gráfico: el color de la línea, el color de fondo del área del gráfico y los colores de los ejes.
# Importamos la librería de números aleatorios.
from random import random
# Declaramos una figura.
fig = go.Figure(
data = [
# Tipo de visualización. En este caso definimos una serie de tiempo.
go.Scatter(
x = [i for i in range(100)], # Coordenadas en el eje x. Estas se encuentran entre 0 y 100.
y = [2*random()-1 for i in range(100)], # Coordenadas en el eje y. Estas de detrminan de manera aleatoria.
line = go.scatter.Line(color = "#228b22") # Modificamos el color de la línea. Código HEX.
)
],
# Modificamos el estilo del diseño.
layout = go.Layout(
title = "Serie de tiempo", # Definimos el título del gráfico.
plot_bgcolor = "#1a2421", # Modificamos el fondo del área del gráfico. Código HEX.
)
)
fig.update_xaxes(gridcolor = '#d3d3d3') # Modificamos los colores del eje x. Código HEX.
fig.update_yaxes(gridcolor = '#d3d3d3') # Modificamos los colores del eje y. Código HEX.
# Mostramos la figura.
fig.show()
Diagrama de caja#
A continuación crearemos una diagrama de caja.
# Declaramos una figura.
fig = go.Figure(
data = [
# Tipo de visualización. En este caso definimos un diagrama de caja.
go.Box(
y = [2*random()-1 for i in range(100)], # Definimos los valores de la serie de datos.
name = "Grupo 1", # Definimos nombre de la serie de datos.
marker_color = 'yellow' # Definimos el color del diagrama.
),
# Tipo de visualización. En este caso definimos un diagrama de caja.
go.Box(
y = [2*random()-.5 for i in range(100)], # Definimos los valores de la serie de datos.
name = "Grupo 2", # Definimos nombre de la serie de datos.
marker_color = 'green' # Definimos color del diagrama.
)
],
# Modificamos el estilo del diseño.
layout = go.Layout(
title = "Distribución valores", # Definimos el título del gráfico.
xaxis_title = "Grupos", # Definimos el título del eje x.
yaxis_title = "Valor" # Definimos el título del eje y.
)
)
fig.show()
2. Librería ipywidgets#
ipywidgets es una librería de controles HTML interactivos para Jupyter. Esta librería agrega interactividad a los gráficos y al manejo de datos, al otorgar control a los usuarios por medio de controles. Te recomendamos importar la librería ipywidgets utilizando el nombre widgets (su alias más frecuentemente usado), como se muestra a continuación.
import ipywidgets as widgets
A continuación se presenta una tabla que asocia algunos de los principales métodos del objeto widgets, que importamos anteriormente, con su respectivo tipo de control.
|
Control deslizante |
|
Control deslizante (selecciona un rango) |
|
Barra que muestra el progreso dentro de un total |
|
Botón de activación |
|
Caja de selección |
|
Lista desplegable |
|
Botón para seleccionar entre múltiples opciones |
|
Cuadro de selección |
|
Cuadro de selección múltiple |
|
Control deslizante de selección entre múltiples opciones |
|
Cuadro de texto |
*Este método se utiliza para números enteros, para el caso de números decimales reemplazamos Int por Float. Por ejemplo, el método IntSlider para números decimales es FloatSlider.
2.1. Controles simples#
Barra deslizante#
A continuación, crearemos una barra deslizante (slider) y posteriormente, capturaremos su valor para mostrarlo. En primer lugar, declaramos la barra deslizante. Esta tiene un valor mínimo de 1, un valor máximo de 10 y va de 1 en 1.
barra_deslizante = widgets.IntSlider(min = 1, max = 10, step = 1)
Luego, capturamos el valor seleccionado de la barra deslizante en la variable seleccion.
seleccion = widgets.Output()
Ahora, definimos una función que actualice el valor de la barra deslizante de acuerdo con la seleccion y lo muestre en un mensaje.
def funcion_a_correr_tras_cambio(info_control):
# Reestablecemos la variable seleccion.
seleccion.clear_output()
# Cuando seleccion toma un nuevo valor.
with seleccion:
# Mostramos un mensaje con el valor del control.
print("La barra deslizante toma un valor de "+ str(info_control['new']))
Posteriormente, vinculamos la barra deslizante con la función definida.
barra_deslizante.observe(funcion_a_correr_tras_cambio, names='value')
Podemos visualizar e interactuar con la barra deslizante.
barra_deslizante
Podemos actualizar el valor de la barra de manera programática (el valor por defecto es el parámetro min=1).
barra_deslizante.value = 2
Finalmente, verificamos nuestra implementación mostrando el valor de la barra deslizante.
seleccion
Casilla de verificación#
A continuación, crearemos una casilla de verificación (checkbox) y posteriormente, capturaremos su valor para mostrarlo. En primer lugar, declaramos la casilla de verificación.
casilla_verificacion = widgets.Checkbox(description='Acepto')
Luego, capturamos la selección de la casilla de verificación en la variable seleccion.
seleccion = widgets.Output()
Ahora, definimos una función que actualice el valor de la casilla de verificación de acuerdo con la seleccion y muestre un mensaje.
def actualizacion(info_control):
# Reestablecemos la variable seleccion.
seleccion.clear_output()
# Cuando seleccion toma un nuevo valor.
with seleccion:
# Cuando se selecciona la casilla de verificación.
if info_control['new']:
print("La persona aceptó")
# De lo contario.
else:
print("La persona NO aceptó")
Posteriormente, vinculamos la casilla de verificación con la función definida.
casilla_verificacion.observe(actualizacion, names='value')
Visualicemos la casilla de verificación.
casilla_verificacion
Podemos actualizar el valor de la casilla de manera programática (el valor por defecto es False).
casilla_verificacion.value = True
Finalmente, verificamos nuestra implementación mostrando el mensaje definido.
seleccion
2.2. Integración con bases de datos#
Filtrar valores en una base de datos#
A continuación, filtraremos valores en una base de datos. Para esto, utilizamos una base de datos que contiene la oferta de alojamientos de Airbnb en Nueva York para el año 2019. En primer lugar, importamos la librería pandas para el manejo de la base datos.
import pandas as pd
Luego, importamos la base de datos de la oferta de alojamientos de Airbnb en Nueva York y realizamos una breve exploración de esta.
datos = pd.read_csv("Archivos/AB_NYC_2019.csv")
datos.head()
| id | name | host_id | host_name | neighbourhood_group | neighbourhood | latitude | longitude | room_type | price | minimum_nights | number_of_reviews | last_review | reviews_per_month | calculated_host_listings_count | availability_365 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 0 | 2539 | Clean & quiet apt home by the park | 2787 | John | Brooklyn | Kensington | 40.64749 | -73.97237 | Private room | 149 | 1 | 9 | 2018-10-19 | 0.21 | 6 | 365 |
| 1 | 2595 | Skylit Midtown Castle | 2845 | Jennifer | Manhattan | Midtown | 40.75362 | -73.98377 | Entire home/apt | 225 | 1 | 45 | 2019-05-21 | 0.38 | 2 | 355 |
| 2 | 3647 | THE VILLAGE OF HARLEM....NEW YORK ! | 4632 | Elisabeth | Manhattan | Harlem | 40.80902 | -73.94190 | Private room | 150 | 3 | 0 | NaN | NaN | 1 | 365 |
| 3 | 3831 | Cozy Entire Floor of Brownstone | 4869 | LisaRoxanne | Brooklyn | Clinton Hill | 40.68514 | -73.95976 | Entire home/apt | 89 | 1 | 270 | 2019-07-05 | 4.64 | 1 | 194 |
| 4 | 5022 | Entire Apt: Spacious Studio/Loft by central park | 7192 | Laura | Manhattan | East Harlem | 40.79851 | -73.94399 | Entire home/apt | 80 | 10 | 9 | 2018-11-19 | 0.10 | 1 | 0 |
Las variables que utilizaremos se encuentran en la siguiente tabla:
|
Distrito |
|
Tipo de alojamiento |
|
Precio de una noche de hospedaje |
Definimos una función que retorne una lista con los valores únicos de una columna cualquiera.
def valores_filtro_columna(columna):
columna = columna.astype(str) # Convertimos en str los valores de la columna que entra por parámetro.
valores = columna.unique().tolist() # Guardamos una lista con los valores únicos de la columna que entra por parámetro.
valores = sorted(valores) # Organizamos la lista de valores únicos de manera ascedente.
valores.insert(0, "Todos") # Agregamos el elemento "Todos" en la primera posición de la lista.
return valores
Creamos una lista desplegable (dropdown) dónde las opciones sean los valores únicos de la columna neighbourhood_group.
menu = widgets.Dropdown(options = valores_filtro_columna(datos["neighbourhood_group"]))
Luego, capturamos el valor seleccionado de la lista desplegable en la variable seleccion.
seleccion = widgets.Output()
Ahora, definimos una función que filtre los valores del DataFrame de acuerdo con la seleccion.
def accion_cambio_menu(change):
# Reestablecemos la variable seleccion.
seleccion.clear_output()
# Cuando seleccion toma un nuevo valor.
with seleccion:
# Si el nuevo valor es "Todos".
if (change["new"] == "Todos"):
# Muestre todos los registros.
display(datos)
# Si el nuevo valor es diferente de "Todos".
else:
# Muestre los registros correspondientes al nuevo valor.
display(datos[ datos["neighbourhood_group"] == change["new"] ])
Posteriormente, vinculamos la lista desplegable con la función definida.
menu.observe(accion_cambio_menu, names='value')
Finalmente, visualizamos la lista desplegable y los registros según la selección.
menu
seleccion
Podemos actualizar el valor del menu de manera programática (el valor por defecto es el primer elemento de la lista, "Todos").
menu.value = "Bronx"
Controles con interactive#
interactive es una función que nos permite agregarle interactividad a la exploración de los datos. Para usar esta función, en primer lugar, debemos importar el módulo interactive de ipywidgets.
from ipywidgets import interactive
Definimos una función para filtrar los registros de la base datos de la oferta de alojamientos de Airbnb en Nueva York de acuerdo a múltiples criterios. Queremos que el usuario defina los siguientes criterios: el distrito donde se ubica el alojamiento, el tipo de alojamiento y el precio máximo que está dispuesto a pagar.
def filtrar(Distrito, Tipo_Alojamiento, Precio_Maximo):
# Guardamos las columnas de interés en un nuevo DataFrame.
DF = datos[['id','host_name','price','neighbourhood_group', 'room_type']]
# Los siguientes cuatro casos ajustan los registros a mostrar de acuerdo con la selección del usuario.
if Distrito != "Todos" and Tipo_Alojamiento != "Todos":
return DF[(DF["neighbourhood_group"] == Distrito) & (DF["room_type"] == Tipo_Alojamiento)
& (DF["price"] <= Precio_Maximo)]
elif Distrito == "Todos" and Tipo_Alojamiento != "Todos":
return DF[(DF["room_type"] == Tipo_Alojamiento) & (DF["price"] <= Precio_Maximo)]
elif Distrito != "Todos" and Tipo_Alojamiento == "Todos":
return DF[(DF["neighbourhood_group"] == Distrito) & (DF["price"] <= Precio_Maximo)]
else:
return DF[(DF["price"] <= Precio_Maximo)]
Luego, utilizamos el método interactive para definir el objeto interactive_plot. Este método recibe por parámetro la función filtrar y la lista de valores que puede tomar el control asocidado a cada uno de sus parámetros (Distrito, Tipo_Alojamiento y Precio_Maximo). Para esto, utilizamos la función valores_filtro_columna definida previamente.
_ = widgets.interact(
filtrar,
Distrito = valores_filtro_columna(datos["neighbourhood_group"]),
Tipo_Alojamiento = valores_filtro_columna(datos["room_type"]),
Precio_Maximo = (0, 500, 10)
)
Finalmente, visualizamos los controles y los registros según la selección.
3. plotly con ipywidgets#
Al combinar las librerías ipywidgets y plotly obtenemos gráficos visualmente agradables e interactivos, los cuales nos facilitan el filtrado de datos para su respectivo análisis. A continuación, crearemos un gráfico interactivo a partir de una base de datos de la oferta de alojamientos de Airbnb en Buenos Aires. Este gráfico se actualizará de acuerdo con los filtros aplicados a los registros de la base de datos. Aplicaremos filtros al tipo de alojamiento, barrio de la ciudad y número de huéspedes por alojamiento.
Importamos las librerías ipywidgets y pandas y el módulo plotly.graph_objects de plotly.
import ipywidgets as widgets
import pandas as pd
import plotly.graph_objects as go
Luego, importamos la base de datos de la oferta de alojamientos de Airbnb en Buenos Aires y realizamos una breve exploración de esta.
df = pd.read_csv('Archivos/listings.csv')
df.head()
| id | listing_url | scrape_id | last_scraped | name | description | neighborhood_overview | picture_url | host_id | host_url | ... | review_scores_communication | review_scores_location | review_scores_value | license | instant_bookable | calculated_host_listings_count | calculated_host_listings_count_entire_homes | calculated_host_listings_count_private_rooms | calculated_host_listings_count_shared_rooms | reviews_per_month | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 0 | 11508 | https://www.airbnb.com/rooms/11508 | 20201224153457 | 2020-12-24 | Amazing Luxurious Apt-Palermo Soho | <b>The space</b><br />LUXURIOUS NEW APT: 1 BDR... | AREA: PALERMO SOHO<br /><br />Minutes walking ... | https://a0.muscache.com/pictures/19357696/b1de... | 42762 | https://www.airbnb.com/users/show/42762 | ... | 10.0 | 10.0 | 10.0 | NaN | f | 1 | 1 | 0 | 0 | 0.25 |
| 1 | 12463 | https://www.airbnb.com/rooms/12463 | 20201224153457 | 2020-12-25 | Room in Recoleta - awesome location | My apartment is centrally located in Recoleta ... | It's near the school of medicine so the street... | https://a0.muscache.com/pictures/11680256/57ef... | 48799 | https://www.airbnb.com/users/show/48799 | ... | 10.0 | 10.0 | 10.0 | NaN | f | 1 | 0 | 1 | 0 | 0.15 |
| 2 | 13095 | https://www.airbnb.com/rooms/13095 | 20201224153457 | 2020-12-25 | Standard Room at Palermo Viejo B&B w pvt Bath | Palermo Viejo B&B is a typical home in one of ... | NaN | https://a0.muscache.com/pictures/5397449/0096e... | 50994 | https://www.airbnb.com/users/show/50994 | ... | 10.0 | 10.0 | 10.0 | NaN | f | 7 | 0 | 7 | 0 | 0.04 |
| 3 | 13096 | https://www.airbnb.com/rooms/13096 | 20201224153457 | 2020-12-25 | Standard Room in Palermo Viejo B&B | Palermo Viejo B&B is a typical home in one of ... | NaN | https://a0.muscache.com/pictures/5397459/8775e... | 50994 | https://www.airbnb.com/users/show/50994 | ... | NaN | NaN | NaN | NaN | f | 7 | 0 | 7 | 0 | NaN |
| 4 | 13097 | https://www.airbnb.com/rooms/13097 | 20201224153457 | 2020-12-25 | Standard Room at Palermo Viejo B&B pvt bath | Palermo Viejo B&B is a typical home in one of ... | NaN | https://a0.muscache.com/pictures/4970811/e8be1... | 50994 | https://www.airbnb.com/users/show/50994 | ... | 10.0 | 10.0 | 10.0 | NaN | f | 7 | 0 | 7 | 0 | 0.44 |
5 rows × 74 columns
Asimismo, las variables que utilizaremos se encuentran en la siguiente tabla:
|
Precio de una noche de hospedaje |
|
Tipo de alojamiento |
|
Barrio de la ciudad |
|
Máximo de huéspedes por alojamiento |
Es de nuestro interés conocer qué barrios hay en Buenos Aires. Para esto, exploramos los registros únicos de la variable neighbourhood_cleansed.
df['neighbourhood_cleansed'].unique()
array(['Palermo', 'Recoleta', 'Monserrat', 'Nuñez', 'Balvanera',
'Belgrano', 'San Nicolas', 'San Telmo', 'Constitucion',
'Puerto Madero', 'Chacarita', 'Retiro', 'Villa Crespo', 'Boedo',
'Colegiales', 'Almagro', 'Caballito', 'San Cristobal',
'Villa Ortuzar', 'Nueva Pompeya', 'Parque Chacabuco',
'Villa Urquiza', 'Barracas', 'Villa Santa Rita', 'Coghlan',
'Parque Patricios', 'Boca', 'Villa Luro', 'Villa Devoto',
'Saavedra', 'Flores', 'Monte Castro', 'Velez Sarsfield',
'Floresta', 'Parque Chas', 'Paternal', 'Agronomia',
'Villa Pueyrredon', 'Villa Del Parque', 'Villa Gral. Mitre',
'Parque Avellaneda', 'Liniers', 'Mataderos', 'Villa Real',
'Versalles', 'Villa Riachuelo', 'Villa Lugano', 'Villa Soldati'],
dtype=object)
Declaramos la barra deslizante y las listas desplegables. En primer lugar, declaramos la barra deslizante que hace referencia al número de huéspedes por alojamiento.
num_huespedes = widgets.IntSlider(min = 1.0, max = 16.0, step = 1.0)
En segundo lugar, declaramos la lista desplegable de tipos de alojamiento.
tipo = widgets.Dropdown(
description = 'Tipo Alojamiento:',
options = df['room_type'].unique().tolist(),
style = {'description_width': 'initial'} # Mostrar el nombre completo.
)
En tercer lugar, declaramos la lista desplegable de barrios.
barrio = widgets.Dropdown(
description = 'Barrio:',
options = df['neighbourhood_cleansed'].unique().tolist(),
style = {'description_width': 'initial'} # Mostrar el nombre completo.
)
Declaramos la figura y sus componentes. Como es una figura interactiva, utilizamos el método FigureWidget del módulo plotly.graph_objects.
fig = go.FigureWidget(
data = go.Histogram(name = 'Precio'),
layout = go.Layout(
title = 'Acomodación en Buenos Aires',
xaxis_title = 'Precio en pesos argentinos',
yaxis_title = 'Número de alojamientos'
)
)
Luego, le agregamos funcionalidad e interactividad al gráfico. En primer lugar, definimos la función filtrar que filtre los datos de acuerdo con lo seleccionado por el usuario.
def filtrar():
filtrar_lista = [i and j and k for i, j, k in zip(
df['accommodates'] >= num_huespedes.value,
df['room_type'] == tipo.value,
df['neighbourhood_cleansed'] == barrio.value
)
]
df_temporal = df[filtrar_lista]
fig.data[0].x = df_temporal['price'] # Establecemos los datos en el eje x.
En segundo lugar, definimos una función que guarda los cambios en el gráfico.
def respuesta(change):
filtrar()
Posteriormente, vinculamos los controles con la función de respuesta.
barrio.observe(respuesta, names = 'value')
tipo.observe(respuesta, names = 'value')
num_huespedes.observe(respuesta, names = 'value')
Inicializamos los valores del gráfico invocando la función filtrar.
filtrar()
Definimos los componentes de la parte superior del gráfico. Utilizamos las funciones HBox y Label de ipywidgets para definir estos componentes.
parte_superior = widgets.HBox([widgets.Label('Acomodacion para:'), num_huespedes])
Definimos los componentes de la parte inferior del gráfico.
parte_inferior = widgets.HBox([barrio, tipo])
Luego, enlazamos los controles usando la función VBox.
visualizacion = widgets.VBox(
[
parte_superior,
parte_inferior,
fig
]
)
Finalmente, visualizamos los controles y podemos interactuar con el gráfico.
visualizacion
Referencias#
Analytiks (2020). Why Data Visualization Is Important. Recuperado el 11 de febrero de 2021 de: https://analytiks.co/importance-of-data-visualization/
Inside Airbnb (2021). Buenos Aires. Recuperado el 11 de febrero de 2021 de: http://data.insideairbnb.com/argentina/ciudad-autónoma-de-buenos-aires/buenos-aires/2021-01-29/visualisations/listings.csv
Dgomonov (2021). New York City Airbnb Open Data. Recuperado el 11 de febrero de 2021 de: https://www.kaggle.com/dgomonov/new-york-city-airbnb-open-data
Jupyter Widgets (2021). Simple Widget Introduction. Recuperado el 11 de febrero de 2021 de: https://ipywidgets.readthedocs.io/en/stable/examples/Widget Basics.html
Jupyter Widgets (2021). Simple Widget Introduction. Recuperado el 11 de febrero de 2021 de: https://ipywidgets.readthedocs.io/en/stable/examples/Widget List.html
Plotly (2021). Creating and Updating Figures in Python. Recuperado el 11 de febrero de 2021 de: https://plotly.com/python/creating-and-updating-figures/
Plotly (2021). The Figure Data Structure in Python. Recuperado el 11 de febrero de 2021 de: https://plotly.com/python/figure-structure/
Plotly (2021). Interactive Data Analysis with FigureWidget ipywidgets in Python. Recuperado el 11 de febrero de 2021 de: https://plotly.com/python/figurewidget-app/
Créditos#
Autores: Juan David Reyes Jaimes, Alejandro Mantilla Redondo, Diego Alejandro Cely Gómez
Fecha última actualización: 27/07/2022