¡Bienvenidos, muy buenos días tardes o noches , según donde me leas !

El post número 6 del día de hoy se centra en la visualización de medidas de análisis de ventas por segmentación de clientes. En este fascinante desafío, se utiliza un objeto visual llamado Deneb para crear gráficos altamente personalizados. El objetivo es representar las ventas totales de diferentes minoristas mediante barras horizontales, que incluyen imágenes de los logos de cada minorista alineadas con las barras correspondientes.

El post proporciona el código necesario para lograr esta visualización utilizando Vega Lite, un editor online que permite ajustar y probar el código de forma interactiva. Además, se detallan los pasos para obtener los logos de los minoristas y cómo incorporarlos en la visualización de manera eficiente. Se destaca la versatilidad de Deneb para diseñar visualizaciones personalizadas y de alto valor.

Link del reto:https://fp20analytics.com/challenge.

En esta visualización, crearemos un gráfico utilizando un objeto visual diferente llamado Deneb. Estos objetos visuales son diferentes y se utilizan de manera más específica, como se muestra.

Primero, crearemos el código que deseamos utilizar para este caso práctico. Quiero utilizar imágenes para cada minorista o retail, de modo que podamos crear las ventas con los logos de cada minorista en una posición de tipo barra horizontal. El código creado es el siguiente:

«data»: La sección «data» especifica el nombre del objeto de datos utilizado en la visualización. En este caso, el objeto se llama «dataset». Los datos reales se proporcionarían fuera de esta especificación.

«layer»: La sección «layer» define las capas de la visualización. En este caso, hay tres capas:

a. Capa de barras:

«mark»: Especifica que el tipo de marca a utilizar es una barra.
«encoding»: Define cómo los datos se mapean a propiedades visuales.
«y»: Mapea el campo «Minorista» como el eje y. Este campo contiene las categorías de los minoristas.
«x»: Mapea el campo «Total ventas» como el eje x. Este campo representa las ventas totales.
«axis»: Proporciona opciones para el eje y, como el título del eje y y el ángulo de las etiquetas del eje.
«scale»: Define ajustes de escala para el eje y, como el relleno y el espaciado de las barras.
«params»: Define parámetros interactivos para la visualización, como la capacidad de resaltar las barras y seleccionar puntos.
«opacity»: Define la opacidad de las barras, donde las barras no seleccionadas tienen una opacidad reducida de 0.3.

b. Capa de imágenes:

«mark»: Especifica que el tipo de marca a utilizar es una imagen.
«encoding»: Define cómo los datos se mapean a propiedades visuales.
«y»: Mapea el campo «Minorista» como el eje y. Esto asegura que las imágenes estén alineadas verticalmente con las barras correspondientes.
«x»: Mapea el campo «Total ventas» como el eje x. Esto asegura que las imágenes estén alineadas horizontalmente con las barras correspondientes.
«url»: Mapea el campo «img» como la URL de la imagen a mostrar.

c. Capa de etiquetas de texto:

«mark»: Especifica que el tipo de marca a utilizar es un texto.
«encoding»: Define cómo los datos se mapean a propiedades visuales.
«y»: Mapea el campo «Minorista» como el eje y. Esto asegura que las etiquetas de texto estén alineadas verticalmente con las barras correspondientes.
«x»: Mapea el campo «Total ventas» como el eje x. Esto asegura que las etiquetas de texto estén alineadas horizontalmente con las barras correspondientes.
«text»: Mapea el campo «Total ventas» como el texto a mostrar en las etiquetas.
«format»: «$,.0f»: Aplica un formato a las etiquetas de texto para mostrar los valores de «Total ventas» en formato de dólar, sin decimales.

En resumen, el código crea una visualización de barras que representa las ventas totales de diferentes minoristas. Las barras se pueden resaltar y seleccionar. Se muestran imágenes alineadas con las barras correspondientes, y las etiquetas de texto muestran los valores de ventas en formato de dólar sin decimales.

A continuación, se muestra el código en el repositorio de GitHub el cual comparto el link: https://github.com/vicente2121/Barras-horizontales/

En la imagen se muestra el resultado de la visualización.

También puedes utilizar el editor online de Vega Lite para probar este código. Puedes encontrarlo en: https://vega.github.io/editor/#/edited .

Ahora, teniendo la opción de las imágenes, debemos buscar el logo para cada minorista. Para colocar las imágenes al final de cada barra de datos, buscamos en Google los logos de los minoristas. Posteriormente, nos conectamos a la carpeta donde tenemos las imágenes utilizando la conexión de tipo carpeta, como se muestra en la imagen.

A continuación, nos quedaremos solo con las columnas «content» y «name» para poder utilizar la función que habíamos creado anteriormente de convertir a base 64 (imagen ) =>
let
Base64 = Binary.ToText(imagen, BinaryEncoding.Base64),
ImagenBase64 = «data:image/jpeg;base64, » & Base64
in
ImagenBase64

En el siguiente paso, ajustamos los nombres de las imágenes para luego hacer el merge correcto hacia la dimensión de minoristas, relacionando las imágenes dentro de la dimensión de manera eficienterelacionada. Esto se muestra en la imagen . Luego, solo expandimos la columna de tipo imagen base 64, como se muestra en la imagen

Ahora, insertamos el campo de imagen dentro de nuestro objeto visual de Deneb para que las imágenes se coloquen al final de la barra, dándole un toque personalizado y dinámico. Esto se muestra en la imagen .

Además, añadimos un subtítulo que muestra el minorista con más ventas, utilizando una medida llamada «Maximo Ventas minorista». Esta medida realiza un cálculo para encontrar el minorista con las ventas más altas. El resultado se muestra en la imagen .

Como podemos ver, con Deneb tenemos posibilidades enormes para crear diseños personalizables y de alto valor.

En conclusión, el post número 6 nos ha brindado una valiosa oportunidad de explorar las capacidades de visualización de datos utilizando el objeto visual Deneb y la herramienta Vega Lite. Mediante la implementación de un código cuidadosamente diseñado, hemos logrado representar de manera efectiva las ventas por segmentación de clientes, utilizando barras horizontales que incluyen imágenes de los logos de los minoristas correspondientes.

Este enfoque personalizado y dinámico nos permite comunicar información de manera más impactante y atractiva, brindando una experiencia visual única a los espectadores. Además, hemos aprendido cómo obtener los logos de los minoristas y conectarlos correctamente con la dimensión de minoristas en nuestra visualización, asegurando una representación visual coherente y precisa.

Es importante destacar que, al mostrar el minorista con mayores ventas, hemos agregado un elemento adicional de interés y relevancia a nuestra visualización. Esta información resalta la importancia de los datos y nos permite identificar fácilmente el rendimiento sobresaliente de un minorista específico.

En resumen, este post nos ha demostrado el poder de la redacción persuasiva y clara, al presentarnos una guía paso a paso sobre cómo crear visualizaciones atractivas y efectivas. Mediante el uso de Deneb y Vega Lite, hemos obtenido una visualización altamente personalizada y de alto valor, capaz de transmitir información de manera impactante y memorable.

Vicente Antonio Juan Magallanes

Business Intelligence Technical.