# Visualizaciones Estáticas y Dinámicas Semestre 02, 2026 ## Dos Modos de Mostrar los Mismos Datos Una visualización estática es una imagen terminada. El autor fijó el encuadre, el recorte, el orden y el énfasis, y el lector recibe exactamente eso. Una visualización dinámica deja parte de esas decisiones en manos del lector, que filtra, acerca, selecciona o avanza en el tiempo. La distinción no es técnica sino de autoridad. La pregunta que separa a las dos no es si el gráfico se mueve, sino quién decide qué se ve. ### La versión estática ![Gráfico estático anotado](/courses/2026/2/cc3084/assets/vd-estatica.png) Hay un solo mensaje y está escrito sobre el gráfico. El gris sostiene el contexto, el color marca el tramo relevante y la anotación dice en palabras lo que el lector debe concluir. El gráfico se lee en cinco segundos y significa lo mismo para toda la audiencia. ### La versión dinámica ![Tablero interactivo con filtros y tooltip](/courses/2026/2/cc3084/assets/vd-dinamica.png) Los mismos datos con controles. El lector elige la región, el producto y el rango de años, y obtiene el valor exacto al pasar el puntero. No hay una conclusión escrita porque no hay una sola vista. El costo aparece de inmediato. Nadie sabe qué debe mirar, la caída de 2020 ya no está anotada y el gráfico solo funciona si alguien decide explorarlo. ### Comparación directa | Criterio | Estática | Dinámica | |---|---|---| | Control del encuadre | del autor | compartido con el lector | | Mensaje | uno, explícito | variable según la exploración | | Costo de producción | bajo | alto, incluye mantenimiento | | Canal | impresión, papers, diapositivas, redes | navegador, tablero, cuaderno | | Reproducibilidad | alta, la imagen no cambia | baja, depende de datos y versión | | Longevidad | años | hasta que se rompe una dependencia | | Accesibilidad | texto alternativo resuelve la mayoría | requiere teclado, foco y lectores de pantalla | | Riesgo principal | omitir lo que no cabe | que nadie interactúe | Ninguna de las dos es superior. La estática responde una pregunta ya resuelta y la dinámica permite formular preguntas nuevas. ## Animación La animación es el caso más atractivo y más engañoso de la visualización dinámica. Popularizada por Hans Rosling y Gapminder, parece la forma natural de mostrar evolución en el tiempo. ### Lo que ve la audiencia ![Cuadros sucesivos de una animación](/courses/2026/2/cc3084/assets/vd-animacion.png) Cada cuadro borra al anterior. Para comparar el inicio con el final, el espectador tiene que recordar posiciones de burbujas que ya no están en la pantalla, y la memoria de trabajo no alcanza para seis trayectorias simultáneas. ### Trazas superpuestas ![Trayectorias superpuestas](/courses/2026/2/cc3084/assets/vd-trazas.png) La trayectoria completa se vuelve un objeto visible. La comparación entre países deja de depender de la memoria y pasa a depender de la vista, que es mucho más confiable. ### Pequeños múltiples ![Pequeños múltiples de las trayectorias](/courses/2026/2/cc3084/assets/vd-pequenos-multiples.png) Un panel por país con los mismos ejes y el resto de las trayectorias en gris de fondo. Cada panel se lee solo y la comparación se hace moviendo los ojos, no la memoria. ### La evidencia experimental Robertson y colaboradores midieron en 2008 las tres alternativas con usuarios reales. * Para presentación: la animación fue la más rápida y la más disfrutada, pero produjo muchos errores. * Para análisis: la animación fue la menos efectiva, las dos versiones estáticas resultaron significativamente más rápidas y los pequeños múltiples fueron los más precisos. La conclusión práctica es que la animación sirve cuando hay un narrador que guía y nadie tiene que responder preguntas con precisión. Para analizar datos, los pequeños múltiples ganan. Una excepción importante son las transiciones animadas entre dos estados de un mismo gráfico. Heer y Robertson mostraron en 2007 que una transición breve ayuda a mantener la identidad de los objetos cuando el gráfico cambia de orden, de escala o de tipo. El movimiento con función es distinto del movimiento decorativo. ## La Gramática de la Interacción Heer y Shneiderman publicaron en 2012 una taxonomía de doce dinámicas interactivas agrupadas en tres categorías. Sirve como lista de verificación de lo que una herramienta de análisis debería permitir. ### Especificación de datos y vistas * Visualizar: elegir la codificación visual de las variables. * Filtrar: descartar datos para concentrarse en lo relevante. * Ordenar: reordenar los elementos para exponer patrones. * Derivar: calcular valores o modelos nuevos a partir de los datos originales. ### Manipulación de vistas * Seleccionar: señalar elementos para resaltarlos, filtrarlos o manipularlos. * Navegar: moverse entre el panorama general y el detalle. * Coordinar: enlazar varias vistas para explorar en varias dimensiones. * Organizar: administrar ventanas y espacios de trabajo. ### Proceso y procedencia * Registrar: guardar el historial del análisis para revisarlo o compartirlo. * Anotar: documentar hallazgos sobre el gráfico. * Compartir: publicar vistas y anotaciones para colaborar. * Guiar: conducir al usuario a través de tareas o de una historia. Las primeras ocho son las que suelen implementarse. Las últimas cuatro son las que convierten una exploración en un resultado comunicable y casi siempre faltan. ### El mantra de Shneiderman La formulación de 1996 sigue siendo la regla de diseño más útil para una interfaz exploratoria. ![Vista general y detalle bajo demanda](/courses/2026/2/cc3084/assets/vd-overview-detalle.png) Panorama primero, acercar y filtrar, detalle bajo demanda. El panorama establece el contexto y previene conclusiones basadas en un fragmento, el filtro reduce el espacio y el detalle aparece solo cuando el usuario lo pide, de modo que no compite con la vista general. ### Selección enlazada ![Selección enlazada entre dos vistas](/courses/2026/2/cc3084/assets/vd-brushing.png) La técnica se llama brushing and linking y existe desde los años ochenta. Seleccionar un conjunto de puntos en una vista lo resalta en todas las demás, lo que permite responder preguntas sobre varias variables sin construir un gráfico nuevo por cada pregunta. Es la interacción con mayor rendimiento por unidad de esfuerzo de implementación, y es la que mejor distingue a un tablero útil de una colección de gráficos puestos en la misma página. ## Visualización Narrativa Segel y Heer describieron en 2010 siete géneros de visualización narrativa y, sobre todo, tres estructuras híbridas que equilibran el control del autor con la libertad del lector. ![Tres estructuras narrativas](/courses/2026/2/cc3084/assets/vd-narrativa.png) * Copa de martini: el relato guiado va primero y la exploración libre se abre al final. * Presentación interactiva: el autor marca los pasos y dentro de cada paso el lector puede explorar. * Profundización: el autor presenta un tema general y el lector elige el caso que quiere examinar. La copa de martini es la más usada en periodismo de datos porque garantiza que todos reciban el mensaje antes de dispersarse. La profundización funciona cuando el lector ya sabe qué busca, como en un buscador de resultados electorales por municipio. ### El costo de la interacción Archie Tse, editor gráfico del New York Times, resumió en 2016 lo aprendido después de una década de gráficos interactivos. Si se obliga al lector a hacer clic o a hacer cualquier cosa que no sea desplazarse, algo se pierde. Los costos concretos son los siguientes. * Descubribilidad: lo que está detrás de un filtro o de un tooltip es invisible para quien no interactúa, y la mayoría no interactúa. * Latencia: una respuesta que tarda más de un segundo rompe el flujo de exploración. * Dispositivo: el puntero no existe en un teléfono, así que el tooltip desaparece como canal. * Accesibilidad: un control sin acceso por teclado ni etiqueta deja fuera a parte de la audiencia. * Mantenimiento: un tablero es software, con dependencias que se rompen y datos que se vencen. * Evidencia: una imagen puede archivarse y citarse, un tablero vivo no muestra lo mismo mañana. La consecuencia de diseño es que todo mensaje indispensable debe estar visible sin interacción. La interacción agrega profundidad, nunca sostiene el mensaje principal. ### Criterios de elección Conviene elegir estática cuando se cumple alguna de estas condiciones. * La conclusión es una sola y ya está decidida. * El medio es impreso, una diapositiva, un paper o una red social. * El resultado debe ser citable y reproducible dentro de cinco años. * La audiencia leerá el gráfico una sola vez y de pasada. Conviene elegir dinámica cuando se cumple alguna de estas otras. * La audiencia necesita responder preguntas propias sobre sus propios subconjuntos. * Los datos se actualizan y el gráfico debe seguirlos. * El volumen excede lo que cabe en una sola imagen legible. * El uso es exploratorio y repetido, no una lectura única. ## Qué Hace Buena a una Visualización Alberto Cairo propone cinco cualidades en The Truthful Art, que funcionan como criterios de revisión. * Veraz: la representación es honesta respecto de los datos y de su incertidumbre. * Funcional: la codificación permite responder la pregunta con precisión. * Bella: el acabado respeta a la audiencia y no distrae. * Perspicaz: revela algo que no era evidente en la tabla. * Reveladora: cambia la comprensión del fenómeno. Munzner lo plantea como dos condiciones técnicas. Expresividad significa que la codificación muestra toda la información relevante y nada más. Efectividad significa que la información más importante usa el canal visual más preciso. Los ejemplos que siguen son errores de diseño, no engaños deliberados. La diferencia con la sección siguiente es la intención, pero el daño al lector es el mismo. ## Ejemplo 1: Profundidad Falsa ### Problema ![Barras en tres dimensiones](/courses/2026/2/cc3084/assets/vd-3d-mal.png) El relleno en tres dimensiones agrega una dimensión que no contiene datos. La perspectiva hace que las barras del frente se vean mayores que las del fondo aunque valgan menos, la cara superior impide saber dónde termina el valor y las etiquetas quedan oblicuas. En el estudio de Lo y colaboradores, el uso de tres dimensiones es el segundo problema más frecuente entre las visualizaciones reportadas como engañosas, con 105 casos. ### Corrección ![Barras horizontales ordenadas](/courses/2026/2/cc3084/assets/vd-3d-bien.png) Dos dimensiones, orden por valor y etiqueta directa. La única justificación para una tercera dimensión es que exista una tercera variable que la ocupe, como en una superficie o en una nube de puntos tridimensional rotable. ## Ejemplo 2: Codificación por Área ### Problema ![Círculos escalados por radio y por área](/courses/2026/2/cc3084/assets/vd-area-mal.png) Cuando el valor se asigna al radio, el área crece con el cuadrado. Un valor cuatro veces mayor produce un círculo dieciséis veces más grande y el lector percibe el área, no el radio. El mismo error aparece con íconos escalados, con mapas de burbujas y con figuras humanas estiradas en ambos ejes para representar una sola cantidad. ### Corrección ![Círculos escalados por área](/courses/2026/2/cc3084/assets/vd-area-bien.png) El radio se calcula con la raíz cuadrada del valor, de modo que el área sea proporcional. Aun así, el área es un canal impreciso y conviene reservarlo para una variable secundaria, nunca para la que sostiene el argumento. ## Ejemplo 3: Falta de Normalización ### Problema ![Mapa de casos totales y de casos por habitante](/courses/2026/2/cc3084/assets/vd-normalizacion-mal.png) El panel izquierdo muestra casos totales por departamento y el resultado es un mapa de población. Donde vive más gente ocurre más de todo, así que el gráfico confirma algo que ya se sabía y oculta lo que interesa. El panel derecho divide entre la población y el patrón cambia por completo. Los departamentos pequeños del oriente aparecen como los más afectados y la capital pasa a la mitad de la tabla. ### Corrección ![Tasas ordenadas por departamento](/courses/2026/2/cc3084/assets/vd-normalizacion-bien.png) Cuando la comparación entre unidades es el punto, el mapa suele ser peor que una barra ordenada, porque el área geográfica no tiene relación con la población ni con el valor. La verificación es preguntar si la variable es un conteo. Si lo es, casi siempre debe dividirse entre una base, que puede ser población, superficie, número de pruebas o total de la categoría. ## Ejemplo 4: Series Apiladas ### Problema ![Área apilada de cinco regiones](/courses/2026/2/cc3084/assets/vd-apilado-mal.png) Solo la serie de abajo descansa sobre una línea base recta. Las demás flotan sobre una base irregular, así que el lector debe estimar grosores en vez de comparar alturas. La región Sur está cayendo durante todo el período y el gráfico apilado lo esconde, porque su banda se mueve con la suma de las que tiene debajo. ### Corrección ![Pequeños múltiples por región](/courses/2026/2/cc3084/assets/vd-apilado-bien.png) Un panel por serie con el mismo eje vertical. Cada serie recupera su línea base y la caída se ve de inmediato. El apilado es correcto cuando el total importa y las partes son pocas, por ejemplo tres categorías cuya suma es el dato principal. Deja de serlo cuando la pregunta es sobre una parte. ## Ejemplo 5: Demasiado Pocos Puntos ### Problema ![Dos puntos unidos por una recta](/courses/2026/2/cc3084/assets/vd-pocos-mal.png) Dos observaciones unidas por una línea sugieren una trayectoria que nadie midió. La línea afirma que entre los extremos el comportamiento fue monótono y los datos no dicen eso. ### Corrección ![Serie anual completa](/courses/2026/2/cc3084/assets/vd-pocos-bien.png) La serie completa muestra que el indicador sube y baja, que hubo un mínimo en 2020 y que el valor final no es una tendencia sino un punto más. La regla es que una línea solo se traza cuando el eje horizontal es continuo y hay observaciones suficientes para describir la forma. Con dos valores, lo honesto son dos barras. ## Ejemplo 6: Gráfico Incompleto ### Problema ![Gráfico sin título, ejes ni leyenda](/courses/2026/2/cc3084/assets/vd-incompleto-mal.png) No hay título, ni unidades, ni etiquetas de eje, ni leyenda, ni fuente. Las dos líneas se cruzan pero nadie sabe qué miden, en qué período ni de dónde salieron los datos. En el conteo de Lo y colaboradores, la ausencia de título de eje aparece 62 veces y la ausencia de leyenda 52 veces. Son fallas de omisión y están entre las más frecuentes. ### Corrección ![El mismo gráfico completo](/courses/2026/2/cc3084/assets/vd-incompleto-bien.png) Título que dice de qué trata, unidades en el eje, etiquetas directas en lugar de leyenda y una línea de fuente con la fecha de los datos. La prueba es sacar el gráfico de su contexto. Si al verlo solo, sin el texto que lo rodea, deja de entenderse, está incompleto. ## Ejemplo 7: Incertidumbre Oculta ### Problema ![Barras de intención de voto sin intervalos](/courses/2026/2/cc3084/assets/vd-incertidumbre-mal.png) Las barras presentan estimaciones de una encuesta como si fueran mediciones exactas. El Partido A aparece por encima del B y el titular escribe que va ganando. ### Corrección ![Estimaciones con intervalo de confianza](/courses/2026/2/cc3084/assets/vd-incertidumbre-bien.png) Con el intervalo de 95 por ciento dibujado, los rangos de A y B se traslapan ampliamente y la diferencia deja de ser distinguible del error de muestreo. Cairo dedica un capítulo completo de How Charts Lie a este caso, porque es el engaño que más se comete sin intención. Una estimación sin su incertidumbre es una afirmación más fuerte que el dato que la respalda. ## Ejemplo 8: Granularidad Inadecuada ### Problema ![Promedios anuales](/courses/2026/2/cc3084/assets/vd-granularidad-mal.png) El promedio anual suaviza todo lo que ocurrió dentro del año. La serie se ve estable y creciente. ### Corrección ![La misma serie mes a mes](/courses/2026/2/cc3084/assets/vd-granularidad-bien.png) Mes a mes aparece una caída de siete meses que el promedio anual había absorbido por completo. La elección de la granularidad es una decisión de diseño con consecuencias sobre lo que la audiencia puede ver. Agregar siempre oculta algo, y conviene decir explícitamente qué se agregó y por qué. ## Mentiras con Visualizaciones La frontera entre el error y el engaño es la intención, y desde afuera casi nunca se puede determinar. Por eso resulta más útil estudiar los mecanismos que juzgar a los autores. Lo, Gupta, Shigyo, Wu, Bertini y Qu codificaron en 2022 más de mil visualizaciones reportadas como engañosas y encontraron 74 tipos de problemas, organizados en 12 categorías y cinco etapas del proceso. ![Problemas más frecuentes en visualizaciones engañosas](/courses/2026/2/cc3084/assets/vd-taxonomia.png) Las cinco etapas donde se introduce el engaño son las siguientes. 1. Entrada: datos dudosos, selectivos, sin normalizar o directamente inexistentes. 2. Diseño: elección del eje, de la escala y del tipo de gráfico. 3. Dibujo: elementos faltantes, como título, leyenda o etiquetas. 4. Percepción: codificaciones que el ojo estima mal, como tres dimensiones o área. 5. Interpretación: el mensaje que el texto le atribuye al gráfico. El hallazgo más útil para un científico de datos es que la mayoría de los engaños no está en el dibujo sino antes, en qué datos se eligieron y cómo se decidió el eje. ## Mentira 1: Eje Invertido ### Problema ![Serie con el eje vertical invertido](/courses/2026/2/cc3084/assets/vd-invertido-mal.png) La figura reproduce un gráfico publicado en 2014 sobre muertes por arma de fuego en Florida, con el eje vertical invertido y el área rellena hacia abajo. La lectura inmediata es que las muertes cayeron después de la ley de 2005. Los datos dicen lo contrario. El eje crece hacia abajo, así que la mancha que baja corresponde a un aumento. La convención de que arriba es más está tan interiorizada que el lector no verifica el eje. ### Corrección ![La misma serie con el eje convencional](/courses/2026/2/cc3084/assets/vd-invertido-bien.png) Con el eje en su orientación habitual, el aumento posterior a 2005 queda a la vista. El eje invertido es poco frecuente en la muestra de Lo, con 19 casos, pero es el ejemplo más citado porque explota una convención en lugar de romper una regla explícita. ## Mentira 2: Datos Seleccionados ### Problema ![Tramo seleccionado de una serie](/courses/2026/2/cc3084/assets/vd-cherry-mal.png) Cinco años consecutivos de caída, graficados con rigor. Cada punto es correcto y el gráfico no tiene ningún defecto de construcción. ### Corrección ![La serie completa con el tramo resaltado](/courses/2026/2/cc3084/assets/vd-cherry-bien.png) En la serie completa, ese tramo es una corrección dentro de una tendencia creciente de veinticinco años. Este es el engaño más difícil de detectar porque no deja huella en la imagen. La única defensa es preguntar por qué el período empieza y termina donde empieza y termina, y pedir la serie completa. ## Mentira 3: Escala de la Variable ### Problema ![Crecimiento exponencial en escala lineal](/courses/2026/2/cc3084/assets/vd-escala-mal.png) En escala lineal, un crecimiento exponencial parece plano durante la mayor parte del recorrido y luego explota. Los primeros cuarenta días se ven idénticos entre sí aunque los casos se dupliquen cada seis días. ### Corrección ![Los mismos datos en escala logarítmica](/courses/2026/2/cc3084/assets/vd-escala-bien.png) En escala logarítmica, una recta significa tasa de crecimiento constante y el cambio de pendiente indica que la tasa cambió. Es la escala correcta cuando la pregunta es sobre la tasa. La escala logarítmica también se usa para el engaño contrario, que es aplanar visualmente un crecimiento real. Ninguna de las dos escalas es honesta por sí misma. Lo que obliga es declarar cuál se usó y por qué. ## Mentira 4: Tendencia sobre Ruido ### Problema ![Recta de tendencia sobre datos aleatorios](/courses/2026/2/cc3084/assets/vd-ruido-mal.png) Los puntos son ruido generado al azar sin ninguna tendencia. La recta ajustada igual aparece, igual tiene pendiente positiva y el R cuadrado de 0.03 se omite o se presenta como evidencia. Cualquier software dibuja una recta sobre cualquier nube de puntos. El gráfico no distingue entre una relación y una coincidencia. ### Corrección ![Los mismos puntos sin recta ajustada](/courses/2026/2/cc3084/assets/vd-ruido-bien.png) Sin la recta, lo que se ve es dispersión alrededor de una media estable. La banda de dos desviaciones muestra el rango esperado de variación. La regla es no dibujar una línea de tendencia sin reportar la medida de ajuste, y no reportar un ajuste sin mirar antes el diagrama de dispersión. ## Mentira 5: Extrapolación ### Problema ![Proyección de una curva más allá de los datos](/courses/2026/2/cc3084/assets/vd-extrapolacion-mal.png) Doce meses de datos y veinticuatro meses de proyección, con la misma línea y el mismo grosor. El ajuste cuadrático es excelente dentro del rango observado y absurdo fuera de él. El gráfico no distingue lo medido de lo supuesto, así que el lector trata ambas partes como si fueran del mismo tipo. ### Corrección ![Proyección con banda de incertidumbre](/courses/2026/2/cc3084/assets/vd-extrapolacion-bien.png) Una línea continua para lo observado, una línea punteada para la proyección, una banda que se abre con el horizonte y una marca explícita donde terminan los datos. Toda proyección descansa en el supuesto de que el mecanismo que generó los datos sigue vigente. Ese supuesto se escribe en el gráfico, no se deja implícito. ## Mentira 6: Agregación que Invierte el Signo ### Problema ![Relación negativa en los datos agregados](/courses/2026/2/cc3084/assets/vd-simpson-mal.png) Los datos agregados muestran que a más horas de estudio, menor calificación. La recta es real y el cálculo es correcto. ### Corrección ![Relación positiva dentro de cada grupo](/courses/2026/2/cc3084/assets/vd-simpson-bien.png) Separando por programa, la relación es positiva dentro de cada uno. Lo que producía el signo negativo era que los programas más exigentes requieren más horas y califican más bajo. Es la paradoja de Simpson y no se detecta mirando el estadístico agregado. Se detecta graficando por grupo, que es exactamente lo que la visualización exploratoria hace bien. ## Mentira 7: Orden de las Categorías ### Problema ![Barras ordenadas por valor en lugar de por fecha](/courses/2026/2/cc3084/assets/vd-orden-mal.png) Las barras están ordenadas de mayor a menor y las fechas del eje horizontal quedaron desordenadas. La impresión es de una caída sostenida. El caso real ocurrió en 2020, cuando el departamento de salud de Georgia publicó un gráfico de casos con este ordenamiento durante el crecimiento de la epidemia. ### Corrección ![Las mismas barras en orden cronológico](/courses/2026/2/cc3084/assets/vd-orden-bien.png) Con el eje en orden cronológico, lo que se ve es un aumento sostenido. El orden del eje es una decisión de diseño. Para una variable nominal, ordenar por valor es lo correcto. Para una variable con orden propio, como el tiempo o una escala, alterar ese orden es falsear el dato. ## Defensa del Lector Cairo propone en How Charts Lie una rutina de lectura que aplica a cualquier gráfico publicado. 1. Leer el título, los ejes, las unidades, las etiquetas y la leyenda antes de mirar la forma. 2. Verificar de dónde salen los datos y quién paga la publicación. 3. Preguntar por qué el período empieza y termina donde lo hace. 4. Revisar si el conteo debería estar normalizado por alguna base. 5. Buscar la incertidumbre, y desconfiar si no aparece por ningún lado. 6. Comprobar que el texto que acompaña al gráfico afirme lo mismo que el gráfico muestra. La última es la más productiva. Buena parte de los engaños no está en el dibujo sino en el titular que lo rodea, que atribuye causalidad a una correlación o generaliza a partir de un caso. ### El dilema del diseñador El estudio de Lo y colaboradores señala una tensión real. Toda visualización simplifica, y simplificar es descartar. La diferencia entre una simplificación legítima y un engaño está en si la decisión se declara y en si el lector podría llegar a la misma conclusión con los datos completos. El criterio operativo es que un gráfico es honesto si el autor estaría dispuesto a publicar junto a él la serie completa, la fuente y el método. ## Tableros Un tablero es una interfaz que reúne en una pantalla lo necesario para tomar una decisión. No es una galería de gráficos sobre un mismo tema, y esa confusión explica la mayoría de los tableros malos. La pregunta de diseño es qué decisión habilita la pantalla, no cuántos indicadores caben en ella. ### Un tablero sobrecargado ![Tablero con medidores, pastel tridimensional y barras arcoíris](/courses/2026/2/cc3084/assets/vd-dash-mal.png) La recreación reúne los defectos más comunes. * Medidores que ocupan un cuarto de la pantalla para comunicar un solo número, sin comparación ni tendencia. * Pastel con aspecto tridimensional y seis porciones de tamaño parecido. * Ocho colores arcoíris que se repiten en cada panel sin significar lo mismo. * Doble eje vertical que sugiere una relación entre ingresos y temperatura. * Cifras con cuatro decimales en una pantalla que se consulta de un vistazo. * Paneles titulados Indicador 7 e Indicador 8, sin unidades ni contexto. ### El mismo tablero rediseñado ![Tablero con indicadores, gráfico principal anotado y pequeños múltiples](/courses/2026/2/cc3084/assets/vd-dash-bien.png) Los mismos datos con una jerarquía explícita. * Las cifras clave arriba, cada una con su comparación contra el período anterior y una línea de tendencia. * Un gráfico principal con el hallazgo anotado sobre la curva. * Pequeños múltiples por región con el mismo eje vertical, que permiten comparar sin cambiar de filtro. * Un solo color de acento, gris para el contexto y naranja únicamente donde hay un problema. * Fuente, fecha de extracción, frecuencia de actualización y descarga de los datos. ### Los trece errores de Few Stephen Few publicó en 2006 la lista que sigue siendo la referencia para revisar un tablero. 1. Exceder los límites de una sola pantalla. 2. Dar contexto insuficiente para los datos. 3. Mostrar detalle o precisión excesivos. 4. Expresar las medidas de forma indirecta. 5. Elegir un medio de representación inadecuado. 6. Introducir variedad sin significado. 7. Usar componentes mal diseñados. 8. Codificar mal los datos cuantitativos. 9. Disponer la información sin orden. 10. No resaltar lo importante, o hacerlo de forma inefectiva. 11. Saturar la pantalla con efectos visuales. 12. Abusar del color. 13. Descuidar el acabado visual. ### El tablero de pandemia más visto ![Recreación esquemática de un tablero oscuro con burbujas rojas](/courses/2026/2/cc3084/assets/vd-dash-covid-mal.png) El tablero del Center for Systems Science and Engineering de Johns Hopkins se convirtió en la imagen de la pandemia. Su mérito principal fue logístico, porque resolvió la recolección y publicación abierta de datos de todo el mundo cuando nadie más lo hacía, y se mantuvo hasta marzo de 2023. Su diseño recibió críticas sostenidas desde la comunidad de visualización. La recreación de arriba reproduce los puntos señalados. * Conteos crudos sin dividir entre población, de modo que el mapa reproduce la distribución de habitantes. * Precisión falsa, con cifras exactas para números que nadie conocía con exactitud. * Burbujas codificadas por área sobre una proyección de Mercator, que distorsiona el tamaño relativo. * Ausencia de contexto sobre la cobertura de pruebas, que es lo que determina cuántos casos se detectan. ### El mismo tablero con tasas y contexto ![Tablero con casos por cien mil habitantes y media de siete días](/courses/2026/2/cc3084/assets/vd-dash-covid-bien.png) La tasa por cien mil habitantes reemplaza al conteo, la media móvil de siete días absorbe el efecto del fin de semana, la banda recuerda que la cifra se revisa de forma retroactiva y la nota superior advierte que los conteos dependen de la cobertura de pruebas. ### Tableros públicos bien resueltos * Our World in Data: cada gráfico ofrece pestañas de gráfico, mapa y tabla, descarga en CSV, API pública y la fuente visible junto al gráfico. Los indicadores se publican per cápita por omisión. https://ourworldindata.org * Tablero de coronavirus del Reino Unido: la accesibilidad fue un principio de diseño declarado, con datos abiertos y API pública. En diciembre de 2023 fue sustituido por el tablero de la UKHSA. https://ukhsa-dashboard.data.gov.uk * Johns Hopkins CSSE: el caso mixto, excelente en recolección y acceso a datos, criticado en diseño. El tablero dejó de actualizarse en marzo de 2023 y el repositorio de datos sigue publicado. https://github.com/CSSEGISandData/COVID-19 * Gapminder: la herramienta funciona porque el relato lo sostiene un narrador, y la exploración libre queda para después. https://www.gapminder.org ### Fallas documentadas * Georgia, mayo de 2020. El tablero del departamento de salud mostró los cinco condados con más casos y el eje horizontal no iba en orden cronológico, sino de mayor a menor número de casos. El resultado parecía una caída sostenida durante un período de crecimiento. El estado reconoció el error, lo atribuyó a un proveedor externo y lo corrigió. * Inglaterra, octubre de 2020. Public Health England dejó fuera 15 841 casos registrados entre el 25 de septiembre y el 2 de octubre porque los resultados se acumulaban en archivos XLS, limitados a 65 536 filas. El tablero funcionaba correctamente, el proceso que lo alimentaba no. El fallo retrasó además el rastreo de contactos. * Tableros de medidores. Few documenta desde 2006 el patrón de las herramientas comerciales que llenan la pantalla de indicadores circulares, cada uno con un número y sin comparación. ### Lista de verificación de un tablero * ¿Qué decisión habilita esta pantalla? * ¿Lo más importante se ve primero, sin desplazarse? * ¿Cada cifra viene acompañada de su comparación y su tendencia? * ¿Los conteos están normalizados por su base? * ¿Se ve la fuente y la fecha de la última actualización? * ¿El mensaje principal sobrevive sin tocar ningún filtro? * ¿Se puede descargar el dato que sostiene cada vista? ## Herramientas ### Gráficos estáticos * matplotlib: base de todo el ecosistema de Python, control total y verbosidad alta. * seaborn: capa estadística sobre matplotlib, buenos valores por omisión para datos ordenados. * plotnine: gramática de gráficos en Python, equivalente a ggplot2. * ggplot2: el estándar en R y la implementación más fiel de la gramática de gráficos. ### Gramáticas declarativas * Vega-Lite: especificación en JSON, con interacción declarativa incluida. * Altair: interfaz de Python sobre Vega-Lite, produce gráficos estáticos o interactivos con el mismo código. * Observable Plot: equivalente en JavaScript, sintaxis breve para los tipos de gráfico habituales. Las gramáticas declarativas son la mejor relación entre esfuerzo y resultado cuando se necesitan ambos modos a partir de la misma especificación. ### Bibliotecas interactivas * Plotly: la opción por omisión en Python para gráficos interactivos, cubre más tipos que ninguna otra. * Bokeh: renderiza en canvas, maneja mejor los volúmenes grandes y admite servidor con transmisión. * ECharts: tipos poco comunes como Sankey, treemap y calendario, muy probada a gran escala. * D3.js: control total sobre el documento, necesario solo cuando el gráfico no existe como preajuste. * Leaflet, deck.gl y kepler.gl: mapas interactivos y grandes volúmenes geoespaciales. ### Aplicaciones y tableros * Streamlit: prototipos de tablero en Python puro, el camino más corto de un cuaderno a una aplicación. * Dash: aplicaciones de Plotly con control fino sobre la disposición y el estado. * Shiny: el equivalente en R, con versión para Python. * Panel y HoloViews: integración con el ecosistema de PyData y datos grandes vía Datashader. * Tableau, Power BI y Looker Studio: plataformas comerciales de inteligencia de negocios. * Metabase y Superset: alternativas de código abierto para tableros sobre bases de datos. ### Publicación * Datawrapper: gráficos listos para prensa, con buenos valores por omisión y salida accesible. * Flourish: plantillas de visualización narrativa, incluida la carrera de barras. * RAWGraphs: tipos poco comunes sin escribir código. * Observable Framework y Quarto: publicación reproducible que combina texto, código y gráficos. ### Volúmenes grandes Cuando los puntos superan el orden de cien mil, la respuesta no es una biblioteca más rápida sino agregar antes de dibujar. Datashader rasteriza el conjunto completo del lado del servidor, y DuckDB permite agregar sobre el dato crudo a velocidad interactiva. ### Código de referencia ```python # estático, para informe o diapositiva import matplotlib.pyplot as plt fig, ax = plt.subplots(figsize=(8, 4.5)) ax.plot(df["anio"], df["ventas"], color="#0072B2", lw=2.5) ax.set_title("Ventas anuales", loc="left") ax.annotate("recuperación", xy=(2022, 63), xytext=(2018, 75), arrowprops=dict(arrowstyle="->")) fig.savefig("ventas.png", dpi=200, bbox_inches="tight") ``` ```python # declarativo, el mismo código produce estático o interactivo import altair as alt seleccion = alt.selection_point(fields=["region"], bind="legend") (alt.Chart(df) .mark_line(point=True) .encode(x="anio:O", y="ventas:Q", color="region:N", opacity=alt.condition(seleccion, alt.value(1), alt.value(0.15)), tooltip=["anio", "region", "ventas"]) .add_params(seleccion) .properties(width=600, height=320)) ``` ```python # tablero, cuando la audiencia necesita filtrar por su cuenta import plotly.express as px import streamlit as st region = st.selectbox("Región", sorted(df["region"].unique())) fig = px.line(df[df.region == region], x="anio", y="ventas", markers=True) fig.update_yaxes(rangemode="tozero") st.plotly_chart(fig, use_container_width=True) ``` ## Buenas Prácticas ### Proceso 1. Escribir la pregunta que el gráfico responde, en una oración. 2. Elegir el canal visual más preciso para la variable que sostiene esa respuesta. 3. Decidir estático o dinámico según la audiencia y el medio, no según la herramienta disponible. 4. Dibujar primero sin color y agregar color solo cuando distinga algo. 5. Anotar el hallazgo sobre el gráfico, en lugar de dejarlo en el pie de figura. 6. Declarar fuente, fecha, unidades y transformaciones aplicadas. 7. Verificar en grises, con simulación de daltonismo y en pantalla pequeña. ### Encuadre honesto * Ejes de longitud desde cero y un solo eje vertical. * Escala declarada cuando no es lineal. * Conteos normalizados por su base. * Período completo, o justificación explícita del recorte. * Incertidumbre visible cuando el dato es una estimación. * Orden del eje que respete el orden propio de la variable. ### Diseño dinámico * El mensaje principal debe ser visible sin interactuar. * Vista general primero, filtros después, detalle al final. * Estado inicial útil, nunca un tablero vacío esperando selección. * Respuesta por debajo de un segundo, con agregación previa si hace falta. * Enlace entre vistas, para que una selección valga en todas. * Exportación del dato y de la vista, porque alguien querrá citarla. ### Accesibilidad * Contraste suficiente entre texto y fondo. * El color nunca como único canal, acompañado de forma, posición o etiqueta. * Texto alternativo que describa el hallazgo, no el tipo de gráfico. * Controles operables con teclado y con etiqueta legible por lector de pantalla. * Tipografía que sobreviva la proyección y la pantalla de un teléfono. ### Reproducibilidad * El gráfico se genera con código versionado, nunca a mano. * El dato de origen queda identificado con su fecha de extracción. * La imagen final se guarda junto al código que la produjo. * El tablero declara cuándo se actualizó por última vez. ## Bibliografía ### Libros fundamentales * Tufte, E. The Visual Display of Quantitative Information. Graphics Press, 1983. * Tufte, E. Envisioning Information. Graphics Press, 1990. * Bertin, J. Sémiologie Graphique. Gauthier-Villars, 1967. * Cleveland, W. The Elements of Graphing Data. Wadsworth, 1985. * Ware, C. Information Visualization: Perception for Design. Morgan Kaufmann, cuarta edición, 2020. * Munzner, T. Visualization Analysis and Design. CRC Press, 2014. ### Práctica y diseño * Wilke, C. Fundamentals of Data Visualization. O'Reilly, 2019. Disponible en línea. * Healy, K. Data Visualization: A Practical Introduction. Princeton University Press, 2018. * Knaflic, C. Storytelling with Data. Wiley, 2015. * Few, S. Show Me the Numbers. Analytics Press, segunda edición, 2012. * Few, S. Information Dashboard Design. Analytics Press, segunda edición, 2013. * Schwabish, J. Better Data Visualizations. Columbia University Press, 2021. * Kirk, A. Data Visualisation: A Handbook for Data Driven Design. Sage, segunda edición, 2019. * Berinato, S. Good Charts. Harvard Business Review Press, 2016. ### Engaño y lectura crítica * Cairo, A. How Charts Lie. W. W. Norton, 2019. * Cairo, A. The Truthful Art. New Riders, 2016. * Huff, D. How to Lie with Statistics. W. W. Norton, 1954. * Monmonier, M. How to Lie with Maps. University of Chicago Press, tercera edición, 2018. * Wainer, H. Visual Revelations. Copernicus, 1997. * Bergstrom, C. y West, J. Calling Bullshit. Random House, 2020. ### Artículos * Cleveland, W. y McGill, R. Graphical Perception. Journal of the American Statistical Association, 1984. * Shneiderman, B. The Eyes Have It. IEEE Symposium on Visual Languages, 1996. * Heer, J. y Shneiderman, B. Interactive Dynamics for Visual Analysis. Communications of the ACM, 2012. * Segel, E. y Heer, J. Narrative Visualization: Telling Stories with Data. IEEE TVCG, 2010. * Robertson, G. y otros. Effectiveness of Animation in Trend Visualization. IEEE TVCG, 2008. * Heer, J. y Robertson, G. Animated Transitions in Statistical Data Graphics. IEEE TVCG, 2007. * Lo, L. y otros. Misinformed by Visualization. Computer Graphics Forum, EuroVis, 2022. * Correll, M., Bertini, E. y Franconeri, S. Truncating the Y-Axis. CHI, 2020. * Few, S. Common Pitfalls in Dashboard Design. Perceptual Edge, 2006. * Lex, A. y otros. The Case Against Dashboards. Visualization Design Lab, Universidad de Utah, 2020. ### Recursos en línea * Fundamentals of Data Visualization. https://clauswilke.com/dataviz/ * The Data Visualisation Catalogue. https://datavizcatalogue.com * From Data to Viz. https://www.data-to-viz.com * Datawrapper Academy. https://academy.datawrapper.de * Observable. https://observablehq.com * Vega-Lite. https://vega.github.io/vega-lite/ * Our World in Data. https://ourworldindata.org * UKHSA Data Dashboard. https://ukhsa-dashboard.data.gov.uk * The Case Against Dashboards. https://vdl.sci.utah.edu/blog/2020/07/06/dashboards/ ## Resumen * La diferencia entre estática y dinámica no es el movimiento sino quién controla el encuadre. * La estática responde una pregunta decidida, la dinámica permite formular preguntas nuevas. * La animación sirve para presentar con narrador, no para analizar. Los pequeños múltiples ganan. * Las doce dinámicas de Heer y Shneiderman describen lo que una herramienta de análisis debe permitir. * Panorama primero, acercar y filtrar, detalle bajo demanda. * El mensaje indispensable debe estar visible sin interacción, porque la mayoría no interactúa. * Tres dimensiones y codificación por área son errores de percepción, no decisiones estéticas. * Un conteo casi siempre debe normalizarse por su base antes de graficarse. * Una estimación sin su incertidumbre afirma más de lo que el dato respalda. * La mayoría de los engaños se introduce antes del dibujo, al elegir los datos y el eje. * El eje invertido, el recorte del período y el orden alterado explotan convenciones, no reglas. * Un tablero es una interfaz para decidir, no una galería de gráficos sobre un tema. * Un gráfico es honesto si su autor publicaría junto a él la serie completa, la fuente y el método.