Cree un objeto visual personalizado para LuckyTemplates con Deneb

Quiero hablar sobre el nuevo objeto visual personalizado de Deneb que se lanzó recientemente para LuckyTemplates. Esto proporciona una interfaz para que el lenguaje Vega-Lite se use para crear una imagen interactiva personalizada para LuckyTemplates.

El lenguaje Vega-Lite se basa en la sintaxis JSON. Es más fácil de implementar y comprender que los lenguajes de programación de nivel inferior. Además, el autor Daniel Marsh-Patrick ha incluido algunas plantillas para acelerar el proceso de diseño.

Creo que este elemento visual será enorme, ya que proporciona una experiencia de código completa y es extremadamente personalizable. Me gustaría aprovechar esta oportunidad para mostrar algunos ejemplos simples de elementos visuales de Deneb Vega-Lite y compararlos con los elementos visuales estándar de LuckyTemplates. Puedes ver el video completo de este tutorial en la parte inferior de este blog.

Tabla de contenido

• Cómo usar Deneb como un objeto visual personalizado para LuckyTemplates
• Puntos generales para aprender sobre Deneb
• Crear un gráfico de barras con Deneb
• Hacer un gráfico de líneas con Deneb
• Elaboración de un gráfico de área con Deneb
• Uso de un gráfico de columnas superpuestas con Deneb
• Producción de un gráfico de anillos con Deneb
• Conclusión

Cómo usar Deneb como un objeto visual personalizado para LuckyTemplates

Deneb es una interfaz que permite que una imagen se codifique completamente utilizando la sintaxis JSON según el lenguaje Vega-Lite. Esta presentación no pretende ser una introducción al lenguaje Vega-Lite, sino más bien una pequeña muestra de cómo el lenguaje permite imágenes que son como algunas de las imágenes estándar de LuckyTemplates y se pueden personalizar completamente para adaptarse a su escenario.

Las imágenes base desarrolladas en esta presentación aprovechan algunas de las plantillas de ejemplo disponibles en la interfaz de Deneb. Las imágenes personalizadas son ejemplos introductorios de lo que se puede lograr con una pequeña cantidad de esfuerzo en Vega-Lite a través de modificaciones de prueba y error de otros ejemplos que se pueden encontrar fácilmente en línea.

Aquí está la página de inicio de Deneb. Puede encontrar material de referencia aquí .

Hay una galería proporcionada en el sitio Vega-Lite GitHub que muestra ejemplos de cosas que se pueden crear con Vega-Lite.

Este es otro ejemplo de algunas tarjetas de KPI personalizadas que se pueden crear con el visual personalizado de Deneb.

Puntos generales para aprender sobre Deneb

Estos son algunos de los puntos generales que aprendí sobre Vega-Lite durante mis investigaciones iniciales. Los datos están vinculados a una marca. Hay numerosas marcas disponibles en Vega-Lite, que incluyen barra, línea, arco, punto, texto y muchas otras. Una marca tiene codificación. Por ejemplo, la marca de texto tiene muchas codificaciones disponibles, incluida la alineación, la fuente, el tamaño, el peso y el color.

Se pueden combinar varias marcas para crear una experiencia visual compuesta, incluida la capa (múltiples marcas que se superponen entre sí y comparten el mismo punto de anclaje o eje), concatenación (múltiples marcas dispuestas horizontal o verticalmente) o faceta (pequeños múltiplos disponibles en muchos power BI elementos visuales en los que se utiliza una serie de gráficos similares para mostrar subconjuntos de los mismos datos, lo que facilita la comparación entre subconjuntos).

Crear un gráfico de barras con Deneb

Ahora echemos un vistazo a cómo se crea un objeto visual personalizado para LuckyTemplates usando plantillas de Deneb y cómo se comparan con los objetos visuales estándar de LuckyTemplates.

En este ejemplo, agregué un gráfico de barras estándar de LuckyTemplates para mostrar las ventas totales por canal en el lado izquierdo. Construyamos algo similar usando Deneb y Vega-Lite.

Agregaremos la imagen de Deneb en el lado derecho.

Lo primero que debemos hacer es agregar nuestros datos, así que agreguemos nuestros Canales y Ventas totales .

Solo por diversión, encendamos Shadow .

Luego elegimos Editar .

Seleccionaremos las plantillas de gráficos de barras simples que se proporcionan en la interfaz. Para la categoría, elegimos Canal y para la medida, Ventas totales .

Una vez que hacemos clic en Crear , podemos ver nuestra imagen de Deneb.

Podemos ver que hay muchas cosas que son similares entre LuckyTemplates y Deneb. Una cosa que no es similar desde el primer momento es que tenemos las etiquetas de datos que se muestran en el objeto visual de LuckyTemplates. Para el objeto visual de Deneb, estas etiquetas de datos se pueden agregar fácilmente al objeto visual, lo que haremos agregando una capa diferente.

Una vez que hacemos clic en Editar desde la imagen de Deneb, vemos una sola marca aquí.

Tomaré un fragmento de código para agregar las etiquetas de datos y reemplazaré el código de la marca única con dos marcas.

Una vez que ejecutemos esto, tendremos etiquetas de datos.

Lo segundo que podemos hacer es formatear estas etiquetas de datos. Una vez más, tengo un bloque de cotización aquí que puedo poner en lugar de simplemente usar la codificación simple para Total Sales .

