Tutorial Power BI: Deneb visuales por capas (layers)
El pasado 18 de febrero tuve el placer de participar como ponente el Power Platform Bootcamp Madrid y de impartir un workshop en la edición presencial de Barcelona.
En ambas sesiones realizamos un ejemplo de la custom visual DENEB de Power BI, creando una visual por capas en las que capa una incluía un tipo de gráfico diferente (barras, líneas, área,…).
Para los que no pudisteis asistir, hoy os traigo el tutorial paso a paso que realizamos y recordad que si estáis suscritos a nuestra newsletter (es gratis) podréis descargar el fichero pbix original de este tutorial para ver todos los detalles.
Si aún no has trabajado con Deneb, te sugiero que revises los tutoriales anteriores que hemos publicado en Vandalytic:
PASO 0: Origen de datos y formato de nuestro informe
En esta ocasión queremos comparar las cuotas de Netflix por países, cosa que podríamos hacer con un gráfico de columnas estándar de Power BI. Para proporcionar más información al usuario, queremos comparar las cuotas por país con:
- El tamaño del catálogo de Netflix en ese país
- El % de películas dentro del catálogo
- Una ratio que muestre cuanto implica la cuota de Netflix vs la renta per cápita (GDP) del país.
Como veis, mostrar toda esa información en una sola visual estándar de Power BI no es fácil, por eso recurriremos al custom visual Deneb y su capacidad de realizar visuales por capas.
Origen de los datos
Como veréis en los links inferiores del informe, el origen de los datos es un dataset de Kaggle sobre las cuotas de Netflix en diferentes países.
Como queremos incluir datos referentes a la renta per cápita de cada país recurrimos también a 2 entradas de The World Bank y Wikipedia:
Formato de inicio
El punto de partida de este tutorial es un fichero pbix con formato ya asignado: fondo negro, logo de Netflix y un título para nuestra visual.
Para los suscriptores, quiero recordaros que podréis descargar el fichero final con todos los pasos y un fichero Base con esta versión de `partida para que podáis reproducir este tutorial.
PASO 1: Primera capa, líneas verticales por precio suscripción
Lo primero que haremos es dibujar el gráfico de columnas blancas (líneas verticales en realidad) por país que indican el precio de la cuota Standard de Netflix en cada país.
Para ello, crearemos un gráfico tipo “bar” en el que debemos incluir en el eje X en valor “País” y en el eje Y el valor “Cost Per Month – Standard ($)”. Recordad de tutoriales Deneb anteriores que siempre que queremos vincular un parámetro de formato con un campo de nuestro dataset tenemos que incluirlo bajo la etiqueta “encoding” (como pasa en nuestros ejes X e Y).
El código que tenemos que incluir en nuestra visual Deneb es el siguiente:
{
"data": {"name": "dataset"},
"mark": {
"type": "bar",
"width": 3,
"color": "#D5D2D3",
"tooltip": true
},
"encoding": {
"x": {
"field": "Pais",
"type": "ordinal",
"title": false
},
"y": {
"field": "Cost Per Month - Standard ($)",
"type": "quantitative",
"title": false
}
}
}
PASO 2: Segunda capa, barras más gruesas con tamaño de catálogo
El siguiente paso es quizás el más complicado de explicar, ya que al incluir una segunda capa debemos crear primero la estructura de capas con la etiqueta “layer”.
La etiqueta “layer” permite incluir diferentes “mark” o tipos de gráficos dentro de la misma visual. Su estructura es la siguiente:
“layer”: [
{“mark”: …. },
{“mark”: …. },
{“mark”: …. }
]
En nuestro caso, dejaremos el código referente al eje X (Países) fuera de la etiqueta “layer” ya que ese eje será común a todos los gráficos.
El código quedaría de la siguiente manera:
{
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "bar",
"width": 3,
"color": "#D5D2D3",
"tooltip": true
},
"encoding": {
"y": {
"field": "Cost Per Month - Standard ($)",
"type": "quantitative",
"title": false
}
}
},
{
"mark": {
"type": "bar",
"width": 10,
"color": "#D5D2D3",
"tooltip": true
},
"encoding": {
"y": {
"field": "Catalogo (miles)",
"type": "quantitative",
"title": false
},
"y2": {
"field": "Cost Per Month - Standard ($)",
"type": "quantitative",
"title": false
}
}
}
],
"encoding": {
"x": {
"field": "Pais",
"type": "ordinal",
"title": false
}
}
}
Hemos marcado el código con colores para que se entienda mejor:
- Rojo: primera capa con la visual que teníamos antes sin el eje X
- Verde: segunda capa con la nueva visual sin el eje X
- Azul: eje X común a ambas capas
Como veis en el código de color verde, hay dos ejes Y (“Y” e “Y2”). Esto es porque no queremos que las barras de catálogo empiecen en cero, sino que comience la barra justo después de la columna de precio de suscripción. Por eso incluimos 2 ejes Y:
- Eje Y: con el campo “Catálogo (miles)” que realmente muestra el número del catálogo + el precio de ssucripción. De este modo tenemos el límite superior de la barra.
- Eje Y2: que muestra el campo “Cost Per Month – Standard ($)”, es decir, el principio de la barra justo a la altura del precio de suscripción.
PASO 3: Tercera capa, gráfico de área con la ratio de suscripción vs GDP
Ya podemos analizar el precio de las suscripciones de Netflix por país comparado con el tamaño del catálogo de productos disponibles, pero sería interesante también incluir una relación entre el precio de la cuota y la renta per cápita (GDP) del país. Para ello usaremos un gráfico de área:
En esta ocasión ay tenemos creada la estructura de las capas con la etiqueta “layer” y el eje X seguirá siendo común (países). Por lo tanto, sólo debemos incluir una capa más dentro del “layer”. El código quedaría así:
{
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "bar",
"width": 3,
"color": "#D5D2D3",
"tooltip": true
},
"encoding": {
"y": {
"field": "Cost Per Month - Standard ($)",
"type": "quantitative",
"title": false
}
}
},
{
"mark": {
"type": "bar",
"width": 10,
"color": "#D5D2D3",
"tooltip": true
},
"encoding": {
"y": {
"field": "Catalogo (miles)",
"type": "quantitative",
"title": false
},
"y2": {
"field": "Cost Per Month - Standard ($)",
"type": "quantitative",
"title": false
}
}
},
{
"mark": {
"type": "area",
"interpolate": "basis",
"line": false,
"tooltip": true
},
"encoding": {
"y": {
"field": "Ratio Cuota/GDP",
"type": "quantitative",
"title": false
}
}
}
],
"encoding": {
"x": {
"field": "Pais",
"type": "ordinal",
"title": false
}
}
}
Hemos marcado en rojo la nueva capa a añadir con el “mark” tipo “área”. Usamos el campo calculado “Ratio Cuota/GDP” para mostrar la relación entre el precio de Netflix y la renta per cápita del país.
PASO 4: Detalles finales de formato
Por último, le daremos a nuestra visual Deneb unos retoques de formato para que quede como en la versión final que os enseñábamos al inicio del tutorial:
Hemos realizado en este último paso 3cambios de formato:
- Ordenar los países por GDP en orden descendente (en color rojo)
- Dar un degradado de color a las barras de catálogo en base al % de películas del mismo e incluir su leyenda (en color verde)
- Cambiar el color del ratio suscripción / GDP por rojo (en color azul)
Os dejamos aquí el código final con código de colores de los cambios:
{
"data": {"name": "dataset"},
"encoding": {
"x": {
"field": "Pais",
"type": "ordinal",
"title": false,
"axis": {
"labelFontSize": 12,
"orient": "top",
"labelColor": "#EEEDED",
"labelPadding": 15
},
"sort": {
"op": "sum",
"field": "GDP",
"order": "descending"
}
}
},
"layer": [
{
"mark": {
"type": "bar",
"width": 3,
"color": "#D5D2D3",
"tooltip": true
},
"encoding": {
"y": {
"field": "Cost Per Month - Standard ($)",
"type": "quantitative",
"title": false
}
}
},
{
"mark": {
"type": "bar",
"width": 10,
"tooltip": true
},
"encoding": {
"y": {
"field": "Catalogo (miles)",
"type": "quantitative",
"title": false
},
"y2": {
"field": "Cost Per Month - Standard ($)",
"type": "quantitative",
"title": false
},
"color": {
"field": "% Películas",
"type": "quantitative",
"scale": {
"range": [
"#FFFFFF",
"#E50914"
]
},
"legend": {
"format": ".0%","labelColor": "#EEEDED","titleColor": "#EEEDED"
}
}
}
},
{
"mark": {
"type": "area",
"interpolate": "basis",
"line": false,
"color": "red",
"tooltip": true
},
"encoding": {
"y": {
"field": "Ratio Cuota/GDP",
"type": "quantitative",
"title": false
}
}
}
],
"resolve": {"scale": {"y": "shared"}}
}
Os dejamos aquí el informe final para que podáis interactuar con él. Recordad que podéis descargar el pbix si estáis suscritos (es gratis):
Conclusiones
¿Qué os ha parecido este nuevo ejemplo de Deneb? Espero que os haya mostrado la potencia de este custom visual y la capacidad y flexibilidad que tiene para realizar visuales complejas.
Podéis dejar vuestras dudas o comentarios en este mismo post y estaremos encantados de responderos.
