Módulo 12 · ✨
Visuales espectaculares
Llevar los dashboards a otro nivel con SVG, Deneb, HTML y fondos diseñados con código.
Temas del módulo
🇩🇴 Caso dominicano
Dashboard de zonas francas de RD con los colores de la bandera, minigráficos y anotaciones.
🛠️ Práctica paso a paso
- 📥 Datos para practicar: Zonas_Francas_RD_CNZFE.xlsx
La guía paso a paso de esta práctica está en preparación.
Presentaciones interactivas
Power BI nivel avanzado
Clase
Módulo 12: Visuales Espectaculares en Power BI
Este módulo profundiza en técnicas avanzadas de visualización para transformar reportes estándar en herramientas de alto impacto, utilizando personalización mediante código y optimización de recursos bajo la metodología de datdata.
1. Minigráficos y KPI con SVG en DAX
El concepto de SVG (Scalable Vector Graphics) se puede entender como un "dibujo hecho con instrucciones matemáticas" en lugar de puntos o píxeles (como una fotografía). Al ser vectorial, el gráfico queda nítido y mantiene una calidad absoluta sin importar cuánto se amplíe. En nuestro mercado, esto es ideal para representar de forma elegante el Crecimiento de Exportaciones en Zonas Francas de RD.
Paso a Paso en Power BI Desktop:
1. Diríjase a la pestaña Modelado en la cinta de opciones superior.
2. Seleccione la opción Nueva medida.
3. Para construir el visual, debe concatenar el código de texto SVG con medidas DAX dinámicas. Utilice funciones como SUM para la agregación básica, pero la clave aquí es CALCULATE. Según la fuente de las "5 funciones de DAX", CALCULATE es lo que separa a un principiante de un intermedio; en un SVG, esta función es transformativa porque permite que el gráfico "vea" datos fuera de su fila inmediata, modificando el contexto de filtro para mostrar una tendencia completa dentro de una sola celda.
4. Paso crítico: Una vez creada la medida, vaya a la pestaña de Herramientas de medida y cambie la Categoría de datos a "URL de imagen".
Ejemplo Dominicano: Visualice el crecimiento mensual de empleos en las Zonas Francas de Santiago y Haina. Con SVG, puede diseñar un minigráfico lineal que use los colores de nuestra bandera: Azul (#002D62) para el progreso y Rojo (#CE1126) para los puntos de alerta.
Error común: No cambiar la categoría de datos a "URL de imagen". Sin esto, Power BI solo mostrará el código de texto de la fórmula, dejando el reporte "en blanco" y sin ese acabado profesional que buscamos.
2. Gráficos a medida con Deneb (Vega-Lite)
Utilizar Deneb es como "armar un set de LEGO siguiendo un manual detallado". Es la solución definitiva para cuando los gráficos nativos "no dan la talla" frente a las exigencias de un cliente exigente.
Paso a Paso en Power BI Desktop: 1. Vaya al panel de Visualizaciones y haga clic en los tres puntos para Obtener más visuales. 2. Busque "Deneb" e impórtelo. 3. Arrastre los campos de "Provincia" y "Volumen de Inversión" al cubo de datos (Field well). 4. Aviso importante: El editor JSON de Deneb es "ciego" ante cualquier dato que no esté explícitamente en el cubo de datos. Si no arrastra el campo primero, el código no lo encontrará. 5. Seleccione Editar en el menú del visual para abrir el editor de JSON.
Ejemplo Dominicano: Un gráfico de "Lollipop" personalizado para comparar la inversión extranjera por sector en RD, logrando una visualización mucho más limpia que las barras tradicionales.
Error común: Olvidar incluir todos los campos necesarios en el Dataset antes de entrar a editar. Si el campo no está en el visual, el gráfico fallará porque el código JSON no tiene de dónde sacar la información.
3. HTML Content: Animaciones y Tarjetas
HTML Content funciona como "poner una mini página web dentro de tu reporte". Es la herramienta ideal para que la información crítica "saque de abajo" y atrape la mirada del usuario mediante movimiento y estilos avanzados.
Paso a Paso en Power BI Desktop:
1. Importe el visual "HTML Content" desde la tienda oficial.
2. Cree una medida DAX con etiquetas <div> y estilos CSS, usando los colores institucionales dominicanos.
3. Arrastre la medida al campo Values del objeto visual.
Ejemplo Dominicano: Una tarjeta animada que parpadea en rojo cuando el nivel de inventario de una zona franca de calzado cae por debajo del límite mínimo, alertando de inmediato a producción.
Error común:
Usar nombres genéricos. Siguiendo la Mejor Práctica 3 de datdata, use nombres concisos y descriptivos como [Alerta_Inventario_HTML] para mantener el orden en su modelo.
4. Fondos Personalizados Diseñados en HTML
El fondo es como el "papel tapiz de una casa". En lugar de una imagen pesada que ponga el reporte lento, usamos código para que todo cargue rápido y se vea nítido.
Paso a Paso en Power BI Desktop: 1. Vaya a la vista de Informe. 2. En el panel de Formato (pincel), busque Fondo de lienzo. 3. Importe su diseño como SVG o configúrelo vía el visual de HTML. 4. Paso vital: Debe bajar la Transparencia a 0%. Este es el motivo principal por el cual muchos piensan que su fondo no cargó; si está al 100%, solo verá el blanco de siempre.
Ejemplo Dominicano: Un fondo con degradados suaves en azul y rojo, con un espacio dedicado para el logo del CNZFE (Consejo Nacional de Zonas Francas de Exportación).
5. Visuales de Python y R: ¿Cuándo sí y cuándo no?
Imagine que estos visuales son el "especialista que viene de la capital" para resolver un problema que nadie más puede. Si necesita estadística profunda que Power BI no hace solo, llame al especialista.
Paso a Paso en Power BI Desktop:
1. Active el visual de Script de Python en el panel de visualizaciones.
2. Arrastre los campos de datos y escriba el script usando matplotlib o seaborn.
Análisis Técnico: * SÍ: Para modelos complejos, como la predicción de carga de contenedores en el Puerto de Caucedo. * NO: Para gráficos de barras simples. Según la Mejor Práctica 7 (Evitar operaciones lentas), esto afecta innecesariamente el rendimiento del reporte.
Error común: No tener Python o las librerías instaladas localmente; Power BI arrojará un error de script de inmediato.
6. Imágenes, GIF y Video en un Reporte
Estos elementos sirven para "ponerle sazón al moro", manteniendo al usuario atento y dándole contexto visual a los números.
Paso a Paso en Power BI Desktop:
1. Pestaña Insertar, sección Elementos, clic en Imagen.
2. GIFs: Se importan como imagen (asegúrese que sea .gif).
3. Video: Use el visual nativo o de terceros insertando el link de YouTube/Vimeo.
Ejemplo Dominicano: Insertar un video corto del proceso de manufactura de dispositivos médicos en una zona franca local para dar contexto operativo al dashboard de eficiencia.
Error común: Usar archivos muy pesados. Esto viola la práctica de optimizar el flujo de trabajo, haciendo que el reporte sea una "pesadilla" de cargar para el usuario final.
7. Resumen y Evaluación
Resumen de aprendizaje
- SVG: Gráficos vectoriales ligeros creados con DAX (especialmente con
CALCULATE). - Deneb: Control total de visuales mediante JSON, siempre que los campos estén en el cubo de datos.
- HTML Content: Estilo web y animaciones para que los KPIs resalten.
- Python/R: Poder estadístico para análisis profundos, pero con cuidado del rendimiento.
- Multimedia: Imágenes y videos que dan contexto sin sobrecargar el reporte.
Preguntas de Repaso
- ¿Qué categoría de datos debe tener una medida SVG para verse como imagen?
- R: URL de imagen.
- ¿Por qué no es recomendable usar Python para un simple gráfico de barras?
- R: Por rendimiento; las operaciones simples se resuelven mejor con visuales nativos.
- ¿Cuál es la ventaja de diseñar fondos con código vs imágenes pesadas?
- R: Mayor velocidad de carga y una nitidez superior.
- ¿Qué lenguaje utiliza el objeto visual Deneb?
- R: Vega o Vega-Lite en formato JSON.
- Si un visual de HTML no muestra nada en Power BI Service, ¿qué debes revisar?
- R: Que las credenciales estén correctamente configuradas y que los niveles de privacidad de la fuente de datos (como OAuth2 para nubes) permitan el acceso al contenido.