La otra cosa que es realmente genial acerca de Deneb y Vega-lite es que podemos cambiar fácilmente un gráfico de barras a un gráfico de columnas. Hagamos clic en Editar nuevamente. Todo lo que tenemos que hacer es voltear la X y la Y.

Obviamente, hay trabajo por hacer y se necesitan ajustes, pero quería mostrar con qué facilidad se pueden cambiar las cosas en Vega-Lite.

Hacer un gráfico de líneas con Deneb

A continuación, agregué un gráfico de líneas de LuckyTemplates estándar que muestra Ventas totales por fecha . Construyamos algo similar usando Deneb Vega-lite. Agreguemos un objeto visual de Deneb, agreguemos nuestra fecha y ventas totales .

Elijamos un gráfico de líneas con una banda de intervalo, elijamos Fecha para nuestro eje X y elijamos Ventas totales para los siguientes tres valores.

Aquí está la base visual resultante para Deneb. Puedes ver que hay muchas similitudes entre los dos. Hay algunas diferencias, como que el eje X se muestra numéricamente en la imagen de Deneb.

Hay algo que podemos hacer para solucionarlo fácilmente. Pasemos a Deneb y cambiemos la codificación de la fecha X a temporal .

La segunda diferencia es el título. Agreguemos un título a la imagen de Deneb. Editaremos el código una vez más, agregaremos el bloque de título y formatearemos el JSON.

Y aquí está nuestro título. Tenemos control total sobre la fuente, el tamaño, el color, etc. del título.

Elaboración de un gráfico de área con Deneb

Probemos también con un gráfico de áreas. He agregado un gráfico de área estándar de LuckyTemplates que muestra las ventas totales acumuladas por fecha .

Ahora construyamos algo similar usando Deneb Vega-Lite. Pongamos el objeto visual Deneb, luego agreguemos las medidas Fecha y Ventas totales acumuladas .

Obtengamos el bloque de código para un gráfico de área independiente y aplíquelo.

El gráfico de área en la parte inferior es el resultado.

Una de las características adicionales de Vega-Lite es que puedes usar pinceles . Esa es la palabra que usan para seleccionar un intervalo particular en su gráfico.

Una de las cosas que es realmente genial es que puedes usar pinceles en imágenes vinculadas. Hagamos un nuevo visual de Deneb, agreguemos los mismos datos de fecha y ventas acumulativas . Haga clic en Editar en el objeto visual y elija Especificación vacía .

Copie el código de los gráficos duales vinculados por un pincel rectangular. Luego pegue y ejecute el código.

Ahora tenemos nuestro objeto visual principal, donde podemos usar un pincel para mostrar un intervalo seleccionado desde el primero hasta nuestro objeto visual secundario.

Uso de un gráfico de columnas superpuestas con Deneb

Aquí hay un ejemplo de algo que he estado buscando por un tiempo ahora. Este es un gráfico de columnas superpuestas o un gráfico de viñetas de columnas que muestra una relación entre dos valores para la misma categoría. Creé esto en Deneb también.

Agregué un código de Notepad ++ para que la columna superpuesta sea visual.

Lo que tenemos aquí es una imagen de cuatro capas compuesta por cuatro capas superpuestas: una para la columna trasera, otra para la columna delantera, una para la etiqueta trasera y otra para la etiqueta delantera. Podemos ver que el gráfico responde con las selecciones que se realizan en LuckyTemplates y también se ajusta en consecuencia.

Producción de un gráfico de anillos con Deneb

Otra cosa que he estado buscando por un tiempo ahora es un gráfico de anillos que es similar a los anillos de actividad en un reloj Apple. Creé algo como esto para el usando Python, pero no fue tan bueno como me gustaría que fuera.

Traté de hacer lo mismo en Deneb y tuve mucho éxito. En esta imagen de Deneb, tenemos una imagen de nueve capas donde hemos agregado medidas separadas para los anillos 1, 2 y 3, valores para los anillos 1, 2 y 3, colores para los anillos 1, 2 y 3 y categorías para los anillos 1, 2 y 3.

Echemos un vistazo al código que usé aquí. Utiliza un concepto en Vega-Lite llamado Transform and Params para extender los datos que están disponibles para las distintas marcas. Luego he superpuesto nueve marcas una encima de la otra usando el mismo eje para crear el gráfico circular. Esto es totalmente interactivo con información sobre herramientas de LuckyTemplates.

Otra cosa de interés es que puede usar Visual Studio Code para desarrollar sus imágenes Vega-Lite. Primero, necesitará una extensión para ver el código Vega-Lite. Actualmente estoy usando la extensión Vega Viewer .

Luego, debe configurar un archivo de tecnología con la extensión vl.json. Simplemente haga clic derecho en el código para obtener una vista previa de Vega Graph .

Dado que Vega-Lite visual es una experiencia de código completo, en realidad encuentro que el entorno de Visual Studio Code es muy útil en mi desarrollo.

Conclusión

Espero que encuentre este tutorial esclarecedor y que lo haga explorar las posibilidades de usar Deneb y Vega-Lite para desarrollar visualizaciones más allá de lo que está actualmente disponible en LuckyTemplates.

Si disfrutó de la imagen personalizada para el contenido de LuckyTemplates cubierto en este tutorial en particular, no olvide suscribirse al canal de televisión LuckyTemplates .

Tenemos una gran cantidad de contenido que sale todo el tiempo de mí y una variedad de creadores de contenido, todos dedicados a mejorar la forma en que usa LuckyTemplates y Power Platform.

greg