in

[2021] Dash para principiantes: paneles de Python {DH}

Cree paneles Python interactivos sin HTML, CSS y Js

17 de marzo·5 minutos de lectura

Tableros interactivos de Python con Plotly Dash
Imagen diseñada por freepik

Dash es un marco de Python creado por Plotly para crear aplicaciones web interactivas. El script está escrito en Flask, Plotly.js y React.js. Con Dash, no necesita aprender HTML, CSS y Javascript para crear paneles interactivos, solo necesita Python. Dash es de código abierto y la aplicación creada con este marco se mostrará en el navegador web.

Con Dash, no necesita aprender HTML, CSS y Javascript para crear paneles interactivos, solo necesita Python.

Las aplicaciones de Dash consisten en 2 bloques de construcción:

  1. reclutar
  2. recuerda

El diseño describe el aspecto yD Sentido de la aplicación, define los elementos como gráficos, menús desplegables, etc. y la ubicación, tamaño, color, etc. de estos elementos. contiene guión Componentes HTML de tablero con el que podemos crear y diseñar contenido HTML como encabezados, párrafos, imágenes, etc. con Pitón. Elementos como gráficos, menús desplegables y controles deslizantes se construyen con Componentes principales del tablero.

Las devoluciones de llamada se utilizan para hacer que las aplicaciones del tablero sean interactivas. Estas son las funciones que nos permiten definir, por ejemplo, la actividad que se produciría al hacer clic en un botón o menú desplegable.

Ahora veamos cómo podemos crear diseños basados ​​en la web usando Plotly Dash. Antes de comenzar con el diseño, instalemos algunos paquetes necesarios.

Ahora importamos el paquete dash, dash_html_components para clases HTML, dash_core_components para cosas como gráficos, menús desplegables, etc. y paquetes de gráficos para crear gráficos y leer registros de precios de acciones.

(En el código a continuación) Inicializamos nuestra aplicación de tablero con el paquete de tablero. A continuación, leemos los datos del precio de las acciones de varias empresas de 2018 a 2019. Creamos la función stock_prices que devuelve el gráfico de líneas de los precios de las acciones de Google.

(En el código anterior) En la línea 16, configuramos nuestro diseño con el componente html div, que es una especie de contenedor en el que se crean los elementos (encabezado, gráfico) del diseño. El componente div toma argumentos como id (un identificador único del elemento), estilo (para establecer el ancho, alto, color, etc.) y elementos secundarios (corresponde al paréntesis en el que se inicializan los elementos de diseño).

Dentro del componente secundario (de html.Div) creamos el encabezado HTML H1 en la línea 17 con la función H1. Dentro de la función, establecemos el ID único de la función (id=’H1′), la propiedad secundaria, que usamos para establecer el texto del encabezado, y la propiedad de estilo, como un diccionario, donde establecemos el estilo, como la parte superior y márgenes inferiores a 40 píxeles. En la línea 21, usamos el componente de secuencia de comandos principal (dcc) para crear el gráfico, donde establecemos el ID del gráfico y el argumento numérico que corresponde a la llamada a la función (stock_pricest()) que devuelve el número del objeto del gráfico.

Para ver nuestra aplicación, necesitamos ejecutar nuestro servidor web como en Flask. Recuerda que Dash está construido sobre Flask.

Cuando ejecute la aplicación, verá que la aplicación se ejecuta en http://127.0.0.1:8050/, que es su servidor local. Copie y pegue esta URL en su navegador y verá la siguiente visualización.

Ahora vamos a crear un menú desplegable con los componentes principales del tablero. A través del desplegable podemos seleccionar las acciones de Google, Apple o Amazon.

Los menús desplegables se crean utilizando la función Dropdown(), que tiene los siguientes argumentos:

  1. id: identificador único del menú desplegable.
  2. opciones: establece la ‘etiqueta’ (el texto visible en la lista desplegable) y el ‘valor’ (que utiliza el script para comunicarse con las devoluciones de llamada) como un par clave-valor.
  3. Valor: selección predeterminada para el menú desplegable.

Ahora veamos cómo podemos crear la devolución de llamada que conecta el menú desplegable y el gráfico de líneas del precio de las acciones.

Una devolución de llamada se inicializa con @app.callback() seguida de una definición de función. Dentro de esta función definimos lo que sucede cuando cambia el valor del menú desplegable.

Veamos los argumentos en la función de devolución de llamada:

  1. producción: Esto se usa para definir los componentes dentro del diseño que se actualizarán cuando la función bajo la devolución de llamada (graph_update()) devuelva un objeto. La función de salida toma 2 argumentos: 1) «component_id» define la identificación del componente que queremos actualizar con nuestra función «graph_update». Queremos actualizar el gráfico de precios de las acciones dentro del gráfico dcc.Graph, por lo que establecemos la identificación del componente en «line_plot», que es la identificación de nuestro componente gráfico. 2) La propiedad del componente define la propiedad del componente que se actualizará, que en nuestro diseño es la propiedad de figura de dcc.Graph.
  2. Entrada: se utiliza para definir los componentes cuyo cambio de valor activa la devolución de llamada. La función de entrada también toma «component_id» y «component_property» como argumentos. Queremos que la devolución de llamada se active en función del cambio en el valor de nuestro menú desplegable, por lo que establecemos la propiedad «propiedad_componente» en la propiedad «valor» del menú desplegable. Tenga en cuenta que la entrada se define dentro de una lista.

La propiedad del componente de la función de entrada, que es el «valor» del menú desplegable, se incluye como argumento en la función graph_update. Dentro de la función, creamos un diagrama de dispersión y devolvemos el objeto figure fig, que se pasa a la propiedad figure de dcc.Graph usando la función de salida de devolución de llamada.

Ahora combinemos el diseño, el menú desplegable y la devolución de llamada en el siguiente código:

La siguiente imagen muestra cómo el cambio de valor del menú desplegable actualiza nuestro gráfico de líneas de precios de acciones.

Entonces, analicemos cómo podemos crear gráficamente tableros interactivos usando Dash. Primero, creemos el diseño con componentes HTML y componentes principales del tablero. Luego, agregamos el menú desplegable y lo conectamos al gráfico de líneas del precio de las acciones a través de la devolución de llamada.

¿Quieres saber más sobre la historia de Dash? Puedes seguir la documentación oficial o consultar mi curso en Udemy que te enseña cómo crear un tablero interactivo completo. Puedes obtener un descuento de hasta el 60% en el siguiente enlace: https://bit.ly/3tmqij7

Relacionado, [2021] Dash para principiantes: paneles de Python {DH}


What do you think?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

GIPHY App Key not set. Please check settings

[2021] Sistemas de control – Reducción del diagrama de bloques {DH}

[2021] Los once mejores episodios de SWAT Kats {DH}