¡Bienvenidos, muy buenos días tardes o noches , según donde me leas !
Hace un poco más de un año, me embarqué en un desafío emocionante llamado «Pomerol». Este reto se centraba en productos electrónicos vendidos y la creación de visualizaciones de datos impresionantes. A lo largo de esta experiencia, aproveché al máximo mis habilidades en herramientas como Vega Lite y Deneb para Power BI.
En este artículo, compartiré mi viaje a través del reto Pomerol, destacando cómo utilicé Power Query para crear un modelo en estrella a partir de una fuente de datos en formato CSV, empleé medidas en DAX para obtener insights valiosos y diseñé imágenes, iconos y fondos personalizados en PowerPoint para lograr un impacto visual significativo.
Explorando el Reto Pomerol
El reto Pomerol no solo representó una oportunidad para mostrar mi destreza en la visualización de datos, sino también para profundizar en el mundo de los productos electrónicos y su análisis. Comenzar el desafío fue como desempacar una caja de tesoros llena de datos sobre productos electrónicos, ventas y tendencias del mercado.
Vega Lite y Deneb para Power BI: La Poderosa Combinación
Mi primer paso fue elegir las herramientas adecuadas para la visualización de datos. Opté por Vega Lite y Deneb para Power BI, que son extensiones que ofrecen un control granular sobre la estética y la interactividad de las visualizaciones. Utilicé Vega Lite para crear gráficos personalizados y Deneb para mejorar la interacción de mis informes, permitiendo a los usuarios explorar los datos de manera más efectiva.
Veremos el grafico numero:
1. Datos:
«`json
«data»: {«name»: «dataset»}
«`
Aquí se especifica que los datos para la gráfica se toman de un conjunto de datos llamado «dataset». Deberás tener un conjunto de datos con esa etiqueta.
2. Codificación (Encoding):
«`json
«encoding»: {
«x»: {
«field»: «Lista»,
«type»: «nominal»,
«sort»: {
«field»: «Cantidad»,
«op»: «mean»,
«order»: «descending»
},
«scale»: {
«paddingOuter»: 1,
«padding»: 8,
«paddingInner»: 0.6
},
«axis»: {
«labelFontSize»: 14,
«labelAlign»: «right»,
«tickSize»: 4,
«labelAngle»: 1,
«labelLineHeight»: 22,
«labelBaseline»: «middle»,
«labelPadding»: 5,
«labelAngle»: -30
}
},
«y»: {
«field»: «Cantidad»,
«type»: «quantitative»
},
«fillOpacity»: {
«condition»: {«param»: «select», «value»: 1},
«value»: 0.3
},
«strokeWidth»: {
«condition»: [
{
«param»: «select»,
«empty»: false,
«value»: 2
},
{
«param»: «highlight»,
«empty»: false,
«value»: 1
}
],
«value»: 0
}
}
«`
– `x`: Aquí se especifica que en el eje X se utilizará la columna «Lista» del conjunto de datos. Se configura para ordenar las barras en función de la media de la columna «Cantidad» en orden descendente. También se configura el aspecto visual del eje X, como el tamaño de las etiquetas y su alineación.
– `y`: En el eje Y, se representa la columna «Cantidad» del conjunto de datos, que es de tipo cuantitativo (números).
– `fillOpacity`: Define la opacidad del relleno de las barras. Las barras tienen una opacidad predeterminada de 0.3, pero se vuelven completamente opacas cuando se seleccionan (a través del parámetro «select»).
– `strokeWidth`: Define el ancho de las líneas del borde de las barras. Las barras tienen un ancho de borde de 0 por defecto, pero cuando se seleccionan (a través del parámetro «select» o «highlight»), el ancho del borde cambia.
3. Configuración (Config):
«`json
«config»: {
«scale»: {
«bandPaddingInner»: 0.2
}
}
Aquí se configura la apariencia de la gráfica. Se especifica que el «bandPaddingInner» sea 0.2, lo que afecta la separación entre las barras en el gráfico de barras.
4. Capas (Layer)
«`json
«layer»: [
{
«params»: [
{
«name»: «highlight»,
«select»: {«type»: «point», «on»: «mouseover»}
},
{«name»: «select», «select»: «point»}
],
«mark»: {
«type»: «bar»,
«tooltip»: true,
«cornerRadius»: 35,
«color»: {
«x1»: 0,
«y1»: 0.6,
«x2»: 0,
«y2»: 0.3,
«gradient»: «linear»,
«stops»: [
{
«offset»: 0,
«color»: «lightseagreen»
},
{
«offset»: 1,
«color»: «steelblue»
}
]
}
}
},
{
«mark»: {
«type»: «text»,
«size»: 14,
«align»: «right»,
«xOffset»: -5,
«yOffset»: -8,
«aria»: false
},
«encoding»: {
«text»: {«field»: «Cantidad», «type»: «quantitative»},
«color»: {
«condition»: {
«test»: {«field»: «count», «gt»: 1},
«value»: «white»
},
«value»: «white»
}
}
}
]
«`
– La primera capa contiene las barras del gráfico. Estas barras se configuran con un efecto de gradiente de color que va desde «lightseagreen» a «steelblue». También tienen un radio de esquina («cornerRadius») de 35 para hacer que las esquinas de las barras sean redondeadas.
– La segunda capa contiene etiquetas de texto que se colocan cerca de las barras. Estas etiquetas muestran la cantidad en formato numérico y son blancas si el valor se repite más de una vez en los datos
Este código crea un gráfico de barras interactivo con barras ordenadas en función del promedio de la cantidad, colores condicionales basados en la selección, y etiquetas de texto que muestran la cantidad. También permite resaltar las barras cuando se pasa el cursor sobre ellas o se seleccionan.
Veremos el grafico numero dos:
1. Datos:
«`json
«data»: {«name»: «dataset»}
«`
Indica que los datos para el gráfico provienen de un conjunto de datos llamado «dataset». Debes asegurarte de tener este conjunto de datos con esa etiqueta.
2. Codificación (Encoding):
– Eje Y:
«`json
«y»: {
«field»: «Product»,
«scale»: {«padding»: 0},
«axis»: {
«labelAlign»: «left»,
«labelBaseline»: «middle»,
«labelPadding»: -5,
«labelOffset»: -17,
«titleX»: 5,
«titleY»: -5,
«titleAngle»: 0,
«titleAlign»: «left»,
«gridColor»: «antiquewhite»
},
«sort»: {
«field»: «Cantidad ordenes»,
«op»: «mean»,
«order»: «descending»
}
}
«`
– Aquí se define el eje Y del gráfico. Utiliza el campo «Product» para etiquetar las barras y configura varias propiedades del eje, como la alineación de las etiquetas, el espaciado y los colores de la cuadrícula. También se ordena el eje Y en función de la media del campo «Cantidad ordenes» de manera descendente.
– Eje X:
«`json
«x»: {
«aggregate»: «sum»,
«field»: «Cantidad ordenes»,
«title»: «Cantidad ordenes»
}
«`
– En el eje X, se muestra la suma de «Cantidad ordenes» como valores en las barras y se agrega un título al eje X.
– Propiedades de Estilo:
«`json
«fillOpacity»: {
«condition»: {«param»: «select», «value»: 1},
«value»: 0.3
},
«strokeWidth»: {
«condition»: [
{
«param»: «select»,
«empty»: false,
«value»: 2
},
{
«param»: «highlight»,
«empty»: false,
«value»: 1
}
],
«value»: 0
}
«`
– Estas propiedades controlan la opacidad del relleno de las barras y el ancho del borde de las barras en función de las interacciones del usuario. Por ejemplo, cuando se selecciona una barra, se vuelve completamente opaca y el borde se vuelve más ancho.
3. Configuración (Config):
«`json
«config»: {
«scale»: {
«bandPaddingInner»: 0.2
}
}
«`
– Esta configuración establece la apariencia del gráfico, en particular, la separación entre las barras en el gráfico de barras horizontales.
4. Capas (Layer):
– La primera capa contiene las barras del gráfico:
«`json
«mark»: {
«type»: «bar»,
«tooltip»: true,
«strokeOpacity»: 1,
«yOffset»: 5,
«cornerRadiusEnd»: 100,
«height»: {«band»: 0.4},
«stroke»: «cornflowerblue»,
«opacity»: 1,
«color»: {
«x»: 0.8,
«y»: 0.7,
«x2»: 1,
«y2»: 0,
«gradient»: «linear»,
«stops»: [
{
«offset»: 0.2,
«color»: «lightseagreen»
},
{
«offset»: 0.9,
«color»: «royalblue»
}
]
}
}
«`
– Esta capa define las barras en el gráfico. Las barras tienen una forma rectangular («type»: «bar»), y tienen varios atributos de estilo, como el color, el radio de esquina, el grosor del borde, la altura de las barras y la opacidad.
– La segunda capa contiene etiquetas de texto:
«`json
«mark»: {
«type»: «text»,
«align»: «right»,
«xOffset»: 30,
«yOffset»: -15,
«aria»: false,
«size»: 14
}
«`
– Esta capa añade etiquetas de texto a las barras. Las etiquetas muestran el valor de «Cantidad ordenes» en formato numérico y tienen propiedades de estilo como la alineación y el tamaño de fuente. Además, el texto se muestra en blanco si el valor se repite más de una vez en los datos.
Este código crea un gráfico de barras horizontales que representa la suma de «Cantidad ordenes» para diferentes productos. Las barras están diseñadas con colores, opacidad y bordes condicionales, y las etiquetas de texto proporcionan información adicional sobre los valores de las barras.
Grafico numero cuatro:
El gráfico número 4 creado con Vega Lite y Deneb es una visualización de datos que representa información sobre precios de productos electrónicos a lo largo de un período de tiempo. Aquí tienes un resumen específico de los elementos clave de este gráfico:
– Tipo de Gráfico: El gráfico está compuesto por una serie de barras verticales y una línea curva.
– Datos: Utiliza un conjunto de datos llamado «dataset» que contiene información sobre los precios de los productos electrónicos en diferentes meses.
– Eje X: En el eje horizontal (X), se representan los meses, utilizando un tipo de codificación «nominal» para datos categóricos.
– Eje Y: En el eje vertical (Y), se representan los precios de los productos electrónicos, utilizando un tipo de codificación «cuantitativa» para datos numéricos.
– Barras: Se utilizan barras para representar los precios de los productos en cada mes. Estas barras tienen una opacidad baja (0.1) y muestran información de herramientas emergentes (tooltip) al pasar el cursor sobre ellas.
– Colores de las Barras: Las barras tienen colores condicionales. Si el precio es igual al precio máximo de todos los meses, la barra es de color azul. Si el precio es igual al precio mínimo de todos los meses, la barra es de color rojo. En otros casos, las barras son transparentes.
– Texto: Se colocan etiquetas de texto cerca de las barras. Estos textos muestran el precio de cada mes en formato de dólares y están coloreados de azul si el precio es máximo o de rojo si el precio es mínimo. Otras etiquetas de texto son transparentes.
– Línea Curva: Se incluye una línea curva que se interpola utilizando el método «bundle». Esta línea representa una tendencia general en los datos de precios a lo largo del tiempo.
– Colores de la Línea Curva: La línea curva también tiene colores condicionales. La parte superior de la línea tiene un gradiente que va desde verde claro a azul acero cuando el precio es máximo, y de azul acero a verde claro cuando el precio es mínimo.
– Círculos: Se añaden círculos en el gráfico. Estos círculos son de color azul si el precio es máximo y de color rojo si el precio es mínimo. Tienen una opacidad baja (0.5) y muestran información de herramientas emergentes al pasar el cursor sobre ellos.
Este gráfico ofrece una representación visual de los precios de productos electrónicos a lo largo del tiempo, destacando los precios máximos y mínimos con colores y proporcionando información adicional a través de etiquetas de texto y una línea de tendencia curva.
Modelo en Estrella: La Columna Vertebral del Proyecto
Para construir una base sólida para mis visualizaciones, empleé Power Query para crear un modelo en estrella. Este enfoque de modelado de datos es esencial para el análisis de datos multidimensionales y facilita la comprensión de las relaciones entre diferentes entidades. Importé datos desde un archivo CSV y definí las tablas de hechos y dimensiones, estableciendo las relaciones necesarias.
Mejorando la Analítica con DAX
Con el modelo en estrella en su lugar, era hora de profundizar en el análisis de datos utilizando DAX (Data Analysis Expressions). Diseñé medidas personalizadas para calcular métricas específicas, como ingresos, márgenes de ganancia y tasas de conversión. Estas medidas no solo proporcionaron información valiosa, sino que también facilitaron la creación de visualizaciones interactivas y dinámicas.
Diseño Personalizado para Impacto Visual
La presentación de los datos es tan importante como los datos en sí. Para ello, aproveché Power Point para diseñar imágenes, iconos y fondos personalizados que agregaran un toque visual distintivo a mis informes. La atención a los detalles en el diseño es crucial para mantener a los usuarios interesados y comprometidos con los datos.
Conclusiones y Reflexiones Finales
Mi participación en el reto Pomerol fue un viaje de aprendizaje y crecimiento. Desde la creación de un modelo en estrella en Power Query hasta el uso de DAX para obtener información valiosa y la creación de diseños personalizados en PowerPoint, cada paso fue una oportunidad para mejorar mis habilidades en la visualización de datos y el análisis.
El reto Pomerol no solo me permitió demostrar mi capacidad para trabajar con datos electrónicos y crear visualizaciones impactantes, sino que también reforzó la importancia de contar con las herramientas adecuadas y la atención al detalle en todo el proceso de visualización de datos.
En última instancia, el reto Pomerol fue una experiencia enriquecedora que me permitió fusionar mi pasión por los datos con mi creatividad en el diseño. Espero que este relato inspire a otros a abrazar desafíos similares y a explorar el emocionante mundo de la visualización de datos y el análisis de productos electrónicos.
Repositorio de código en github: https://github.com/vicente2121/Vegal_lite_reto_pomerol-.git
Link del video en YouTube para ver el reporte en acción:https://youtu.be/Zw4WimQ5brY
Link del reporte en el portafolio: https://www.novypro.com/project/challenge-pomerol
Link del reporte en Power BI: https://app.powerbi.com/view?r=eyJrIjoiYjBhNmQ2ZGUtNzg4Yi00YmY0LTkyMWYtNGY0OGIwYjQyOWRlIiwidCI6IjkxMTVmY2FmLWE5NGQtNDBiMS1hM2JhLWIwNjJjODA1NTVlMCIsImMiOjl9
Business Intelligence Technical.
Perfil linkedin
