En este tutorial, creamos un panel de visualización de datos visualmente atractivo y totalmente interactivo utilizando Bokeh. Comenzamos convirtiendo datos sin procesar en gráficos reveladores y luego los mejoramos con funciones como cepillado vinculado, degradados de color y filtros en tiempo real impulsados por menús desplegables y controles deslizantes. A medida que avanzamos, le damos vida a nuestro panel con interactividad de JavaScript personalizado (CustomJS), lo que permite respuestas instantáneas del lado del navegador sin una sola devolución de llamada de Python. Al combinar lo mejor de la fortaleza analítica de Python con la capacidad de respuesta de JavaScript, creamos una experiencia de panel dinámica y fluida que redefine cómo visualizamos e interactuamos con los datos. Consulta los CÓDIGOS COMPLETOS aquí.
(“Temp (°C)”, “@temp_c{0.0}”), (“Pressure”, “@pressure_kpa{0.0} kPa”),
(“Humidity”, “@humidity_pct{0.0}%”), (“Sensor”, “@sensor_id”),
(“Timestep”, “@timestep”)]renderizadores =[scat]) p_scatter.add_tools(hover) p_scatter.legend.location = “arriba_izquierda” show(p_scatter)
Comenzamos configurando nuestro entorno e importando todas las bibliotecas necesarias. Luego creamos un conjunto de datos sintéticos y visualizamos la temperatura frente a la presión utilizando un diagrama de dispersión simple con función de desplazamiento. Esto nos ayuda a establecer una base para nuestro panel interactivo. Consulta los CÓDIGOS COMPLETOS aquí.
(“Temp (°C)”, “@temp_c{0.0}”), (“Humidity”, “@humidity_pct{0.0}%”),
(“Sensor”, “@sensor_id”)]renderizadores =[r2])) diseño_vinculado = fila(p_scatter, p_humidity) show(diseño_vinculado)
Ampliamos nuestra visualización agregando otro gráfico que vincula la humedad y la temperatura a través de datos compartidos. Usamos cepillado vinculado para que las selecciones en un gráfico se reflejen automáticamente en el otro, lo que nos ayuda a analizar relaciones entre múltiples variables simultáneamente. Consulta los CÓDIGOS COMPLETOS aquí.
Mejoramos nuestra visualización introduciendo una función de mapeo de color continuo para representar los niveles de humedad. Al agregar una barra de color y un degradado, hacemos que nuestro gráfico sea más informativo e intuitivo, lo que nos permite interpretar las variaciones visualmente. Consulta los CÓDIGOS COMPLETOS aquí.
checkbox_group = CheckboxGroup(labels=columns_available, active=list(range(len(columns_available)))) def filter_mask(sensor_val, max_temp): retorno [(s == sensor_val) and (t <= max_temp)
for s, t in zip(data[“sensor_id”]datos[“temp_c”])]bool_filter = BooleanFilter(filter_mask(sensor_select.value, temp_slider.value)) view = CDSView(filter=bool_filter) p_filtered = figure(title=”Filtrado: Temp vs Presión”, ancho=400, alto=300, x_axis_label=”Temp (°C)”, y_axis_label=”Presión (kPa)”, herramientas=”pan,wheel_zoom,reset,box_select,lasso_select”) r_filtered = p_filtered.circle(x=”temp_c”, y=”presión_kpa”, tamaño=8, fill_alpha=0.7, fill_color=”ladrillo refractario”, line_color=”blanco”, fuente=fuente_principal, vista=vista) p_filtered.add_tools(HoverTool(tooltips=[
(“Temp”, “@temp_c{0.0}”), (“Pressure”, “@pressure_kpa{0.0}”),
(“Humidity”, “@humidity_pct{0.0}%”), (“Sensor”, “@sensor_id”)]renderizadores =[r_filtered])) def make_table_src(cols): devuelve ColumnDataSource(datos[cols]) table_src = make_table_src(columnas_disponibles) table_columns = [TableColumn(field=c, title=c) for c in columns_available]
table_widget = DataTable(fuente=table_src, columnas=table_columns, ancho=500, alto=200) def update_filters(attr, antiguo, nuevo): bool_filter.booleans = filter_mask(sensor_select.value, temp_slider.value) def update_table(attr, antiguo, nuevo): active_cols = [columns_available[i] para i en checkbox_group.active]new_src = make_table_src(active_cols) table_widget.source.data = new_src.data table_widget.columns = [TableColumn(field=c, title=c) for c in active_cols]
sensor_select.on_change(“value”, update_filters) temp_slider.on_change(“value”, update_filters) checkbox_group.on_change(“active”, update_table) Dashboard_controls = column(Div(text=”Filtros interactivos”), sensor_select, temp_slider, Div(text=”Columnas en la tabla”), checkbox_group) Dashboard_layout = fila (columna (p_filtered, table_widget), tablero_controles) mostrar (dashboard_layout)
Introducimos interactividad a través de widgets como menús desplegables, controles deslizantes y casillas de verificación. Filtramos datos dinámicamente y actualizamos tablas en tiempo real, lo que nos permite explorar fácilmente diferentes subconjuntos y atributos del conjunto de datos. Consulta los CÓDIGOS COMPLETOS aquí.
Implementamos una interacción basada en JavaScript utilizando CustomJS de Bokeh. Creamos una visualización de onda sinusoidal y permitimos a los usuarios ampliar los marcadores de la trama con solo hacer clic en un botón, lo que demuestra el control del lado del cliente sin ninguna devolución de llamada de Python. Consulta los CÓDIGOS COMPLETOS aquí.
Simulamos un flujo de datos en vivo agregando continuamente nuevos puntos de datos a nuestra gráfica. Observamos la actualización de la visualización de forma dinámica, mostrando cómo Bokeh puede manejar datos en tiempo real y proporcionar retroalimentación visual instantánea.
En conclusión, creamos un panel completamente funcional, en tiempo real e interactivo con el navegador que muestra todo el potencial de Bokeh. Aprendemos a visualizar múltiples dimensiones de datos, filtrar y actualizar imágenes dinámicamente e incluso aprovechar la integración de JavaScript para realizar actualizaciones instantáneas del lado del cliente directamente dentro del navegador. Esta experiencia práctica nos muestra cómo Bokeh fusiona sin esfuerzo Python y JavaScript, permitiéndonos diseñar paneles que no solo son interactivos sino también inteligentes, responsivos y listos para producción.
Consulta los CÓDIGOS COMPLETOS aquí. No dude en consultar nuestra página de GitHub para tutoriales, códigos y cuadernos. Además, no dude en seguirnos en Twitter y no olvide unirse a nuestro SubReddit de más de 100.000 ML y suscribirse a nuestro boletín. ¡Esperar! estas en telegrama? Ahora también puedes unirte a nosotros en Telegram.
Asif Razzaq es el director ejecutivo de Marktechpost Media Inc.. Como empresario e ingeniero visionario, Asif está comprometido a aprovechar el potencial de la inteligencia artificial para el bien social. Su esfuerzo más reciente es el lanzamiento de una plataforma de medios de inteligencia artificial, Marktechpost, que se destaca por su cobertura en profundidad del aprendizaje automático y las noticias sobre aprendizaje profundo que es técnicamente sólida y fácilmente comprensible para una amplia audiencia. La plataforma cuenta con más de 2 millones de visitas mensuales, lo que ilustra su popularidad entre el público.
🙌 Siga MARKTECHPOST: agréguenos como fuente preferida en Google.