La casita
tiembla.

Hace diez años llegué a Chile desde Italia. El primer temblor lo recuerdo como si fuera ayer.

Santiago · 06:42 AM

Estaba en mi departamento. El piso empezó a sacudirse y yo salí corriendo hacia la puerta convencido de que el edificio se venía abajo. Al abrirla me encontré con mis vecinos. En pijama. Café en mano. Riéndose.

«Tranquilo, gringo. Si no pasa de 7, no es nada.»

— y volvieron a su desayuno.
Diez años después · este curso

Ese sarcasmo chileno frente al temblor — esa convivencia diaria con un suelo que no se queda quieto — se transformó en el ejemplo que abre este curso: una visualización donde los terremotos de Chile desde el año 2000 aparecen en un mapa, suenan al hacer clic, y hacen temblar una casita física sobre mi escritorio con la intensidad real del sismo.

Si la magnitud es alta, se cae. Si es baja, los chilenos la ignoran.

¿Cómo será el curso?

Todo lo que necesitas saber, contado de principio a fin.

Formato  Herramientas  Evaluación  Comunicación

La idea en una mirada

Qué esperar de este curso

Este curso se aprende haciendo. Habrá clases, sí — pero el corazón del curso es un proyecto que vas a construir en tres entregas, cada una más ambiciosa que la anterior.

2Pruebas teóricas
3Entregas de proyecto
80%Peso del proyecto

Una teoría que se aplica; un proyecto que no deja de iterarse.

La idea, en una frase
Formato del curso

Cómo trabajamos semana a semana

Página web oficial

Todo el material del curso —apuntes, código y recursos— vive centralizado en esta misma página. Nada de perseguir archivos sueltos por correo.

Aprendizaje activo

Habrá exposición de conceptos, pero el peso está en las actividades en clase: ejercicios, discusión y construir cosas. Se aprende haciendo, no solo mirando.

Ayudantías

Sesiones de apoyo, clases prácticas y clases técnicas para reforzar y bajar a tierra lo aprendido.

Herramientas

Con qué vas a construir

El proyecto se construye con tecnología web abierta. GitHub es obligatorio; el resto son recomendaciones — puedes usar otras, pero el apoyo del equipo docente será limitado.

Dónde vive el proyecto
GitHubObligatorio

Aloja y versiona tu proyecto. Con GitHub Codespaces programas desde el navegador — un entorno listo en segundos, sin instalar nada.

Para mostrar los datos
Plotly.jsRecomendada

Gráficos interactivos —zoom, hover, selección— con pocas líneas de código.

D3.jsAlternativa

Control total sobre cada detalle del gráfico, a cambio de escribir más código.

Más allá de lo visual
Tone.jsSonificación

Síntesis de sonido en el navegador para representar tus datos con tonos, ritmos y timbres.

ProtobjectFisicalización

Convierte el celular en sensor para prototipar visualizaciones físicas, sin hardware adicional.

Para resolver dudas
ChatGPTOpenAI

El más conocido y versátil: un buen punto de partida para programar o resolver cualquier duda.

GeminiGoogle

Muy integrado con los servicios de Google y generoso en su plan gratuito.

ClaudeAnthropic

Prolijo con texto largo, código y explicaciones cuidadas paso a paso.

Sobre los LLM: úsalos con libertad — con dos condiciones simples. Que entiendas todo lo que entregas —el equipo docente puede preguntártelo de viva voz— y que declares su uso. En el proyecto se da por hecho que los usas, así que ahí no hace falta declararlo. No usarlos es decisión tuya — pero te conviene aprovecharlos. Y para construir el proyecto con IA, mira la sección siguiente.

Prototipar con IA

Menos código, más iteración

Lo que se evalúa en InfoVis es el diseño de la visualización, no lo prolijo del código. Si la IA escribe el código por ti, prototipas en minutos: pruebas una idea, la miras, la descartas y pruebas otra. Son esas vueltas las que arman un buen diseño — así que, en este curso, usa la IA para construir tu proyecto.

Gratis

Entorno de programación agéntico, gratis con una cuenta de Google y con modelos más que suficientes para el curso.

De pago

El asistente agéntico de Anthropic, que trabaja desde la terminal.

De pago

El agente de programación de OpenAI, también desde la terminal.

Claude Code y Codex son de pago, pero con Antigravity haces exactamente lo mismo sin gastar un peso: no tener presupuesto no es excusa para no prototipar con IA.

Evaluación

Las cinco evaluaciones

Tu nota sale de cinco hitos repartidos en el semestre: dos interrogaciones teóricas y las tres entregas del proyecto. Esta es la línea de tiempo completa — qué cubre cada una, cuándo es y cuánto pesa.

2Pruebas teóricas
+
3Entregas de proyecto
=
5Evaluaciones
  1. 9ABR
    I1Teoría10% de la nota

    Primera prueba teórica

    Evaluación escrita de los fundamentos: percepción visual, variables y principios de diseño, y narrativa con datos.

    Jueves 9 de abril de 2026
    Ver la pauta ↗
  2. 16ABR
    E1Proyecto16% de la nota

    Visualización estática

    Diseño e implementación de una InfoVis estática con HTML, CSS, SVG y Plotly.js, sin interacción.

    Jueves 16 de abril de 2026
    Ver la pauta ↗
  3. 14MAY
    E2Proyecto32% de la nota

    Visualización interactiva y sonora

    Se añade interacción —zoom, filtros, detalles bajo demanda— y una capa de sonificación con Tone.js.

    Jueves 14 de mayo de 2026
    Ver la pauta ↗
  4. 11JUN
    I2Teoría10% de la nota

    Segunda prueba teórica

    Evaluación escrita de la segunda mitad: interacción, sonificación, fisicalización y evaluación de InfoVis.

    Jueves 11 de junio de 2026
    Ver la pauta ↗
  5. 25JUN
    E3Proyecto32% de la nota

    Visualización interactiva, sonora y física

    La visualización se extiende con una componente física construida con Protobject, Arduino o LEGO Technic.

    Jueves 25 de junio de 2026
    Ver la pauta ↗
La nota final

De qué se compone tu nota

Tu nota final combina dos cosas: lo que sabes —la teoría— y lo que construyes —el proyecto—. Y no pesan igual: el proyecto vale cuatro veces más que las pruebas.

Cuánto pesa cada parte · 100%
I110%
I210%
E116%
E232%
E332%
Teoría · 20%
Proyecto · 80%

Las dos interrogaciones teóricas —I1 e I2— valen un 10% de la nota final cada una; juntas, el 20%. El proyecto se entrega en tres partes —E1, E2 y E3— que pesan 16%, 32% y 32% de la nota final; juntas, el 80% restante. Para aprobar hace falta un promedio ≥ 4,0 tanto en teoría como en proyecto: si uno de los dos queda por debajo, la nota final será 3,9.

Cuatro en teoría. Cuatro en el proyecto. Los dos, sin excepción.

La regla para aprobar
Simula tu nota

Cambia tus notas y mira cómo se arma el promedio.

7,04,01,0
Aprobación · 4,0
I1
I2
E1
E2
E3
Promedio teoría • I1 · I2
Promedio proyecto • E1 · E2 · E3
Nota final • teoría + proyecto

Cada promedio —teoría y proyecto— debe llegar a 4,0 por separado para aprobar el curso.

Comunicación

Cada cosa, por su canal correcto

Dudas de contenidos

¿Preguntas sobre la materia o las evaluaciones?

Repositorio de dudas del curso ↗
Avisos oficiales

Fechas, cambios y novedades importantes.

Canvas · En clase
Temas personales

¿Algo privado o una situación particular?

Al final de la clase, o reunión por correo
Bienestar

Tu salud y tu ánimo importan

Un curso es muchas cosas a la vez y, a veces, la vida se complica. Si estás pasando por un momento difícil —de salud, de ánimo, lo que sea— no lo enfrentes en silencio: hablarlo a tiempo siempre ayuda.

Acompañamiento UC

El Equipo de Acompañamiento y Orientación Estudiantil de la Escuela de Ingeniería está para apoyarte, con total confidencialidad — ese es el canal indicado para temas de bienestar.

orientaciondipre.ing@uc.cl
Pedir ayuda no resta

Cuidar tu proceso es parte del curso. Pedir apoyo a tiempo no es debilidad: es lo más sensato que puedes hacer.

27 cápsulas + 8 técnicas + 27 canciones

Estudiar duele menos con banda sonora.

Cada cápsula trae una canción que la acompaña. Escucharla no es obligatorio — pero si te aburres, prueba: a veces ayuda.

Playlist InfoVis

Visualizar también se canta

Un álbum conceptual sobre visualización de información, una canción por cápsula teórica. Cada canción es un videoclip con imágenes, subtítulos sincronizados y la letra integrada.

Visualizetor: máquina letal de dashboards

¡Atención, futuros diseñadores! Dejen de llorar frente a su hoja de cálculo. Creen que visualizar es darle a 'Insertar gráfico' y ya está. Pucha, qué inocentes. Visualizar es hacer que la información entre por los ojos y se transforme en comprensión dentro de la cabeza.

Hay un cuarteto famoso para el que aprende y desconfía, cuatro grupos de datos que van a hipnotizarte un día. Tienen la misma media, la misma desviación, la misma correlación... pero si los graficas, son completamente extraños.

¡Despierten, genios! ¿Creen que visualizar es solo 'ver'? Visualizar es algo más sutil: es hacer que tu cerebro forme una imagen y que esa imagen te diga algo. Cuando entiendes y dices 'ya veo, ya cachái', estás visualizando.

Imaginen 2700 pacientes. Si les das una tabla inmensa, no van a entender nada. Hoy aprendemos a hablarle al experto (con un scatter plot denso) y al paciente (con frecuencias naturales claras).

¡Acomódense! Piensan que un gráfico flota en el vacío, puro, inmaculado... ¡Falso! Sin contexto, sus datos son solo píxeles desperdiciados. Todo depende de la ventana por la que elijas mirar.

Existe algo llamado 'Graphicacy': la capacidad de leer y crear gráficos bien hechos. Y nuestro gran villano predeterminado es Excel, que corta el eje Y solito y te aumenta el 'Factor de Mentira'.

La controversia: ¿Cortar el eje Y o no? En barras, pecado. En líneas, a veces es válido. Y cuidado con los acumulados, los ejes mal proporcionados y los porcentajes que no suman 100.

Hay trampas sutiles: omitir datos, jugar con los bins, e inventar correlaciones. ¿Crees que vender helados atrae tiburones? Correlación NO es causalidad.

¡Silencio! Hoy destruimos otra trampa: si quieres que un círculo represente un número, no escales el radio, ¡escala el área! De lo contrario, exagerarás la diferencia al cuadrado.

El color es la herramienta visual más poderosa — y la más mal usada. Tiene tres dimensiones, no una. Casi el 8 % de los hombres no distingue rojo de verde. Y si "Producto A" cambia de color entre gráficos, el lector se pierde.

¡Atención futuros ingenieros! ¿Creían que diseñar era hacer un gráfico y mandarlo? Error. Es un ciclo: Diseña, Implementa, Evalúa, Mejora. Y nunca se enamoren de la primera versión.

¿Cuántos sentidos usan para procesar información? ¿Solo los ojos? Hoy vemos un terremoto en Chile desde el 2000, contado visual, sonora, y físicamente.

¡Silencio clase! Antes de dibujar, entiendan su dato. Si cuentan (1, 2, 3 perros), es Discreto. Si miden (temperatura, peso), es Continuo. No los mezclen.

En la escala de Intervalo, el cero es una convención (como 0 °C). En la escala de Razón, el cero es la ausencia total (como 0 kilos o 0 euros). Si confundes esto, las proporciones fallan.

Situar el dato en el vacío requiere un Sistema de Coordenadas: Cartesiano, Polar, Geográfico. Y recuerda la jerarquía: la Posición en el eje común es lo que el humano lee mejor.

¿Cómo metes cinco dimensiones en un gráfico plano? Usa Posición X, Posición Y, Color, Tamaño y Forma. Y si necesitas diez, bienvenido a las Coordenadas Paralelas.

Empieza por la pregunta, no por el gráfico. Si no puedes escribir la pregunta en una frase, ningún gráfico la va a responder por ti. Y si te trabas, pídele ayuda a un LLM — pero cuéntale qué datos tienes y qué quieres saber.

El diseño Exploratorio es buscar en cien ostras para encontrar perlas. El diseño Explicativo es mostrarle al cliente SOLO esas dos perlas.

Menos es Más. Maximiza la proporción de tinta usada para datos (Data-Ink Ratio). Si una grilla distrae, bórrala. Si un color no aporta info, a la basura.

¿Creen que su gráfico es bueno porque a ustedes les gusta? Monumento al ego. Evalúen. Absoluta o Comparativa. Formativa o Sumativa. Cualitativa o Cuantitativa.

¿Cómo se evalúa en concreto? Usen el 'Think Aloud': pongan a 4 usuarios a usar su sistema y pidan que hablen en voz alta. Sus confusiones son los errores de ustedes.

El mantra de la interacción visual: 'Overview first, zoom and filter, then details-on-demand'. Muestra el bosque antes de enfocarte en las hojas.

La vista tiene un límite. Con la sonificación convertimos datos en sonido — como el monitor cardíaco — para percibir patrones, anomalías y cambios a través del oído.

Diseñar en la pantalla está bien para empezar. Pero antes de invertir cien horas en programar la versión final, hay que prototipar. Un prototipo es una pregunta hecha objeto.

Para que un prototipo físico sea interactivo, necesita dos cosas: sentidos para percibir (sensores), y manos para actuar (actuadores). Y lo mejor: tu celular ya los tiene todos.

Imaginen un mundo donde los datos no viven solo en pantallas, donde se tocan, se sienten en las manos. Eso es fisicalización de datos. Y existe desde hace siglos.

La fisicalización no solo informa, también puede emocionar. Cuando los datos se vuelven escultura o ambiente, algo cambia en cómo los sentimos.

El caso John Snow: cuando la visualización salvó vidas

Snow Tenía Razón

Visualizetor: máquina letal de dashboards

¡Atención, futuros diseñadores! Dejen de llorar frente a su hoja de cálculo. Creen que visualizar es darle a 'Insertar gráfico' y ya está. Pucha, qué inocentes. Visualizar es hacer que la información entre por los ojos y se transforme en comprensión dentro de la cabeza.

Caso de John Snow (1854)

John Snow, un médico británico, es conocido por su trabajo durante la epidemia de cólera en Londres en 1854. Snow sospechaba que el cólera se transmitía a través del agua contaminada, en contraposición a la teoría predominante de la época que atribuía la causa de la enfermedad al aire malo. Para demostrar su teoría, Snow creó un mapa de Londres en el que marcó las ubicaciones de las viviendas de las personas que habían muerto de cólera. Al analizar la distribución de los casos, notó una alta concentración de muertes alrededor de una bomba de agua específica en Broad Street (hoy Broadwick Street). El mapa (Fig. 1.1) no solo mostraba los casos de cólera, sino que también ayudaba a visualizar un patrón claro que indicaba la fuente de la epidemia. Gracias a esa visualización, Snow logró convencer a las autoridades para que retiraran la manivela de la bomba, interrumpiendo así la epidemia. Este caso es un ejemplo pionero de epidemiología moderna y demuestra cómo la visualización de datos puede revelar información crucial para la salud pública.

Mapa de Broad Street (Londres, 1854) con los 76 casos de cólera marcados sobre el plano y la bomba contaminada resaltada al centro. El patrón espacial habla por sí solo: ningún cálculo estadístico hacía falta para ver que las muertes se agrupaban alrededor de una sola fuente de agua. Es el caso fundacional que demuestra que una visualización bien hecha puede convertirse en un argumento irrefutable y, literalmente, salvar vidas.
Fig. 1.1: Mapa de Broad Street (Londres, 1854) con los 76 casos de cólera marcados sobre el plano y la bomba contaminada resaltada al centro. El patrón espacial habla por sí solo: ningún cálculo estadístico hacía falta para ver que las muertes se agrupaban alrededor de una sola fuente de agua. Es el caso fundacional que demuestra que una visualización bien hecha puede convertirse en un argumento irrefutable y, literalmente, salvar vidas.

Caso de Florence Nightingale (1858)

Florence Nightingale, una enfermera británica, es famosa no solo por su trabajo de enfermería durante la Guerra de Crimea, sino también por su contribución al uso de la estadística y la visualización de datos para mejorar las condiciones sanitarias. Nightingale utilizó un tipo de gráfico de tarta modificado, conocido como “diagrama de rosa” o “coxcomb chart” (Fig. 1.2), para ilustrar las causas de mortalidad de los soldados durante la guerra. A través de este gráfico, Nightingale mostró que un número significativo de muertes se debía a enfermedades prevenibles en lugar de a heridas de guerra. El trabajo de Nightingale condujo a una mayor conciencia de la importancia de las condiciones higiénicas en los hospitales y estimuló reformas sanitarias que salvaron innumerables vidas. Su uso innovador de la visualización de datos demostró cómo la información compleja podía presentarse de manera clara y persuasiva para promover cambios significativos.

Diagrama de rosa polar de Florence Nightingale (1858) sobre la mortalidad de los soldados británicos en la Guerra de Crimea. Cada rosa cubre 12 meses; la de la izquierda (ANTES) muestra los doce meses anteriores a las reformas sanitarias de marzo 1855, la de la derecha (DESPUÉS) los doce meses siguientes. La comparación es brutal: las heridas en combate (rojo) se mantienen — la guerra seguía — pero la masa azul de muertes por enfermedades prevenibles, que dominaba el primer año, colapsa tras las reformas. Es otro ejemplo pionero de cómo un gráfico convence donde las palabras fracasan, y desencadenó reformas sanitarias que salvaron miles de vidas.
Fig. 1.2: Diagrama de rosa polar de Florence Nightingale (1858) sobre la mortalidad de los soldados británicos en la Guerra de Crimea. Cada rosa cubre 12 meses; la de la izquierda (ANTES) muestra los doce meses anteriores a las reformas sanitarias de marzo 1855, la de la derecha (DESPUÉS) los doce meses siguientes. La comparación es brutal: las heridas en combate (rojo) se mantienen — la guerra seguía — pero la masa azul de muertes por enfermedades prevenibles, que dominaba el primer año, colapsa tras las reformas. Es otro ejemplo pionero de cómo un gráfico convence donde las palabras fracasan, y desencadenó reformas sanitarias que salvaron miles de vidas.

El Cuarteto de Anscombe: cuando las estadísticas mienten y los gráficos delatan

Cuatro Mentirosos Idénticos

Visualizetor: máquina letal de dashboards

Hay un cuarteto famoso para el que aprende y desconfía, cuatro grupos de datos que van a hipnotizarte un día. Tienen la misma media, la misma desviación, la misma correlación... pero si los graficas, son completamente extraños.

El Cuarteto de Anscombe

El Cuarteto de Anscombe es un conjunto de cuatro conjuntos de datos que, como se ve en Fig. 2.1, tienen las mismas propiedades estadísticas (media, varianza, correlación, y línea de regresión), pero que son claramente diferentes cuando se visualizan en un gráfico.

Tabla con los datos crudos de los cuatro grupos del Cuarteto de Anscombe. Mirar las columnas no produce ninguna sospecha: parecen cuatro datasets razonablemente parecidos. Lo importante de esta figura es lo que NO se ve aquí — es el punto de partida que justifica por qué hay que graficar antes de confiar en cualquier estadística resumen.
Fig. 2.1: Tabla con los datos crudos de los cuatro grupos del Cuarteto de Anscombe. Mirar las columnas no produce ninguna sospecha: parecen cuatro datasets razonablemente parecidos. Lo importante de esta figura es lo que NO se ve aquí — es el punto de partida que justifica por qué hay que graficar antes de confiar en cualquier estadística resumen. (Anscombe, 1973)

Este cuarteto fue creado por el estadístico Francis Anscombe para demostrar la importancia de visualizar los datos antes de analizarlos. Cada conjunto de datos en el cuarteto de Anscombe parece ser similar cuando se examinan sus estadísticas resumidas, pero al graficarlos (Fig. 2.2) aparecen diferencias significativas entre los conjuntos de datos, lo que subraya la importancia de la visualización de datos en el análisis estadístico.

Cuatro scatter plots de los grupos del Cuarteto de Anscombe, todos con la misma recta de regresión encima y, sin embargo, cuatro historias completamente distintas: una nube lineal, una curva parabólica, una recta perfecta con un outlier salvaje y una columna vertical dominada por un solo punto. Es la prueba visual de que media, varianza y correlación idénticas pueden ocultar fenómenos opuestos — y de por qué graficar antes de analizar no es un capricho estético sino una obligación metodológica.
Fig. 2.2: Cuatro scatter plots de los grupos del Cuarteto de Anscombe, todos con la misma recta de regresión encima y, sin embargo, cuatro historias completamente distintas: una nube lineal, una curva parabólica, una recta perfecta con un outlier salvaje y una columna vertical dominada por un solo punto. Es la prueba visual de que media, varianza y correlación idénticas pueden ocultar fenómenos opuestos — y de por qué graficar antes de analizar no es un capricho estético sino una obligación metodológica. (Anscombe, 1973)

Correlación en el Cuarteto de Anscombe

La correlación es un concepto estadístico que describe cómo dos variables se mueven juntas. En términos sencillos, la correlación nos dice si existe una relación entre dos cosas y cuán fuerte es esa relación.

Existen tres tipos de correlación:

  • Correlación Positiva: Cuando una variable aumenta, la otra tiende a aumentar. Por ejemplo, cuanto más estudias, más altas son las calificaciones que obtienes.
  • Correlación Negativa: Cuando una variable aumenta, la otra tiende a disminuir. Por ejemplo, cuanto más calor hace, menos se venden las bebidas calientes.
  • Ninguna Correlación: Cuando las variaciones de una variable no influyen en la otra. Por ejemplo, el número de zapatos que posees no tiene relación con el número de libros que lees.

Un scatter plot es un gráfico que utiliza puntos para representar los datos (ver Cuarteto de Anscombe). Cada punto muestra una observación para dos variables. Cuando hablamos de correlación en los scatter plots, a menudo se dibuja una línea llamada “línea de tendencia” o “línea de regresión” para ayudar a visualizar la relación entre las variables.

La línea de regresión es una línea recta que mejor se aproxima a los datos en el gráfico. Aquí está lo que representa:

  • Si la línea sube hacia la derecha: indica una correlación positiva (cuando una variable aumenta, la otra también aumenta).
  • Si la línea baja hacia la derecha: indica una correlación negativa (cuando una variable aumenta, la otra disminuye).
  • Si la línea es plana: indica que no hay correlación entre las variables (los cambios en una variable no influyen en la otra).

La línea de regresión ayuda a ver rápidamente si existe una relación y cuán fuerte es esa relación.


HTMLCSSDOMJavaScripteventosSVG

T0. La web esencial: HTML, CSS, DOM, JavaScript y eventos

Lo mínimo del navegador para hacer infovis. Cinco demos en vivo + enlaces a MDN.

El navegador es la imprenta del siglo XXI. Lo que tu computador dibuja en pantalla, lo dibuja todo desde tres archivos de texto: un HTML, un CSS y un JavaScript. Esta cápsula te da el mapa mínimo para moverte en ese terreno antes de tocar Plotly.

¿Por qué empezar por la web?

Las visualizaciones que vamos a hacer en este curso —Plotly, mapas interactivos, sonificación, fisicalización— viven en el navegador. No en Photoshop, no en Tableau, no en un PDF. Hay tres razones:

  • Llegan a cualquier dispositivo sin que nadie tenga que instalar nada. Un link, y se ve en móvil, en tableta, en el proyector del aula, en la pantalla de un quiosco.
  • Son interactivas por defecto. El navegador ya entiende clics, toques, teclas, sensores. No tienes que "agregar" interacción — tienes que decidir cuál usar.
  • El código fuente está a la vista (View Source). Eso es enorme pedagógicamente: cada visualización del curso —y de la web— se puede diseccionar abriendo Inspeccionar elemento. Aprendes leyendo.

Antes de hacer un gráfico necesitas saber qué le pasa al navegador cuando carga una página. Eso es lo que vamos a ver acá, en cinco demos cortos.

Antes de seguir. Esta cápsula no pretende enseñar a programar. Pretende darte el vocabulario mínimo para entender los próximos capítulos y para poder preguntarle a un LLM (ChatGPT, Claude, Gemini…) cosas como "hazme una barra Plotly con un click que dispare un sonido". Si una sección te queda corta, pégasela al LLM y pídele un ejemplo más largo. Es la forma más rápida hoy de profundizar.

1 · HTML — estructura semántica

El HTML no es "el texto de la página". Es un árbol etiquetado que describe el rol de cada parte. <h1> es un título principal, <p> un párrafo, <ul> una lista, <a> un enlace.

El navegador lee ese árbol y le da un estilo por defecto: títulos en grande, listas indentadas, enlaces en azul. Pero lo importante no es el estilo — es que las etiquetas tienen significado: un lector de pantalla, un buscador, una IA, todos entienden lo que tienen delante porque los nombres son semánticos.

🟢 demo en vivoHTML — estructura semántica

📚 La misma receta escrita con tags semánticos — `<h1>`, `<ul>`, `<blockquote>`. Sin estilos, ya se lee como un documento.

Etiquetas que vas a usar el 90% del tiempo: <h1> a <h6> (títulos), <p> (párrafo), <ul>/<ol>/<li> (listas), <a href> (enlace), <img src> (imagen), <div> (caja genérica), <span> (trozo de texto genérico), <button> (botón).

Referencia completa: MDN · HTML element reference.

2 · CSS — estilos separados del contenido

CSS asigna estilos visuales al HTML a través de selectores. La idea es brutal: el HTML describe qué hay, el CSS describe cómo se ve. Si cambias el CSS, cambia la apariencia sin tocar el contenido.

Reglas básicas:

h1            { color: #c8442a; font-size: 2rem; }   /* por etiqueta */
.destacado    { background: yellow; }                /* por clase */
#titulo       { font-weight: 700; }                  /* por id */
.btn:hover    { background: red; }                   /* estado pseudo-clase */

🟢 demo en vivoCSS — el mismo HTML, dos pieles

📚 Mismos `<h1>`, `<p>`, `<a>` — al pulsar "Neón" cambia solo el CSS y la página se transforma.

CSS también gobierna layout (flex, grid), tipografía, transiciones, animaciones y responsive design (medidas distintas según el ancho de la pantalla). Es enorme. Para infovis lo que importa al inicio: colores, tamaños, espaciado, y entender que cambiar un color de una viz nunca debería implicar tocar el HTML.

Referencia: MDN · CSS reference. Para empezar: Aprende CSS · MDN.

3 · DOM — el árbol vivo

Cuando el navegador termina de leer el HTML, lo convierte en un objeto JavaScript que se llama DOM (Document Object Model). Cada etiqueta es un nodo, cada atributo una propiedad. Y el DOM se puede modificar en vivo: agregar nodos, cambiar texto, mover cosas.

JavaScript habla con el DOM con tres verbos centrales:

// 1) ENCONTRAR un nodo (un solo elemento o varios)
const tit = document.querySelector('#titulo');     // por selector CSS
const items = document.querySelectorAll('.item');   // lista de todos

// 2) CAMBIAR su contenido o sus atributos
tit.textContent = 'Otro texto';
tit.style.color = 'red';
tit.classList.add('activo');

// 3) CREAR y AGREGAR nodos nuevos
const nuevo = document.createElement('li');
nuevo.textContent = 'creado en vivo';
document.querySelector('#lista').appendChild(nuevo);

🟢 demo en vivoDOM — JS modifica la página en vivo

📚 Cada botón corre 2-3 líneas de JS que tocan el DOM. Una infovis dinámica es exactamente esto, repetido muchas veces con datos.

Referencia: MDN · DOM.

4 · Eventos — la página escucha al usuario

Un evento es algo que pasa: un click, el mouse que entra en una zona, una tecla apretada, una imagen que termina de cargar. JavaScript se "suscribe" con .addEventListener('nombre', funcion):

boton.addEventListener('click', () => {
  console.log('me apretaste');
});

input.addEventListener('input', e => {
  console.log('escribiste:', e.target.value);
});

document.addEventListener('keydown', e => {
  console.log('tecla:', e.key);
});

🟢 demo en vivoEventos — click, hover, input, teclado

📚 Cuatro paneles con cuatro eventos típicos. Toda interacción del curso se construye combinando estos pocos.

Eventos más usados en infovis: click, mouseenter/mouseleave (hover), input/change (controles), keydown/keyup (teclado), y los específicos de librerías (Plotly tiene plotly_hover, plotly_click, etc.).

Referencia: MDN · Event reference.

5 · Todo junto — una mini-InfoVis

Hasta acá los demos eran texto y botones. Una visualización suma una pieza más: gráficos vectoriales (<svg>), dibujados a partir de un array de datos, con eventos atados a cada elemento.

const datos = [12, 18, 14, 20, 15, 22];

datos.forEach((v, i) => {
  const r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  r.setAttribute('x', i * 50);
  r.setAttribute('y', 100 - v);
  r.setAttribute('width', 40);
  r.setAttribute('height', v);
  r.addEventListener('mouseenter', () => console.log('barra', i, ':', v));
  svg.appendChild(r);
});

🟢 demo en vivoMini InfoVis — HTML + CSS + JS + SVG + datos + eventos

📚 Filtros (botones), hover (resalta la barra), click (muestra el desglose). Cinco demos resumidos en uno.

Esto es una visualización web — barras SVG dibujadas desde un array, con filtros y tooltips. Cuando lleguemos a Plotly (T1) ya no vamos a dibujar las barras a mano: la librería lo hace. Pero el mecanismo subyacente es exactamente este.

¿Y ahora qué?

No tienes que memorizar nada de esta cápsula. Tienes que saber que existe y poder buscarlo cuando lo necesites.

Estrategia recomendada:

  • MDN (developer.mozilla.org) es la referencia oficial — siempre actualizada, ejemplos sólidos, en español. Guárdalo en favoritos.
  • LLMs (ChatGPT, Claude, Gemini) son excelentes para "dame un ejemplo mínimo de Y", "explícame qué hace este código", "refactoriza este HTML". Úsalos como tutor 1-a-1. Pega el código que tienes y pregunta sin miedo.
  • Inspeccionar elemento (F12 en cualquier navegador). Abre la consola, mira el DOM de cualquier página web, juega con los estilos. La web está abierta — aprovéchalo.

Con eso ya tienes el mapa. En la próxima cápsula técnica (T1) empezamos a usar Plotly para hacer un gráfico estático real con datos reales.

Qué significa visualizar: visión, oído, tacto y la fuerza de la imagen

La Mitad de Tu Cerebro Está Esperando

Visualizetor: máquina letal de dashboards

¡Despierten, genios! ¿Creen que visualizar es solo 'ver'? Visualizar es algo más sutil: es hacer que tu cerebro forme una imagen y que esa imagen te diga algo. Cuando entiendes y dices 'ya veo, ya cachái', estás visualizando.

¿Qué significa visualizar?

La visualización es quizás más fácil de reconocer que de definir. En el libro “Visualización de Información”, Bob Spence se refiere a la definición del diccionario: visualizar: formar un modelo mental o una imagen mental de algo. Él enfatiza que la visualización es críticamente acerca de la perspicacia, lo que sucede en tu cabeza, no en una computadora. Alan Dix adopta una definición ligeramente diferente de visualización (de información): hacer que los datos sean más fáciles de entender utilizando la experiencia sensorial directa.

Esta definición sigue siendo sobre perspicacia y comprensión, pero también sobre la percepción (‘experiencia sensorial’) y el diseño deliberado (‘haciendo’). También esta definición dice ‘sensorial’, no simplemente ‘visual’, ya que la visualización interna que te hace decir “Veo” también puede ser engendrada por otros sentidos.

Aunque menos comunes, también existen formas de visualización auditiva y táctil. La comparación entre canales sensoriales (Fig. 4.1) muestra que la vista procesa mucha más información por unidad de tiempo que el oído o el tacto, pero esos canales también transmiten datos.

Comparación del ancho de banda informativo de los tres canales sensoriales disponibles para visualizar datos — vista, oído y tacto — representado como nubes de puntos de densidad decreciente. La imagen justifica por qué la mitad del cerebro está dedicada a la corteza visual, y por qué la visualización es mayoritariamente visual; pero también recuerda que existen alternativas auditivas y hápticas valiosas para discapacidad visual o cuando los ojos están ocupados en otra cosa.
Fig. 4.1: Comparación del ancho de banda informativo de los tres canales sensoriales disponibles para visualizar datos — vista, oído y tacto — representado como nubes de puntos de densidad decreciente. La imagen justifica por qué la mitad del cerebro está dedicada a la corteza visual, y por qué la visualización es mayoritariamente visual; pero también recuerda que existen alternativas auditivas y hápticas valiosas para discapacidad visual o cuando los ojos están ocupados en otra cosa. (Besbitt, 2005)

Empecemos por el oído: usar el sonido para representar datos se llama sonificación. En un contador Geiger (Fig. 4.2) el ritmo de los clics indica el nivel de radiación — clics más rápidos significan mayor radiación. El mismo principio aparece en los sensores de estacionamiento (Fig. 4.3): la frecuencia de los pitidos aumenta a medida que el parachoques se acerca al obstáculo, y un tono continuo significa "frena ya" — justamente útil cuando los ojos están ocupados en la maniobra.

Fig. 4.2: Contador Geiger en funcionamiento. El ritmo de los clics codifica el nivel de radiación: clics lentos y aislados indican un entorno limpio, clics rápidos y continuos avisan de una zona peligrosa. Ejemplo paradigmático de sonificación — el dato (radiación) se hace perceptible sin necesidad de mirar una pantalla, lo que es crítico cuando los ojos tienen que estar en otro lugar o cuando el peligro se acerca antes de que lo veas.
Fig. 4.3: Sensor de estacionamiento de un auto. La frecuencia de los pitidos crece a medida que el parachoques se acerca al obstáculo, hasta convertirse en un tono continuo justo antes del impacto. La distancia — un dato numérico — se transforma en un patrón auditivo que el conductor entiende sin desviar la mirada del retrovisor. Otro caso de sonificación útil precisamente porque libera al sentido visual para hacer otra cosa.

Sigamos con el tacto: representar datos a través de formas físicas que se pueden tocar se llama fisicalización. De manera táctil, por ejemplo, podrías percibir la intensidad de la velocidad al tocar el borde de una rueda que gira (Fig. 4.4). Estas formas no visuales son particularmente valiosas para quienes tienen discapacidad visual, pero también en cualquier contexto en el que los ojos necesitan estar en otro lugar. Dicho esto, la gran mayoría de la visualización es, como sugiere el nombre, visual: la corteza visual representa alrededor del 50 % de nuestro cerebro, así que tiene sentido apoyarse en ella.

Mano que toca el borde de una rueda en rotación, como ejemplo cotidiano de cómo el tacto puede transportar información cuantitativa (la velocidad de giro). El tacto también es un canal de datos, igual que el oído lo es en un contador Geiger.
Fig. 4.4: Mano que toca el borde de una rueda en rotación, como ejemplo cotidiano de cómo el tacto puede transportar información cuantitativa (la velocidad de giro). El tacto también es un canal de datos, igual que el oído lo es en un contador Geiger.

(Volveremos sobre la sonificación y la fisicalización en profundidad más adelante en el curso — por ahora basta saber que la visualización no termina en los ojos.)

¿A qué se dedica la InfoVis?

¿Cómo deberíamos llamar a la Visualización de Información en la compleja articulación del concepto de Ciencia de Datos? Esta pregunta es muy afín a preguntarse: ¿qué significa visualizar los datos? Ciertamente no podemos limitarnos a pensar que se trata de “hacer visibles” los datos, es decir, simplemente hacerlos disponibles a nuestra vista. Incluso imprimir datos en forma textual y simbólica entre los estrechos márgenes de una tabla equivaldría a hacerlos visibles; pero hacerlo como propuesta de una “visualización de datos” parecería más una provocación que una ejemplificación correcta. En realidad, ocuparse de la visualización de datos significa concebir, diseñar, realizar y validar modalidades oportunas y adecuadas para hacer que los datos sean visuales, o mejor, más visuales (Cabitza, 2020).

Visualizando números

Esto no significa que el texto y los números no sean parte integral de la visualización. Un buen diseño puede crear impresiones visuales (u otras sensoriales) directas.

🎲 Hagamos un juego. Para entender qué significa hacer los datos más visuales, lo mejor es experimentarlo en carne propia. En las próximas tres figuras te pediré una sola cosa: identificar, lo más rápido posible, cuál es el número más grande de una columna. Fíjate en lo que te cuesta cada intento — vas a notar que la velocidad cambia drásticamente según cómo estén presentados exactamente los mismos números.

Primer intento (Fig. 4.5): ¿cuál es el número más grande?

Columna de números con los puntos decimales desalineados, propuesta como mini-experimento al lector. Identificar cuál es el mayor obliga a leer cada cifra una por una, comparar mentalmente y perder varios segundos. Es el
Fig. 4.5: Columna de números con los puntos decimales desalineados, propuesta como mini-experimento al lector. Identificar cuál es el mayor obliga a leer cada cifra una por una, comparar mentalmente y perder varios segundos. Es el "antes" que justifica la lección siguiente: una buena disposición tipográfica vale más que mil instrucciones.

¿Cuánto tardaste? Probablemente tuviste que leer cada número dígito por dígito y compararlos mentalmente.

Segundo intento (Fig. 4.6): la misma pregunta, otra columna.

Los mismos números pero con los puntos decimales alineados verticalmente. Ahora el número más grande es el que más sobresale hacia la izquierda — sin leer un solo dígito, el ojo
Fig. 4.6: Los mismos números pero con los puntos decimales alineados verticalmente. Ahora el número más grande es el que más sobresale hacia la izquierda — sin leer un solo dígito, el ojo "ve" la magnitud. Demuestra el punto central de la cápsula: una decisión tipográfica mínima convierte texto en visualización implícita y acelera la comprensión.

Mucho más rápido, ¿verdad? La razón es que los números de esta segunda columna tienen sus puntos decimales alineados, así que los más grandes son también los que más sobresalen a la izquierda del punto decimal. Efectivamente, la línea de cifras actúa como un gráfico de barras en miniatura: cada parte entera es una pequeña barra, y su longitud te dice la magnitud sin que tengas que leer un solo dígito.

De hecho, si hacemos las barras explícitas (Fig. 4.7), queda claro que la línea de cifras es un gráfico de barras.

La misma columna de números con barras de color superpuestas sobre la parte entera. Hace explícito lo que el experimento anterior ya sugería: alinear los decimales convirtió la columna en un gráfico de barras horizontales. Esta imagen cierra el argumento de que texto bien dispuesto y visualización no son cosas tan distintas como parecen.
Fig. 4.7: La misma columna de números con barras de color superpuestas sobre la parte entera. Hace explícito lo que el experimento anterior ya sugería: alinear los decimales convirtió la columna en un gráfico de barras horizontales. Esta imagen cierra el argumento de que texto bien dispuesto y visualización no son cosas tan distintas como parecen.

¿Qué significa hacer los datos "más visuales"?

Entonces, ¿qué significa hacer los datos "más visuales"? Podemos intentar traducirlo en términos simples y después complicar un poco el asunto. Por ahora basta con decir: significa darles una fuerza comunicativa que "habla" también a través de elementos gráficos, imágenes, formas, colores, y por alguna semejanza y cercanía a la "cosa real" u observable, y a las magnitudes a las que los datos quieren referirse o de las que son medida. Un buen ejemplo (Fig. 4.8, Ware, 2019) es la visualización del peso y la altura de 396 personas mediante óvalos más o menos anchos y largos: cada óvalo codifica simultáneamente dos magnitudes en su forma.

396 personas representadas como óvalos cuya anchura codifica el peso y cuya altura codifica la estatura. Ilustra qué significa hacer los datos
Fig. 4.8: 396 personas representadas como óvalos cuya anchura codifica el peso y cuya altura codifica la estatura. Ilustra qué significa hacer los datos "más visuales" — usar una semejanza directa con la "cosa real" (un cuerpo más ancho o más alto) en lugar de números abstractos en una tabla. Por similitud y forma, el lector intuye la distribución de la muestra sin tener que procesar dígitos. (Ware, 2019)

Visualizar los datos significa, por lo tanto, mostrarlos, ilustrarlos, exponerlos — en contraposición a hablar de ellos y describirlos con palabras.

Giro visual

El giro visual (visual turn) es el término con el que se denota un nuevo y relativamente reciente gran interés por parte de un número creciente de estudiosos en las ciencias humanas y sociales por todas las formas visuales (y no escritas) que habitan y caracterizan nuestra cultura contemporánea (así como muchas otras culturas, incluyendo muchas de las llamadas “tradicionales”). Desde principios del siglo XXI, los estudios se han centrado en el papel de los artefactos y productos visuales, así como en la importancia de las correspondientes prácticas de producción y consumo para comprender las culturas y sociedades que se caracterizan por ellos. Se observa cómo la tecnología de la segunda mitad del siglo XX ha introducido en nuestra vida una presencia cada vez mayor y más atractiva de formas visuales. Estas formas visuales tienen el propósito de representar los hechos, lo que sabemos del mundo que nos rodea, y contar nuevas historias, o de manera más persuasiva y poderosa, sobre el mundo que habitamos.

Algunos ejemplos de esta influencia son:

  • Cine y Televisión: Estos medios han revolucionado la forma en que consumimos historias y nos informamos, convirtiéndose en una parte integral de nuestra vida cotidiana.
  • Publicidad en Televisión: La publicidad televisiva ha influido en gran medida en nuestras decisiones de consumo y ha moldeado la cultura popular.
  • Impresión Offset en Periódicos y Revistas: Esta innovación ha permitido la producción masiva de material impreso, facilitando la difusión de información.
  • Videojuegos: Los videojuegos han emergido como una nueva forma de entretenimiento y narrativa, con un impacto significativo en la cultura popular.
  • Computación Personal: La transición de los terminales de caracteres a las interfaces visuales, como las “ventanas”, los escritorios (“desktop”) y los iconos que indican tanto objetos metafóricos (por ejemplo, carpetas y documentos) como operaciones sobre ellos (como “guardar” y “cortar”), ha revolucionado la forma en que interactuamos con la tecnología.

Estos avances tecnológicos han cambiado profundamente nuestra relación con el mundo visual y han tenido un impacto significativo en nuestra sociedad y cultura. A medida que continuamos avanzando en el siglo XXI, es probable que veamos aún más innovaciones y cambios en este ámbito.

Texto vs. imagen: la velocidad de la comprensión

¿Por qué tanta importancia a lo visual? Porque procesamos imágenes mucho más rápido que las palabras. Hagamos la prueba en concreto. Te muestro la misma información dos veces — primero como texto, después como visualización. La pregunta es simple: ¿cuánto tardas en "cachar" en cada caso?

Ejemplo 1 — ¿Qué tipo de hogar ganó más?

📖 Veamos la fuerza de la visualización. Te voy a dar la misma información de dos maneras. Primero, en texto. Lee con atención el párrafo siguiente y responde: ¿qué tipo de hogar tuvo el mayor crecimiento de ingresos entre 2014 y 2015? Vas a notar que, para contestar, hay que leerlo casi entero y retener tres cifras a la vez.

Este es el texto, publicado por Vox en 2016:

El censo contó más de 20 millones de hogares ubicados fuera de cualquier área metropolitana — es decir, en zonas rurales — y encontró que estos hogares vieron sus ingresos caer un 2 % entre 2014 y 2015: de $45.534 a $44.657.

Había 63 millones de hogares dentro de áreas metropolitanas pero fuera de la ciudad principal — es decir, en los suburbios. Estos hogares disfrutaron de un saludable crecimiento del 4 %, pasando de los ya altos $61.671 a $64.144.

Pero las mayores ganancias correspondieron a los 41 millones de hogares ubicados en la ciudad principal de un área metropolitana. Sus ingresos crecieron un impresionante 7,3 %, pasando de $47.095 a $51.378.

Vox (2016)

Ahora mira el mismo contenido representado como gráfico (Fig. 4.9):

Variación del ingreso por hogar entre 2014 y 2015 según ubicación (rural, suburbano, urbano), mostrada como slope chart más waffle de proporciones. La pregunta del párrafo anterior — ¿qué tipo de hogar tuvo el mayor crecimiento? — se responde aquí en menos de un segundo gracias a la pendiente más empinada, mientras que el texto pedía leer tres párrafos y comparar cifras de memoria. Encarna el experimento de velocidad de comprensión texto vs. visualización.
Fig. 4.9: Variación del ingreso por hogar entre 2014 y 2015 según ubicación (rural, suburbano, urbano), mostrada como slope chart más waffle de proporciones. La pregunta del párrafo anterior — ¿qué tipo de hogar tuvo el mayor crecimiento? — se responde aquí en menos de un segundo gracias a la pendiente más empinada, mientras que el texto pedía leer tres párrafos y comparar cifras de memoria. Encarna el experimento de velocidad de comprensión texto vs. visualización. (Vox, 2016)

¿Cuánto tardaste en darte cuenta de que los hogares urbanos fueron los que más crecieron? En el texto, había que leer tres párrafos, retener cifras y compararlas mentalmente. En el gráfico, la línea más empinada salta a la vista en menos de un segundo. La misma información — distinta velocidad de comprensión.

Ejemplo 2 — Cómo salir del edificio en caso de incendio

🔥 Segundo experimento. Suena la alarma de incendios y tienes que salir del edificio ahora. Tus instrucciones están abajo, en texto. Léelas, intenta memorizar el recorrido y averigua por dónde se sale — hazlo con la prisa que tendrías en una emergencia real, porque esa presión es parte del experimento.

Estas son las instrucciones de evacuación:

Sal de esta sala. Gira a la derecha y camina 3 metros hasta el final del pasillo, donde te encontrarás frente a una gran sala de conferencias. Gira a la izquierda y camina otros 3,6 metros hasta llegar al final de ese pasillo. A tu izquierda hay una alarma de incendios, cerca del ascensor. A tu derecha, al final del pasillo, hay una escalera. No vayas al ascensor. Gira a la derecha y camina otros 3,6 metros hasta el final del pasillo, gira a la izquierda y entra en la escalera. Baja dos pisos y sal del edificio por la puerta que hay al final de la escalera.

Bajo presión, leer y memorizar todo esto es casi imposible. Ahora mira la versión visual (Fig. 4.10):

Plano de planta del edificio que muestra el recorrido de evacuación con una flecha. Mucho más efectivo que leer el texto del párrafo anterior, que pedía memorizar bajo presión cinco giros y distancias en metros: aquí el usuario sigue la flecha y se acabó. Ilustra la fuerza de la visualización como conversora de instrucciones secuenciales en una forma que el cerebro procesa de inmediato.
Fig. 4.10: Plano de planta del edificio que muestra el recorrido de evacuación con una flecha. Mucho más efectivo que leer el texto del párrafo anterior, que pedía memorizar bajo presión cinco giros y distancias en metros: aquí el usuario sigue la flecha y se acabó. Ilustra la fuerza de la visualización como conversora de instrucciones secuenciales en una forma que el cerebro procesa de inmediato. (Berinato, 2016)

El plano no te pide leer ni recordar nada: sigues la flecha. Esa es la fuerza de la visualización — convierte una secuencia de instrucciones en una forma que el cerebro procesa de inmediato.


Experto vs paciente: scatter plot denso o frecuencias naturales

No Le Hables Igual al Doctor que al Paciente

Visualizetor: máquina letal de dashboards

Imaginen 2700 pacientes. Si les das una tabla inmensa, no van a entender nada. Hoy aprendemos a hablarle al experto (con un scatter plot denso) y al paciente (con frecuencias naturales claras).

Un caso práctico de visualización de información

🩺 Los datos de hoy. Vamos a trabajar con un caso real: 2.700 hombres a los que se les hizo un escáner óseo (DEXA) en Londres. De cada uno conocemos sólo dos cosas: su edad y su Índice de Masa Grasa (FMI) — una medida de cuánta grasa carga el cuerpo, más informativa que el simple peso, y clave para estimar el riesgo cardiovascular y metabólico.

En 2017, la empresa británica Bodyscan Limited publicó los datos de más de 2.700 de estas mineralometrías óseas computarizadas, realizadas en los dos años anteriores a sujetos masculinos en Londres. La exploración DEXA se usa generalmente para diagnosticar y evaluar la osteoporosis; aquí imaginamos que de cada examen hemos extraído únicamente los dos números que nos interesan: el FMI y la edad.

Tenemos entonces dos columnas de datos — ambas numéricas y cuantitativas — y nada más. Una tabla cruda con esos números (Fig. 5.1) sería tan densa que resultaría ilegible: nadie distingue un patrón en una lista de miles de filas. Es el primer escalón del problema — sin visualización no hay lectura — y la pregunta que abre la cápsula: ¿qué gráfico le doy a un experto y cuál a un paciente?

Tabla cruda con los datos de 2.700 pacientes (edad y FMI) presentada como una hoja de cálculo. Es el escenario deliberadamente inútil que abre la cápsula: nadie — ni el experto ni el paciente — saca un patrón de una lista numérica de este tamaño. Motiva la pregunta central: qué visualización elegir para cada audiencia.
Fig. 5.1: Tabla cruda con los datos de 2.700 pacientes (edad y FMI) presentada como una hoja de cálculo. Es el escenario deliberadamente inútil que abre la cápsula: nadie — ni el experto ni el paciente — saca un patrón de una lista numérica de este tamaño. Motiva la pregunta central: qué visualización elegir para cada audiencia. (Bodyscan Limited, 2017)

Lo que el ojo no entrenado ve (y lo que se le escapa)

👁️ Un reto antes de seguir. En la próxima figura verás a los mismos 2.700 pacientes como un scatter plot: cada punto es una persona — su edad en el eje horizontal, su FMI en el vertical. Mírala unos segundos y respóndete una pregunta: ¿hay una correlación entre la edad y la grasa corporal? Quédate con tu respuesta — la vamos a poner a prueba enseguida.

Ahí está el scatter plot (Fig. 5.2). La línea roja marca el FMI promedio del grupo, 5,78 kg/m².

Scatter plot edad-FMI de los 2.700 pacientes con la línea horizontal del FMI medio (5,78). Es la trampa de la cápsula: al ojo no entrenado la nube parece equilibrada alrededor de la media —
Fig. 5.2: Scatter plot edad-FMI de los 2.700 pacientes con la línea horizontal del FMI medio (5,78). Es la trampa de la cápsula: al ojo no entrenado la nube parece equilibrada alrededor de la media — "no veo correlación". Sirve para que el lector verifique en sí mismo lo que cuesta sacar conclusiones de una nube densa sin guía visual. (Bodyscan Limited, 2017)

¿Y bien? La mayoría de las personas dirá no: la nube parece equilibrada alrededor de la línea roja, sin una pendiente clara. Y aquí está la trampa de la cápsula — porque la correlación sí está ahí, sólo que escondida en una región concreta de la nube.

Mirando las nubes o enjambres de puntos que los gráficos de dispersión presentan a la vista, la persona experta en visualización "ve" más signos: la densidad global de la nube le habla de la numerosidad de la muestra, las regiones más densas le hablan de las modas, del valor medio y de la variabilidad alrededor de él. El ojo experto también vislumbra cómo se distribuyen los valores en cada dimensión y, por la simple forma de la nube — más o menos alargada — intuye la intensidad de la correlación entre las dos variables.

Hacer visible lo invisible: las dos zonas

¿No notaste la asimetría arriba de los 50 años? Mira ahora la misma nube con dos zonas resaltadas a la derecha del corte en 50 años (Fig. 5.3): arriba de la media en naranja, debajo en amarillo. La cuenta es brutal: 380 pacientes arriba y sólo 102 abajo. Hartos más puntos en la zona "alta" que en la "baja" — casi cuatro veces.

El mismo scatter, ahora con dos zonas resaltadas a la derecha del corte en 50 años: arriba de la media en naranja, debajo en amarillo, con los conteos. La asimetría — 380 vs 102 — vuelve visible lo que el experto ya intuía: después de los 50 los puntos se
Fig. 5.3: El mismo scatter, ahora con dos zonas resaltadas a la derecha del corte en 50 años: arriba de la media en naranja, debajo en amarillo, con los conteos. La asimetría — 380 vs 102 — vuelve visible lo que el experto ya intuía: después de los 50 los puntos se "desbalancean" hacia arriba. La media seguía siendo la misma; lo que cambió fue cómo miramos. (Bodyscan Limited, 2017)

Eso es exactamente lo que la empresa Bodyscan describió en su informe: "hay una tendencia en los datos desde abajo a la izquierda hacia arriba a la derecha — los pacientes acumulan grasa con la edad — pero la tendencia es ligera y parece estar ausente hasta la mitad de los 50 años; después de los 60 casi todos los pacientes tienen un FMI superior, y también mucho superior, al valor mediano". El gráfico no cambió: los puntos son los mismos. Lo que cambió fue dónde miramos.

La prueba final: aislar al subgrupo

Y si necesitamos prueba definitiva, basta con quedarnos sólo con los mayores de 50 años (Fig. 5.4). Los demás puntos quedan como fantasmas grises, y sobre el subgrupo aparece la diagonal de tendencia: r = 0,40. Una correlación moderada y nítida, imposible de pasar por alto.

Cuando aislamos visualmente sólo a los mayores de 50 (los demás quedan como fantasmas grises), la pendiente se vuelve obvia y aparece la diagonal de tendencia con r = 0,40. Es la prueba de que la correlación siempre estuvo en los datos, pero hacía falta el ojo entrenado — o un buen recorte — para verla. Cierra el ciclo
Fig. 5.4: Cuando aislamos visualmente sólo a los mayores de 50 (los demás quedan como fantasmas grises), la pendiente se vuelve obvia y aparece la diagonal de tendencia con r = 0,40. Es la prueba de que la correlación siempre estuvo en los datos, pero hacía falta el ojo entrenado — o un buen recorte — para verla. Cierra el ciclo "datos crudos → zonas → subgrupo" que enseña a leer densidad. (Bodyscan Limited, 2017)

Aquí está la lección para el lector: el experto en visualización no necesita el subgrupo aislado para ver la correlación. Se le revela ya en la primera nube — por la asimetría de las densidades, por la forma de la "espuma" en el extremo derecho. Donde el ojo común ve una nube tranquila, el ojo entrenado huele el humo y reconoce el incendio. No es magia ni superioridad: es práctica. Cuando uno ha visto cientos de scatters, las modas, las colas y las regiones densas dejan de ser ruido y se vuelven signos.

Hablarle al paciente: frecuencias naturales

💬 Cambiemos de interlocutor. Todo lo que hicimos hasta aquí — leer densidades, aislar subgrupos, calcular un r — funciona para un experto. Pero un paciente (o el médico apurado, o el periodista que cita el estudio) no va a leer una nube de 2.700 puntos. La pregunta cambia: ¿cómo le mostramos exactamente el mismo hallazgo de una forma que entienda en un segundo?

Para esas audiencias existen gráficos donde no operan signos indicativos sino icónicos. Este tipo de visualización se difunde desde que se observó que razonar por "frecuencias naturales" — en términos de números del 1 al 100, no porcentajes abstractos — es más natural y fácil, especialmente para usuarios no expertos como los pacientes. A pesar de su utilidad este diagrama aún no tiene un nombre consolidado en la literatura, aunque algunos lo llaman pictorial fraction chart.

Un buen ejemplo es la versión "para paciente" del mismo dato (Fig. 5.5): de cada 100 pacientes mayores de 50 años, 35 tienen un FMI superior a 7 kg/m² — el umbral del riesgo de síndrome metabólico. La porción de rojo y la composición de la figura indican al instante "cuántos sí, cuántos no". El símbolo del hombre es aquí el signo icónico que sugiere la idea de probabilidad en sus términos más elementales — numerosidad — y el rojo se vuelve el índice que señala riesgo. Es fácilmente comprensible y probablemente más efectivo para comunicar y persuadir al paciente. Los expertos, en cambio — los científicos de datos — preferirán (¡tal vez!) la nube del scatter, donde caben todas las lecturas que vimos en las figuras anteriores.

Pictorial fraction chart con 100 íconos de hombre, 35 en rojo, que comunica la proporción de pacientes mayores de 50 años en riesgo de síndrome metabólico (FMI > 7 kg/m²) según el estudio Bodyscan. Es la versión para el paciente del mismo dato que antes leíamos como scatter: traduce densidades y correlaciones a
Fig. 5.5: Pictorial fraction chart con 100 íconos de hombre, 35 en rojo, que comunica la proporción de pacientes mayores de 50 años en riesgo de síndrome metabólico (FMI > 7 kg/m²) según el estudio Bodyscan. Es la versión para el paciente del mismo dato que antes leíamos como scatter: traduce densidades y correlaciones a "frecuencias naturales" — números del 1 al 100 que cualquier persona entiende sin estadística. (Bodyscan Limited, 2017)

Mismo dato, dos audiencias, dos gráficos. La cápsula no enseña a elegir uno por encima del otro; enseña a decidir cuál sirve en cada conversación.


El contexto manda: audiencia, narrativa y puntos de vista en InfoVis

Depende, Siempre Depende

Visualizetor: máquina letal de dashboards

¡Acomódense! Piensan que un gráfico flota en el vacío, puro, inmaculado... ¡Falso! Sin contexto, sus datos son solo píxeles desperdiciados. Todo depende de la ventana por la que elijas mirar.

¿Qué es el contexto?

El contexto es un concepto clave que se refiere a los distintos entornos que influyen en la interpretación y comprensión de un hecho o una expresión. Según la Real Academia Española (RAE), el contexto puede entenderse desde dos perspectivas principales. Primero, como el “entorno lingüístico del que depende el sentido de una palabra, frase o fragmento determinados”. Esto implica que el significado de un término o enunciado puede variar significativamente según las palabras y oraciones que lo rodean. En segundo lugar, el contexto también abarca el “entorno físico o de situación”, incluyendo aspectos “políticos, históricos, culturales o de cualquier otra índole en el que se considera un hecho”. En otras palabras, para comprender plenamente un acontecimiento o expresión, es esencial tener en cuenta tanto el marco lingüístico en el que se presenta como las circunstancias externas que lo rodean.

Esta visualización (Fig. 6.1) lo resume: el «hecho» en el centro, rodeado de las seis preguntas (quién, qué, cuándo, dónde, por qué, cómo) que lo contextualizan. Sin esas respuestas, el hecho está incompleto — y un gráfico que ignora alguna de ellas comunica menos de lo que cree.

El
Fig. 6.1: El "Hecho" en el centro, rodeado de las seis preguntas que lo contextualizan — WHO, WHAT, WHEN, WHERE, WHY, HOW. Es el esquema clásico del periodismo: ningún hecho está completo sin las seis respuestas. En InfoVis cada una de esas preguntas se traduce en una decisión de diseño — quién es la audiencia, qué quiere ver, cuándo lo verá, dónde se publicará, por qué importa, cómo lo va a leer — y todas juntas conforman el contexto que un gráfico necesita para significar algo.

En términos lingüísticos, podemos utilizar un tipo de visualización llamado "Key Word in Context" (Fig. 6.2), que nos facilita la comprensión del contexto de una palabra o conjunto de palabras al mostrarlas alineadas con sus concordancias a izquierda y derecha.

Visualización
Fig. 6.2: Visualización "Key Word in Context" (KWIC) que muestra la palabra «ojo» rodeada de los fragmentos reales donde aparece. Cada fila tiene la misma palabra clave en el centro y un contexto distinto a izquierda y derecha — y cada contexto cambia el significado: ojo del cuerpo, ojo del huracán, ojo «cuesta un ojo de la cara»… Es el ejemplo más directo del primer sentido de "contexto" según la RAE — el entorno lingüístico que da significado a una palabra — y prepara el paso a la idea más amplia que dirige toda la cápsula: sin contexto, no hay interpretación posible.

El uso de las palabras depende del contexto. Una palabra o un conjunto de palabras puede asumir diferentes significados según las palabras que las rodean. Este concepto se extiende claramente a la segunda definición propuesta por la RAE, donde el contexto no se limita solo al texto escrito, sino que incluye todo el entorno que nos rodea.

Entre InfoVis, Infografías, Humor y DataArt

Durante el proceso de diseño de una visualización de información, es crucial comprender a quién nos dirigimos. Cuanto más específica sea la definición de la audiencia, más efectivo será el diseño. Un diseño que funciona bien para expertos en datos o personas con antecedentes científicos puede no ser igualmente adecuado para consumidores comunes de datos. Es importante adaptar la visualización a las necesidades y conocimientos del público objetivo, lo que a veces puede implicar crear diferentes versiones de la misma visualización para audiencias distintas. También, el objetivo de diferentes visualizaciones puede variar; no solo pueden estar destinadas a explorar e informar, sino también a emocionar, entretener, entre otros propósitos.

En particular, se suele distinguir entre infografías y visualizaciones de datos (DataVis/InfoVis). Aunque la distinción no es rígida y debe verse como un continuum (Fig. 6.3), se pueden observar características distintivas en ambos tipos, como se muestra a continuación:

Continuum que sitúa InfoVis/DataVis en un extremo (analítico, para expertos) e Infografía/DataArt en el otro (narrativo, para público amplio). Importante porque resiste la tentación de clasificar las visualizaciones en cajones cerrados: cualquier gráfico puede caer en cualquier punto del degradé, y la elección depende — siempre depende — de a quién le hablas y para qué.
Fig. 6.3: Continuum que sitúa InfoVis/DataVis en un extremo (analítico, para expertos) e Infografía/DataArt en el otro (narrativo, para público amplio). Importante porque resiste la tentación de clasificar las visualizaciones en cajones cerrados: cualquier gráfico puede caer en cualquier punto del degradé, y la elección depende — siempre depende — de a quién le hablas y para qué.
Infografía / DataArt DataVis / InfoVis
Público no técnico. Accesible para una audiencia amplia, sin formación técnica. Público experto. Pensada para analistas, científicos, investigadores.
Narrativa, estética, síntesis. Combina texto e imágenes para contar una historia visualmente atractiva. Precisión por encima de todo. Puntos, líneas, barras, mapas — signos gráficos exactos para datos detallados.
Inmediata. Se entiende a primera vista, sin análisis profundo. Requiere esfuerzo cognitivo. El lector tiene que invertir tiempo para extraer los patrones.
Enfocada en explicar. El propósito es comunicar un mensaje (emocionar, entretener, persuadir). Enfocada en explorar. Permite descubrir patrones, tendencias y relaciones en grandes conjuntos de datos.
Puede incluir elementos de InfoVis para reforzar la claridad. Integra técnicas avanzadas de visualización; es InfoVis en sentido estricto.

Al diseñar visualizaciones, es esencial considerar el contexto y la audiencia objetivo. Mientras que las infografías y data art buscan simplificar, comunicar de manera atractiva, entretener y/o emocionar, las visualizaciones de datos profundizan en el análisis y la exploración, cada una jugando un papel crucial en la comunicación de información según el propósito y el público destinatario.

Navegando en el continuum

El continuum InfoVis–Infografía no es una clasificación rígida sino un mapa de propósitos. Cada propósito redefine qué se espera del gráfico y qué criterios tienen sentido para evaluarlo:

  • Analizar y explorar — visualizaciones que ayudan a descubrir patrones, identificar tendencias y formular hipótesis. Aquí el contexto es crucial para no perderse en la abundancia ni saltar a conclusiones equivocadas.
  • Infografías y presentaciones — explican un concepto o dato con un propósito específico (educar, persuadir, informar). El contexto garantiza que el mensaje llegue a la audiencia sin ambigüedad.
  • Contar historias (storytelling con datos) — guían a la audiencia a través de una narrativa donde los datos son apoyo, no protagonista. Sin contexto, la narrativa se pierde.
  • Humor — usan el dato como vehículo de un chiste. Acá el contexto es vital para que el chiste funcione y para que no se lea como un error.
  • Data Art — usan los datos como medio estético y expresivo. El contexto puede ser más interpretativo, pero sigue siendo necesario para que la audiencia conecte con la intención del autor.

La conclusión práctica: no se puede evaluar todas las visualizaciones con los mismos criterios. Una visualización científica se juzga por precisión y eficiencia; una humorística por agudeza; un data art por resonancia emocional. Antes de aplicar una regla, conviene preguntarse en qué punto del continuum vive el gráfico y qué se le está pidiendo.

Una colección de ejemplos — varios por cada punto del continuum — fija visualmente lo que separa estos propósitos: Galería 6.1

El extremo expresivo del continuum — el data-art — vive necesariamente en movimiento. Aquí está "Forms" del National Media Museum, que traduce el movimiento de atletas olímpicos en esculturas dinámicas: (Fig. 6.4).

Fig. 6.4: Data Art — "Forms" del National Media Museum: Memo Akten y Quayola transforman el movimiento de atletas olímpicos en esculturas abstractas en movimiento. No persigue precisión ni claridad — busca provocar una reacción estética. El propósito es expresivo, no informativo, pero los datos siguen siendo el material de origen.

Contar historias

🪟 Un mismo dato, dos historias. Lo que el contexto deja brutalmente claro es esto: la misma serie de números puede sostener conclusiones opuestas según qué ventana elijas para mirarla. En los próximos ejemplos vas a ver el mismo dato presentado de dos maneras — y cada vez vas a "entender" algo distinto. La pregunta nunca es cuál versión es la verdadera, sino quién eligió la ventana, y para qué.

Pensemos en el interés por los vinilos (Fig. 6.5). Si graficas la curva entre 1993 y 2014, se ve un alza nítida y reciente —dirías que el vinilo "está volviendo". Si en cambio extiendes el eje a 1973-2014, la misma serie cae en picado y dirías que el vinilo "está muerto". Las dos lecturas son técnicamente correctas; lo que cambió es la ventana temporal. Una empresa de vinilos prefiere la primera, una plataforma de streaming prefiere la segunda. Misma curva, dos relatos comerciales opuestos.

Ventas de vinilos representadas con dos ventanas temporales distintas. A la izquierda,
Fig. 6.5: Ventas de vinilos representadas con dos ventanas temporales distintas. A la izquierda, "Vinyl Sales since 1993" muestra una curva creciente y alentadora — el vinilo "está volviendo". A la derecha, la misma serie extendida desde 1973 cae en picado: el vinilo "está muerto". Ninguna versión miente; cambia la ventana temporal y con ella el relato comercial. Caso paradigmático del concepto central de la cápsula: el contexto temporal define qué historia se puede contar con los mismos datos.

💰 ¿Qué quieres saber, exactamente? El próximo ejemplo es distinto al del vinilo: aquí nadie manipula nada. Tienes los precios del oro y la plata, y dos gráficos posibles. Antes de mirarlos, decide tu pregunta — porque no son la misma: ¿quieres saber cómo evoluciona el precio de cada metal, o cuál de los dos es más inestable? Cada pregunta tiene su propio gráfico correcto.

El punto de vista numérico es otra ventana que cambia la lectura. Mira los dos gráficos (Fig. 6.6). El de la izquierda — de dos ejes Y — responde muy bien a la primera pregunta: con cada metal en su propia escala, ves con claridad cómo sube y baja el precio absoluto mes a mes. Pero si le preguntas «¿cuál es más inestable?», te da una impresión equivocada: la plata parece tranquila y el oro nervioso. El de la derecha — todo en cambio porcentual desde enero — responde bien a esa segunda pregunta, y revela lo contrario: la plata oscila bastante más (rango ~27 %) que el oro (~11 %). Ninguno de los dos miente: cada uno está construido para una pregunta distinta, y el error sería pedirle a uno la respuesta del otro.

Precios del oro y la plata mostrados de dos maneras — y la clave está en qué PREGUNTA quieres responder. A la izquierda, un gráfico de DOS EJES Y: la plata se lee en el eje izquierdo (USD 13–22) y el oro en el derecho (USD 1.150–1.350). Este gráfico responde bien a la pregunta «¿cómo evoluciona el valor absoluto de cada metal en el tiempo?»: cada serie en su propia escala, cada precio legible mes a mes. Pero responde mal a otra pregunta distinta — si le preguntas «¿cuál fluctúa más?», da una impresión equivocada, porque cada eje está calibrado a su propio rango y eso hace que la plata parezca estable y el oro volátil. A la derecha, ambas series sobre un único eje de cambio porcentual desde enero: este gráfico sí responde bien a «¿cuál fluctúa más?» — y revela que es la plata (de −10 % a +17 %, rango ~27 %, contra el oro entre −1,7 % y +9 %, rango ~11 %). Caso paradigmático del concepto de la cápsula: ninguno de los dos gráficos miente; cada uno es la herramienta correcta para SU pregunta, y el error sería pedirle a uno la respuesta del otro.
Fig. 6.6: Precios del oro y la plata mostrados de dos maneras — y la clave está en qué PREGUNTA quieres responder. A la izquierda, un gráfico de DOS EJES Y: la plata se lee en el eje izquierdo (USD 13–22) y el oro en el derecho (USD 1.150–1.350). Este gráfico responde bien a la pregunta «¿cómo evoluciona el valor absoluto de cada metal en el tiempo?»: cada serie en su propia escala, cada precio legible mes a mes. Pero responde mal a otra pregunta distinta — si le preguntas «¿cuál fluctúa más?», da una impresión equivocada, porque cada eje está calibrado a su propio rango y eso hace que la plata parezca estable y el oro volátil. A la derecha, ambas series sobre un único eje de cambio porcentual desde enero: este gráfico sí responde bien a «¿cuál fluctúa más?» — y revela que es la plata (de −10 % a +17 %, rango ~27 %, contra el oro entre −1,7 % y +9 %, rango ~11 %). Caso paradigmático del concepto de la cápsula: ninguno de los dos gráficos miente; cada uno es la herramienta correcta para SU pregunta, y el error sería pedirle a uno la respuesta del otro.

👁️ No te fíes de tus ojos. El último ejemplo es el más radical. En la próxima figura — un heatmap de expresión génica — hay dos celdas marcadas: el Gen B en la muestra 4 y el Gen H en la muestra 6. Míralas y apuesta: ¿cuál de las dos tiene el valor más alto? Quédate con tu respuesta.

Aquí está el heatmap (Fig. 6.7):

Heatmap de expresión génica. Las flechas moradas señalan dos celdas — GEN B / Muestra 4 y GEN H / Muestra 6. Míralas: ¿cuál tiene el valor más alto? La mayoría las ve claramente distintas — una más oscura, la otra más clara. Pero esa percepción depende por completo de los colores que las rodean: el ojo no juzga el color de una celda en sí mismo, sino en relación con su entorno inmediato. La respuesta llega en la figura siguiente.
Fig. 6.7: Heatmap de expresión génica. Las flechas moradas señalan dos celdas — GEN B / Muestra 4 y GEN H / Muestra 6. Míralas: ¿cuál tiene el valor más alto? La mayoría las ve claramente distintas — una más oscura, la otra más clara. Pero esa percepción depende por completo de los colores que las rodean: el ojo no juzga el color de una celda en sí mismo, sino en relación con su entorno inmediato. La respuesta llega en la figura siguiente.

¿Tu respuesta? Casi todo el mundo las ve distintas — una más oscura, la otra más clara. Hagamos entonces la prueba decisiva: quitemos el contexto. Pintamos de gris todas las celdas de alrededor y dejamos sólo las dos marcadas (Fig. 6.8).

Los mismos datos del heatmap anterior, pero con el contexto cromático neutralizado: todas las celdas de alrededor pintadas de un gris uniforme, dejando sólo las dos marcadas. La sorpresa es total — GEN B / Muestra 4 y GEN H / Muestra 6 tienen exactamente el mismo valor (v=10). Lo que las hacía parecer distintas no eran los datos, sino el gradiente de color que las envolvía. El color de una celda no se percibe en sí mismo: se percibe en relación con lo que tiene al lado.
Fig. 6.8: Los mismos datos del heatmap anterior, pero con el contexto cromático neutralizado: todas las celdas de alrededor pintadas de un gris uniforme, dejando sólo las dos marcadas. La sorpresa es total — GEN B / Muestra 4 y GEN H / Muestra 6 tienen exactamente el mismo valor (v=10). Lo que las hacía parecer distintas no eran los datos, sino el gradiente de color que las envolvía. El color de una celda no se percibe en sí mismo: se percibe en relación con lo que tiene al lado.

La sorpresa es total: las dos celdas contienen exactamente el mismo valor. Lo que las hacía parecer distintas era el contexto cromático local que las rodea, una ilusión perceptual que el ojo no puede evitar. Aquí el contexto ya no influye sólo en la interpretación: define lo que el ojo cree ver. El color de una celda no se percibe en sí mismo — se percibe en relación con lo que tiene al lado.

La moraleja se repite: la decisión de qué mostrar (ventana, escala, unidades) es parte del diseño, no un detalle técnico. Es lo que hace que la misma tabla pueda volverse argumento a favor de cosas opuestas. Los efectos específicos del recorte del eje Y — y la trampa de mostrar sólo una parte del panorama, lo que llamamos alcance limitado — se tratan a fondo en la Cápsula 07 (Cortar el eje Y y otros errores numéricos comunes), donde el problema técnico se aborda con todos sus matices.

Puntos de vista: el contexto define la audiencia, la audiencia define la técnica

🏫 Mismos datos, dos lectores. Imagina las notas de un curso entero. El padre de un alumno quiere una sola cosa: ¿cómo le va a su hijo? El director del colegio quiere otra: ¿cómo le va al curso en cada materia? Son exactamente los mismos números — pero cada uno necesita un gráfico distinto. Veamos por qué.

Al elegir cómo presentar los datos, hay que preguntarse desde qué perspectiva es más útil hacerlo — y eso depende enteramente del contexto y de quién va a leer el gráfico.

El ejemplo escolar lo deja claro. Imaginemos los resultados de un curso (Fig. 6.9). El padre de un alumno quiere ver el rendimiento de su hijo — le interesa el alumno como entidad, no la comparación entre todos. El director de la escuela quiere ver el rendimiento del curso en su conjunto — le interesa cada materia transversalmente, no el detalle de un solo alumno.

Misma tabla académica leída en dos direcciones — por filas (todas las notas de un estudiante) y por columnas (todas las notas de una materia). Plantea la pregunta clave de las figuras siguientes: ¿el usuario quiere ver objetos (estudiantes) o atributos (materias)? La elección entre rosa de Nightingale o coordenadas paralelas depende de esto, no de qué se ve más bonito.
Fig. 6.9: Misma tabla académica leída en dos direcciones — por filas (todas las notas de un estudiante) y por columnas (todas las notas de una materia). Plantea la pregunta clave de las figuras siguientes: ¿el usuario quiere ver objetos (estudiantes) o atributos (materias)? La elección entre rosa de Nightingale o coordenadas paralelas depende de esto, no de qué se ve más bonito.

Son dos puntos de vista radicalmente distintos sobre los mismos datos: el padre necesita una visión centrada en el objeto (un alumno = una forma compacta que se lee de un vistazo), el director una visión centrada en los atributos (cada materia = un eje que se lee a través de todos los alumnos). El contexto — la audiencia y su pregunta — define cuál técnica es la correcta.

Cada visión se materializa con una técnica gráfica distinta. Para la visión centrada en el objeto, la rosa de Nightingale (Fig. 6.10) representa a cada alumno como una forma circular compacta donde cada materia es un pétalo: lees un alumno entero de un solo vistazo. Para la visión centrada en los atributos, las coordenadas paralelas (Fig. 6.11) ponen cada materia en un eje vertical y cada alumno como una línea que cruza los ejes: lees todos los alumnos en una materia de un solo vistazo, a costa de perder la "entidad alumno". La variante coloreada por estudiante (Fig. 6.12) intenta recuperar parcialmente la visibilidad del objeto — funciona con pocos alumnos, se vuelve ilegible con 20-30.

Rosa de Nightingale aplicada a las notas de un solo estudiante por asignatura. Encarna la
Fig. 6.10: Rosa de Nightingale aplicada a las notas de un solo estudiante por asignatura. Encarna la "visibilidad de objeto": toda la información de un alumno queda en una única figura cerrada y reconocible. Es la elección ideal cuando el usuario es un padre que sólo quiere saber cómo está su hijo — pero pésima si el usuario es el director que necesita comparar el curso entero.
Gráfico de coordenadas paralelas con un eje por asignatura y una línea por estudiante. El reverso exacto de la rosa de Nightingale: alta visibilidad de atributo (cómo le fue al curso entero en matemáticas), baja visibilidad de objeto (qué hizo un alumno específico). La elección entre ambos gráficos no es estética sino estratégica — depende del usuario final, igual que todo el resto del diseño.
Fig. 6.11: Gráfico de coordenadas paralelas con un eje por asignatura y una línea por estudiante. El reverso exacto de la rosa de Nightingale: alta visibilidad de atributo (cómo le fue al curso entero en matemáticas), baja visibilidad de objeto (qué hizo un alumno específico). La elección entre ambos gráficos no es estética sino estratégica — depende del usuario final, igual que todo el resto del diseño.
Coordenadas paralelas con discos grandes coloreados por estudiante para recuperar parte de la visibilidad de objeto perdida. Muestra que las soluciones de diseño no son binarias: con un truco visual se puede ganar legibilidad en una dimensión, pero a costa de otra (con 30 estudiantes los colores colapsan). Cada compromiso depende del contexto — moraleja recurrente de la cápsula.
Fig. 6.12: Coordenadas paralelas con discos grandes coloreados por estudiante para recuperar parte de la visibilidad de objeto perdida. Muestra que las soluciones de diseño no son binarias: con un truco visual se puede ganar legibilidad en una dimensión, pero a costa de otra (con 30 estudiantes los colores colapsan). Cada compromiso depende del contexto — moraleja recurrente de la cápsula.

No hay técnica "mejor": hay técnica adecuada al contexto. Más adelante volveremos a estas técnicas desde el punto de vista de la multidimensionalidad (cómo mostrar 3, 4 o más variables al mismo tiempo), donde la rosa y las coordenadas paralelas se inscriben en un repertorio más amplio de soluciones.


Graphicacy y Lie Factor: por qué Excel miente por defecto

Excel, El Villano Silencioso

Visualizetor: máquina letal de dashboards

Existe algo llamado 'Graphicacy': la capacidad de leer y crear gráficos bien hechos. Y nuestro gran villano predeterminado es Excel, que corta el eje Y solito y te aumenta el 'Factor de Mentira'.

Qué es la graphicacy

La graphicacy, como la definen Aldrich y Sheppard, es “la capacidad de comprender y presentar información en forma de bocetos, imágenes, diagramas, mapas, gráficos y otros formatos no textuales y bidimensionales”. Esta competencia es esencial tanto para la producción como para la interpretación de representaciones visuales.

En el contexto de las malas visualizaciones, la graphicacy es una herramienta fundamental para evitar errores y malentendidos. La falta de graphicacy puede manifestarse de dos maneras:

  • En los receptores de visualizaciones: Una comprensión insuficiente puede llevar a interpretaciones incorrectas de los datos visualizados. Los ciudadanos, directivos y otros tomadores de decisiones que carecen de esta competencia corren el riesgo de ser engañados por representaciones visuales inadecuadas o malintencionadas.
  • En los creadores de visualizaciones: La incapacidad para presentar datos de manera clara y precisa puede resultar en visualizaciones que no sólo son ineficaces, sino que pueden distorsionar la realidad. Incluso aquellos que trabajan en el ámbito de la visualización de datos deben desarrollar tanto la capacidad de comprender como de presentar información visual de forma adecuada.

Para prevenir las malas visualizaciones, es esencial que tanto los productores como los receptores de visualizaciones cultiven un alto nivel de graphicacy (Fig. 7.1). Esto les permitirá crear y evaluar representaciones visuales de datos con un enfoque crítico, asegurando que la información se transmita de manera clara, precisa y ética.

La graphicacy opera en dos direcciones complementarias. A la izquierda, el RECEPTOR — sin graphicacy no detecta cuando un gráfico distorsiona los datos y se cree lo que ve. A la derecha, el CREADOR — sin graphicacy distorsiona los datos a veces sin querer, eligiendo escalas, colores o tipos de gráfico que mienten por defecto. La InfoVis honesta requiere que ambos lados de la cadena hayan desarrollado esta competencia.
Fig. 7.1: La graphicacy opera en dos direcciones complementarias. A la izquierda, el RECEPTOR — sin graphicacy no detecta cuando un gráfico distorsiona los datos y se cree lo que ve. A la derecha, el CREADOR — sin graphicacy distorsiona los datos a veces sin querer, eligiendo escalas, colores o tipos de gráfico que mienten por defecto. La InfoVis honesta requiere que ambos lados de la cadena hayan desarrollado esta competencia.

¿Engañar es difícil... o no?

🎭 Engañar con datos es facilísimo — y, casi siempre, sin querer. La intuición común dice lo contrario: que para mentir con un gráfico hace falta ser un manipulador sofisticado, con mala fe y conocimientos avanzados. Es exactamente al revés: harta visualización engañosa la produce gente honesta que simplemente apretó un botón.

Tan es así que investigadoras como Rogowitz y colegas prefieren reformular la pregunta: en lugar de estudiar "cómo se engaña", enseñan cómo no engañar sin querer.

¿Por qué es tan fácil? Porque las herramientas de oficina (Excel a la cabeza, pero no la única) toman decisiones por defecto que distorsionan los datos sin pedir permiso: cortan el eje Y, eligen colores arbitrarios, escalan por radio en lugar de por área. Si la graphicacy del receptor fuera alta, esos errores se detectarían en segundos; pero como la mayoría del público no fue entrenado para leer gráficos críticamente, las distorsiones pasan invertidas como verdad. El problema, entonces, no es sólo de quien produce — es también de quien consume.

Hay un recurso útil que cataloga estos errores comunes: la sección "Caveats" de From Data to Viz. Estudiarla periódicamente entrena el ojo para detectar la mentira accidental antes de que termine pegada en un informe.

Factor de mentira (Lie Factor)

En el campo de la visualización de datos, es común encontrarse con gráficos que, intencionadamente o no, distorsionan la realidad de los datos que pretenden representar. Estas malas visualizaciones pueden engañar a los espectadores, exagerando, minimizando o incluso ocultando aspectos cruciales de la información presentada. Una herramienta útil para analizar y comprender estas distorsiones es el concepto del Lie Factor, introducido por Edward Tufte.

El Lie Factor es un concepto introducido como una medida para evaluar la veracidad de una visualización de datos. Este factor compara la magnitud del cambio representado en un gráfico con la magnitud del cambio real en los datos, permitiendo medir el grado de distorsión en la información.

El Lie Factor se calcula con la siguiente fórmula:

Lie Factor = Cambio en la representación visual / Cambio en los datos

  • Cambio en la representación visual: Se refiere a la diferencia en tamaño, longitud o área en el gráfico.
  • Cambio en los datos: Se refiere a la diferencia real en los valores de los datos.

Interpretación del Lie Factor:

  • Lie Factor ≈ 1: La visualización es precisa y representa fielmente los datos.
  • Lie Factor > 1: La visualización exagera el cambio en los datos, haciendo que las diferencias parezcan mayores de lo que realmente son.
  • Lie Factor < 1: La visualización minimiza el cambio en los datos, haciendo que las diferencias parezcan menores de lo que realmente son.

¡Microsoft Excel es una herramienta excelente para crear visualizaciones engañosas!

🔍 Pongámosle número a una mentira. En la próxima figura verás, a la izquierda, el gráfico que Excel genera automáticamente con ciertos datos; a la derecha, el mismo dato con el eje Y empezando en cero. Antes de leer la respuesta, mira el de la izquierda y estima: ¿cuántas veces más grande parece la diferencia, comparada con la diferencia real?

La comparación (Fig. 7.2) lo deja claro.

Comparación entre el gráfico que Excel genera por defecto (eje truncado, Lie Factor ≈ 4,4) y el gráfico corregido con eje desde cero. Materializa numéricamente el concepto de Lie Factor de Tufte — calculado aquí explícitamente en píxeles, midiendo la altura del Δ visual en cada panel y mostrando el cociente. La herramienta que millones de personas usan a diario miente más de 4× por defecto, sin pedirle permiso al usuario. Por eso la falta de graphicacy es un riesgo colectivo, no individual.
Fig. 7.2: Comparación entre el gráfico que Excel genera por defecto (eje truncado, Lie Factor ≈ 4,4) y el gráfico corregido con eje desde cero. Materializa numéricamente el concepto de Lie Factor de Tufte — calculado aquí explícitamente en píxeles, midiendo la altura del Δ visual en cada panel y mostrando el cociente. La herramienta que millones de personas usan a diario miente más de 4× por defecto, sin pedirle permiso al usuario. Por eso la falta de graphicacy es un riesgo colectivo, no individual.

En el gráfico de la izquierda, generado automáticamente por Excel, la diferencia visual entre los valores es aproximadamente 3,5 veces más grande que la diferencia real. El Lie Factor es, por lo tanto, 3,5 — Excel exageró la realidad tres veces y media, y nadie se lo pidió.


Cortar el eje Y y otros errores numéricos comunes

Tus Ojos Te Mienten

Visualizetor: máquina letal de dashboards

La controversia: ¿Cortar el eje Y o no? En barras, pecado. En líneas, a veces es válido. Y cuidado con los acumulados, los ejes mal proporcionados y los porcentajes que no suman 100.

¿Cortar o no cortar el eje Y?

Cortar o no cortar el eje Y es uno de los temas más debatidos en la visualización de datos. La controversia gira en torno a si el eje Y debe comenzar siempre en cero o no; una ilustración satírica al estilo de Huff (Fig. 8.1) ironiza sobre el problema de la distorsión que aparece al cortarlo. Analicemos por qué es difícil alcanzar un consenso en este tema.

Ilustración satírica al estilo de Darrell Huff que contrapone dos gráficos del mismo dato — eje completo vs eje cortado — para hacer visible la trampa. Es el pistoletazo de salida de toda la cápsula: cortar el eje Y no es un detalle técnico, es la decisión que más fácilmente convierte un gráfico honesto en una herramienta de mentira.
Fig. 8.1: Ilustración satírica al estilo de Darrell Huff que contrapone dos gráficos del mismo dato — eje completo vs eje cortado — para hacer visible la trampa. Es el pistoletazo de salida de toda la cápsula: cortar el eje Y no es un detalle técnico, es la decisión que más fácilmente convierte un gráfico honesto en una herramienta de mentira. (Huff (How to Lie with Statistics))

Comenzar el eje Y en un valor distinto de cero puede ser engañoso, especialmente en gráficos de barras, donde las diferencias en la longitud de las barras se interpretan como proporcionales a los valores representados. Si el eje Y no comienza en cero, las diferencias entre las barras pueden parecer mucho mayores de lo que realmente son. Un ejemplo extremo de esta distorsión (Fig. 8.2) muestra dos barras de valores casi idénticos donde una se ve mucho más alta que la otra porque el corte del eje amplifica la diferencia.

Caso límite de truncamiento — dos barras casi iguales en valor real, pero radicalmente distintas a la vista porque el eje arranca muy por encima de cero. Justifica el consenso de la cápsula: en gráficos de barras, el eje Y debe empezar en cero. Cuando la longitud codifica magnitud, mover el origen es directamente engañar al lector.
Fig. 8.2: Caso límite de truncamiento — dos barras casi iguales en valor real, pero radicalmente distintas a la vista porque el eje arranca muy por encima de cero. Justifica el consenso de la cápsula: en gráficos de barras, el eje Y debe empezar en cero. Cuando la longitud codifica magnitud, mover el origen es directamente engañar al lector.

Edward Tufte, un reconocido experto en visualización de datos, sugiere que en general, en una serie temporal, se debe utilizar una línea base que muestre los datos relevantes en lugar de insistir en que el eje Y comience en cero. En estos casos, el objetivo es enfatizar el cambio en la variable dependiente (generalmente el valor Y) a medida que cambia la variable independiente (generalmente el valor X), no necesariamente su relación con el cero.

En un gráfico de líneas, especialmente en series temporales, no siempre es necesario que el eje Y comience en cero. La intención principal es destacar las tendencias y fluctuaciones en los datos, por lo que cortar el eje Y puede ser aceptable y a veces incluso necesario para hacer visibles las variaciones significativas.

Cuando es necesario cortarlo, conviene señalarlo al lector con alguna convención visual: el catálogo (Fig. 8.3) reúne las más habituales (zig-zag en la base, línea quebrada, hueco visible en el eje, etc.).

Catálogo de convenciones (zig-zag, línea quebrada, hueco visible) para señalar honestamente que el eje Y está cortado. Es la solución profesional al dilema: si por algún motivo justificado hay que truncar el eje, al menos avisar al lector con un código que ya forma parte de la cultura visual. Mentir por accidente es injustificable; mentir sin avisar, también.
Fig. 8.3: Catálogo de convenciones (zig-zag, línea quebrada, hueco visible) para señalar honestamente que el eje Y está cortado. Es la solución profesional al dilema: si por algún motivo justificado hay que truncar el eje, al menos avisar al lector con un código que ya forma parte de la cultura visual. Mentir por accidente es injustificable; mentir sin avisar, también.

La decisión de cortar o no el eje Y depende en gran medida del tipo de gráfico y del mensaje que se desea transmitir:

  • Gráfico de barras: Existe un consenso general de que en este tipo de gráfico, el eje Y debe comenzar en cero. Esto es porque las barras se utilizan para representar magnitudes absolutas, y cualquier alteración en la base puede distorsionar la percepción visual de esas magnitudes. Si es indispensable cortarlo, hay que señalarlo con alguna de las convenciones vistas arriba.
  • Gráfico de líneas: Aquí, sin embargo, no hay consenso. En general, no es necesario que el eje Y comience en cero, ya que el objetivo es mostrar las tendencias y cambios en los datos a lo largo del tiempo o entre categorías.

⚖️ El mismo corte, dos veredictos opuestos. Aquí viene lo difícil. Cortar el eje Y no es ni pecado ni virtud en abstracto: en los próximos dos gráficos de líneas verás que la misma operación — recortar el eje — engaña en un caso y es la lectura honesta en el otro. La pregunta de fondo: ¿qué los distingue?

Aun así, también en gráficos de líneas el corte del eje puede exagerar la magnitud real de las fluctuaciones; lo importante es contextualizar cada decisión. El PIB de EE. UU. cayendo de 6,6 % a 5,5 % (Fig. 8.4) aparece como un colapso casi vertical cuando el eje arranca en 5,25 % — pero la misma curva sobre un eje desde cero es apenas una pendiente suave: aquí el recorte engaña. En cambio, el calentamiento global (Fig. 8.5) se vuelve invisible si el eje Y va de 0 °F al promedio actual, pero acotándolo a 56-59 °F la tendencia ascendente aparece claramente — y en ese contexto la lectura honesta es la del eje recortado, porque "unos pocos grados de cambio pueden tener consecuencias catastróficas". El criterio no es una regla rígida: es entender qué mensaje merece visibilidad.

Dos versiones del crecimiento anual del PIB de EE. UU. en el mismo periodo. A la izquierda, el eje Y va de 5,25 % a 6,75 % — la caída de 6,6 % a 5,5 % se ve dramática, casi un colapso. A la derecha, el eje Y arranca en cero y llega a 7 %: la misma caída ahora parece una variación suave. La diferencia es real, pero la magnitud visual depende totalmente del recorte del eje. Caso paradigmático de cómo en series temporales el debate
Fig. 8.4: Dos versiones del crecimiento anual del PIB de EE. UU. en el mismo periodo. A la izquierda, el eje Y va de 5,25 % a 6,75 % — la caída de 6,6 % a 5,5 % se ve dramática, casi un colapso. A la derecha, el eje Y arranca en cero y llega a 7 %: la misma caída ahora parece una variación suave. La diferencia es real, pero la magnitud visual depende totalmente del recorte del eje. Caso paradigmático de cómo en series temporales el debate "cortar o no" no tiene consenso, como argumenta Tufte: depende del mensaje que se quiera transmitir.
Temperatura global anual promedio en grados centígrados con dos elecciones de eje. A la izquierda, el eje arranca en 0 °C y la curva aparece como una línea casi plana sin variación visible. A la derecha, el eje se acota entre 13,5 y 15 °C, los extremos están marcados (≈ 13,83 °C en 1880 → ≈ 14,78 °C en 2020) con una llave roja a la derecha que sintetiza «+0,95 °C en 140 años, pueden ser catastróficos». Aquí cortar el eje NO es engañar — es contextualizar un cambio cuyas consecuencias dependen de fracciones de grado. El mismo gesto que en otros gráficos es trampa, aquí es honestidad necesaria.
Fig. 8.5: Temperatura global anual promedio en grados centígrados con dos elecciones de eje. A la izquierda, el eje arranca en 0 °C y la curva aparece como una línea casi plana sin variación visible. A la derecha, el eje se acota entre 13,5 y 15 °C, los extremos están marcados (≈ 13,83 °C en 1880 → ≈ 14,78 °C en 2020) con una llave roja a la derecha que sintetiza «+0,95 °C en 140 años, pueden ser catastróficos». Aquí cortar el eje NO es engañar — es contextualizar un cambio cuyas consecuencias dependen de fracciones de grado. El mismo gesto que en otros gráficos es trampa, aquí es honestidad necesaria.

Alcance limitado: cuando recortas sin avisar

El eje Y cortado es un caso particular de un problema más general: el alcance limitado. Cuando un gráfico muestra sólo una parte del panorama —sea por recortar el período, por excluir categorías, por elegir un subconjunto de países— corre el riesgo de inducir conclusiones que la imagen completa desmentiría.

Ya lo vimos en la Cápsula 05 con el caso paradigmático del recorte temporal: el interés por los vinilos cambia de "está volviendo" a "está muerto" según la ventana temporal elegida (Fig. 8.6). Mismo dato, dos relatos comerciales opuestos — y la diferencia es sólo el recorte.

Fig. 8.6: Ventas de vinilos representadas con dos ventanas temporales distintas. A la izquierda, "Vinyl Sales since 1993" muestra una curva creciente y alentadora — el vinilo "está volviendo". A la derecha, la misma serie extendida desde 1973 cae en picado: el vinilo "está muerto". Ninguna versión miente; cambia la ventana temporal y con ella el relato comercial. Caso paradigmático del concepto central de la cápsula: el contexto temporal define qué historia se puede contar con los mismos datos.

El recorte no es necesariamente engañoso: a veces es justificable y necesario — no puedes graficar todo siempre. Pero cuando se hace sin avisar al lector, deja de ser una decisión de diseño y pasa a ser una omisión interesada.

📐 La regla es de una sola línea: si recortas, dilo. Recortar el período, excluir categorías, mostrar sólo un subconjunto de países — todo eso es legítimo. Lo que no es legítimo es hacerlo en silencio. Una señal clara — una nota, un quiebre dibujado en el eje, un subtítulo honesto — convierte una omisión sospechosa en una decisión de diseño transparente.

La Importancia de Respetar los Estándares en la Visualización de Datos

Más allá del eje Y cortado, hay otras decisiones de diseño que rompen las convenciones que el lector da por descontadas — y, al hacerlo, lo engañan sin que se dé cuenta.

Un primer ejemplo clásico: invertir el eje Y. Estamos acostumbrados a que un eje vertical crezca de abajo hacia arriba; cuando una visualización de Business Insider mostró las muertes por armas de fuego en Florida con el eje invertido (Fig. 8.7), la lectura natural sugería que los homicidios bajaron entre fines de los 90 y 2010, cuando en realidad pasó exactamente lo contrario. El gráfico no mentía en los números — mentía en la convención.

Gráfico publicado por Business Insider sobre las muertes por arma de fuego en Florida, con el eje Y INVERTIDO — el 0 está arriba y el 1.000 abajo. Una lectura rápida sugiere que los homicidios disminuyeron tras la ley «Stand Your Ground» de 2005, cuando en realidad casi se duplicaron. El gráfico no miente con los números: miente con la convención. Cuando se rompe el «arriba = más» que todos damos por descontado, el lector decodifica al revés sin darse cuenta.
Fig. 8.7: Gráfico publicado por Business Insider sobre las muertes por arma de fuego en Florida, con el eje Y INVERTIDO — el 0 está arriba y el 1.000 abajo. Una lectura rápida sugiere que los homicidios disminuyeron tras la ley «Stand Your Ground» de 2005, cuando en realidad casi se duplicaron. El gráfico no miente con los números: miente con la convención. Cuando se rompe el «arriba = más» que todos damos por descontado, el lector decodifica al revés sin darse cuenta. (Reuters / Business Insider, C. Chan 2014)

Otro caso recurrente es el uso engañoso del color para etiquetar proporciones. Un correo de Google describía el comportamiento del 41% de los clientes, pero el gráfico de dona pintaba en verde el 59% del círculo (Fig. 8.8). El ojo lee el color saturado como "lo importante", el lector asume que el verde es ese 41%, y se queda con la lectura opuesta a la real.

Aviso original de «think with Google» con un donut donde la porción verde (59 %) y la gris (41 %) compiten por la atención. El texto dice que el 41 % de los dueños de altavoces inteligentes siente que «habla con un amigo o con otra persona» — pero el ojo, entrenado para leer el verde como «lo importante», asume que ese 41 % corresponde a la porción verde. La convención cultural «verde = bueno» empuja al lector hacia la lectura opuesta a la real, y convierte un dato neutral en una afirmación sesgada sin que el diseñador haya mentido en los números.
Fig. 8.8: Aviso original de «think with Google» con un donut donde la porción verde (59 %) y la gris (41 %) compiten por la atención. El texto dice que el 41 % de los dueños de altavoces inteligentes siente que «habla con un amigo o con otra persona» — pero el ojo, entrenado para leer el verde como «lo importante», asume que ese 41 % corresponde a la porción verde. La convención cultural «verde = bueno» empuja al lector hacia la lectura opuesta a la real, y convierte un dato neutral en una afirmación sesgada sin que el diseñador haya mentido en los números.

La regla es simple: una visualización debe enseñar algo nuevo, y para hacerlo necesita respetar las convenciones visuales del lector. Romper esas convenciones puede ser una decisión legítima — pero exige una razón fuerte y, sobre todo, una señal clara que advierta al lector.

Escalado incorrecto: ejes mal proporcionados

Otra trampa frecuente es el eje numérico mal proporcionado (Fig. 8.9): aunque el eje empiece en cero, las distancias visuales entre valores no son lineales. Si entre 10.000 y 20.000 hay tanta separación como entre 20.000 y 30.000 — pero entre 30.000 y 40.000 hay el triple — el lector lee la longitud de las barras como si reflejara la magnitud, pero esa lectura es falsa.

Dos paneles con las mismas cuatro barras (A=10 k, B=20 k, C=25 k, D=30 k). En el izquierdo, las marcas del eje Y están proporcionalmente espaciadas (cada salto de 10 k ocupa el mismo número de píxeles). En el derecho, los espacios visuales son arbitrarios — 0 → 10 k ocupa la mitad del eje, mientras 20 k → 30 k apenas el 20 %. La consecuencia: en el panel derecho B parece casi tan grande como D, aunque D es 50 % mayor. Eje numérico, sí; lineal, NO.
Fig. 8.9: Dos paneles con las mismas cuatro barras (A=10 k, B=20 k, C=25 k, D=30 k). En el izquierdo, las marcas del eje Y están proporcionalmente espaciadas (cada salto de 10 k ocupa el mismo número de píxeles). En el derecho, los espacios visuales son arbitrarios — 0 → 10 k ocupa la mitad del eje, mientras 20 k → 30 k apenas el 20 %. La consecuencia: en el panel derecho B parece casi tan grande como D, aunque D es 50 % mayor. Eje numérico, sí; lineal, NO.

A veces el problema es aún más burdo: dos barras con valores casi iguales se dibujan con alturas claramente distintas, sencillamente porque alguien tipeó los datos a mano en el editor gráfico sin que el software validara la proporción.

La lección es directa: cuando una visualización codifica magnitudes con longitud o posición, hay que verificar que la escala sea uniforme. Es un control trivial — un eje, una regla, un ratio — pero su ausencia distorsiona todo el gráfico.

Diferencias acumuladas vs diferencias reales

Las gráficas acumuladas tienden a sugerir crecimiento incluso cuando los datos reales bajan (Fig. 8.10). Si cada barra suma a la anterior, la silueta siempre sube (mientras los valores sean positivos), y el ojo lee esa silueta como "tendencia". Pero la tendencia real podría ser la inversa: una caída sostenida en los valores incrementales.

Misma serie temporal mostrada de dos formas. Izquierda: suma acumulada — la curva sólo puede subir y la empresa parece prosperar mes a mes. Derecha: valor mes a mes — la realidad es exactamente la opuesta, las ventas caen mes tras mes. Si lo que importa es la tendencia, hay que mostrar el valor real; un gráfico acumulado disimula colapsos hasta que es demasiado tarde.
Fig. 8.10: Misma serie temporal mostrada de dos formas. Izquierda: suma acumulada — la curva sólo puede subir y la empresa parece prosperar mes a mes. Derecha: valor mes a mes — la realidad es exactamente la opuesta, las ventas caen mes tras mes. Si lo que importa es la tendencia, hay que mostrar el valor real; un gráfico acumulado disimula colapsos hasta que es demasiado tarde.

Por eso, cuando se quiere comunicar evolución, conviene mostrar las diferencias reales —los valores periodo a periodo— y reservar las acumuladas para responder otra pregunta distinta ("¿cuánto llevamos en total?"). Y si por algún motivo se prefiere la versión acumulada, hay que contextualizarla con claridad: explicar que es una suma corrida y no la magnitud del periodo.

Inconsistencias numéricas

Suena absurdo, pero ocurre con frecuencia: gráficos de pastel cuyos porcentajes no suman 100%, leyendas que no coinciden con los colores reales del gráfico, totales que cambian entre el título y el cuerpo. Este tipo de error no es estilístico — es un error de control de calidad que destruye la credibilidad de toda la visualización.

Cuando un pie chart con tres porciones suma 96% (o 105%), el lector deja de confiar y, con razón, sospecha que el resto del gráfico también está mal. Verificar que los números cierran es una de las revisiones más baratas y más importantes antes de publicar.

🥧 Suma las porciones. El próximo es un caso real, llevado al extremo: una encuesta a navegantes sobre los equipos más útiles a bordo, presentada como gráfico de pastel. Antes de leer la explicación, míralo y suma mentalmente sus porciones. ¿Te da 100 %?

Aquí está el pastel (Fig. 8.11):

Pastel 3-D exploded de una encuesta a navegantes sobre los equipos más útiles a bordo. Las porciones suman 192 % — un pastel no puede pasar de 100 %, por definición. El error nace de tratar respuestas múltiples como si fueran exclusivas: cada encuestado eligió varios equipos, así que las frecuencias se cuentan correctamente, pero el chart type las representa como si fueran fracciones de un mismo todo. Es un error de control de calidad que destruye la credibilidad de toda la visualización.
Fig. 8.11: Pastel 3-D exploded de una encuesta a navegantes sobre los equipos más útiles a bordo. Las porciones suman 192 % — un pastel no puede pasar de 100 %, por definición. El error nace de tratar respuestas múltiples como si fueran exclusivas: cada encuestado eligió varios equipos, así que las frecuencias se cuentan correctamente, pero el chart type las representa como si fueran fracciones de un mismo todo. Es un error de control de calidad que destruye la credibilidad de toda la visualización.

Si intentaste sumar, te habrás rendido pronto: las porciones suman ¡192 %! El responsable original eligió mal el tipo de gráfico — un pastel implica «fracciones de un mismo todo», pero las respuestas eran de selección múltiple. El resultado es un gráfico que se ve profesional (con sombreado 3-D incluido) y que viola la regla más básica de su género en el primer vistazo.

El uso del color como ruido vs como información — incluyendo el ejemplo de las exportaciones de armas — se desarrolla en la Cápsula 10 (El color en InfoVis), donde se trata como parte del tratamiento sistemático del color.


Ejes duales, bins traicioneros y correlaciones espurias

El Chocolate No Da Premios Nobel

Visualizetor: máquina letal de dashboards

Hay trampas sutiles: omitir datos, jugar con los bins, e inventar correlaciones. ¿Crees que vender helados atrae tiburones? Correlación NO es causalidad.

Los Gráficos con Ejes Duales y sus Alternativas

Los gráficos con dos ejes diferentes (usualmente “Y”) - también conocidos como gráficos de doble eje, gráficos de eje dual o gráficos superpuestos - son una herramienta comúnmente utilizada para mostrar dos series de datos con diferentes magnitudes o medidas en un solo gráfico. Sin embargo, su uso puede ser problemático, ya que pueden confundir a los lectores y llevar a interpretaciones incorrectas.

El principal problema con estos gráficos radica en que las escalas de los ejes Y son arbitrarias y pueden inducir a error sobre la relación entre las dos series de datos. Por ejemplo, este gráfico (Fig. 9.1) muestra el PIB global y el PIB de Alemania con dos ejes Y independientes: las pendientes parecen comparables aunque las magnitudes son muy diferentes, una fuente típica de confusión.

Gráfico con dos ejes Y distintos y dos líneas superpuestas (PIB global y PIB de Alemania). Al usar escalas independientes, las pendientes parecen comparables aunque las magnitudes son muy diferentes — fuente típica de confusión.
Fig. 9.1: Gráfico con dos ejes Y distintos y dos líneas superpuestas (PIB global y PIB de Alemania). Al usar escalas independientes, las pendientes parecen comparables aunque las magnitudes son muy diferentes — fuente típica de confusión.

Los gráficos de doble eje son difíciles de leer para la mayoría de las personas, ya que requieren un esfuerzo adicional para entender la relación entre las dos series de datos. Investigaciones han demostrado que estos gráficos tienden a generar confusión y disminuyen la precisión en la interpretación de los datos.

Hay alternativas para mostrar este tipo de gráfico:

  1. Gráficos Lado a Lado (Fig. 9.2): separar las dos series de datos en gráficos independientes, cada uno con su propio eje Y en escala natural, permite mantener la integridad de las escalas y facilita la comparación visual sin la ilusión de paralelismo.

    Los mismos datos del PIB pero separados en dos gráficos independientes, cada uno con su escala natural. Primera alternativa honesta al doble eje: cada serie respira en su propia magnitud, sin sugerir paralelismos engañosos.
    Fig. 9.2: Los mismos datos del PIB pero separados en dos gráficos independientes, cada uno con su escala natural. Primera alternativa honesta al doble eje: cada serie respira en su propia magnitud, sin sugerir paralelismos engañosos.
  2. Gráficos Indexados (Fig. 9.3): normalizar ambas series a un mismo punto de partida (por ejemplo, valor inicial = 100) y mostrar el cambio relativo en lugar de los valores absolutos. Es ideal para comparar tasas de crecimiento entre magnitudes heterogéneas.

    Líneas indexadas a un mismo punto de partida (valor inicial = 100). Segunda alternativa honesta al doble eje: cuando lo que importa es comparar tasas de crecimiento entre magnitudes heterogéneas, este gráfico lo hace sin trampa, en un solo eje, dejando claro que se está comparando el cambio porcentual.
    Fig. 9.3: Líneas indexadas a un mismo punto de partida (valor inicial = 100). Segunda alternativa honesta al doble eje: cuando lo que importa es comparar tasas de crecimiento entre magnitudes heterogéneas, este gráfico lo hace sin trampa, en un solo eje, dejando claro que se está comparando el cambio porcentual.

Un caso similar se discutió en una cápsula anterior, donde se analizó cómo la decisión de usar dos ejes depende de la pregunta que se desea destacar en el gráfico.

Cuando se utilizan dos ejes en un mismo gráfico, también existe el riesgo de sugerir una causalidad indebida entre dos series de datos. Esto ocurre porque los dos ejes pueden dar la impresión de que hay una relación causal entre las variables, cuando en realidad podría tratarse solo de una correlación.

Este caso (Fig. 9.4) ilustra el riesgo: un doble eje hace parecer una correlación negativa fuerte, pero en realidad el eje derecho varía muy poco (entre 10 y 10,7) mientras que el izquierdo cubre un rango mucho más amplio (de 0 a 10), de modo que la relación visual es un artefacto de las escalas.

Doble eje Y con dos series que aparentan correlación negativa fuerte, cuando en realidad el eje derecho varía sólo entre 10 y 10,7 y el izquierdo cubre el rango 0-10. La forma de la curva es un artefacto del diseñador, no un hallazgo en los datos.
Fig. 9.4: Doble eje Y con dos series que aparentan correlación negativa fuerte, cuando en realidad el eje derecho varía sólo entre 10 y 10,7 y el izquierdo cubre el rango 0-10. La forma de la curva es un artefacto del diseñador, no un hallazgo en los datos.

Correlación no implica causalidad: Este principio fundamental en estadística indica que, aunque dos variables muestran una correlación, no significa necesariamente que una variable cause la otra. El uso de dos ejes puede amplificar esta ilusión de causalidad.

🦈 ¿El helado atrae tiburones? Mira el próximo gráfico: las ventas de helado y los ataques de tiburones siguen exactamente la misma curva mes a mes, con pico en julio-agosto. La correlación es altísima — real, medible. Entonces, ¿comer helado provoca ataques de tiburones? Antes de reírte, fíjate bien: el dato no miente. Lo que falla es la inferencia que uno hace con él.

El gráfico (Fig. 9.5) es el primero de dos clásicos de las correlaciones espurias, y es estacional. La correlación entre helados y tiburones es altísima — y completamente espuria. No es que comer helado provoque ataques de tiburones (ni viceversa): durante el verano más gente va a la playa Y más gente compra helados. La causa común — el calor estival — explica las dos series a la vez. En el lenguaje de la estadística, el verano es una variable de confusión.

Las ventas de helado y los ataques de tiburones siguen la misma curva estacional, con pico en julio-agosto. La correlación es alta — y completamente espuria: la causa común es el verano (más gente en el agua + más helados consumidos). Primer ejemplo clásico de
Fig. 9.5: Las ventas de helado y los ataques de tiburones siguen la misma curva estacional, con pico en julio-agosto. La correlación es alta — y completamente espuria: la causa común es el verano (más gente en el agua + más helados consumidos). Primer ejemplo clásico de "correlación no implica causalidad".

El segundo ejemplo (Fig. 9.6) es geográfico y mucho más absurdo: si trazamos para cada país el consumo per cápita de chocolate (en kg/año) frente al número de premios Nobel por cada 10 millones de habitantes, sale un scatter con r = 0,79 — una correlación fortísima. Suiza arriba a la derecha (mucho chocolate, muchos Nobel), China abajo a la izquierda. La inferencia ingenua — "comer chocolate te hace ganar el Nobel" — es absurda; pero la correlación es real. Aquí también hay variables de confusión: la riqueza nacional, los sistemas educativos, incluso el clima frío del norte de Europa, podrían explicar a la vez ambas series sin que una cause la otra.

Scatter del consumo per cápita de chocolate (kg/año) vs premios Nobel por 10 millones de habitantes, por país. Correlación fortísima (r = 0,79, p < 0,0001) sin ninguna relación causal plausible — probablemente otras variables (riqueza, sistema educativo, clima) explican ambas. Segundo ejemplo clásico de los riesgos de saltar de correlación a causalidad.
Fig. 9.6: Scatter del consumo per cápita de chocolate (kg/año) vs premios Nobel por 10 millones de habitantes, por país. Correlación fortísima (r = 0,79, p < 0,0001) sin ninguna relación causal plausible — probablemente otras variables (riqueza, sistema educativo, clima) explican ambas. Segundo ejemplo clásico de los riesgos de saltar de correlación a causalidad.

Por qué es problemático:

  • Distorsión de la percepción: Los usuarios del gráfico pueden interpretar erróneamente la relación entre las dos variables como causal, cuando en realidad podría ser solo una coincidencia o estar influenciada por otra variable no considerada. Un ejemplo notable es la coincidencia entre el declive del uso de Internet Explorer y el declive del número de asesinatos en EE. UU. (Fig. 9.7), que recopiló Tyler Vigen.
  • Manipulación de los datos: El uso de dos ejes puede ser utilizado para enfatizar un efecto que no es real, llevando a conclusiones engañosas.
Gráfico clásico de Tyler Vigen: la cuota de mercado decreciente de Internet Explorer y el número de homicidios anuales en EE. UU. siguen, durante una década, casi exactamente la misma curva. La coincidencia es perfecta y absurda — recordatorio de que correlación no implica causalidad.
Fig. 9.7: Gráfico clásico de Tyler Vigen: la cuota de mercado decreciente de Internet Explorer y el número de homicidios anuales en EE. UU. siguen, durante una década, casi exactamente la misma curva. La coincidencia es perfecta y absurda — recordatorio de que correlación no implica causalidad. (Tyler Vigen — Spurious Correlations)

Evitar el problema: Es importante ser claros en el contexto y en la narrativa de los datos. Si se utilizan dos ejes, es esencial explicar claramente el motivo del uso y asegurarse de que no se esté sugiriendo erróneamente una causalidad sin pruebas concretas.

La Importancia de la Elección del Tamaño de Bin en un Histograma o Escala de Colores

El histograma es un tipo de gráfico que toma como entrada una variable numérica y la divide en varios intervalos, llamados bins. La altura de cada barra en el histograma representa el número de observaciones dentro de cada bin. Aunque es un gráfico muy común, la elección del tamaño del bin puede tener un impacto significativo en la interpretación de los datos.

Un histograma divide los valores de una variable numérica en rangos específicos (bins) y cuenta cuántos valores caen dentro de cada rango. La elección del tamaño del bin (es decir, la amplitud de cada rango) determina cuántos datos se agrupan en cada barra, lo que afecta directamente la percepción de la distribución de los datos.

📊 Los mismos precios, dos tamaños de bin. Vamos a mirar la distribución de los precios por noche de los departamentos de Airbnb en la Riviera Francesa — varían entre 10 y 300 euros, con la mayoría entre 60 y 150. Primero los agruparemos en intervalos (bins) de 10 euros; después, en bins de 2. Es exactamente el mismo dato — fíjate cómo el ancho del bin decide qué patrón ves, y cuál se esconde.

Con bins de 10 euros (Fig. 9.8) se ve una curva relativamente suave: la moda cae alrededor de los 80-100 euros y la distribución parece tranquila, sin sorpresas.

Histograma de los precios por noche en Airbnb (Riviera Francesa) con bins de 10 euros. La distribución se ve relativamente suave, con la moda alrededor de los 80-100 euros.
Fig. 9.8: Histograma de los precios por noche en Airbnb (Riviera Francesa) con bins de 10 euros. La distribución se ve relativamente suave, con la moda alrededor de los 80-100 euros.

Ahora reducimos el bin a 2 euros (Fig. 9.9). El cambio revela algo que el bin grueso ocultaba por completo: aparecen picos pronunciados en valores muy específicos — 58, 64, 69, 75, 80 euros… — porque los anfitriones prefieren ciertos precios psicológicamente atractivos.

El histograma de precios por noche en Airbnb (Riviera Francesa) con bins finos de 2 euros. Aparecen picos pronunciados en valores específicos (58, 64, 69, 75, 80 euros…), revelando que los anfitriones prefieren ciertos precios psicológicamente atractivos — patrón que el bin más grueso ocultaba.
Fig. 9.9: El histograma de precios por noche en Airbnb (Riviera Francesa) con bins finos de 2 euros. Aparecen picos pronunciados en valores específicos (58, 64, 69, 75, 80 euros…), revelando que los anfitriones prefieren ciertos precios psicológicamente atractivos — patrón que el bin más grueso ocultaba.

La elección del tamaño del bin puede alterar dramáticamente la interpretación de los datos. En el primer histograma, con bins de 10 euros, se obtiene una visión general de la distribución de los precios. Sin embargo, al reducir el tamaño del bin a 2 euros, se descubre un patrón más detallado que muestra la preferencia por ciertos precios específicos. Este detalle adicional puede ser crucial para un análisis más profundo. Un bin demasiado grande puede ocultar patrones importantes, mientras que un bin demasiado pequeño puede introducir ruido en los datos. La clave está en encontrar un equilibrio que permita representar los datos de manera clara y precisa, según el objetivo del análisis.

De forma similar, también en la elección de los intervalos de color hay que tener cuidado. Cambiando los cortes, dos mapas coropléticos del mismo dataset pueden verse muy diferentes, como muestra el ejemplo (Fig. 9.10): ambos mapas muestran el ingreso medio familiar por condado de EE. UU. (USD, estimado), con la misma paleta verde y las mismas etiquetas de leyenda (Bajo / Medio / Alto). A la izquierda los cortes se eligen por tertiles y se ve claramente que no hay equidad: el Sur aparece más pobre y el Noreste y las costas más ricas. A la derecha el bin central abarca un intervalo absurdamente amplio (USD 10k – USD 250k) que mete TODOS los condados en un solo tono: el país entero parece perfectamente equitativo, aunque los datos no han cambiado. Mismo dataset, misma paleta, mismas etiquetas — sólo cambian los rangos numéricos, y con ellos la desigualdad aparece o se esconde por completo.

Dos mapas coropléticos a nivel de condado de EE. UU. con un dataset estimado de ingreso medio familiar (USD), la misma paleta verde y las mismas etiquetas de leyenda (Bajo / Medio / Alto), pero con cortes radicalmente distintos. A la izquierda, tres cortes por tertiles que dejan ver claramente que NO hay equidad: el Sur aparece más pobre y el Noreste y las costas más ricas. A la derecha, un bin central absurdo (USD 10k – USD 250k) absorbe TODOS los condados y el país entero parece perfectamente equitativo, aunque los datos no han cambiado. Mismo dataset, misma paleta, mismas etiquetas — sólo cambian los rangos numéricos, y con ellos la desigualdad aparece o se esconde por completo.
Fig. 9.10: Dos mapas coropléticos a nivel de condado de EE. UU. con un dataset estimado de ingreso medio familiar (USD), la misma paleta verde y las mismas etiquetas de leyenda (Bajo / Medio / Alto), pero con cortes radicalmente distintos. A la izquierda, tres cortes por tertiles que dejan ver claramente que NO hay equidad: el Sur aparece más pobre y el Noreste y las costas más ricas. A la derecha, un bin central absurdo (USD 10k – USD 250k) absorbe TODOS los condados y el país entero parece perfectamente equitativo, aunque los datos no han cambiado. Mismo dataset, misma paleta, mismas etiquetas — sólo cambian los rangos numéricos, y con ellos la desigualdad aparece o se esconde por completo.

Omitir Datos en las Gráficas

Las gráficas creadas con datos omitidos eliminan información crucial que puede afectar la interpretación y las conclusiones derivadas.

✂️ ¿Crecimiento o ilusión? El próximo scatter muestra una serie de crecimiento — pero sólo con los años pares en el eje X. Míralo: se ve limpio, lineal, casi monótono. ¿Te lo creerías? Guarda tu impresión, porque enseguida vamos a agregar los años que faltan.

En esa versión con datos faltantes (Fig. 9.11) el crecimiento parece más lineal y monótono de lo que realmente es, simplemente porque se han omitido de forma sistemática los datos intermedios. Esto puede llevar a conclusiones erróneas: se pierde el contexto completo que los datos originales proporcionan.

Diagrama de dispersión donde el eje X muestra únicamente los años pares. La curva resultante parece más suave y monótona de lo real, porque se han omitido sistemáticamente datos intermedios.
Fig. 9.11: Diagrama de dispersión donde el eje X muestra únicamente los años pares. La curva resultante parece más suave y monótona de lo real, porque se han omitido sistemáticamente datos intermedios.

Por otro lado, el mismo diagrama con todos los años en el eje X (Fig. 9.12), pares e impares, revela la verdadera distribución y variabilidad: la serie tiene hartas más fluctuaciones que las que mostraba la versión recortada, lo que permite una interpretación más precisa y fundamentada.

El mismo gráfico de dispersión pero ahora con todos los años en el eje X (pares e impares). La variabilidad real de los datos queda en evidencia: la serie tiene más fluctuaciones que las que mostraba la versión recortada.
Fig. 9.12: El mismo gráfico de dispersión pero ahora con todos los años en el eje X (pares e impares). La variabilidad real de los datos queda en evidencia: la serie tiene más fluctuaciones que las que mostraba la versión recortada.

Área vs radio, 3D y gráficos de pastel: tres trampas frecuentes

Obama y el Círculo Tramposo

Visualizetor: máquina letal de dashboards

¡Silencio! Hoy destruimos otra trampa: si quieres que un círculo represente un número, no escales el radio, ¡escala el área! De lo contrario, exagerarás la diferencia al cuadrado.

Escalado Incorrecto: Usando el Radio/Lado en Lugar del Área

Una práctica común en la visualización de datos consiste en escalar un componente gráfico a un valor numérico. Por ejemplo, en un gráfico de barras, las longitudes de las barras se escalan según los valores. Sin embargo, cuando el valor se escala en función del área, y no solo de una dimensión, esto puede producir un efecto cuadrático para un cambio lineal, amplificando las diferencias de manera significativa.

El círculo de Obama. En 2011, en el discurso del Estado de la Unión, Barack Obama mostró el PIB de cinco países como círculos. El de Estados Unidos se veía gigantesco, aplastante. La pregunta: ¿la economía de EE. UU. es de verdad tan descomunalmente mayor? El truco está en una decisión que parece inocente — escalar el radio del círculo en vez de su área.

Un ejemplo de este error se observa justamente en ese discurso, donde el PIB de cinco países se mostró con círculos cuyo radio escalaba según el tamaño de cada economía. La comparación entre versiones (Fig. 10.1) muestra el problema en tres pasos: en el gráfico original (a la izquierda), la economía de Estados Unidos parece desproporcionadamente mayor que las otras, porque el radio escala linealmente pero el área escala cuadráticamente; al superponer copias del círculo de Francia (en el centro) se ve cuántas Francias caben según radio vs según área; y en la versión corregida del blog Fast Fedora (a la derecha), con escalado por área, Estados Unidos sigue siendo el más grande pero la diferencia ya no parece grotesca.

Comparación de tres versiones del gráfico de círculos del Estado de la Unión 2011 con el PIB de cinco países: la original con escalado por radio (Estados Unidos parece desproporcionadamente enorme), una versión intermedia que superpone copias del círculo de Francia para evidenciar la diferencia entre radio y área, y la versión corregida con escalado por área. Materializa la trampa cuadrática de escalar por radio cuando se trata de magnitudes.
Fig. 10.1: Comparación de tres versiones del gráfico de círculos del Estado de la Unión 2011 con el PIB de cinco países: la original con escalado por radio (Estados Unidos parece desproporcionadamente enorme), una versión intermedia que superpone copias del círculo de Francia para evidenciar la diferencia entre radio y área, y la versión corregida con escalado por área. Materializa la trampa cuadrática de escalar por radio cuando se trata de magnitudes. (Fast Fedora blog)

Es importante recordar que, al trabajar con objetos en 2D, la escala debe basarse en el área y no en el radio/lado.

El esquema con tres cuadrados (Fig. 10.2) hace explícito el efecto: en términos de área, el cuadrado mediano es realmente 4 veces más grande que el pequeño, y el grande es 9 veces más grande, porque duplicar el lado cuadruplica el área. El mismo concepto se aplica a los círculos.

Tres cuadrados de distinto tamaño con su descomposición en sub-cuadrados unitarios. La descomposición revela que, en términos de área, el cuadrado mediano contiene 4 unidades del pequeño y el grande contiene 9 — duplicar el lado cuadruplica el área.
Fig. 10.2: Tres cuadrados de distinto tamaño con su descomposición en sub-cuadrados unitarios. La descomposición revela que, en términos de área, el cuadrado mediano contiene 4 unidades del pequeño y el grande contiene 9 — duplicar el lado cuadruplica el área.

Uso de Áreas para Representar Valores Numéricos

El radio mal escalado es un error de mecánica; pero hay un problema más de fondo: el área, en sí misma, es una metáfora pobre para representar valores. El ojo humano no es eficiente al interpretar áreas como cantidades. Comparar el tamaño relativo de varias burbujas exige tiempo y es propenso a errores: el lector estima por inspección, no calcula. Si los mismos valores se representan con barras alineadas en una base común, la lectura es inmediata y precisa. La regla práctica es dura: si puedes evitar codificar una magnitud con área, evítala.

🫧 El área no está prohibida — está reservada. Tiene sentido sólo cuando ya agotaste las codificaciones más precisas (posición, longitud, barras) y aun así te falta lugar para una variable más. Ese es el caso del gráfico de burbujas: empaqueta tres variables numéricas en cada punto — eje X, eje Y y tamaño — y a veces una cuarta, categórica, con el color. Cuando de verdad necesitas esa densidad, el área se gana su lugar.

El gráfico de burbujas (Fig. 10.3) muestra ese uso legítimo. Aun así, antes de recurrir a él conviene preguntarse: ¿realmente necesito esa tercera variable en el mismo gráfico, o un par de barras contaría la historia mejor? El área es la última herramienta del cajón, no la primera.

Gráfico de burbujas donde cada punto codifica tres variables numéricas (eje X, eje Y y tamaño de la burbuja) más una variable categórica representada con el color (naranja vs amarillo). Es el caso en el que las áreas SÍ tienen sentido — cuando se necesita codificar varias dimensiones simultáneamente sobre un solo plano y el color sólo aporta agrupación. Aun así, el ojo humano no es preciso al comparar áreas; conviene reservar las burbujas para visualizaciones exploratorias y no para lecturas precisas.
Fig. 10.3: Gráfico de burbujas donde cada punto codifica tres variables numéricas (eje X, eje Y y tamaño de la burbuja) más una variable categórica representada con el color (naranja vs amarillo). Es el caso en el que las áreas SÍ tienen sentido — cuando se necesita codificar varias dimensiones simultáneamente sobre un solo plano y el color sólo aporta agrupación. Aun así, el ojo humano no es preciso al comparar áreas; conviene reservar las burbujas para visualizaciones exploratorias y no para lecturas precisas.

Uso de Gráficos 3D sin Justificación

El uso de objetos tridimensionales en visualizaciones de datos es popular, pero casi siempre afecta negativamente la precisión y la velocidad con la que se interpreta un gráfico. El motivo es uno solo: la perspectiva agranda lo que está al frente y encoge lo que está al fondo, así que los valores dejan de leerse y empiezan a adivinarse.

🥧 ¿Cuál sector es más grande? En el próximo gráfico de pastel 3D hay dos sectores en juego: uno abajo, «South», y otro arriba, «North». Míralo y decide cuál te parece más grande — antes de leer cuál lo es de verdad.

Aquí está el pastel 3D (Fig. 10.4):

Gráfico de pastel 3D real (cuatro sectores, cilindro bajo renderizado con cámara en perspectiva genuina). Cada sector tiene su propio color y la etiqueta se sitúa en su posición de brújula: North (azul) arriba, East (oro) a la derecha, South (rojo) abajo, West (verde) a la izquierda. Los ángulos son correctos (35 / 30 / 20 / 15 %), pero la cámara desde abajo agranda la porción frontal hasta que South (30 %) se ve igual de grande — o más — que North (35 %), que queda lejos al fondo. No es una simulación ajustada a mano: es geometría 3D proyectada en perspectiva. La trampa que demuestra por qué los pastel 3D mienten siempre.
Fig. 10.4: Gráfico de pastel 3D real (cuatro sectores, cilindro bajo renderizado con cámara en perspectiva genuina). Cada sector tiene su propio color y la etiqueta se sitúa en su posición de brújula: North (azul) arriba, East (oro) a la derecha, South (rojo) abajo, West (verde) a la izquierda. Los ángulos son correctos (35 / 30 / 20 / 15 %), pero la cámara desde abajo agranda la porción frontal hasta que South (30 %) se ve igual de grande — o más — que North (35 %), que queda lejos al fondo. No es una simulación ajustada a mano: es geometría 3D proyectada en perspectiva. La trampa que demuestra por qué los pastel 3D mienten siempre.

Si te pareció que el sector de abajo es el mayor, caíste en la trampa: ése es el 30 %, y el de arriba — que se ve más chico — es en realidad el 35 %. La cámara, ubicada por debajo, infla la porción frontal hasta que un 30 % se ve igual de grande — o más — que un 35 %. No es una simulación ajustada a mano: es pura geometría 3D proyectada en perspectiva, y por eso los pasteles 3D mienten siempre. Y cuando además son "exploded", con los sectores separados, el problema todavía empeora.

El mismo defecto aparece en el gráfico de barras 3D, frecuentemente visto en Excel. Un ejemplo típico (Fig. 10.5) lo deja claro: las barras del fondo se ven más chicas que las del frente aunque tengan el mismo valor, unas tapan parcialmente a otras, y encontrar un valor concreto se vuelve un ejercicio de adivinación.

Gráfico de barras 3D real (5 productos × 3 meses, renderizado con proyección en perspectiva genuina, no truco gráfico). Las barras del fondo (Mar, verde) realmente se ven más chicas que las del frente (Ene, azul), aunque tengan el mismo valor; unas tapan parcialmente a otras y leer un valor concreto se vuelve adivinar. Es la trampa visual de los gráficos de barras 3D de Excel, mostrada con la misma matemática 3D que la genera.
Fig. 10.5: Gráfico de barras 3D real (5 productos × 3 meses, renderizado con proyección en perspectiva genuina, no truco gráfico). Las barras del fondo (Mar, verde) realmente se ven más chicas que las del frente (Ene, azul), aunque tengan el mismo valor; unas tapan parcialmente a otras y leer un valor concreto se vuelve adivinar. Es la trampa visual de los gráficos de barras 3D de Excel, mostrada con la misma matemática 3D que la genera.

La recomendación es directa: evita los gráficos 3D y opta por alternativas planas — barras planas y, a ser posible, ningún pastel.

Gráficos de Pastel: Una Elección Problemática

📊 Intenta ordenar los pasteles. El próximo gráfico reúne varios pasteles con proporciones distintas. Trata de ordenarlos del sector más grande al más chico. Vas a notar lo incómodo que es: comparar ángulos es una tarea que el ojo humano hace mal y despacio. Enseguida verás los mismos datos como barras — y la diferencia es brutal.

El gráfico de pastel divide un círculo en sectores que representan proporciones de un total. La comparación de varios pasteles con proporciones distintas (Fig. 10.6) deja clara su debilidad: para ordenarlos hay que estimar ángulos relativos, una tarea perceptiva difícil y propensa a errores.

Varios gráficos de pastel dispuestos en grilla, cada uno con proporciones distintas. La comparación entre ellos exige estimar ángulos relativos, una tarea perceptiva difícil — los porcentajes no se distinguen con precisión.
Fig. 10.6: Varios gráficos de pastel dispuestos en grilla, cada uno con proporciones distintas. La comparación entre ellos exige estimar ángulos relativos, una tarea perceptiva difícil — los porcentajes no se distinguen con precisión.

Un gráfico de barras, por el contrario, facilita la comparación precisa y revela patrones ocultos que pueden ser cruciales para la narrativa de los datos: los mismos valores representados como barras alineadas en una base común (Fig. 10.7) se comparan de manera inmediata, sin ambigüedad.

Los mismos datos de los gráficos de pastel anteriores, ahora como barras alineadas en una base común. La comparación es inmediata: la longitud de cada barra es directamente proporcional al valor, sin ambigüedad.
Fig. 10.7: Los mismos datos de los gráficos de pastel anteriores, ahora como barras alineadas en una base común. La comparación es inmediata: la longitud de cada barra es directamente proporcional al valor, sin ambigüedad.

Uno de los pocos casos en los que un gráfico de pastel funciona bien es cuando se comparan apenas dos valores — por ejemplo, "¿te gustó la película? sí / no" (Fig. 10.8). Con solo dos sectores, el ojo distingue sin esfuerzo cuál es mayor.

Gráfico de pastel con dos sectores (
Fig. 10.8: Gráfico de pastel con dos sectores ("¿te gustó la película? sí / no"). Con solo dos valores el ojo distingue al instante cuál es mayor — uno de los pocos casos donde el gráfico de pastel funciona bien.

En la mayoría de los otros casos, es mejor utilizar un gráfico de barras.


El color en InfoVis: tres dimensiones, accesibilidad, ruido y coherencia

El Color No Es Decoración

Visualizetor: máquina letal de dashboards

El color es la herramienta visual más poderosa — y la más mal usada. Tiene tres dimensiones, no una. Casi el 8 % de los hombres no distingue rojo de verde. Y si "Producto A" cambia de color entre gráficos, el lector se pierde.

El color es probablemente la señal visual que más se equivoca al usar. La razón es que parece simple — "elijo un color" — pero en realidad es una herramienta de tres dimensiones independientes, con problemas de accesibilidad serios, con riesgo de convertirse en puro ruido visual si se usa mal, y con un requisito implícito de coherencia entre gráficos del mismo informe. Esta cápsula recorre los cuatro frentes en orden.

Las tres dimensiones del color: tono, saturación y brillo

🎨 Un color son tres decisiones. Piensa en el azul de una barra: parece una sola elección — "puse azul". Pero todo color tiene un tono, una saturación y un brillo, y las tres dimensiones son independientes entre sí. La próxima figura descompone el color en esos tres ejes.

La descomposición (Fig. 11.1) deja claro lo que está en juego: cada uno de los tres ejes se puede mover por separado para codificar una variable distinta — categoría, magnitud, énfasis. Quien lo entiende deja de usar el color como decoración y empieza a tratarlo como una variable visual con tres canales de información.

Descomposición del color en tono, saturación y brillo. Importante porque
Fig. 11.1: Descomposición del color en tono, saturación y brillo. Importante porque "el color" no es una sola variable sino tres independientes — y se pueden usar para codificar cosas distintas (categoría, magnitud, énfasis). Quien entienda esta descomposición deja de usar el color como decoración y empieza a usarlo como una variable visual con tres dimensiones de información.
  • Tono (hue) — lo que normalmente llamamos "color" en lenguaje cotidiano: rojo, azul, verde, amarillo. Es la dimensión más útil para codificar categorías distintas (mutuamente excluyentes, sin orden).
  • Saturación — qué tan puro o intenso es ese tono, en una escala que va del gris al color totalmente saturado del mismo brillo. Útil para codificar magnitud ordinal dentro de un mismo tono.
  • Brillo (o luminosidad) — qué tan claro u oscuro es el color, independientemente del tono. Es la dimensión que el ojo lee con más precisión cuantitativa, y la única que sigue funcionando bien para personas con daltonismo.

La regla práctica: usa tono para categorías, saturación o brillo para magnitudes. Mezclar las dos cosas (tono que codifica orden, por ejemplo arcoíris para una variable continua) es un error clásico — el ojo no lee orden en el espectro de tonos.

Daltonismo y paletas accesibles

Es recomendable evitar el uso de escalas de colores como verde, naranja y rojo en la visualización de datos, especialmente cuando se espera que el gráfico sea accesible para personas con daltonismo. La comparación (Fig. 11.2) muestra cómo se percibe una escala verde-naranja-rojo en visión normal frente a la protanopía (deficiencia en la percepción del rojo) y la deuteranopía (deficiencia en la percepción del verde): en las versiones daltónicas, varios tonos colapsan y se vuelven prácticamente indistinguibles.

Misma escala verde-naranja-rojo vista por una persona con visión normal, con protanopía (deficiencia en la percepción del rojo) y con deuteranopía (deficiencia en la percepción del verde). En las dos versiones daltónicas, varios tonos colapsan y se vuelven prácticamente indistinguibles.
Fig. 11.2: Misma escala verde-naranja-rojo vista por una persona con visión normal, con protanopía (deficiencia en la percepción del rojo) y con deuteranopía (deficiencia en la percepción del verde). En las dos versiones daltónicas, varios tonos colapsan y se vuelven prácticamente indistinguibles.

Estas combinaciones de colores suelen ser problemáticas porque las personas con daltonismo tienen dificultades para distinguir entre estos colores debido a la falta de contraste y a la confusión entre tonalidades similares. En lugar de esto, es preferible utilizar una paleta como la que se muestra a continuación (Fig. 11.3), con tonos azul, amarillo y naranja bien diferenciados en luminosidad, que se mantiene legible tanto en visión normal como en protanopía y deuteranopía.

Paleta de colores diseñada para ser inclusiva con personas daltónicas: tonos azul, amarillo y naranja bien diferenciados en luminosidad, evitando la combinación verde/rojo. Se mantiene legible tanto en visión normal como en protanopía y deuteranopía.
Fig. 11.3: Paleta de colores diseñada para ser inclusiva con personas daltónicas: tonos azul, amarillo y naranja bien diferenciados en luminosidad, evitando la combinación verde/rojo. Se mantiene legible tanto en visión normal como en protanopía y deuteranopía.

🗺️ El mapa que se traiciona a sí mismo. Lo que viene es un mapa mundial de la prevalencia del daltonismo, pintado con una escala verde-amarillo-rojo. Léelo un momento: ¿dónde vive la mayor proporción de población daltónica? Enseguida verás ese mismo mapa tal como lo percibe una persona daltónica — y vas a entender la ironía.

El daltonismo es más común de lo que se piensa. El mapa de prevalencia mundial (Fig. 11.4) lo muestra con claridad — bandas del 7-9 % de población masculina daltónica en gran parte de Europa y Norteamérica, alrededor del 3-5 % en Sudamérica y Asia, y menos del 1 % en zonas de África subsahariana. Cerca del 8 % de los hombres de ascendencia europea es daltónico: en cualquier audiencia internacional, la cantidad de personas afectadas es enorme.

Mapa mundial de la prevalencia del daltonismo rojo-verde (porcentaje de la población masculina), dibujado como bandas de isolíneas suaves sobre un océano azul oscuro. El núcleo rojo del 7-9 % cubre Norteamérica y Europa, rodeado de naranja (5-7 %); el amarillo del 3-5 % domina buena parte del mundo, con bolsones verdes del 1-3 % y algún punto por debajo del 1 %. Visión normal, escala verde-amarillo-rojo.
Fig. 11.4: Mapa mundial de la prevalencia del daltonismo rojo-verde (porcentaje de la población masculina), dibujado como bandas de isolíneas suaves sobre un océano azul oscuro. El núcleo rojo del 7-9 % cubre Norteamérica y Europa, rodeado de naranja (5-7 %); el amarillo del 3-5 % domina buena parte del mundo, con bolsones verdes del 1-3 % y algún punto por debajo del 1 %. Visión normal, escala verde-amarillo-rojo.

Y ahora el mismo mapa, simulado tal como lo ve una persona con deuteranopía (Fig. 11.5): la escala rojo-verde colapsa en un mar de tonos olive indistinguibles. Ahí está la ironía — un mapa que habla justamente del daltonismo, dibujado de modo que quien lo tiene no puede leerlo. Lo que para ti es información, para esa persona es ruido. La moraleja es clara: si no quieres este efecto, no uses rojo y verde.

El mismo mapa de prevalencia, simulado tal como lo percibe una persona con deuteranopía: la escala rojo-verde colapsa en tonos olivas y amarillos casi idénticos y las bandas dejan de distinguirse. La conclusión es directa: si no quieres este efecto, no uses rojo y verde.
Fig. 11.5: El mismo mapa de prevalencia, simulado tal como lo percibe una persona con deuteranopía: la escala rojo-verde colapsa en tonos olivas y amarillos casi idénticos y las bandas dejan de distinguirse. La conclusión es directa: si no quieres este efecto, no uses rojo y verde.

El color como ruido vs información

Los colores son una herramienta poderosa cuando se usan deliberadamente para distinguir grupos o variaciones; pero un uso indiscriminado los convierte en ruido visual que distrae del mensaje real del gráfico.

🌈 Veinte barras, veinte colores. El próximo gráfico muestra los veinte mayores exportadores de armas de 2017, cada país pintado de un color distinto. Míralo y hazte una sola pregunta: ¿qué te dice el color de cada barra? Si la respuesta honesta es "nada", acabas de descubrir el problema.

En esa versión original (Fig. 11.6) el color es puro adorno: la audiencia gasta atención tratando de descifrar qué significa cada tono, cuando la única señal que de verdad importa es la longitud de la barra.

Bar chart de exportadores de armas en 2017 con cada barra de un color distinto y arbitrario. El color no codifica nada — sólo decora — y por eso el ojo se distrae buscando un significado que no existe en lugar de leer la única señal relevante: la longitud.
Fig. 11.6: Bar chart de exportadores de armas en 2017 con cada barra de un color distinto y arbitrario. El color no codifica nada — sólo decora — y por eso el ojo se distrae buscando un significado que no existe en lugar de leer la única señal relevante: la longitud.

En cambio, con todas las barras del mismo color (Fig. 11.7) el ojo va directo a esa longitud — la cantidad de armas exportadas — sin distracciones. El gráfico dice lo mismo, pero más rápido y más claro.

El mismo gráfico de exportadores de armas, pero con un solo color uniforme. Sin el ruido cromático, los ojos van directo a la longitud — el dato que realmente importa. Usar color sólo cuando aporta significado.
Fig. 11.7: El mismo gráfico de exportadores de armas, pero con un solo color uniforme. Sin el ruido cromático, los ojos van directo a la longitud — el dato que realmente importa. Usar color sólo cuando aporta significado.

La regla: usa el color sólo cuando codifica información. Si todas las barras significan lo mismo (cada barra = un país), el color no agrega nada — agrega ruido. Reserva el color para cuando el color significa algo: una categoría, una magnitud, un énfasis. Cuando el color se usa como atributo preatentivo para guiar la atención del lector a un punto específico de la historia, se trata en detalle en la Cápsula 18 (Borralo, sección "Resaltar un punto").

Mantén la consistencia cromática entre gráficos

🧩 Síguele el rastro al Producto A. El próximo par de gráficos describe un mismo informe sobre cinco productos: uno de barras, otro de líneas. Busca "Producto A" en el de barras, fíjate de qué color es, y ahora encuéntralo en el de líneas. ¿Te bastó el color, o tuviste que volver a la leyenda?

Esa fricción tiene una causa. En un informe con varios gráficos relacionados es esencial usar la misma paleta: cada producto, su color, en todas las visualizaciones. Esto es harto importante. La versión rota (Fig. 11.8) hace exactamente lo contrario: "Producto A" es púrpura en el gráfico de barras y rojo en el de líneas, "Producto E" pasa de amarillo a rosa, y la conexión visual entre los dos gráficos se rompe — hay que reaprender la leyenda cada vez.

Informe sobre cinco productos (A–E): a la izquierda, gráfico de barras con el coste; a la derecha, gráfico de líneas con el beneficio a lo largo de diez años. Los colores no se corresponden entre los dos gráficos: «Producto A» es púrpura en el de barras y rojo en el de líneas, «Producto E» es amarillo aquí y rosa allá. El lector tiene que reaprender la leyenda en cada gráfico y la conexión visual entre ellos se pierde.
Fig. 11.8: Informe sobre cinco productos (A–E): a la izquierda, gráfico de barras con el coste; a la derecha, gráfico de líneas con el beneficio a lo largo de diez años. Los colores no se corresponden entre los dos gráficos: «Producto A» es púrpura en el de barras y rojo en el de líneas, «Producto E» es amarillo aquí y rosa allá. El lector tiene que reaprender la leyenda en cada gráfico y la conexión visual entre ellos se pierde.

La versión correcta (Fig. 11.9) aplica la misma paleta viridis en ambos gráficos: el púrpura es siempre "Producto A", el amarillo es siempre "Producto E", y los dos gráficos se leen como un único sistema coherente. La regla es trivial pero muchas veces se rompe por descuido (cada gráfico fue construido por separado, cada uno aplicó el color por defecto del software). El costo de no respetarla es alto: la fuerza de un informe está en que sus gráficos se lean juntos, y la consistencia cromática es el pegamento que hace posible esa lectura conjunta.

El mismo informe sobre los cinco productos, ahora con la misma paleta viridis aplicada tanto en el gráfico de barras como en el de líneas: «Producto A» es púrpura en los dos, «Producto E» es amarillo en los dos, etc. La leyenda se aprende una sola vez y los dos gráficos se leen como un sistema coherente. La regla es trivial: misma categoría → mismo color en todo el informe, sin importar el tipo de gráfico.
Fig. 11.9: El mismo informe sobre los cinco productos, ahora con la misma paleta viridis aplicada tanto en el gráfico de barras como en el de líneas: «Producto A» es púrpura en los dos, «Producto E» es amarillo en los dos, etc. La leyenda se aprende una sola vez y los dos gráficos se leen como un sistema coherente. La regla es trivial: misma categoría → mismo color en todo el informe, sin importar el tipo de gráfico.

Diseño iterativo: implementar, evaluar y mejorar visualizaciones

No Te Enamores de Tu Primera Versión

Visualizetor: máquina letal de dashboards

¡Atención futuros ingenieros! ¿Creían que diseñar era hacer un gráfico y mandarlo? Error. Es un ciclo: Diseña, Implementa, Evalúa, Mejora. Y nunca se enamoren de la primera versión.

El esquema básico es simple (Fig. 12.1): cuatro fases que se persiguen sin fin. Cada vuelta refina la visualización, y ninguna versión está "terminada" — sólo "lista para la próxima vuelta".

Ciclo de diseño de una visualización presentado como cuatro flechas curvas que se persiguen: DISEÑO → IMPLEMENTACIÓN → EVALUACIÓN → MEJORAMIENTO → de vuelta a DISEÑO. Es la imagen mínima que sintetiza toda la cápsula: ninguna de las fases vive por separado, y
Fig. 12.1: Ciclo de diseño de una visualización presentado como cuatro flechas curvas que se persiguen: DISEÑO → IMPLEMENTACIÓN → EVALUACIÓN → MEJORAMIENTO → de vuelta a DISEÑO. Es la imagen mínima que sintetiza toda la cápsula: ninguna de las fases vive por separado, y "terminada" significa simplemente "lista para la próxima vuelta". Sirve como mapa de orientación antes de entrar al detalle de cada fase.

🗺 El mapa del curso. Esta cápsula es el esqueleto sobre el que se monta todo lo que sigue. Las próximas cápsulas — tipos de datos, escalas, señales visuales, evaluación con usuarios — no son temas sueltos: son las herramientas concretas que vas a encajar en este ciclo. Acá tienes el cuadro general; el detalle de cada pieza viene después.

Las preguntas adecuadas para empezar

Antes de abrir el editor, conviene plantar tres preguntas que ordenan todo lo que viene después:

  1. ¿Qué historia quiero contar? — Identificar un punto claro y significativo que sirva de núcleo. Sin este foco, la visualización se vuelve un catálogo de gráficos sueltos sin mensaje.
  2. ¿Cómo puedo contarla? — Aquí entra la creatividad: qué tipo de gráfico, qué escala, qué señales visuales. La misma información puede pasar de aburrida a memorable según cómo se presente.
  3. ¿Está bien lo que estoy haciendo? — La pregunta crítica: probar con usuarios, pedir feedback, verificar que el público realmente entiende lo que tú quisiste contar.

Estas tres preguntas no son un check-list lineal: son un ciclo (Fig. 12.2). Cada respuesta puede obligar a revisar la anterior. Y el ciclo se repite hasta que "todo tiene sentido", es decir, hasta que cada elemento del gráfico está alineado con el mensaje. Recién entonces vale la pena pasar a la implementación final.

Diagrama del ciclo metodológico real que precede a la creación de una visualización: ¿Qué datos tienes? (malos / buenos) → ¿Qué quieres saber de tus datos? (no sé bien / una pregunta específica) → ¿Qué tipo de visualización deberías usar? (catálogo de líneas, pastel, puntos, mapas, tono, ritmo, movimiento, relieve…) → ¿Lo que observas tiene sentido? — y vuelta a empezar hasta que todo encaje. Materializa el principio central de la cápsula: una visualización de calidad no nace de la herramienta sino de las preguntas correctas, y el ciclo se recorre tantas veces como haga falta.
Fig. 12.2: Diagrama del ciclo metodológico real que precede a la creación de una visualización: ¿Qué datos tienes? (malos / buenos) → ¿Qué quieres saber de tus datos? (no sé bien / una pregunta específica) → ¿Qué tipo de visualización deberías usar? (catálogo de líneas, pastel, puntos, mapas, tono, ritmo, movimiento, relieve…) → ¿Lo que observas tiene sentido? — y vuelta a empezar hasta que todo encaje. Materializa el principio central de la cápsula: una visualización de calidad no nace de la herramienta sino de las preguntas correctas, y el ciclo se recorre tantas veces como haga falta.

Diseño e implementación

El diseño y la implementación de una visualización no deben considerarse actividades separadas y secuenciales, sino que deben entrelazarse en un proceso iterativo. Este ciclo de prueba y error permite refinar continuamente el artefacto hasta que sea lo suficientemente bueno para ser presentado al usuario. Un buen diseño surge de cuestionar el entorno actual y plantear preguntas desde la perspectiva del usuario. No se trata solo de resolver problemas existentes, sino de abrir espacio para nuevas preguntas y perspectivas.

La implementación es lo que materializa las ideas conceptuales en algo visible y comprensible: una combinación de actividades muy diversas que, juntas, transforman una idea en una visualización tangible.

✏️ Del lápiz al código. Implementar no es abrir D3 de entrada. El recorrido va de menos a más compromiso: primero bocetos rápidos en papel o pizarra, después software vectorial para afinar, y sólo al final código — D3, Plotly — cuando el diseño ya está validado. Cuanto más barato es el boceto, más fácil es descartarlo y probar otro.

En la práctica, todo suele empezar con bocetos preparatorios (Fig. 12.3) en una pizarra: las ideas iniciales se delinean de forma simple y permiten explorar enfoques visuales distintos antes de comprometerse con un diseño digital. A partir de ahí se pasa al software gráfico vectorial, que ofrece un control detallado sobre cada elemento.

Bocetos a mano alzada de posibles visualizaciones sobre papel. Encarna el principio central de la cápsula — no enamorarse de la primera versión: explorar barato y rápido en papel evita comprometerse con un diseño antes de saber si funciona. El lápiz es la herramienta más subestimada del diseño iterativo.
Fig. 12.3: Bocetos a mano alzada de posibles visualizaciones sobre papel. Encarna el principio central de la cápsula — no enamorarse de la primera versión: explorar barato y rápido en papel evita comprometerse con un diseño antes de saber si funciona. El lápiz es la herramienta más subestimada del diseño iterativo.

Para visualizaciones más complejas, especialmente aquellas que requieren interactividad, es común el desarrollo de scripts personalizados. Utilizando librerías como D3 o Plotly (Fig. 12.4), los diseñadores pueden crear visualizaciones personalizadas que responden a necesidades específicas. Estas herramientas permiten no solo generar gráficos estándar, sino también manipular directamente cómo se presentan los datos para resaltar patrones o tendencias relevantes.

Mosaico de visualizaciones creadas con Plotly. Cierra el arco que va desde el boceto en papel hasta la implementación con código: cuando el diseño en papel ya está validado, librerías como Plotly o D3 permiten convertirlo en algo interactivo sin reinventar la rueda. La cápsula usa esta imagen para mostrar a dónde puede llegar el proceso iterativo después del lápiz.
Fig. 12.4: Mosaico de visualizaciones creadas con Plotly. Cierra el arco que va desde el boceto en papel hasta la implementación con código: cuando el diseño en papel ya está validado, librerías como Plotly o D3 permiten convertirlo en algo interactivo sin reinventar la rueda. La cápsula usa esta imagen para mostrar a dónde puede llegar el proceso iterativo después del lápiz.

🔊 El ciclo no es sólo para gráficos. Un dato no tiene por qué quedarse quieto en una imagen: puede sonar y puede moverse. Más adelante en el curso vas a usar herramientas para lograrlo — Tone.js, que convierte datos en sonido en el navegador, y LEGO Technic, que los vuelve mecanismos que se mueven. Cambia el material, no el método: diseñar-evaluar-mejorar es el mismo ciclo para un gráfico, una sonificación o una fisicalización.

Más allá de los gráficos, hay otras dos formas de dar cuerpo a los datos. La sonificación los traduce en sonido —cada variable se vuelve tono, ritmo o volumen— y deja que el oído detecte patrones que el ojo pasa por alto. La fisicalización los traduce en objetos: maquetas, relieves para personas ciegas, estructuras que reproducen el impacto de un terremoto. Las dos se trabajan a fondo en las cápsulas técnicas más adelante.

Un aspecto crucial en esta fase es la preparación de los datos. Aunque escribir código o utilizar software gráfico es importante, gran parte del tiempo de implementación se dedica a preparar los datos para que sean adecuados para la visualización. Esto incluye tareas como la limpieza de los datos, donde se identifican y corrigen errores o datos faltantes, y la normalización de formatos para asegurar la coherencia en cómo se representan los datos, por ejemplo, asegurando que todas las fechas sigan el mismo formato o que las cifras monetarias estén en la misma moneda.

La ingeniería de datos es otra parte vital del proceso, donde los datos se transforman y organizan para garantizar que la visualización sea fiel y no distorsione la realidad que pretende representar. A menudo, durante la fase de diseño, se descubren problemas en los datos, como la presencia de lagunas o errores evidentes, lo que obliga a revisarlos y corregirlos antes de poder continuar con la visualización.

La evolución de una visualización durante la fase de implementación suele ser un proceso iterativo, lo que a menudo requiere regresar a la fase de diseño. Se empieza con ideas preliminares que se refinan a medida que se avanza, lo que puede implicar revisar los bocetos originales o ajustar el código o el diseño gráfico en función de nuevas percepciones o necesidades.

Evaluación

La fase de evaluación cierra cada vuelta del ciclo: una vez implementada la visualización, hay que recoger sistemáticamente las impresiones y juicios de usuarios para validar la calidad del artefacto. Sin esa retroalimentación, "iterar" se vuelve sólo retoque cosmético sin guía.

Las técnicas concretas — think-aloud, cronometraje de tareas, métricas de eficacia/eficiencia, cuestionarios psicométricos sobre claridad / utilidad / belleza — se discuten en detalle en la cápsula evalua. Acá basta con retener tres ideas: (a) prueba con usuarios no expertos, no con los autores del gráfico; (b) diseña tareas no triviales que obliguen a usar la visualización de verdad; (c) mide, no opines — el dato cualitativo del think-aloud combinado con el cuantitativo del cuestionario es la base mínima.

Mejoramiento

Con los resultados de la evaluación en mano, la visualización se modifica para corregir los puntos débiles detectados. Idealmente, el ciclo se repite hasta que los usuarios demuestren que pueden usar la visualización con autonomía para adquirir información nueva. Las heurísticas concretas para guiar el rediseño — desde la lista de Zuk-Carpendale hasta el mantra de Shneiderman — se tratan en la cápsula pensando.

El desafío de fondo es siempre el mismo: encontrar el equilibrio entre innovación (un diseño que aporte algo nuevo, que intrigue) y convención (un diseño que el lector pueda decodificar sin manual de instrucciones). Y al final, recordar que iterar nunca termina del todo: una visualización está "lista" sólo en relación con el ciclo de evaluación que la juzgó.

Una imagen para cerrar, a modo de anticipo: estos mecanismos de LEGO Technic (Fig. 12.5) son una de las herramientas con las que, más adelante, vas a dar cuerpo físico a los datos. Cuando llegues ahí, el ciclo será harto parecido al que acabas de recorrer.

Mecanismos LEGO Technic — engranajes, palancas, ejes, motores — ensamblados sin soldadura. Bajada accesible de los pines motorizados de EMERGE/inForm: lo que en investigación cuesta miles de dólares, en una mesa de clase se prototipa con LEGO. La cápsula lo destaca por su modularidad: ideal para experimentar sin compromiso técnico previo.
Fig. 12.5: Mecanismos LEGO Technic — engranajes, palancas, ejes, motores — ensamblados sin soldadura. Bajada accesible de los pines motorizados de EMERGE/inForm: lo que en investigación cuesta miles de dólares, en una mesa de clase se prototipa con LEGO. La cápsula lo destaca por su modularidad: ideal para experimentar sin compromiso técnico previo.

Visualización multisensorial: terremotos de Chile en imagen, sonido y forma

Cuando la Casita Tiembla

Visualizetor: máquina letal de dashboards

¿Cuántos sentidos usan para procesar información? ¿Solo los ojos? Hoy vemos un terremoto en Chile desde el 2000, contado visual, sonora, y físicamente.

Hasta acá, casi todo lo que vimos entraba por un solo canal: los ojos. Pero mirar no es la única manera de procesar información — también se puede escuchar y tocar. Esta cápsula lo demuestra con un único proyecto: los terremotos de Chile desde el año 2000, vueltos imagen, sonido y objeto físico.

Una “visualización” multisensorial

📍 Nota de lectura. Esta cápsula es un adelanto de hacia dónde vamos en este curso. Verás aquí — en un solo proyecto integrador — los tres canales que desarrollaremos por separado más adelante: visualización interactiva, sonificación y fisicalización. No te preocupes si no entiendes todos los detalles técnicos: aquí lo importante es ver para qué sirve todo esto y mantenerse motivado. Volveremos sobre cada pieza con la teoría completa.

Los datos provienen del listado de terremotos de Chile en Wikipedia, integrados en una plataforma que combina varias formas de interacción sensorial en una sola experiencia.

🖱️ Esto no es una captura: es en vivo. Lo que viene es la visualización interactiva embebida aquí mismo. Pasa el cursor sobre un terremoto para ver su magnitud y fecha; haz clic para escucharlo. Prueba primero con el más grande del mapa y después con uno pequeño — vas a oír la diferencia antes de leer un solo número.

En esta visualización interactiva (Fig. 13.1) la vista y el oído se reparten el trabajo: la vista ubica dónde y cuándo ocurrió cada sismo; el oído comunica al instante la diferencia entre un temblor moderado y uno catastrófico.

🟢 demo en vivoCasita que tiembla — click en cualquier terremoto del mapa
Fig. 13.1: Mapa interactivo de los terremotos significativos de Chile desde el año 2000. Pasa el cursor sobre un punto para ver magnitud, fecha y ubicación; haz clic para escuchar el sonido que representa su intensidad — versión en vivo de la cápsula técnica de sonificación. Aplica el mantra de Shneiderman: vista general primero, detalles bajo demanda. Combina los tres primeros niveles del experimento multisensorial — vista, oído y exploración interactiva — sin necesidad de un mapa estático separado.

La sonificación es lo que transforma el dato en experiencia: leer "magnitud 8,8" no impresiona; oír el estruendo correspondiente, sí.

🏠 El tercer canal: una casa que de verdad tiembla. A la imagen y al sonido se suma un objeto físico: una casita de LEGO montada sobre un servomotor. Haces clic en un terremoto del mapa y la casita se sacude; si el sismo es de los grandes, se derrumba. Ningún gráfico transmite el caos de un terremoto como verlo tirar abajo una casa.

Esa casita de LEGO (Fig. 13.2) está conectada a la misma plataforma: traduce la magnitud en una sacudida real y, en los terremotos más intensos, llega a derrumbarse por completo:

Casita LEGO sobre una plataforma con servo Arduino que se sacude al hacer clic en un terremoto del mapa. Tercer nivel del experimento — la fisicalización. La intensidad de un sismo deja de ser un número (8,8 grados) para convertirse en algo que vibra en tu escritorio. El dato se convierte en experiencia, y por eso se recuerda.
Fig. 13.2: Casita LEGO sobre una plataforma con servo Arduino que se sacude al hacer clic en un terremoto del mapa. Tercer nivel del experimento — la fisicalización. La intensidad de un sismo deja de ser un número (8,8 grados) para convertirse en algo que vibra en tu escritorio. El dato se convierte en experiencia, y por eso se recuerda.
🎬 EjemploLa casita que tiembla

La fisicalización es la capa más visceral de las tres: ver una estructura sacudirse y caer convierte el daño en algo que se entiende con el cuerpo, no sólo con la cabeza.

Este enfoque multisensorial facilita una comprensión más profunda de los eventos sísmicos: al involucrar la vista, el oído y el tacto a la vez, ofrece una experiencia inmersiva que va más allá de los datos puramente visuales.

Y ojo: la casita es solo un ejemplo. Cada semestre los estudiantes arman sus propias visualizaciones multisensoriales —con los datos que ellos mismos eligen— y casi ninguna se parece a otra. Hay harta variedad. Este video recorre los proyectos del semestre 2025-II:

🎬 EjemploProyectos 2025-II

Tipos de datos: numéricos, ordinales y nominales

¿Lo Cuentas o lo Mides?

Visualizetor: máquina letal de dashboards

¡Silencio clase! Antes de dibujar, entiendan su dato. Si cuentan (1, 2, 3 perros), es Discreto. Si miden (temperatura, peso), es Continuo. No los mezclen.

Tipos de Datos y Escalas Asociadas

En estadística, los datos se pueden clasificar en diferentes categorías según sus características y la forma en que se pueden analizar. Los tres tipos principales son: datos numéricos (cuantitativos), datos ordinales y datos nominales (categóricos).

Datos Numéricos y sus Escalas

Los datos numéricos representan cantidades o valores medibles y son fundamentales para realizar operaciones matemáticas como la suma, la resta, la multiplicación y la división. Se distinguen por dos dimensiones independientes: el tipo de valor (discreto vs continuo) y la escala de medición (intervalo vs razón).

🌡️ ¿Un día de 30 °C es el doble de caluroso que uno de 15 °C? Responde mentalmente antes de seguir. Parece aritmética de primaria —30 es el doble de 15— pero la respuesta correcta depende de la escala con la que se mide, no de los números. Lo que viene explica por qué.

  • Por tipo de valor — discretos vs continuos

    • Datos Discretos: valores numéricos que pueden contarse y suelen tomar valores enteros, sin intermedios. Por ejemplo, el número de estudiantes en una clase es un dato discreto, ya que solo se pueden tener valores enteros como 20 o 21, sin fracciones o decimales.
    • Datos Continuos: pueden tomar cualquier valor dentro de un rango continuo, lo que permite mayor precisión al incluir decimales. Ejemplos comunes incluyen la altura, el peso o el tiempo, donde los valores pueden ser tan detallados como 1.75 metros de altura o 68.2 kilogramos de peso.
  • Por escala de medición — intervalo vs razón

    Esta segunda dimensión determina cómo se interpretan los datos y qué operaciones matemáticas son aplicables.

    • Escala de Intervalo: los datos tienen un orden y una distancia significativa entre valores, pero carecen de un "cero absoluto" que represente una ausencia total de la cantidad medida. Aunque podemos decir que una temperatura de 30 °C es 10 °C mayor que 20 °C, no podemos afirmar que 30 °C sea "el doble de caliente" que 15 °C. Ejemplos: temperaturas en Celsius o Fahrenheit, fechas en un calendario.
    • Escala de Razón: sí tiene un cero absoluto, lo que permite no solo comparar diferencias entre valores sino también realizar afirmaciones de proporcionalidad. En el caso del peso, un objeto que pesa 10 kg es dos veces más pesado que uno de 5 kg. Ejemplos: altura, peso, longitud, conteos.

Cuatro mini-ejemplos resumen la distinción (Fig. 14.1): a la izquierda dos casos de intervalo (temperatura en °C, cociente intelectual) y a la derecha dos casos de razón (peso en kilos, número de alumnos en una clase). Solo en los dos de la derecha tiene sentido decir "el doble" o "la mitad", porque el cero significa "nada".

El tipo de escala numérica decide qué afirmaciones se pueden hacer sobre los datos. Sin cero absoluto (intervalo: temperatura, IQ), no tiene sentido decir «el doble» — 30 °C no es dos veces más caliente que 15 °C, porque el cero es convencional, no físico. Con cero absoluto (razón: peso, conteos), la proporcionalidad sí es legítima: 10 kg sí es el doble que 5 kg. Confundir las dos escalas produce métricas que parecen tener sentido pero no lo tienen, y comparaciones que el lector entiende mal sin darse cuenta.
Fig. 14.1: El tipo de escala numérica decide qué afirmaciones se pueden hacer sobre los datos. Sin cero absoluto (intervalo: temperatura, IQ), no tiene sentido decir «el doble» — 30 °C no es dos veces más caliente que 15 °C, porque el cero es convencional, no físico. Con cero absoluto (razón: peso, conteos), la proporcionalidad sí es legítima: 10 kg sí es el doble que 5 kg. Confundir las dos escalas produce métricas que parecen tener sentido pero no lo tienen, y comparaciones que el lector entiende mal sin darse cuenta.

Datos Categóricos y sus Escalas

Los datos categóricos clasifican elementos en grupos o categorías. No se cuantifican numéricamente, sino que se organizan según características distintivas. Se distinguen dos subtipos según si la clasificación tiene un orden inherente o no:

  • Datos Ordinales y su Escala

    Los datos ordinales permiten clasificar elementos en una jerarquía o secuencia con un orden inherente. La escala ordinal se usa para medir estos datos, permitiendo establecer un orden, aunque sin cuantificar la magnitud exacta de la diferencia entre los elementos.

    • Ejemplo de Datos Ordinales: clasificaciones de satisfacción del cliente (insatisfecho, neutral, satisfecho). Podemos ordenar estas categorías de menor a mayor satisfacción, pero no podemos determinar exactamente cuánto mayor es "satisfecho" respecto a "neutral".
    • Características de la Escala Ordinal: permite el ordenamiento de las categorías, pero no soporta operaciones matemáticas como la suma o la resta debido a la falta de intervalos uniformes entre las categorías.
    • Aplicación de la Escala Ordinal: es útil en situaciones donde se necesita una jerarquía o ranking, como en encuestas de opinión o niveles de educación.
  • Datos Nominales y su Escala

    Los datos nominales clasifican elementos en categorías distintas, sin ningún tipo de orden o jerarquía. La escala nominal mide estos datos, enfocándose en la clasificación sin establecer relaciones de orden.

    • Ejemplo de Datos Nominales: género (masculino, femenino, no binario), colores (rojo, azul, verde), marcas de automóviles (Toyota, Ford, BMW). Estas categorías son mutuamente excluyentes: cada elemento solo puede pertenecer a una categoría específica.
    • Características de la Escala Nominal: permite la clasificación, pero no soporta operaciones matemáticas ni establece un orden entre las categorías. Se utiliza principalmente para etiquetar y diferenciar elementos.
    • Aplicación de la Escala Nominal: comúnmente se representan en tablas de frecuencia o gráficos de barras, útiles para visualizar la distribución de categorías y segmentar datos.

🎨 El color delata el orden. En la próxima figura, mira primero sólo los colores, sin leer las etiquetas. Donde veas una rampa —de claro a oscuro— hay harto orden en el dato: es ordinal. Donde veas tonos distintos sin gradación, no hay jerarquía: es nominal. El color no es decoración: es la primera pista del tipo de dato.

La diferencia entre las dos escalas se vuelve evidente cuando se comparan ejemplos (Fig. 14.2): a la izquierda, datos ordinales (nivel de educación, experiencia laboral) usando una rampa secuencial de colores que refuerza visualmente la jerarquía; a la derecha, datos nominales (marcas de smartphone, medios de transporte) usando tonos categóricos distintos sin que ninguno sugiera estar "antes" o "después" del otro.

La paleta de colores no es decoración: codifica si las categorías tienen orden o no. Para datos ordinales (educación, experiencia, gravedad), una rampa secuencial de un solo tono hace que la jerarquía «se vea» sin tener que leer las etiquetas. Para datos nominales (marcas, géneros, medios de transporte), tonos categóricos distintos evitan sugerir un orden que no existe — porque el cerebro busca un orden cuando ve un degradado, aunque los datos no lo tengan. Aplicar la paleta equivocada lleva al lector a conclusiones falsas: una rampa sobre marcas implica que iPhone «viene antes» que Samsung; tonos categóricos sobre niveles educativos esconden la progresión natural.
Fig. 14.2: La paleta de colores no es decoración: codifica si las categorías tienen orden o no. Para datos ordinales (educación, experiencia, gravedad), una rampa secuencial de un solo tono hace que la jerarquía «se vea» sin tener que leer las etiquetas. Para datos nominales (marcas, géneros, medios de transporte), tonos categóricos distintos evitan sugerir un orden que no existe — porque el cerebro busca un orden cuando ve un degradado, aunque los datos no lo tengan. Aplicar la paleta equivocada lleva al lector a conclusiones falsas: una rampa sobre marcas implica que iPhone «viene antes» que Samsung; tonos categóricos sobre niveles educativos esconden la progresión natural.

Escalas en visualizaciones: lineal, log, porcentual, ordinal y temporal

Cero Grados No Es Cero Nada

Visualizetor: máquina letal de dashboards

En la escala de Intervalo, el cero es una convención (como 0 °C). En la escala de Razón, el cero es la ausencia total (como 0 kilos o 0 euros). Si confundes esto, las proporciones fallan.

Escalas en las visualizaciones de datos

Las escalas en un gráfico son fundamentales para interpretar correctamente los datos. Sirven para mapear valores de datos a posiciones en un gráfico, proporcionando una referencia visual que permite al espectador entender la magnitud, proporción y relación entre los datos. El esquema (Fig. 15.1) resume los principales tipos de escala que se usan en visualización.

Cada tipo de escala impone una pregunta distinta sobre los datos: ¿interesan los valores absolutos (lineal)?, ¿los cambios porcentuales sobre varios órdenes de magnitud (logarítmica)?, ¿la pertenencia a un grupo (categórica)?, ¿el rango dentro de un orden (ordinal)?, ¿la proporción de un todo (porcentual)?, ¿el desarrollo en el tiempo (temporal)? Elegir el eje equivocado puede esconder lo importante — los estados pequeños desaparecen bajo una escala lineal, una rampa secuencial en datos nominales sugiere un orden inexistente. Conocer el menú completo es la primera decisión de diseño.
Fig. 15.1: Cada tipo de escala impone una pregunta distinta sobre los datos: ¿interesan los valores absolutos (lineal)?, ¿los cambios porcentuales sobre varios órdenes de magnitud (logarítmica)?, ¿la pertenencia a un grupo (categórica)?, ¿el rango dentro de un orden (ordinal)?, ¿la proporción de un todo (porcentual)?, ¿el desarrollo en el tiempo (temporal)? Elegir el eje equivocado puede esconder lo importante — los estados pequeños desaparecen bajo una escala lineal, una rampa secuencial en datos nominales sugiere un orden inexistente. Conocer el menú completo es la primera decisión de diseño.

Escala lineal. En una escala lineal, la distancia visual entre dos puntos en cualquier parte del eje es constante. Esto significa que los incrementos entre los valores son uniformes, sin importar si los valores se encuentran en el extremo bajo o alto de la escala. Esta escala es ideal cuando se desea una representación directa y proporcional de los datos, permitiendo comparaciones simples entre valores numéricos.

📏 La escala que rescata a los pequeños. Cuando los datos abarcan un rango harto amplio, una escala lineal aplasta los valores chicos contra el cero —quedan ilegibles— mientras los grandes se reparten todo el eje. La escala logarítmica comprime ese rango y vuelve a hacer visibles a los pequeños. La próxima figura compara las dos escalas con la población de los estados de EE. UU.

Escala logarítmica. A diferencia de la lineal, una escala logarítmica comprime los valores a medida que aumentan: cada paso del eje no suma una cantidad fija, sino que la multiplica. Es menos común y menos intuitiva para quien no trabaja a diario con datos, pero indispensable cuando un dato abarca varios órdenes de magnitud (Fig. 15.2).

Cuando los datos cubren varios órdenes de magnitud, la escala lineal aplasta a los valores pequeños contra el eje y no se distinguen entre sí — California domina visualmente mientras Wyoming, Vermont y el resto desaparecen en una sola línea. La escala logarítmica devuelve a cada observación su espacio: una diferencia de
Fig. 15.2: Cuando los datos cubren varios órdenes de magnitud, la escala lineal aplasta a los valores pequeños contra el eje y no se distinguen entre sí — California domina visualmente mientras Wyoming, Vermont y el resto desaparecen en una sola línea. La escala logarítmica devuelve a cada observación su espacio: una diferencia de "el doble" ocupa la misma distancia visual sea entre 1 y 2 millones o entre 20 y 40. Regla práctica: si el rango de los datos abarca más de dos órdenes de magnitud, considerar log antes que lineal.

Escala de porcentajes. Esta escala tiene un máximo fijo del 100% cuando se utiliza para representar partes de un todo. Es fundamental en visualizaciones como gráficos de pastel (pie charts), donde la suma de todas las partes debe ser igual a 100%. El uso incorrecto de esta escala, como mostrar un gráfico donde la suma excede el 100%, puede llevar a confusión y a errores de interpretación.

Escala categórica. Esta escala se utiliza para representar datos no numéricos, organizando diferentes grupos o categorías. No existe un orden inherente entre las categorías a menos que se trate de datos ordinales. Por ejemplo, un gráfico de barras puede usar una escala categórica en el eje horizontal (para mostrar diferentes grupos o categorías) y una escala numérica en el eje vertical (para mostrar los valores correspondientes a esas categorías).

Escala ordinal. En el caso de los datos ordinales, donde las categorías tienen un orden específico (como una escala de satisfacción de "horrible" a "excelente"), es importante mantener ese orden en la visualización para facilitar la comparación, como ilustra el ejemplo (Fig. 15.3) con una escala ordinal en el eje X y una escala lineal en el eje Y.

Cuando el eje X es ordinal, el orden de las categorías ES parte de la información — no se puede ordenar alfabéticamente sin destruir el mensaje. Una escala de
Fig. 15.3: Cuando el eje X es ordinal, el orden de las categorías ES parte de la información — no se puede ordenar alfabéticamente sin destruir el mensaje. Una escala de "totalmente en desacuerdo → totalmente de acuerdo" debe leerse en ese orden para que el lector vea inmediatamente la forma de la distribución (en este caso, sesgada hacia el acuerdo). Las herramientas de visualización tienden a reordenar alfabéticamente por defecto; es responsabilidad del autor preservar el orden semántico de los datos ordinales.

Escala de tiempo. El tiempo es una variable continua que generalmente se representa en una escala lineal, pero también puede dividirse en categorías como años, meses o días de la semana, permitiendo visualizarlo como una variable discreta. También una escala de tiempo puede tener una naturaleza cíclica (por ejemplo, hay un mediodía, un sábado, y un enero cada año), lo que permite representar datos para que muestren patrones temporales recurrentes. Dado que el tiempo es una parte fundamental de la vida diaria, su representación en visualizaciones proporciona un contexto familiar y fácilmente comprensible para el público.

Estas escalas son fundamentales para elegir cómo representar los datos en visualizaciones, dependiendo de las características de los datos y de la historia que se desea contar.

Valores absolutos vs. valores relativos: cuándo normalizar

Una decisión de escala que pasa fácilmente desapercibida pero que cambia radicalmente la lectura de un gráfico es si los valores se muestran en términos absolutos o en términos relativos (por habitante, por unidad de tiempo, como porcentaje de algo). A menudo es más útil mostrar valores relativos para contextualizar la información en función de factores relevantes — y evitar conclusiones engañosas.

🚨 ¿Cuáles son las ciudades más peligrosas? Piensa en un par antes de seguir. Si se te vinieron a la mente las grandes —Chicago, Nueva York—, cuidado: ése es el ranking por número total de crímenes, y las ciudades grandes lo encabezan sólo por ser grandes. La próxima figura muestra qué pasa cuando se mide por habitante.

La comparación entre rankings (Fig. 15.4) lo deja claro: en el gráfico de la derecha, ordenado por número absoluto de asesinatos, ciudades grandes como Chicago, Nueva York, Los Ángeles y Filadelfia aparecen como las más peligrosas; pero al relativizar los datos por cada 100.000 habitantes, el gráfico de la izquierda muestra una composición del ranking radicalmente distinta.

Dos rankings de ciudades más peligrosas de EE. UU. — uno por asesinatos absolutos, otro por tasa cada 100.000 habitantes. Caso paradigmático del tema
Fig. 15.4: Dos rankings de ciudades más peligrosas de EE. UU. — uno por asesinatos absolutos, otro por tasa cada 100.000 habitantes. Caso paradigmático del tema "valores absolutos vs relativos" de la cápsula: las ciudades grandes dominan el primer ranking simplemente por ser grandes. Sin denominador, no hay comparación honesta, y la decisión de no normalizar puede convertir un dato neutral en un sesgo.

Lo mismo vale para los mapas. Si vamos a visualizar un fenómeno o un valor específico relacionado con los habitantes en diferentes localidades, es importante relativizar los datos al número de habitantes. El mapa coroplético (Fig. 15.5) lo muestra: las áreas sin población quedan en blanco (sin valor), evitando el sesgo de mostrar áreas vacías como si no tuvieran fenómeno relevante.

Mapa coroplético con datos ajustados por habitantes y áreas despobladas en blanco. Aplica la lección de la normalización a la cartografía: pintar todo el territorio como si tuviera el mismo peso sería tan engañoso como sumar asesinatos sin dividir por población. Las zonas vacías deben decir
Fig. 15.5: Mapa coroplético con datos ajustados por habitantes y áreas despobladas en blanco. Aplica la lección de la normalización a la cartografía: pintar todo el territorio como si tuviera el mismo peso sería tan engañoso como sumar asesinatos sin dividir por población. Las zonas vacías deben decir "no hay dato", no "hay cero del fenómeno".

Esta viñeta humorística (Fig. 15.6) lo recuerda con un chiste: ciertos fenómenos (crímenes, enfermedades, accidentes) sólo pueden ocurrir donde hay personas. Si no ajustamos los datos según la población, podemos obtener conclusiones engañosas, porque una localidad sin habitantes no tendrá eventos registrados simplemente porque no hay nadie para experimentar esos fenómenos.

Viñeta humorística que cierra el tema con una broma —
Fig. 15.6: Viñeta humorística que cierra el tema con una broma — "no se reportan crímenes donde no vive nadie". El humor funciona como ancla mnemónica para la lección sobre normalización: si te ríes, te quedas con la idea de que mostrar valores absolutos sobre mapas demográficamente desiguales es casi siempre un error de sentido común.

La regla, en todos los casos, es la misma: cuando un fenómeno depende del tamaño de la población, hay que mostrarlo en términos relativos —no absolutos—, o el gráfico contará una historia equivocada.


Sistemas de coordenadas y jerarquía de señales visuales (Cleveland & McGill)

El Ojo Es Bueno pa' Unas Cosas, pa' Otras No

Visualizetor: máquina letal de dashboards

Situar el dato en el vacío requiere un Sistema de Coordenadas: Cartesiano, Polar, Geográfico. Y recuerda la jerarquía: la Posición en el eje común es lo que el humano lee mejor.

El sistema de coordenadas en la visualización de datos

Los sistemas de coordenadas proporcionan un marco estructurado para situar y dar significado a los datos representados gráficamente. Los tres sistemas más comunes (Fig. 16.1) son el cartesiano (el más usado), el polar (en gráficos circulares como los de pastel) y el geográfico (para representar posiciones en un mapa).

Los tres sistemas de coordenadas básicos — cartesiano, polar, geográfico — presentados en paralelo. Cada uno presupone un tipo distinto de pregunta: ¿comparar magnitudes? ¿proporciones? ¿ubicaciones en el mundo real? Elegir el sistema es la primera decisión de diseño y, como dice la cápsula, define el marco donde los datos adquieren significado.
Fig. 16.1: Los tres sistemas de coordenadas básicos — cartesiano, polar, geográfico — presentados en paralelo. Cada uno presupone un tipo distinto de pregunta: ¿comparar magnitudes? ¿proporciones? ¿ubicaciones en el mundo real? Elegir el sistema es la primera decisión de diseño y, como dice la cápsula, define el marco donde los datos adquieren significado.

El sistema cartesiano es el más utilizado y familiar en visualizaciones de datos, como gráficos de barras o gráficos de dispersión. En este sistema, las coordenadas se representan con pares (x, y) en un plano, lo que permite medir distancias y relacionar puntos de manera directa. Es ideal para representar relaciones lineales y comparaciones directas.

El sistema polar organiza los datos en un formato circular, donde las posiciones se determinan por ángulos y distancias desde un punto central. Este sistema es útil cuando el ángulo o la dirección son elementos clave en la interpretación de los datos, como en gráficos circulares o de radar.

El sistema geográfico utiliza coordenadas de latitud y longitud para mapear datos sobre la superficie de la Tierra.

Nota. En el sistema de coordenadas geográficas, los datos representados suelen ser la latitud y la longitud, que determinan la ubicación exacta de un punto en el espacio. Si sólo se utiliza la posición como señal visual, generalmente se limitan a estos dos parámetros. Para representar otros tipos de datos, como temperatura o población, es necesario incorporar señales visuales adicionales — color, área o forma — que proporcionen información más allá de la ubicación geográfica.

Es esencial para visualizar datos relacionados con ubicaciones geográficas, proporcionando una conexión inmediata con el mundo físico. Sin embargo, la representación de datos geográficos en un plano bidimensional requiere de proyecciones, cada una con sus propias ventajas y desventajas, como la conservación de ángulos o áreas.

Señales visuales

En la visualización de datos, las señales visuales juegan un papel crucial al mapear datos a geometría y color, ayudando a identificar patrones y realizar comparaciones. El catálogo (Fig. 16.2) reúne los principales tipos de señales visuales que detallamos a continuación.

Catálogo de las señales visuales disponibles para codificar datos — posición, longitud, ángulo, dirección, forma, área, volumen, color. Sirve como inventario antes de la pregunta clave de la cápsula: ¿el ojo humano lee todas estas señales con la misma precisión? La respuesta — no, ni de lejos — llega en la imagen de Cleveland-McGill.
Fig. 16.2: Catálogo de las señales visuales disponibles para codificar datos — posición, longitud, ángulo, dirección, forma, área, volumen, color. Sirve como inventario antes de la pregunta clave de la cápsula: ¿el ojo humano lee todas estas señales con la misma precisión? La respuesta — no, ni de lejos — llega en la imagen de Cleveland-McGill.

Posición: En gráficos de dispersión y otros diagramas, la posición de un punto en el espacio se utiliza para comparar valores.

Nota. En una visualización, es muy inusual que la posición no se utilice para representar algún tipo de dato. Por ejemplo, incluso en un gráfico de barras verticales, donde la longitud de la barra se suele utilizar para comparar valores, la posición también juega un papel importante: lo relevante es la posición del extremo superior de la barra en el eje vertical, y la posición en el eje horizontal codifica las distintas categorías o valores que se comparan.

La ubicación en el sistema de coordenadas determina la representación de cada dato. Usar sólo la posición es eficiente en términos de espacio, pero puede ser difícil identificar la información específica de cada punto, especialmente cuando hay una gran cantidad de datos.

Nota. La posición no se limita sólo al sistema cartesiano: es una señal visual válida en otros sistemas. En polar la posición está determinada por el ángulo y la distancia desde el centro; en geográfico, por la latitud y la longitud.

Longitud: En gráficos de barras, la longitud de cada barra representa el valor absoluto de un dato. La longitud puede ser horizontal, vertical o angular. Es importante asegurarse de que el eje de longitud comience en cero para evitar distorsiones en la percepción de los datos, ya que una escala mal configurada puede exagerar o minimizar las diferencias entre valores.

Ángulo: En gráficos circulares (o de pastel), el ángulo de cada sector representa una fracción del total. Los ángulos permiten visualizar la proporción de cada categoría en relación con el total, haciendo evidente la parte que cada categoría representa del conjunto completo.

Dirección: Similar al ángulo, pero enfocado en la orientación de un vector dentro de un sistema de coordenadas. La dirección permite analizar tendencias, cambios y fluctuaciones en los datos a lo largo de un periodo de tiempo o en diferentes condiciones.

Formas: Empleadas para diferenciar categorías, especialmente en mapas o gráficos. Las formas pueden ofrecer un contexto adicional al representar elementos específicos.

Área y volumen: Estas señales representan datos con tamaño en dos dimensiones (área) o tres dimensiones (volumen). Asegurarse de que el tamaño refleje con precisión los valores es crucial; por ejemplo, aumentar el tamaño de un cuadrado o un cubo debe tener en cuenta las proporciones correctas para evitar distorsiones en la comparación de datos (ver cápsulas anteriores).

Color: el color se utiliza para diferenciar categorías o codificar magnitudes a través de tres dimensiones independientes — tono, saturación y brillo. Estas tres dimensiones, junto con las cuestiones de accesibilidad (daltonismo), uso del color como ruido vs información, y consistencia cromática entre gráficos relacionados, se tratan a fondo en la Cápsula 10 (El color en InfoVis).

🎯 No todas las señales se leen igual de bien. La próxima figura muestra el mismo conjunto de valores codificado de varias maneras —posición, longitud, ángulo, área, color—. Recórrelas y fíjate en cuál puedes leer las cifras casi sin esfuerzo y en cuál tienes que estimar a ojo. La diferencia no es cuestión de gusto: está harto medida.

Quien la midió fue un estudio de 1985 de William Cleveland y Robert McGill: clasificaron la precisión con la que se lee cada señal —todas menos las formas— y el ranking resultante (Fig. 16.3) las ordena de la más precisa, la posición en una escala común, a la menos, el color y la densidad.

Ranking clásico de Cleveland y McGill (1985) sobre la precisión perceptiva de cada señal visual — de posición en escala común (más precisa) hasta color y densidad (menos). Es la base científica detrás de muchas reglas que la cápsula viene aplicando: por qué los bar charts ganan a los pastel, por qué los mapas de calor son una mala primera opción. No es opinión, es lectura ojométrica.
Fig. 16.3: Ranking clásico de Cleveland y McGill (1985) sobre la precisión perceptiva de cada señal visual — de posición en escala común (más precisa) hasta color y densidad (menos). Es la base científica detrás de muchas reglas que la cápsula viene aplicando: por qué los bar charts ganan a los pastel, por qué los mapas de calor son una mala primera opción. No es opinión, es lectura ojométrica. (Cleveland & McGill, 1985)

Por ejemplo, los gráficos de barras se clasificaron como más precisos que los gráficos de pastel, mientras que los mapas de calor quedaron en la parte inferior. La eficiencia y exactitud no son los únicos objetivos de la visualización de datos, por lo que las clasificaciones deben considerarse como una guía general en lugar de reglas estrictas.


Multidimensionalidad: cómo mostrar 3, 4 o más variables a la vez

Cinco Dimensiones en un Solo Punto

Visualizetor: máquina letal de dashboards

¿Cómo metes cinco dimensiones en un gráfico plano? Usa Posición X, Posición Y, Color, Tamaño y Forma. Y si necesitas diez, bienvenido a las Coordenadas Paralelas.

Multidimensionalidad en la Visualización de Información

La multidimensionalidad permite representar muchas variables en un solo gráfico, o en un conjunto de gráficos relacionados. Veámoslo con tres técnicas.

🔢 Un punto puede cargar cinco variables. Empieza con un punto sobre un eje: una dimensión. Súbelo a un plano X-Y: van dos. Ahora píntalo —tres—, agrándalo —cuatro— y cámbiale la forma —cinco. Sin salir de un solo gráfico, cada punto llega a codificar cinco variables a la vez.

Ese es el gráfico de puntos multidimensional (Fig. 17.1). Pero atención a algo que vimos en la cápsula anterior: esos cinco canales no se leen igual de bien. La posición es la señal más precisa; el área y la forma, de las menos. Por eso conviene reservar las dos variables más importantes para los ejes X e Y, y dejar el color, el tamaño y la forma para las secundarias.

Receta visual paso a paso para meter una, dos, tres, cuatro y cinco variables en un mismo gráfico de puntos sumando posición, color, tamaño y forma. Material de referencia central de la cápsula: no hace falta inventar gráficos exóticos para visualizar muchas dimensiones, basta combinar señales visuales conocidas. Cinco dimensiones en un plano son perfectamente posibles.
Fig. 17.1: Receta visual paso a paso para meter una, dos, tres, cuatro y cinco variables en un mismo gráfico de puntos sumando posición, color, tamaño y forma. Material de referencia central de la cápsula: no hace falta inventar gráficos exóticos para visualizar muchas dimensiones, basta combinar señales visuales conocidas. Cinco dimensiones en un plano son perfectamente posibles.

Gráfico de coordenadas paralelas. Cuando las dimensiones son demasiadas para los canales de un solo punto —diez, veinte—, las coordenadas paralelas le dan a cada dimensión su propio eje vertical; cada objeto se vuelve una línea quebrada que los cruza todos, y los patrones aparecen en el haz de líneas.

Múltiples gráficos para diferentes combinaciones de dimensiones. Los gráficos múltiples (Fig. 17.2) muestran diferentes combinaciones de dimensiones a través de una serie de gráficos relacionados. Por ejemplo, se pueden crear gráficos separados para cada combinación posible de variables, como un gráfico de dispersión para dos dimensiones y un gráfico de barras para otra dimensión, permitiendo al lector comparar y contrastar cómo diferentes variables se relacionan entre sí. Esto también puede incluir paneles que muestran diferentes subconjuntos de datos o representaciones, facilitando una comprensión más detallada de cómo cada dimensión afecta a las demás.

Matriz de small multiples / scatter plot matrix con todas las combinaciones de pares de dimensiones. Estrategia alternativa: en lugar de apilar señales sobre un solo gráfico, dividir la pantalla en muchos gráficos pequeños. Cada uno es simple, pero juntos exploran sistemáticamente la relación entre variables sin saturar visualmente.
Fig. 17.2: Matriz de small multiples / scatter plot matrix con todas las combinaciones de pares de dimensiones. Estrategia alternativa: en lugar de apilar señales sobre un solo gráfico, dividir la pantalla en muchos gráficos pequeños. Cada uno es simple, pero juntos exploran sistemáticamente la relación entre variables sin saturar visualmente.

Estos enfoques permiten una representación multidimensional de los datos, facilitando la identificación de patrones, tendencias y relaciones complejas.

Puntos de vista: dos formas de ver las mismas N dimensiones

🌹 El mismo dato, dos preguntas opuestas. Tienes un conjunto con muchas dimensiones. ¿Quieres retratar un objeto —ver a un alumno entero, materia por materia— o comparar muchos objetos entre sí? La rosa de Nightingale hace lo primero; las coordenadas paralelas, lo segundo. Ninguna es mejor: la pregunta decide cuál.

La rosa de Nightingale (Fig. 17.3) trata cada objeto (cada alumno, en el ejemplo escolar de la Cápsula 05) como una forma circular compacta: cada materia es un pétalo, y el ojo capta la entidad-alumno entera de un vistazo. Esta técnica es óptima cuando se quiere caracterizar un objeto individual en sus hartas dimensiones — pero no facilita la comparación entre objetos distintos.

Fig. 17.3: Rosa de Nightingale aplicada a las notas de un solo estudiante por asignatura. Encarna la "visibilidad de objeto": toda la información de un alumno queda en una única figura cerrada y reconocible. Es la elección ideal cuando el usuario es un padre que sólo quiere saber cómo está su hijo — pero pésima si el usuario es el director que necesita comparar el curso entero.

Las coordenadas paralelas (Fig. 17.4), en cambio, son óptimas para lo contrario: comparar el comportamiento de muchos objetos en una misma dimensión, o buscar correlaciones entre dimensiones. Su punto débil es que la identidad de cada objeto se diluye en el haz de líneas; la variante coloreada por objeto (Fig. 17.5) intenta recuperar parte de esa visibilidad con el color.

Fig. 17.4: Gráfico de coordenadas paralelas con un eje por asignatura y una línea por estudiante. El reverso exacto de la rosa de Nightingale: alta visibilidad de atributo (cómo le fue al curso entero en matemáticas), baja visibilidad de objeto (qué hizo un alumno específico). La elección entre ambos gráficos no es estética sino estratégica — depende del usuario final, igual que todo el resto del diseño.
Fig. 17.5: Coordenadas paralelas con discos grandes coloreados por estudiante para recuperar parte de la visibilidad de objeto perdida. Muestra que las soluciones de diseño no son binarias: con un truco visual se puede ganar legibilidad en una dimensión, pero a costa de otra (con 30 estudiantes los colores colapsan). Cada compromiso depende del contexto — moraleja recurrente de la cápsula.

Estas dos técnicas no se eligen por preferencia personal, sino según el contexto y la pregunta del lector, como se discutió en detalle en la Cápsula 05 (El contexto manda — Puntos de vista). Lo importante es que ambas —junto con las técnicas de la primera sección, puntos 5D y gráficos múltiples— resuelven el mismo problema: mostrar muchas dimensiones a la vez.

Más allá de "qué técnicas existen", está la pregunta operativa: ¿cuál de éstas elijo en un caso concreto? Es un tema en sí —vocabulario visual, mapeo pregunta → gráfico, uso de LLMs como asistentes— y se trata en la cápsula siguiente, Cómo elegir la visualización adecuada.


Cómo elegir la visualización adecuada: vocabulario visual, pregunta primero, ayuda de LLMs

La Pregunta Antes Que el Gráfico

Visualizetor: máquina letal de dashboards

Empieza por la pregunta, no por el gráfico. Si no puedes escribir la pregunta en una frase, ningún gráfico la va a responder por ti. Y si te trabas, pídele ayuda a un LLM — pero cuéntale qué datos tienes y qué quieres saber.

Esta cápsula es el punto de inflexión entre "qué técnicas existen" (Cápsulas 13-16) y "cómo construyo una visualización efectiva" (Cápsulas 18+). Aquí vemos cómo elegir entre el repertorio disponible.

Vocabulario visual: el catálogo del oficio

Crear visualizaciones efectivas puede parecer una tarea desafiante, pero el uso de un vocabulario visual puede simplificar mucho este proceso. Un vocabulario visual es un conjunto de tipos de gráfico ya validados por la comunidad, cada uno asociado a una clase de pregunta o de dato. Tener este catálogo a mano evita reinventar la rueda cada vez.

Un buen punto de partida es el Visual Vocabulary del Financial Times, que organiza ~70 tipos de gráfico en 9 familias según la "intención" comunicativa: desviación, correlación, ranking, distribución, parte-de-un-todo, etc. No memorices la lista — úsala como diccionario cuando estés diseñando.

Un esquema general para crear visualizaciones puede seguir una receta sencilla:

  1. Identifica la pregunta que quieres responder con el gráfico.
  2. Determina los tipos de datos que tienes (numéricos, categóricos, temporales, geográficos — ver Cápsula 13).
  3. Selecciona el tipo de gráfico apropiado para esa pregunta y esos datos.
  4. Aplica las escalas correctas (lineal, log, ordinal, ver Cápsula 14).
  5. Asigna señales visuales (posición, longitud, ángulo, color, ver Cápsula 15).

Sin embargo, esta receta es un punto de partida, no una camisa de fuerza. La verdadera creatividad en visualización surge de explorar más allá de las recomendaciones estándar y adaptar las técnicas al contexto único de cada proyecto. Flexibilidad en la aplicación de las directrices lleva a soluciones más innovadoras y a visualizaciones que no sólo transmiten información con claridad, sino que también cautivan al espectador.

Empezar siempre desde la pregunta

Una visualización es, en el fondo, una historia contada con datos — y toda historia arranca de una pregunta. Los números son el material; el gráfico, la forma de la respuesta. Por eso una narrativa de datos no consiste en adornar cifras, sino en usar un gráfico para responder algo concreto.

Seis preguntas que vuelven una y otra vez. El gráfico que necesitas depende de la pregunta que le haces a los datos — así que empieza por nombrarla en una frase. Hay seis preguntas que aparecen con muchísima frecuencia: están lejos de cubrir todo lo que se puede preguntar, pero si la tuya se parece a una de ellas, el tipo de gráfico casi se elige solo.

El esquema (Fig. 18.1) reúne esas seis, cada una con su concepto estadístico y el tipo de gráfico que la responde:

Mapa que cruza seis preguntas-tipo sobre los datos (máximos, evolución temporal, outliers, clusters, correlación, distribución) con los gráficos apropiados para responderlas. Sintetiza el cierre de la cápsula: una visualización efectiva no empieza eligiendo el gráfico bonito sino la pregunta. La pregunta dirige al gráfico, no al revés.
Fig. 18.1: Mapa que cruza seis preguntas-tipo sobre los datos (máximos, evolución temporal, outliers, clusters, correlación, distribución) con los gráficos apropiados para responderlas. Sintetiza el cierre de la cápsula: una visualización efectiva no empieza eligiendo el gráfico bonito sino la pregunta. La pregunta dirige al gráfico, no al revés.
  1. ¿Cuál ___ es el mejor y el peor? — Concepto: Máximos y mínimos. Identifica los valores extremos en un dataset (típicamente con un bar chart ordenado).
  2. ¿Cómo ha cambiado ___ a lo largo del tiempo? — Concepto: Patrones temporales. Explora la evolución en función del tiempo (típicamente con un line chart).
  3. ¿Qué ___ se destaca del resto? — Concepto: Outliers (valores atípicos). Detecta valores que no se ajustan a los patrones esperados (típicamente con un scatter plot).
  4. ¿Qué hace que ___ sea diferente de ___? — Concepto: Clustering. Identifica grupos con características similares (típicamente con scatter + clustering).
  5. ¿Cómo están relacionados ___ y ___ entre sí? — Concepto: Correlación. Establece relaciones entre dos variables (típicamente con un scatter plot con línea de tendencia).
  6. ¿Cuál es la descomposición de ___? — Concepto: Distribuciones. Muestra cómo se distribuyen los datos en categorías o rangos (típicamente con un histograma o un boxplot).

Pídele ayuda a un LLM (pero háblale bien)

Una herramienta práctica que en los últimos años cambió el juego: los modelos de lenguaje grandes (ChatGPT, Claude, Gemini, Mistral, etc.). Son extraordinariamente buenos para sugerir el tipo de gráfico adecuado dado un conjunto de datos y una pregunta — siempre que tú sepas hacer la pregunta correcta.

La conversación típica que funciona:

: "Tengo una tabla con 50 filas: cada fila es un país, y las columnas son población (numérica), PIB per cápita (numérica), continente (categórica) y porcentaje de población urbana (numérica de 0 a 100). Quiero mostrar si los países con más PIB per cápita tienden a ser más urbanos, separando por continente. ¿Qué tipo de gráfico me recomiendas?"

LLM: "Un scatter plot con color por continente sería ideal. Eje X: PIB per cápita (escala logarítmica, porque los valores cubren varios órdenes de magnitud). Eje Y: % urbano. Color: continente. Tamaño opcional del punto: población. Para ver si la relación se mantiene dentro de cada continente, puedes además agregar líneas de tendencia por color."

Tres reglas para que el LLM te dé buenas respuestas:

  • Describe los datos con precisión — cuántas filas, qué columnas, qué tipo (numérica continua / discreta / categórica nominal / ordinal / temporal / geográfica). Sin esta información el LLM tiene que adivinar y suele acertar menos.
  • Describe la pregunta con verbos concretoscomparar, clasificar, mostrar evolución, destacar outliers, encontrar correlación. No le digas "quiero un gráfico bonito"; eso lo lleva al cliché.
  • Pídele alternativas — "dame tres opciones, ordenadas de la más simple a la más rica". El LLM tiende a recomendar la opción más sofisticada por defecto; pidiendo opciones te das harto margen para elegir.

El LLM no reemplaza a tu juicio — pero te ahorra horas de catálogo. Es como tener un colega senior que conoce todos los gráficos y te recuerda los principios del curso cuando se los pides.


Exploratorio vs explicativo: el contexto, el quién, el qué y el cómo

Cien Ostras pa' Dos Perlas

Visualizetor: máquina letal de dashboards

El diseño Exploratorio es buscar en cien ostras para encontrar perlas. El diseño Explicativo es mostrarle al cliente SOLO esas dos perlas.

Quién, qué y cómo en el análisis explicativo

Antes de profundizar en el concepto de contexto, es importante distinguir entre análisis exploratorio y análisis explicativo.

El análisis exploratorio es el proceso que se realiza para comprender los datos y descubrir qué aspectos podrían ser relevantes o interesantes para destacar. Durante este tipo de análisis, se examinan los datos desde diferentes perspectivas, formulando múltiples hipótesis y pruebas, como si se estuvieran buscando perlas en ostras (Fig. 19.1).

Ostras abiertas sobre una mesa — metáfora central del análisis exploratorio. El científico de datos abre cien ostras (prueba cien hipótesis, mira los datos desde cien ángulos) sabiendo que la mayoría no contendrán nada interesante. Sienta el escenario para entender la siguiente imagen y la asimetría entre lo que se busca y lo que finalmente se cuenta.
Fig. 19.1: Ostras abiertas sobre una mesa — metáfora central del análisis exploratorio. El científico de datos abre cien ostras (prueba cien hipótesis, mira los datos desde cien ángulos) sabiendo que la mayoría no contendrán nada interesante. Sienta el escenario para entender la siguiente imagen y la asimetría entre lo que se busca y lo que finalmente se cuenta.

Es posible que haya que abrir 100 ostras —es decir, probar 100 hipótesis o analizar los datos de 100 maneras diferentes— para encontrar quizá dos perlas (Fig. 19.2).

Entre cien ostras, dos perlas — el cierre de la metáfora. Es el error más común que advierte la cápsula: mostrar las cien ostras al público para
Fig. 19.2: Entre cien ostras, dos perlas — el cierre de la metáfora. Es el error más común que advierte la cápsula: mostrar las cien ostras al público para "demostrar el trabajo realizado", cuando en realidad el público sólo necesita ver las dos perlas. Análisis explicativo no es esconder el resto, es respetar el tiempo y la atención del lector.

En cambio, cuando llega el momento de comunicar nuestros hallazgos al público, debemos estar en el espacio del análisis explicativo. Esto significa que tenemos un mensaje específico que queremos transmitir, una historia concreta que queremos contar, probablemente relacionada con esas dos perlas que encontramos.

Dos formas de mirar los mismos datos

La diferencia fundamental entre el científico de datos (exploratorio) y el diseñador (explicativo) es dónde dirigen la atención. Frente al mismo conjunto de puntos, ven cosas distintas: para el científico cada punto es un posible hallazgo y ninguno se destaca todavía; para el diseñador unos pocos puntos ya fueron declarados "perla" y el resto se atenúa para no distraer.

El error común es pensar que está bien mostrar el análisis exploratorio tal como es (presentar todos los datos, todas las 100 ostras) cuando en realidad deberíamos estar mostrando el análisis explicativo (transformando los datos en información que el público pueda consumir: las dos perlas). Es un error comprensible. Después de realizar un análisis completo, puede ser tentador querer mostrar todo el trabajo realizado para demostrar la solidez del análisis. Sin embargo, hay que resistir esta tentación. Al hacerlo, estarías obligando a tu audiencia a volver a abrir todas las ostras. En lugar de eso, enfócate en las perlas, en la información que realmente necesita conocer tu audiencia.

El contexto es clave

Tu audiencia no abrió las cien ostras contigo. Sin tu contexto, no puede distinguir la perla del montón.

Tú pasaste hartas horas con los datos. Tu audiencia tiene 30 segundos. El contexto es la diferencia entre que entienda o no.

El contexto en Visualización de Datos

Más allá del concepto general visto en cápsulas anteriores, en la práctica el contexto de una visualización se concreta en la información adicional que ayuda a responder el quién, qué, cuándo, dónde y por qué de los datos. No vive sólo en títulos y subtítulos: también incluye anotaciones gráficas que destacan partes específicas del gráfico, iconos o formas que orientan al lector, y la elección de sistemas de coordenadas, escalas y señales visuales que ya por sí mismas anclan el dato a un marco familiar. Un mapa coroplético contextualiza en el espacio físico; una escala temporal en años contextualiza en la memoria reciente; un título descriptivo orienta, uno accionable directamente pide una decisión.

El contexto puede ser explícito (etiquetas en los ejes, descripciones detalladas, anotaciones) o implícito (basado en la familiaridad del público con el tema, o en convenciones visuales que se asocian naturalmente con ciertos significados — verde es bueno, una flecha hacia arriba es crecimiento). Lo importante: un gráfico sin contexto es una colección de pixeles abstractos; un gráfico con el contexto justo se convierte en una herramienta de comprensión.

En el análisis explicativo, es fundamental reflexionar y ser extremadamente claro en tres preguntas que retomamos de la Cápsula 05 (El contexto manda): Quién (a quién te diriges — analista, paciente, ciudadano, inversor), Qué (qué quieres que tu audiencia sepa o haga concretamente) y Cómo (qué datos usas para reforzar el mensaje). Son las mismas preguntas que ya vimos como definitorias del contexto en general; lo nuevo aquí es aplicarlas operativamente al rediseño de un gráfico específico — qué información agregar, qué destacar, qué borrar.

El tono también importa. ¿Estás celebrando un logro? ¿Motivando a la acción? ¿El tema es ligero o serio? El tono elegido influirá en decisiones de diseño como los colores, la tipografía y el tipo de interactividad. Define el tono desde el principio para asegurar que todas las decisiones de diseño estén alineadas con tu objetivo.

Quién, Qué y Cómo con ejemplos

Veamos el quién, el qué y el cómo en acción, sobre dos casos — cada uno comparando una versión cruda con su rediseño.

Este gráfico de barras muestra los tickets recibidos y procesados a lo largo del año (Fig. 19.3): al final hay una brecha creciente entre ambas series, pero el gráfico no le dice al lector qué se espera que haga con ese dato.

🟢 demo en vivoTickets — versión básica, sin contexto narrativo
Fig. 19.3: Gráfico de barras de tickets recibidos y procesados a lo largo del año, embebido como demo en vivo, en su versión cruda: técnicamente correcto, con un título descriptivo ("Ticket Trend"). No responde ninguna de las tres preguntas —quién, qué, cómo—: se ve la brecha creciente al final, pero no qué se espera que el lector haga con ella. Es el "antes" del rediseño.

El rediseño, en cambio, sí responde a las tres preguntas (Fig. 19.4): mismo dato, pero ahora con un destinatario claro, un pedido concreto y una manera de demostrarlo.

🟢 demo en vivoTickets — rediseño narrativo, en vivo
Fig. 19.4: El mismo gráfico de tickets rediseñado con contexto narrativo, embebido como demo en vivo, y que ahora sí responde el tridente. Quién: los tomadores de decisiones de la empresa — gente de finanzas y administración. Qué: que aprueben contratar a dos personas, porque el equipo ya no da abasto con las solicitudes. Cómo: la brecha creciente entre tickets recibidos y procesados, resaltada con color y una anotación, y un título accionable ("Please approve the hire of 2 FTEs") en lugar del descriptivo.

Pasemos a otro caso. Una encuesta sobre interés en la ciencia, presentada como dos gráficos de pastel lado a lado (Fig. 19.5), recoge opiniones antes y después de un programa educativo; pero comparar las dos tortas obliga al lector a hacer aritmética visual.

Dos pasteles con resultados antes/después de un programa de ciencia. El lector tiene que comparar sectores en dos tortas distintas — tarea perceptiva miserable. Segundo
Fig. 19.5: Dos pasteles con resultados antes/después de un programa de ciencia. El lector tiene que comparar sectores en dos tortas distintas — tarea perceptiva miserable. Segundo "antes" de la cápsula que prepara otro rediseño: cuando los pasteles obligan a aritmética visual, el problema no son los datos, es la elección de gráfico.

El rediseño como slope chart (Fig. 19.6) responde el mismo tridente y, de paso, vuelve legible de un vistazo lo que dos pasteles escondían.

La encuesta de ciencia rediseñada como slope chart, que responde el tridente. **Quién:** quien financia el programa de ciencia. **Qué:** que el programa funcionó y vale la pena seguir financiándolo. **Cómo:** las líneas que cruzan del
Fig. 19.6: La encuesta de ciencia rediseñada como slope chart, que responde el tridente. Quién: quien financia el programa de ciencia. Qué: que el programa funcionó y vale la pena seguir financiándolo. Cómo: las líneas que cruzan del "antes" al "después" muestran el salto de la indiferencia al entusiasmo sin que el ojo tenga que reconstruir la diferencia entre dos tortas, y un título accionable ("Pilot program was a success") cierra la narrativa.

🎯 El patrón del rediseño explicativo. Los dos casos siguen la misma receta. Responde las tres preguntas —quién lee, qué quieres que haga, cómo se lo muestras— y después cambia el título de descriptivo ("Ticket Trend", "Survey Results") a accionable ("Please approve the hire of 2 FTEs", "Pilot program was a success"). Es el cambio más barato y más poderoso del rediseño: mismo dato, mensaje claro.

Recuerda: en exploratoria es distinto

En una InfoVis exploratoria no es necesario resaltar ningún punto específico de la historia, ya que cada usuario (ej. científico de datos) construye su propia interpretación a través de la exploración. La flexibilidad en la exploración de datos permite descubrir insights y patrones por sí mismos, siempre y cuando se ofrezca suficiente contexto para facilitar su comprensión.

Lo que vimos en esta cápsula —resaltar las dos perlas, contextualizar el quién/qué/cómo, narrar con título y texto— vale principalmente para la explicativa. Cuando construyas un dashboard de exploración, deja que las herramientas (filtros, hover, zoom) hagan el trabajo.


Data-Ink ratio y atributos preatentivos: menos tinta, más mensaje

Bórralo, No lo Necesitas

Visualizetor: máquina letal de dashboards

Menos es Más. Maximiza la proporción de tinta usada para datos (Data-Ink Ratio). Si una grilla distrae, bórrala. Si un color no aporta info, a la basura.

La excelencia gráfica según Tufte

Antes de hablar de cómo "borrar tinta", conviene fijar el horizonte: ¿hacia qué apunta una buena visualización? Tufte propone el concepto de excelencia gráfica como combinación de tres ingredientes que se sostienen mutuamente:

  1. Sustancia — una historia. Toda visualización debería tener un punto claro, una narrativa que el lector pueda seguir. La historia es lo que le da sentido a los datos y diferencia un gráfico útil de uno meramente decorativo.
  2. Estadística sólida. Los datos tienen que estar bien tomados, bien calculados, y la representación tiene que respetar su naturaleza. Una visualización elegante sobre datos incorrectos no es excelencia: es propaganda.
  3. Diseño elegante y eficiente. Elegancia aquí significa tres cosas concretas: claridad (el lector entiende sin esfuerzo), precisión (cada elemento gráfico es exacto y honesto) y eficiencia (la mayor cantidad de ideas en el menor tiempo, espacio y tinta posibles).

La eficiencia es el puente con los principios que vienen a continuación. La idea del "ink ratio" — la proporción de tinta dedicada a datos significativos versus tinta dedicada a decoración — es la que maximiza esa eficiencia. Tufte la sintetizó en un esquema famoso (Fig. 20.1): las ideas del autor se proyectan al lector a través del tiempo que éste dedica al gráfico, y se materializan en la tinta (ink) sobre el espacio disponible. La excelencia gráfica es maximizar la transferencia de ideas por unidad de tinta y de tiempo. Y por encima de los tres ingredientes, la excelencia gráfica también exige contar la verdad sobre los datos: presentación honesta y sin distorsiones, porque sin confianza no hay decisión bien tomada.

El propósito de una visualización es simple: que el lector reciba la **mayor cantidad de ideas posibles**, en el **menor tiempo** y en el **menor espacio**. Para conseguirlo hay que optimizar los **pixeles** — cada pixel encendido debe aportar significado, y todo pixel que no informe es ruido que se interpone entre las ideas del autor y la mente del lector. Versión moderna del diagrama clásico de Tufte: la
Fig. 20.1: El propósito de una visualización es simple: que el lector reciba la mayor cantidad de ideas posibles, en el menor tiempo y en el menor espacio. Para conseguirlo hay que optimizar los pixeles — cada pixel encendido debe aportar significado, y todo pixel que no informe es ruido que se interpone entre las ideas del autor y la mente del lector. Versión moderna del diagrama clásico de Tufte: la "tinta" sobre papel se vuelve "pixel" sobre pantalla, pero la regla es la misma. (adaptado de Tufte, 1983)

El cartel del baño — una analogía (con dibujito)

🚽 Antes de los gráficos, un cartel de baño. Sobre un W.C. público alguien pegó tres instrucciones bienintencionadas. La galería que sigue reconstruye, acto por acto, cómo un diseñador las va tachando hasta dejar sólo lo esencial. Fíjate qué se atreve a borrar — incluso lo que «parecía importante»: ahí está toda la cápsula en miniatura.

Haz clic en cada paso para seguir el razonamiento: Galería 20.1

Menos es Más: Cinco Principios para Maximizar la Eficiencia

A continuación, se detallan cinco principios clave para lograr una visualización gráfica sobresaliente:

  1. Mostrar los Datos: Este principio sostiene que la visualización debe centrarse en mostrar los datos de manera clara y directa, sin distracciones ni elementos superfluos. La esencia de la visualización debe ser la presentación efectiva de la información, permitiendo que los datos hablen por sí mismos.
  2. Maximizar la Relación Tinta-Datos Dentro de lo Razonable: Se refiere a la idea de aumentar la proporción de tinta utilizada para representar datos en relación con la tinta utilizada para otros elementos. Esto significa que la mayor parte del espacio en la visualización debe dedicarse a mostrar datos significativos, minimizando el uso de tinta para elementos decorativos o innecesarios. Sin embargo, esto debe hacerse con prudencia, asegurando que la claridad y la efectividad no se vean comprometidas.
  3. Eliminar la Tinta No Relacionada con los Datos Dentro de lo Razonable: Este principio implica eliminar cualquier tinta que no contribuya directamente a la representación de los datos. Esto incluye elementos decorativos, líneas, etiquetas o colores que no añaden valor a la comprensión de la información. La eliminación de tinta no esencial ayuda a evitar distracciones y a enfocar la atención en los datos relevantes, pero siempre manteniendo la legibilidad y la funcionalidad de la visualización.
  4. Eliminar la Tinta de Datos Redundante: Se refiere a la eliminación de elementos gráficos repetitivos o redundantes que no aportan información adicional. Esto incluye duplicaciones en la representación de datos o elementos gráficos que simplemente repiten lo que ya está claramente expresado en otras partes de la visualización. El objetivo es simplificar la visualización para mejorar la comprensión sin perder información importante.
  5. Revisar y Editar: Este principio destaca la importancia de revisar y ajustar la visualización para asegurar que cumpla con los estándares de excelencia gráfica. La revisión y edición implican ajustar detalles, eliminar errores y optimizar el diseño para mejorar la claridad, precisión y eficiencia de la visualización. Es un proceso continuo que busca perfeccionar la presentación de los datos.

Siguiendo estos principios, se puede crear una visualización de datos que no solo sea visualmente atractiva, sino también efectiva en la transmisión de información clave y en la facilitación de una comprensión rápida y precisa por parte del espectador. Veámoslos en acción aplicados a un caso real.

El bacon paso a paso — menos es más en acción

🥓 Doce versiones, un elemento borrado por vez. La próxima galería toma un bar chart real —calorías de comida chatarra— y le quita una cosa a la vez: la grilla, el borde, el relleno de color, las etiquetas redundantes… de la versión original recargada a la final, limpia. No es minimalismo por estética: es eficiencia comunicativa, cada píxel trabajando para el mensaje.

El gráfico quiere contar que el bacon (533 cal) pertenece al grupo "alto", junto a las papas fritas y lejos de la pizza. Haz clic en cualquier paso para verlo en grande: Galería 20.2

Visualizaciones comunes (¡y efectivas!)

📊 Diez gráficos resuelven el 90 % de los casos. No hace falta inventar gráficos exóticos. La galería que sigue es un menú de los diez tipos que cubren casi todo en datos de negocio — y, para cada uno, cuándo conviene y dónde se equivoca la gente. Cuando dudes, elige de esta lista antes que de tu imaginación.

Lo más simple suele ser lo mejor: Galería 20.3

Resaltar un punto en la historia

En el contexto de la visualización de información explicativa, es fundamental utilizar estrategias de diseño que dirijan la atención del usuario hacia los puntos clave de la historia que se está presentando. Esto incluye el uso de colores distintivos para resaltar elementos importantes y de texto anotativo para proporcionar contexto adicional.

El ejercicio de los "3"

🔢 ¿Cuántos 3 hay en estos números? Vas a ver el mismo bloque de dígitos dos veces. En la primera imagen, cuenta los 3 a mano — vas a sufrir un poco. En la segunda, los 3 están en color: la respuesta te salta a la cara sin que la busques. Esa diferencia, sentida en tu propio cuerpo, es un atributo preatentivo.

Pruébalo tú mismo: Galería 20.4

El color y el peso (la negrita) son justamente eso: atributos preatentivos que el cerebro detecta en milisegundos, sin esfuerzo consciente. Úsalos para llevar la atención del lector exactamente adonde quieres.

Aplicado a gráficos

🎨 El color, bien usado y mal usado. El experimento de los «3» se traslada ahora a gráficos de verdad — barras, líneas, slope charts. La galería muestra usos correctos del color para dirigir la mirada, y también dos contraejemplos rainbow: cuando todos los elementos gritan a la vez, ninguno guía.

Usos correctos y errores frecuentes: Galería 20.5

Texto: tu mejor amigo

✍️ El texto guía tanto como el color. Existe el reflejo de pensar «primero el gráfico; el texto, si sobra lugar». Es un error: una anotación bien puesta, una palabra en negrita o un tamaño distinto dirigen la lectura con la misma fuerza que un color. La galería recorre esas técnicas tipográficas, una por una, con ejemplos.

Anotaciones, negrita, itálica, tamaño, jerarquías combinadas: Galería 20.6

Fuentes: mejor sin serifas

En InfoVis, si no estás seguro, ve a lo seguro y usa fuentes sin serifas. La comparación tipográfica (Fig. 20.2) resume la regla en un solo vistazo: una "Aa" sin remates (a la izquierda, ✓ YES) frente a la misma "Aa" con remates en cada trazo (a la derecha, ≈ MAYBE). Las sans-serif son menos ornamentadas y se leen nítidas en pantalla incluso a tamaños chicos; las serif, con esos remates en cada extremo, ensucian la lectura en cuerpos pequeños y compiten visualmente con las marcas de datos. Familias sans-serif gratuitas y solventes hay hartas — Roboto, Lato, Open Sans, Source Sans Pro, Noto Sans, Inter, Archivo — y casi nunca te vas a equivocar eligiendo una de esas. Las serif (Roboto Serif, Georgia, Garamond) rinden bien en libros impresos a alta resolución y pueden funcionar para títulos cuando se busca un toque editorial, pero requieren criterio tipográfico: si no sabes bien cuándo sus remates suman al texto, mejor déjalas para quien sí lo sabe.

Sans-serif vs serif:
Fig. 20.2: Sans-serif vs serif: "Aa" en ambas familias con la regla práctica del Data-Ink ratio aplicada a la tipografía. La sans-serif es la elección segura por defecto (✓ YES en verde) — menos ornamento, mejor lectura en pantalla, menos tinta tipográfica desperdiciada. La serif requiere oficio (≈ MAYBE en naranja): funciona en manos de un diseñador que sabe cuándo los remates aportan al texto, pero usada sin criterio añade ruido visual al gráfico. Si no estás seguro de cómo manejarla, ve a lo seguro y elige sans-serif — las serifs déjalas a quien sabe.

Ordenar por valor

🔡 El orden alfabético no es «el» orden: es un descuido. Vas a ver el mismo ranking de exportadores de armas dos veces — primero como lo deja la herramienta, después ordenado por valor. Una lista de países es un dato nominal: no tiene un orden propio, así que «alfabético» no es más correcto que cualquier otro — es sólo el que la herramienta eligió por ti. Y si igual hay que elegir uno, elige el que cuenta la historia.

Después de borrar lo superfluo y de resaltar lo importante, queda un tercer ajuste que mejora el mensaje sin gastar una gota de tinta extra: el orden en que se disponen las categorías. No cambia ni un dato; sólo decide en qué fila va cada uno. Y, bien usado, convierte el gráfico en una respuesta en lugar de una búsqueda.

Considera un gráfico de lollipop que muestra la cantidad de armas vendidas por varios países en 2017. Por defecto (Fig. 20.3), los países aparecen en orden alfabético, lo que mezcla magnitudes grandes y pequeñas en cualquier posición y dificulta las comparaciones rápidas: los que más venden, como Estados Unidos y Rusia, saltan a la vista, pero comparar al resto exige un esfuerzo real del lector.

Lollipop de exportadores de armas en 2017, ordenado alfabéticamente — como Excel o cualquier herramienta lo hace por defecto. Es el
Fig. 20.3: Lollipop de exportadores de armas en 2017, ordenado alfabéticamente — como Excel o cualquier herramienta lo hace por defecto. Es el "antes" del último tema de la cápsula: el orden de las categorías es una decisión de diseño, y dejarlo en alfabético cuando podrías ordenar por valor está sacrificando legibilidad por una convención automática.

Al reordenar el gráfico según los valores de venta (Fig. 20.4), la visualización se vuelve mucho más informativa: ahora es inmediato ver que Francia es el tercer mayor exportador, seguido por Alemania, Israel y el Reino Unido. Las barras ordenadas forman una escalera descendente — una forma que el ojo lee de un vistazo. El ranking, que antes había que reconstruir número a número, pasó a ser preatentivo: la misma lectura sin esfuerzo que acabamos de ver con el color y la negrita.

El mismo lollipop ordenado por magnitud descendente. La comparación se vuelve trivial — EE. UU. y Rusia en la cima, después Francia, Alemania, Israel, Reino Unido. Demuestra el principio final de la cápsula: reordenar los datos por su valor es uno de los gestos de diseño más baratos y de mayor impacto en la legibilidad. Siempre considerarlo antes de exportar el gráfico.
Fig. 20.4: El mismo lollipop ordenado por magnitud descendente. La comparación se vuelve trivial — EE. UU. y Rusia en la cima, después Francia, Alemania, Israel, Reino Unido. Demuestra el principio final de la cápsula: reordenar los datos por su valor es uno de los gestos de diseño más baratos y de mayor impacto en la legibilidad. Siempre considerarlo antes de exportar el gráfico.

¿Cuándo conviene NO reordenar? Sólo cuando la variable es ordinal — los meses del año, los días de la semana, las tallas S/M/L —: ahí el orden es parte del significado del dato y hay que respetarlo. Y ese es justamente el criterio para decidir. Pregúntate qué tipo de dato tienes en el eje: si es ordinal, el orden ya viene dado; si no lo es —y la mayoría de las variables categóricas nominales no lo son—, ningún orden es «el correcto», ni siquiera el alfabético. Puestos a elegir uno, el que comunica gana: ordena por valor.

Recuerda: vale para la explicativa

Recuerda que en una visualización de datos exploratoria, a diferencia de la explicativa, las estrategias de diseño para resaltar puntos específicos no son tan necesarias. El objetivo es permitir que cada usuario explore los datos de manera independiente y construya su propia interpretación sin guías predefinidas. En todos casos, sin embargo, es esencial proporcionar contexto adecuado para que los usuarios comprendan el propósito de su exploración y lo que están analizando. La flexibilidad en la exploración de datos permite descubrir insights y patrones por sí mismos, siempre y cuando se ofrezca suficiente contexto para facilitar su comprensión.


Cómo evaluar una InfoVis: absoluta/comparativa, formativa/sumativa, cuali/cuanti

Tu Diseño No Es Bueno Porque Sí

Visualizetor: máquina letal de dashboards

¿Creen que su gráfico es bueno porque a ustedes les gusta? Monumento al ego. Evalúen. Absoluta o Comparativa. Formativa o Sumativa. Cualitativa o Cuantitativa.

Esta cápsula presenta los marcos conceptuales para pensar la evaluación de una InfoVis. Las técnicas concretas — think aloud, heurísticas, cuestionarios y pruebas cronometradas — se detallan en la cápsula siguiente (Cápsula 21).

Evaluación Absoluta y Comparativa

La evaluación de visualizaciones de datos puede abordarse desde dos enfoques diferentes: la evaluación absoluta y la evaluación comparativa.

Evaluación Absoluta

La evaluación absoluta se centra en determinar si una visualización de datos específica es efectiva y adecuada por sí misma. El esquema (Fig. 21.1) sintetiza el procedimiento: se pasa una sola infovis por un colador de criterios independientes — claridad, precisión, usabilidad, accesibilidad, interacción y satisfacción del usuario — sin necesidad de un referente comparativo. A través de este tipo de evaluación, se pueden identificar oportunidades de mejora y realizar ajustes necesarios para optimizar la visualización.

La evaluación **absoluta** examina una sola infovis preguntándose si funciona por sí misma. La pasa por un colador de criterios independientes — claridad, precisión, usabilidad, accesibilidad, interacción, satisfacción — sin necesidad de un referente comparativo. El resultado no es un veredicto binario sino una lista de oportunidades de mejora concretas que orientan la próxima iteración.
Fig. 21.1: La evaluación absoluta examina una sola infovis preguntándose si funciona por sí misma. La pasa por un colador de criterios independientes — claridad, precisión, usabilidad, accesibilidad, interacción, satisfacción — sin necesidad de un referente comparativo. El resultado no es un veredicto binario sino una lista de oportunidades de mejora concretas que orientan la próxima iteración.

Evaluación Comparativa

Por otro lado, la evaluación comparativa implica analizar y comparar dos o más visualizaciones de datos para detectar diferencias significativas en su desempeño y eficacia. Este tipo de evaluación puede ser de dos tipos:

  1. Comparación Longitudinal: este enfoque se utiliza para evaluar distintas versiones de la misma visualización a lo largo del tiempo (Fig. 21.2). Permite identificar mejoras o retrocesos en la efectividad de la visualización tras la implementación de cambios. La comparación longitudinal es útil para medir el impacto de las modificaciones realizadas y para asegurar que las actualizaciones en el diseño realmente mejoren la experiencia del usuario.
  2. Comparación Transversal: en este caso, se comparan diferentes visualizaciones de datos que abordan el mismo tema o conjunto de datos (Fig. 21.3). Esta evaluación busca identificar cuál de las visualizaciones es más efectiva para comunicar la información, facilitando la selección de la mejor opción. La comparación transversal puede revelar qué estilos, formatos o enfoques son más atractivos o comprensibles para los usuarios.
La comparativa **longitudinal** sigue la **misma** infovis en distintos momentos — v1, v2, v3 — y mide cómo cambian las métricas tras cada rediseño. En el ejemplo, la satisfacción del usuario sube de 3.1 a 3.8 a 4.5 después de dos rondas de ajustes. Sirve para verificar que las iteraciones efectivamente mejoran la experiencia y no la empeoran sin querer: sin medición longitudinal,
Fig. 21.2: La comparativa longitudinal sigue la misma infovis en distintos momentos — v1, v2, v3 — y mide cómo cambian las métricas tras cada rediseño. En el ejemplo, la satisfacción del usuario sube de 3.1 a 3.8 a 4.5 después de dos rondas de ajustes. Sirve para verificar que las iteraciones efectivamente mejoran la experiencia y no la empeoran sin querer: sin medición longitudinal, "mejorar" es sólo una intención.
La comparativa **transversal** confronta varias visualizaciones **distintas** que cuentan los mismos datos — barras, circular, líneas — para escoger cuál los comunica mejor. La elegida (en el ejemplo, las barras, marcadas con borde discontinuo) gana por su capacidad de responder a la pregunta de fondo, no por estética. Es el tipo de evaluación que justifica decisiones de diseño con evidencia, no con intuición.
Fig. 21.3: La comparativa transversal confronta varias visualizaciones distintas que cuentan los mismos datos — barras, circular, líneas — para escoger cuál los comunica mejor. La elegida (en el ejemplo, las barras, marcadas con borde discontinuo) gana por su capacidad de responder a la pregunta de fondo, no por estética. Es el tipo de evaluación que justifica decisiones de diseño con evidencia, no con intuición.

Los dos enfoques son complementarios: la absoluta dice si una infovis funciona; la comparativa, cuál de varias alternativas funciona mejor.

Evaluación Formativa y Sumativa

La evaluación de visualizaciones también puede abordarse desde enfoques formativos y sumativos. La línea de tiempo (Fig. 21.4) sitúa ambos enfoques en el ciclo de vida del proyecto: la formativa ocurre durante el desarrollo, en puntos repetidos, mientras que la sumativa se aplica al final, una vez entregado el producto. Cada uno de estos enfoques — sin que uno excluya al otro — cumple un rol específico en el proceso de desarrollo, asegurando que la infovis sea efectiva y cumpla con los objetivos establecidos.

El eje del **cuándo** sitúa los dos enfoques en la línea de tiempo del proyecto. La evaluación **formativa** ocurre repetidamente durante el desarrollo — detectar fallos, recoger feedback continuo, corregir a tiempo — antes de que los problemas se vuelvan caros. La **sumativa** llega al final, una vez entregado el producto, para validar si cumple los objetivos planteados al inicio. Ambas son complementarias: una mejora el proceso, la otra valida el resultado.
Fig. 21.4: El eje del cuándo sitúa los dos enfoques en la línea de tiempo del proyecto. La evaluación formativa ocurre repetidamente durante el desarrollo — detectar fallos, recoger feedback continuo, corregir a tiempo — antes de que los problemas se vuelvan caros. La sumativa llega al final, una vez entregado el producto, para validar si cumple los objetivos planteados al inicio. Ambas son complementarias: una mejora el proceso, la otra valida el resultado.

Evaluación Formativa

La evaluación formativa se lleva a cabo durante la fase de desarrollo de la visualización. Su objetivo principal es identificar fallos, debilidades o áreas de mejora en etapas tempranas del proceso, antes de que se complete la versión final. A través de la retroalimentación continua de usuarios y expertos, se pueden realizar ajustes y modificaciones en tiempo real, asegurando que la visualización evolucione de manera efectiva. Este enfoque permite abordar problemas antes de que se conviertan en obstáculos significativos, mejorando así la calidad del producto final y alineándolo más estrechamente con las necesidades de los usuarios.

Evaluación Sumativa

Por otro lado, la evaluación sumativa se realiza al final de la fase de desarrollo, una vez que se ha entregado la solución final. Su propósito es evaluar si la visualización cumple con los requisitos y expectativas establecidos al inicio del proyecto. Esta evaluación se centra en medir la efectividad de la infovis en términos de usabilidad, claridad y capacidad para comunicar la información de manera efectiva. Al realizar una evaluación sumativa, se pueden identificar fortalezas y debilidades finales, proporcionando una visión global del impacto de la visualización en el público objetivo. Los resultados de esta evaluación pueden influir en futuras iteraciones o proyectos relacionados.

La evaluación formativa garantiza una evolución continua y mejora del diseño, mientras que la sumativa proporciona una validación crítica del producto final y su alineación con las metas originales.

Evaluación Cualitativa y Cuantitativa

La distinción entre cualitativo y cuantitativo es transversal a las dos anteriores y describe qué clase de evidencia se recoge sobre la InfoVis.

  • Evaluación Cualitativa — busca comprender experiencias, percepciones y comportamientos de los usuarios al interactuar con la visualización. El repertorio típico (Fig. 21.5) reúne las cuatro técnicas centrales: entrevistas uno a uno, grupos focales, observación directa y think aloud. Su fuerza está en captar matices sobre cómo y por qué los usuarios interactúan de cierta manera — muestras pequeñas, evidencia profunda.
  • Evaluación Cuantitativa — recoge datos numéricos que se analizan estadísticamente. Las métricas clásicas (Fig. 21.6) son el tiempo de ejecución, la tasa de errores, las puntuaciones en escalas Likert y el tamaño de la muestra. Su fuerza está en permitir comparaciones y generalizaciones a partir de muestras más amplias — muestras grandes, evidencia agregada.
La evaluación **cualitativa** responde al *qué pasa* y al *por qué*. Se apoya en cuatro técnicas centrales — entrevistas uno a uno, grupos focales, observación directa del usuario y think aloud — que aceptan muestras pequeñas a cambio de evidencia profunda sobre matices, contexto y motivaciones. Es lo que te dice por qué los usuarios hacen lo que hacen, no sólo qué hacen.
Fig. 21.5: La evaluación cualitativa responde al qué pasa y al por qué. Se apoya en cuatro técnicas centrales — entrevistas uno a uno, grupos focales, observación directa del usuario y think aloud — que aceptan muestras pequeñas a cambio de evidencia profunda sobre matices, contexto y motivaciones. Es lo que te dice por qué los usuarios hacen lo que hacen, no sólo qué hacen.
La evaluación **cuantitativa** responde al *cuánto*. Mide tiempo de ejecución, tasas de error, puntuaciones en escalas Likert y tamaños de muestra; los procesa estadísticamente para comparar, generalizar y medir impacto. Su fuerza está en las muestras grandes y la evidencia agregada que permite afirmar — con número — que una solución funciona mejor que otra.
Fig. 21.6: La evaluación cuantitativa responde al cuánto. Mide tiempo de ejecución, tasas de error, puntuaciones en escalas Likert y tamaños de muestra; los procesa estadísticamente para comparar, generalizar y medir impacto. Su fuerza está en las muestras grandes y la evidencia agregada que permite afirmar — con número — que una solución funciona mejor que otra.

Los dos enfoques no son excluyentes: lo más común es un protocolo mixto que combina las dos clases de evidencia. La parte cualitativa te dice qué pasa, la cuantitativa te dice cuánto.

Ejemplo integrador: gestos de zoom en pantalla táctil

Para ver cómo los tres ejes (absoluto/comparativo, formativo/sumativo, cuali/cuanti) se cruzan en un estudio real, sirve un ejemplo del 2015. Se diseñaron dos gestos nuevos para hacer zoom en mapas y documentos sobre pantalla táctil — Tap&Tap para smartphones (controlable con una sola mano) y Two-Finger-Tap para tablets — como alternativas al clásico "pellizcar". La pregunta era simple: ¿son más rápidos y mejor percibidos que el gesto tradicional?

El estudio involucró a 18 usuarios de entre 22 y 42 años, todos usuarios habituales de pantallas táctiles. La mitad usaba el smartphone con una sola mano de manera regular; hartos necesitaban usar mapas con una mano (lo que ya por sí solo justifica el problema). El protocolo combinó dos técnicas complementarias:

  • Cuestionario psicométrico con escala Likert de 6 puntos, aplicado al final de la sesión, para evaluar cada gesto en dimensiones como utilidad, intuitividad, claridad. Las preguntas se replicaron para los tres gestos (Tap&Tap, Two-Finger-Tap, pellizcar) para poder comparar. → evaluación comparativa + cuantitativa.
  • Prueba de usuario cronometrada con 20 tareas concretas de zoom — del mapamundi hasta puntos específicos como Cerdeña, París, Madrid, el Reino Unido. El software registraba el tiempo automáticamente. → evaluación sumativa + cuantitativa.

Los resultados cuantitativos fueron contundentes: Two-Finger-Tap ahorró un 30% del tiempo respecto al pellizco tradicional en tablets, y Tap&Tap ahorró un 14% en smartphones. Combinado con la evaluación subjetiva del cuestionario, el conjunto dio evidencia robusta de que los nuevos gestos mejoraban la experiencia.

Es un ejemplo concreto de cómo articular dos métodos complementarios: el cuestionario cuenta cómo se sintió la interacción, la prueba cronometrada cuenta cómo funcionó objetivamente. Ningún método solo habría dado la misma confianza.


Think aloud, heurísticas de Zuk-Carpendale y checklist del curso

Cuatro Cabros Pensando en Voz Alta

Visualizetor: máquina letal de dashboards

¿Cómo se evalúa en concreto? Usen el 'Think Aloud': pongan a 4 usuarios a usar su sistema y pidan que hablen en voz alta. Sus confusiones son los errores de ustedes.

Esta cápsula es el brazo práctico de la anterior: aquella dio los frameworks conceptuales (absoluta/comparativa, formativa/sumativa, cuali/cuanti); acá presentamos los métodos concretos para ejecutar una evaluación en un proyecto real: think aloud, heurísticas como soporte, cuestionarios psicométricos y pruebas de usuario cronometradas.

Think Aloud con heurísticas como soporte

El think aloud es el método cualitativo central: se observa a un grupo pequeño de usuarios (típicamente 4 a 5) mientras interactúan con la infovis, y se les pide verbalizar en voz alta lo que están pensando mientras la usan. Las pausas, las confusiones, las preguntas que surgen son la materia prima del análisis. El esquema (Fig. 22.1) recorre el método de punta a punta — de la sesión a la salida.

El método think aloud en cuatro etapas, de izquierda a derecha: la **sesión** donde los usuarios verbalizan, la **materia prima** que dejan (pausas, confusiones, preguntas), la **interpretación** de esa evidencia contra las heurísticas, y la **salida** — cada problema de usabilidad como el contraste entre lo observado y la heurística violada.
Fig. 22.1: El método think aloud en cuatro etapas, de izquierda a derecha: la sesión donde los usuarios verbalizan, la materia prima que dejan (pausas, confusiones, preguntas), la interpretación de esa evidencia contra las heurísticas, y la salida — cada problema de usabilidad como el contraste entre lo observado y la heurística violada.
  • Interpretación: los comportamientos y comentarios de los usuarios se analizan en relación con heurísticas de diseño conocidas — principios validados por la comunidad InfoVis (ver lista más abajo).
  • Salida: una lista de problemas de usabilidad, definidos como discrepancias entre el comportamiento del usuario y las heurísticas.
  • Uso típico: método formativo — los problemas detectados se transforman en oportunidades de mejora para la siguiente iteración.

📌 Importante. Este es el método que se espera utilicen en los proyectos del curso: pongan a 4 usuarios reales (no compañeros del equipo) frente al prototipo, pídanles que verbalicen, registren los puntos donde se traban. Es barato, rápido y revela más de lo que cualquier auto-revisión podría.

Heurísticas de Zuk & Carpendale — checklist transversal del curso

Las heurísticas de Zuk y Carpendale son 13 principios que condensan buena parte de lo que el curso vio, cápsula por cápsula. Sirven como soporte al think aloud y, sobre todo, como una checklist de auto-revisión rápida antes de mostrarle la InfoVis a alguien. Recórrelas una por una — donde el principio ya apareció, la imagen te devuelve a la cápsula que lo trató a fondo.

📊 1. Variables visuales aptas para comparar. Las diferencias de longitud, tamaño o posición tienen que ser bien visibles — y no todas las señales se comparan con la misma precisión.

El ranking que mide esa precisión: Fig. 22.2

Fig. 22.2: Ranking clásico de Cleveland y McGill (1985) sobre la precisión perceptiva de cada señal visual — de posición en escala común (más precisa) hasta color y densidad (menos). Es la base científica detrás de muchas reglas que la cápsula viene aplicando: por qué los bar charts ganan a los pastel, por qué los mapas de calor son una mala primera opción. No es opinión, es lectura ojométrica. (Cleveland & McGill, 1985)

🌈 2. El color no tiene orden. No esperes que el lector lea una secuencia en los tonos: el color es categórico, no ordinal — un arcoíris no dice «de menos a más».

Las tres dimensiones del color, y cuál sirve para qué: Fig. 22.3

Fig. 22.3: Descomposición del color en tono, saturación y brillo. Importante porque "el color" no es una sola variable sino tres independientes — y se pueden usar para codificar cosas distintas (categoría, magnitud, énfasis). Quien entienda esta descomposición deja de usar el color como decoración y empieza a usarlo como una variable visual con tres dimensiones de información.

🎨 3. El color depende del tamaño. Un mismo color se percibe distinto en un punto diminuto que en un bloque grande.

En elementos chicos, sube la saturación o el contraste para que el color siga siendo legible.

🌗 4. El contraste local engaña. Un color — o un gris — se percibe distinto según lo que tenga al lado: el vecindario altera lo que ves.

Las dos celdas parecen bien distintas (Fig. 22.4)… hasta que les borras el contexto de alrededor y se revela que son idénticas (Fig. 22.5).

Fig. 22.4: Heatmap de expresión génica. Las flechas moradas señalan dos celdas — GEN B / Muestra 4 y GEN H / Muestra 6. Míralas: ¿cuál tiene el valor más alto? La mayoría las ve claramente distintas — una más oscura, la otra más clara. Pero esa percepción depende por completo de los colores que las rodean: el ojo no juzga el color de una celda en sí mismo, sino en relación con su entorno inmediato. La respuesta llega en la figura siguiente.
Fig. 22.5: Los mismos datos del heatmap anterior, pero con el contexto cromático neutralizado: todas las celdas de alrededor pintadas de un gris uniforme, dejando sólo las dos marcadas. La sorpresa es total — GEN B / Muestra 4 y GEN H / Muestra 6 tienen exactamente el mismo valor (v=10). Lo que las hacía parecer distintas no eran los datos, sino el gradiente de color que las envolvía. El color de una celda no se percibe en sí mismo: se percibe en relación con lo que tiene al lado.

👁️ 5. Diseña para el daltonismo. Cerca del 8 % de los hombres no distingue ciertos pares de colores; el rojo-verde es el más traicionero.

Un mapa de la prevalencia del daltonismo en el mundo (Fig. 22.6) y ese mismo mapa como lo ve un ojo daltónico (Fig. 22.7) — ilegible justo para quien trata.

Fig. 22.6: Mapa mundial de la prevalencia del daltonismo rojo-verde (porcentaje de la población masculina), dibujado como bandas de isolíneas suaves sobre un océano azul oscuro. El núcleo rojo del 7-9 % cubre Norteamérica y Europa, rodeado de naranja (5-7 %); el amarillo del 3-5 % domina buena parte del mundo, con bolsones verdes del 1-3 % y algún punto por debajo del 1 %. Visión normal, escala verde-amarillo-rojo.
Fig. 22.7: El mismo mapa de prevalencia, simulado tal como lo percibe una persona con deuteranopía: la escala rojo-verde colapsa en tonos olivas y amarillos casi idénticos y las bandas dejan de distinguirse. La conclusión es directa: si no quieres este efecto, no uses rojo y verde.

6. Usa los atributos preatentivos con criterio. El color, el tamaño y la orientación los detecta el ojo en milisegundos, sin esfuerzo consciente.

Cuenta los «3» en gris uniforme (Fig. 22.8) y después con los «3» en color (Fig. 22.9): la segunda respuesta salta sola.

Fig. 22.8: Todos los dígitos en gris uniforme. La búsqueda es secuencial, lenta y con riesgo alto de error. Sin atributo preatentivo, el cerebro no tiene atajo y debe leer cada cifra una por una.
Fig. 22.9: Los "3" en color saturado y tamaño mayor. El cerebro los detecta antes incluso de decidir conscientemente buscarlos. Esto es un atributo preatentivo: una señal visual que viaja por una ruta más rápida que la atención voluntaria.

📏 7. Lo cuantitativo se lee en posición y tamaño. Para que el lector estime cantidades, codifica la magnitud en señales que se miden bien — posición y longitud antes que color o área.

El catálogo de señales visuales: Fig. 22.10

Fig. 22.10: Catálogo de las señales visuales disponibles para codificar datos — posición, longitud, ángulo, dirección, forma, área, volumen, color. Sirve como inventario antes de la pregunta clave de la cápsula: ¿el ojo humano lee todas estas señales con la misma precisión? La respuesta — no, ni de lejos — llega en la imagen de Cleveland-McGill.

🧊 8. Preserva la dimensionalidad del dato. Casi nunca uses 3D — y menos si los datos son 2D: la perspectiva deforma los tamaños y tapa valores.

El 3D que vuelve la lectura una adivinanza: Fig. 22.11

Fig. 22.11: Gráfico de barras 3D real (5 productos × 3 meses, renderizado con proyección en perspectiva genuina, no truco gráfico). Las barras del fondo (Mar, verde) realmente se ven más chicas que las del frente (Ene, azul), aunque tengan el mismo valor; unas tapan parcialmente a otras y leer un valor concreto se vuelve adivinar. Es la trampa visual de los gráficos de barras 3D de Excel, mostrada con la misma matemática 3D que la genera.

🗜️ 9. Más datos en menos espacio. Aprovecha cada pixel: un gráfico denso pero ordenado comunica más que diez gráficos sueltos.

Ideas por unidad de tinta y de espacio — la versión moderna del diagrama de Tufte: Fig. 22.12

Fig. 22.12: El propósito de una visualización es simple: que el lector reciba la mayor cantidad de ideas posibles, en el menor tiempo y en el menor espacio. Para conseguirlo hay que optimizar los pixeles — cada pixel encendido debe aportar significado, y todo pixel que no informe es ruido que se interpone entre las ideas del autor y la mente del lector. Versión moderna del diagrama clásico de Tufte: la "tinta" sobre papel se vuelve "pixel" sobre pantalla, pero la regla es la misma. (adaptado de Tufte, 1983)

✂️ 10. Borra lo superfluo. Cada gota de tinta que no codifica un dato compite con la que sí: si un elemento no aporta, fuera.

El antes y el después lado a lado — del gráfico recargado al limpio: Fig. 22.13

Fig. 22.13: Comparación final — el mismo dato presentado en el gráfico original (izquierda, con fondo de madera, leyenda redundante, bordes 3D y colores múltiples) y en la versión rediseñada (derecha, con valores embebidos sobre las barras y sólo el bacon destacado). El mensaje se vuelve evidente sin esfuerzo del lector.

🧩 11. Aprovecha las leyes de la Gestalt. Proximidad, similitud, continuidad: el ojo agrupa por su cuenta — diseña para que agrupe lo correcto.

Repaso de los principios: Leyes de la Gestalt.

🔭 12. Ofrece varios niveles de detalle. Primero la vista general, después el zoom y el filtro, y el dato puntual sólo cuando se pide.

Es el mantra de Shneiderman, que se trata a fondo más adelante, en la cápsula de interactividad.

✍️ 13. Integra el texto. Títulos, etiquetas y anotaciones son parte del gráfico, no un adorno: bien puestos, guían la lectura.

El mismo scatter sin una palabra de contexto (Fig. 22.14) y después anotado, vuelto una historia (Fig. 22.15).

Fig. 22.14: ¿Qué cuenta este scatter plot? Sin un solo rótulo de contexto es casi imposible decirlo: se ven puntos, pero no qué miden ni cuál sería una posición "buena" o "mala".
Fig. 22.15: El mismo scatter, ahora anotado: la diagonal de "pago igual", las etiquetas de zona y un punto destacado con flecha. El texto convierte una nube de puntos en una historia — la brecha salarial de género.

Que casi ninguna de estas heurísticas sea nueva no es casualidad: el curso entero está construido sobre estos principios. La lista funciona como inventario de cierre — antes de evaluar formalmente con usuarios, recórrela y verifica que el diseño no rompa ninguna de forma obvia.

Cuestionarios Psicométricos

Mientras el think aloud recoge evidencia cualitativa profunda con pocos usuarios, los cuestionarios psicométricos recogen evidencia cuantitativa con muestras más grandes (típicamente ~24 usuarios). Se administran después de una interacción — incluso breve, como una mirada de 10 segundos — y miden dimensiones percibidas de la InfoVis.

Estos cuestionarios pueden ser:

  • Evaluación absoluta: analizar la calidad de una única InfoVis, ver si los usuarios la perciben positivamente o no. Ejemplo: un test binomial sobre respuestas Likert.
  • Evaluación comparativa: comparar varias versiones de la misma InfoVis, o distintos grupos de usuarios. Ejemplo: un t-test (o equivalente no paramétrico) para detectar si las diferencias entre versiones son estadísticamente significativas.

Un cuestionario se considera validado si fue ampliamente adoptado por la comunidad académica o profesional, o si demostró confiabilidad medida con métricas estandarizadas (alfa de Cronbach, etc.). Un ejemplo validado específico para InfoVis es el de Locoro et al. (2017), que mide cinco dimensiones perceptivas: utilidad, claridad, capacidad informativa, belleza y valor general.

Pruebas de Usuario cronometradas

En una prueba de usuario los diseñadores observan a un grupo (~12 personas) realizando tareas concretas sobre la InfoVis, y registran datos objetivos:

  • Planificación: las tareas se diseñan de antemano según los objetivos específicos de la InfoVis (informar, demostrar, capacitar). Tienen que ser no triviales — el usuario debe usar la infovis de verdad.
  • Medidas cuantitativas: tasa de error, tiempo de ejecución, tasa de éxito. Datos objetivos del rendimiento.
  • Comparación: las pruebas de usuario son típicamente comparativas — se compara una versión con otra, o contra un valor óptimo de referencia.
  • Uso típico: método sumativo — se aplica con un diseño avanzado o terminado, para confirmar si cumple los objetivos.

Cómo combinar los métodos

Los tres métodos no compiten — se complementan. Una secuencia típica en un proyecto serio:

  1. Auto-revisión con la checklist de Zuk-Carpendale (gratis, 10 minutos). Filtra los errores obvios.
  2. Think aloud con 4-5 usuarios (formativo). Revela los puntos donde el usuario se traba. Salida: lista de problemas a corregir.
  3. Iterar el diseño corrigiendo lo encontrado en el paso 2.
  4. Cuestionario psicométrico con 20-25 usuarios sobre la versión refinada. Mide percepción cuantitativa.
  5. Prueba de usuario cronometrada con 10-15 usuarios (sumativa). Confirma rendimiento objetivo antes de cerrar el proyecto.

El ejemplo de los gestos Tap&Tap de la cápsula anterior muestra este patrón en acción: cuestionario psicométrico + prueba cronometrada, los dos juntos dieron evidencia robusta de que el diseño funcionaba.


Plotly.jsJavaScriptJSONCSVmap()

T1. Plotly.js: del CSV al gráfico estático en el navegador

Del Excel al gráfico en el navegador, paso a paso. Sin interacción todavía.

Excel hace gráficos. El navegador también — y mejor. Vamos del CSV al gráfico estático en menos líneas de código que las que tarda Excel en abrir el archivo.

¿Qué es Plotly.js?

Una librería open-source para gráficos interactivos basados en D3.js + WebGL. En esta cápsula la usamos solo para hacer gráficos estáticos: nada de eventos al hacer clic, nada de sonido. Eso vendrá después.

Por qué empezar estáticos. Una buena InfoVis tiene que comunicar antes de tocarla. Si necesita interacción para entenderse, la composición está mal. Construimos primero la versión "publicable" — la que funcionaría impresa.

Paso 1 — Diseñar los datos en Excel / Google Sheets

Empezamos en Excel (o Google Sheets) porque es el lugar más cómodo para ver y validar los datos antes de tocar código (Fig. 23.1). Una columna por variable, una fila por observación.

Hoja de Google Sheets con los datos de tickets recibidos y procesados por mes. Encarna el paso cero del flujo Plotly que enseña la cápsula: antes de tocar JavaScript, los datos viven en una planilla familiar donde se pueden validar, limpiar y compartir. El CSV es el puente entre el dato y el gráfico estático en el navegador.
Fig. 23.1: Hoja de Google Sheets con los datos de tickets recibidos y procesados por mes. Encarna el paso cero del flujo Plotly que enseña la cápsula: antes de tocar JavaScript, los datos viven en una planilla familiar donde se pueden validar, limpiar y compartir. El CSV es el puente entre el dato y el gráfico estático en el navegador.

En el ejemplo: month, processed, received.

Paso 2 — Exportar a CSV

File → Download → Comma-separated values (.csv). El archivo resultante es texto plano, una fila por línea, columnas separadas por coma:

month,processed,received
Ene,160,160
Feb,184,184
Mar,237,241
Abr,148,149
May,181,180
Jun,150,161
Jul,123,132
Ago,156,202
Sep,126,160
Oct,104,139
Nov,124,149
Dic,140,177

Paso 3 — Convertir CSV → JSON

Necesitamos pasar de CSV a un array de objetos JSON: el formato que JavaScript entiende nativamente. La salida que buscamos es:

[
  { "month": "Ene", "processed": 160, "received": 160 },
  { "month": "Feb", "processed": 184, "received": 184 },
  { "month": "Mar", "processed": 237, "received": 241 },
  ...
]

La conversión en pocas líneas de JavaScript

No hace falta depender de un sitio externo. Plain JS, una sola pasada por las filas:

function csvToJson(csv) {
  const [header, ...rows] = csv.trim().split('\n').map(r => r.split(','));
  return rows.map(r => Object.fromEntries(
    header.map((h, i) => {
      const v = r[i].trim();
      const n = Number(v);
      return [h.trim(), Number.isFinite(n) && v !== '' ? n : v];
    })
  ));
}

const datos = csvToJson(`month,processed,received
Ene,160,160
Feb,184,184
Mar,237,241`);
// → [{ month:"Ene", processed:160, received:160 }, ...]

Herramienta del curso — pegar y copiar

Para usarla cuando armas el dataset del proyecto, el curso distribuye una mini-página local con esa lógica adentro: pegas el CSV, te devuelve el JSON listo para copiar.

Abrir la herramienta CSV → JSON

Por qué local. Los datos no salen de tu navegador. Útil cuando trabajas con datasets sensibles (registros, cifras internas, …).

Paso 4 — Pegarlo como variable JS

Copiamos ese JSON en el HTML, dentro de un <script>, asignándolo a una variable:

let datos = [
  { month: "Ene", processed: 160, received: 160 },
  { month: "Feb", processed: 184, received: 184 },
  // …doce filas en total
];

A esta altura los datos están en el navegador. Falta darles a Plotly el formato que él espera.

Paso 5 — Plotly necesita arrays paralelos

Plotly no entiende un array de objetos. Necesita arrays separados, uno por columna. Es decir, en vez de:

[ {month:"Ene", y:160}, {month:"Feb", y:184}, … ]

Plotly quiere:

month = ["Ene", "Feb", …]
y     = [160,   184,   …]

Para extraer cada columna usamos el método .map() de los arrays. .map() recorre el array y devuelve uno nuevo aplicando una función a cada elemento. Acá la función simplemente toma una propiedad del objeto:

let month     = datos.map(item => item.month);     // ["Ene","Feb","Mar",…]
let processed = datos.map(item => item.processed); // [160, 184, 237, …]
let received  = datos.map(item => item.received);  // [160, 184, 241, …]

.map() en una línea: toma este array y dame uno nuevo, aplicando esta función a cada elemento. Es el método con el que vamos a reformatear casi todo en este curso.

Paso 6 — Crear el gráfico

Plotly recibe traces (los datos) y un layout (título, ejes, …):

const trace1 = { x: month, y: processed, type: 'bar', name: 'Procesados' };
const trace2 = { x: month, y: received,  type: 'bar', name: 'Recibidos'  };

const layout = { title: 'Volumen de tickets por mes' };

Plotly.newPlot('myDiv', [trace1, trace2], layout);

'myDiv' es el id del <div> donde se dibujará el gráfico. El resultado:

🟢 demo en vivoGráfico de barras básico — solo el mecanismo

📚 Didáctica · solo muestra el mecanismo, no es lo que esperamos en el proyecto

Pasar de "se ve" a "se entiende"

El demo anterior es funcional pero mudo. No dice qué está pasando. Una buena InfoVis usa anotaciones, énfasis y texto para llevar al lector al mensaje:

🟢 demo en vivoPor favor, contraten dos personas — versión narrativa

🎯 Esperada · este es el nivel del proyecto

Mismos datos, otra cosa. Llegamos ahí con líneas + marcadores + texto + anotaciones, y staticPlot: true para apagar incluso el zoom y el modebar:

Plotly.newPlot('myDiv', [trace1, trace2], layout, { staticPlot: true });

Otro ejemplo, otra historia — la brecha salarial en EE.UU.

Hasta acá vimos los pasos sobre un mismo dataset. Ahora miramos un caso diferente — otra InfoVis completa, otros datos, otro mensaje — pero del mismo nivel narrativo. Salario semanal mediano por estado, hombres en X, mujeres en Y:

🟢 demo en vivoBrecha salarial EE.UU. — versión estática

🎯 Esperada · este es el nivel del proyecto

Ingredientes que no estaban en el ejemplo anterior:

  • shapes — la línea diagonal "salario igual" (y = x)
  • annotations flotantes — "WOMEN PAID MORE", "MEN PAID MORE", "Equal pay"
  • Anotaciones específicas con flecha sobre dos estados (Wyoming, Vermont) que cuentan la historia: "menos equitativo" / "más equitativo"

Sin esos elementos sería un scatter cualquiera. Con ellos, se entiende sin explicación. Eso es nivel de proyecto.

Más versiones esperadas — proyectos del curso (estáticos)

Estas son visualizaciones hechas por estudiantes en años anteriores, acá mostradas en su versión estática (sin interacción ni sonido). Son nivel de proyecto: tienen contexto, jerarquía, paleta cuidada y un mensaje claro. La interacción y la sonificación se añaden después (T3, T4) cuando aportan, no porque sí.

Autos más rápidos del mundo

Comparativa visual de los autos más veloces — silueta vectorial, ejes limpios, jerarquía tipográfica.

🟢 demo en vivoAutos más rápidos — versión estática

🎯 Proyecto del curso (Grupo 29, 2024-II) · versión estática.

100m planos en las olimpiadas

Evolución temporal de los tiempos ganadores — un scatter narrado con anotaciones sobre los hitos importantes.

🟢 demo en vivo100m olímpicos — versión estática

🎯 Proyecto del curso (Grupo 13, 2024-II) · versión estática.

Viento V Región (Chile)

Velocidad del viento durante 2024 en la Quinta Región — serie temporal con dos eventos extremos anotados directamente sobre la línea (el sistema frontal del 13 de junio y los temporales del 2 de agosto).

🟢 demo en vivoViento V Región — versión estática

🎯 Proyecto del curso (Grupo 14, 2024-II) · versión estática.
Versiones didácticassolo muestran el mecanismo. NO son nivel de proyecto.
Plotly.jsscattergeochoroplethInkscape

T2. Plotly Geo: scattergeo, choropleth y SVG de contexto con Inkscape

Datos geoespaciales: scattergeo, choropleth y un mapa SVG de contexto

Los datos no viven solo en filas y columnas: tienen latitud, longitud, fronteras. Mapearlos no es magia — son tres líneas de Plotly y un SVG de contexto cuando el detalle lo pide.

Datos con dimensión geográfica

Cuando los datos tienen latitud/longitud o pertenecen a regiones (países, comunas, …), Plotly ofrece dos primitivas para mapearlos:

  • scattergeo — puntos sobre el mapa (coordenadas exactas)
  • choropleth — colorea regiones completas según un valor

A menudo se combinan: un choropleth de un solo color como fondo del país, con un scattergeo de eventos encima.

Paso 1 — Los datos de los terremotos

Trabajamos con un archivo de terremotos chilenos desde el año 2000. Cada fila tiene fecha, nombre, latitud, longitud, magnitud, regiones afectadas, si hubo tsunami y número de muertos:

[
  { "Fecha": "24-jul-2001", "Nombre": "Tarapacá",  "Lat": -19,    "Lon": -70,   "Magnitud": 6.5, "Tzunami": false, "Muertos": 1 },
  { "Fecha": "18-abr-2002", "Nombre": "Copiapó",   "Lat": -27.5, "Lon": -70.6, "Magnitud": 6.8, "Tzunami": false, "Muertos": 0 },
  { "Fecha": "14-nov-2007", "Nombre": "Tocopilla", "Lat": -22.3, "Lon": -70.0, "Magnitud": 7.7, "Tzunami": false, "Muertos": 2 },
  ...
]

Paso 2 — Versión didáctica: solo el mecanismo

Dos traces y Plotly.newPlot(). Sin contexto ni narrativa:

const fondoChile = {
  type: 'choropleth',
  locations: ['CHL'],
  z: [0],                                      // un solo valor, color uniforme
  colorscale: [[0,'#eee'], [1,'#eee']],
  showscale: false,
  hoverinfo: 'skip'
};

const sismos = {
  type: 'scattergeo',
  lon: terremotos.map(t => t.Lon),
  lat: terremotos.map(t => t.Lat),
  mode: 'markers',
  marker: {
    size:  terremotos.map(t => t.Magnitud * 3),
    color: terremotos.map(t => t.Magnitud),
    colorscale: 'YlOrRd', cmin: 5, cmax: 9
  }
};

Plotly.newPlot('map', [fondoChile, sismos], {
  geo: {
    scope: 'south america',
    showland: true, landcolor: '#fafafa',
    lonaxis: { range: [-78, -65] },
    lataxis: { range: [-58, -17] }
  }
});

🟢 demo en vivoMapa de Chile básico — versión didáctica

📚 Didáctica · solo muestra el mecanismo, no es lo que esperamos en el proyecto

Truco: el choropleth con z=[0] y un único color se usa solo como fondo del país. No codifica datos — sirve para que la silueta de Chile sea visible.

Paso 3 — Mapa de contexto con Inkscape

A veces el mapa built-in no alcanza. Quieres líneas de fallas, nombres de ciudades, una tipografía propia, etiquetas directas sobre los puntos importantes. La solución del curso: dibujar un SVG aparte con Inkscape y superponerlo sobre el mapa de Plotly (Fig. 24.1).

Captura de Inkscape, el editor SVG libre que la cápsula recomienda para preparar mapas y capas de contexto. Importante porque Plotly Geo necesita SVG bien estructurado para integrarse con scattergeo y choropleth: Inkscape resuelve el paso editorial sin gastar en Illustrator. Herramienta indispensable del flujo geo del curso.
Fig. 24.1: Captura de Inkscape, el editor SVG libre que la cápsula recomienda para preparar mapas y capas de contexto. Importante porque Plotly Geo necesita SVG bien estructurado para integrarse con scattergeo y choropleth: Inkscape resuelve el paso editorial sin gastar en Illustrator. Herramienta indispensable del flujo geo del curso.

Inkscape es gratuito y multiplataforma. Permite:

  • editar SVG existentes
  • añadir IDs a elementos para manipularlos desde JS
  • crear elementos visuales personalizados que Plotly no ofrece — etiquetas con flechas, leyendas, jerarquía tipográfica

Paso 4 — Superponer el SVG al mapa Plotly

<div id="title">
  <h1>Terremotos de Chile desde el 2000</h1>
</div>
<div id="myMap"></div>
<img id="context" src="map.svg" />
#myMap   { position: absolute; width: 200px; height: 800px; left: 30px;  top: 0; }
#context { position: absolute; pointer-events: none; top: 85px; left: 83px; }

pointer-events: none deja que el mapa de Plotly siga "viendo" el mouse debajo de la imagen SVG.

Versión esperada — con SVG, etiquetas y jerarquía

Mismos datos, pero ahora la historia visual está completa: título grande, los tres terremotos más grandes etiquetados directamente con su nombre, año y rango ("El más fuerte del siglo"), y un fondo coherente:

🟢 demo en vivoMapa de terremotos con SVG de contexto — versión publicable

🎯 Esperada · este es el nivel del proyecto

Información siempre visible. La información clave (nombres, años, magnitudes de los terremotos importantes) está rotulada directamente sobre el SVG. El lector entiende la imagen sin tener que tocar nada.

Más proyectos del curso (versiones estáticas)

Estos son demos hechos por estudiantes en años anteriores, mostrados acá en su versión estática (sin interacción ni sonido). Son nivel de proyecto: mapas con composición narrativa, paleta cuidada y un mensaje claro.

Montañas rusas más rápidas

scattergeo con burbujas proporcionales a la velocidad. Top 10 a la izquierda, ficha de la #1 (Formula Rossa, Abu Dhabi, 240 km/h) a la derecha, y una flecha diagonal que la señala directamente sobre el mapa.

🟢 demo en vivoMontañas rusas más rápidas — versión estática

🎯 Proyecto del curso (Grupo 4, 2024-II).

Consumo eléctrico por región de Chile

choropleth que carga un GeoJSON personalizado de las regiones chilenas (no el mapa built-in) y colorea cada una según su consumo per cápita en 2020.

🟢 demo en vivoConsumo eléctrico por región — versión estática

🎯 Proyecto del curso (Grupo 6, 2024-II).

Migración de gaviota

scattergeo con líneas que conectan posiciones GPS de una gaviota a lo largo de un año. El color de cada tramo cambia según la estación (verano/otoño/invierno/primavera) y los hitos del viaje están etiquetados directamente sobre el mapa.

🟢 demo en vivoMigración de gaviota — versión estática

🎯 Proyecto del curso (Grupo 21, 2024-II).

Gasto militar mundial (2018)

choropleth con locationmode: 'country names' (sin GeoJSON propio, Plotly trae los contornos de los países). Escala de color YlOrRd, anotación con flecha sobre Arabia Saudí.

🟢 demo en vivoGasto militar mundial 2018 — versión estática

🎯 Proyecto del curso (Grupo 22, 2024-II).

Países anfitriones de los Mundiales de Fútbol

Otro choropleth con country names, paleta categórica (0-3 mundiales), proyección Robinson, leyenda externa en HTML, y una anotación con flecha sobre México (próximo país en ser sede 3 veces, en 2026).

🟢 demo en vivoPaíses anfitriones de los Mundiales — versión estática

🎯 Proyecto del curso (Grupo 17, 2024-II).
Versiones didácticassolo muestran el mecanismo. NO son nivel de proyecto.

Interactividad: overview, zoom & filter, details on demand

Primero el Bosque, Después el Árbol

Visualizetor: máquina letal de dashboards

El mantra de la interacción visual: 'Overview first, zoom and filter, then details-on-demand'. Muestra el bosque antes de enfocarte en las hojas.

Cuando los datos son grandes o complejos, las visualizaciones estáticas pueden resultar insuficientes para proporcionar una comprensión completa y profunda. Es aquí donde la interactividad desempeña un papel crucial: convierte la visualización en una herramienta adaptativa — el usuario ya no sólo observa los datos, los explora de manera dinámica, ajustando la representación a sus propias preguntas en tiempo real.

En esta cápsula nos centramos exclusivamente en la interacción visual y en cómo organizarla siguiendo un principio guía claro: el mantra de Shneiderman. La extensión auditiva de los datos —la sonificación— se trata por separado, en su propia cápsula.

Interacción

El mantra de Shneiderman

Las interacciones más comunes se organizan siguiendo el mantra de la visualización interactiva de Shneiderman: "Primero, una vista general; luego, ampliar y filtrar; después, detalles bajo demanda" (Overview first, zoom and filter, then details-on-demand).

Este mantra propone una secuencia natural de exploración: empezamos viendo el bosque entero, luego acercamos el lente a una zona, y finalmente examinamos un árbol en concreto. Cada fase apoya a la siguiente y evita que el usuario se pierda en detalles antes de tener un mapa mental del conjunto.

Overview First: Vista General

La primera fase entrega una vista panorámica del conjunto: el usuario capta la estructura y los patrones generales —la distribución, las relaciones más amplias— antes de que ningún detalle lo distraiga. Por ejemplo, un gráfico de ventas globales muestra primero el resumen de todas las regiones; recién después se baja al detalle.

Zoom and Filter: Ampliar y Filtrar

🔍 Visto el bosque, te acercas a un árbol. Es la segunda fase del mantra — y los demos que siguen te la dejan probar con la mano: zoom y scroll, filtrado dinámico y slider temporal. Lo que tienen en común: cada uno recorta lo que se ve, pero ninguno te hace perder de vista dónde estás dentro del conjunto.

Zoom y Scroll (Fig. 25.1): el zoom es esencial para explorar datos a distintos niveles de detalle. Por ejemplo, en un mapa interactivo, se puede hacer zoom desde una vista de continente hasta ver calles. El scroll (o pan) complementa esta interacción, permitiendo desplazarse por diferentes áreas de la visualización. Estas interacciones son clave cuando se trata de grandes volúmenes de datos o visualizaciones que ocupan más espacio que el visible en pantalla.

🟢 demo en vivoMapa de 1000 eventos — rueda para acercar, arrastra para moverte
Fig. 25.1: Demo en vivo — mil eventos geolocalizados sobre un mapa: con la rueda del mouse el lector se acerca y con el arrastre recorre. Es la fase «zoom & filter» del mantra: visto el conjunto completo, uno baja al nivel de detalle que su pregunta necesita, sin salir nunca del mismo gráfico.

Filtrado Dinámico (Fig. 25.2): el filtrado permite ajustar lo que se muestra, enfocando aspectos específicos. Por ejemplo, en un gráfico de barras sobre ventas por región, el filtrado dinámico podría permitir seleccionar productos o periodos de tiempo específicos, reduciendo el "ruido visual" y centrando la atención en datos relevantes.

🟢 demo en vivoMontañas rusas — filtrá por continente
Fig. 25.2: Demo en vivo — un gráfico de montañas rusas con un filtro por continente: el usuario marca una opción y el gráfico se redibuja al instante. El filtrado recorta el ruido visual de las series irrelevantes y deja a la vista sólo lo que de verdad interesa.

Ajuste Temporal con Sliders (Fig. 25.3): para los datos que varían con el tiempo, un slider le devuelve al lector el control del eje temporal. El caso más directo es un slider que recorre los años: el usuario lo arrastra y la visualización salta al año elegido, mostrando una época a la vez en lugar de apilar todas las épocas en un gráfico ilegible. Un slider de rango va un paso más allá: con sus dos extremos el lector acota una ventana de fechas y los datos se recortan a ese tramo — su forma más simple, sobre una sola serie, es el precio de Apple (Fig. 25.4). En ambos casos es el lector quien decide qué porción del tiempo mirar, sin sobrecargar la vista con todo a la vez.

🟢 demo en vivoGasto militar mundial — arrastra el slider de año
Fig. 25.3: Demo en vivo — el gasto militar mundial con un slider de año: el usuario arrastra y los datos se actualizan al instante en cada fecha. Es el filtrado aplicado al tiempo — en lugar de apilar todas las épocas (ilegible), el lector controla qué momento ver.
🟢 demo en vivoPrecio de Apple — slider de rango de fechas
Fig. 25.4: Demo didáctico — el mismo slider temporal reducido a su mecanismo mínimo: una sola serie (el precio de Apple) y un slider de rango. Sin contexto ni narrativa, sólo la interacción — arrastra los extremos y la ventana de fechas se ajusta. Útil para ver el patrón aislado antes de aplicarlo a un caso real.

Details-on-Demand: Detalles Bajo Demanda

🖱️ Ajustada la vista, pides el dato exacto. La fase final del mantra tiene una sola regla: la vista general se mantiene limpia y el detalle llega sólo cuando el usuario lo pide — con un tooltip al pasar el cursor, o seleccionando los elementos que quiere mirar de cerca.

Tooltip en Hover (Fig. 25.5): el hover es una interacción ligera pero poderosa. Al pasar el cursor sobre un elemento de la visualización aparece un tooltip con información adicional sin alterar la estructura general. Esto es especialmente útil en gráficos de dispersión o mapas (Fig. 25.6), donde un tooltip puede mostrar detalles como valores exactos o contexto adicional sobre un punto específico.

🟢 demo en vivoBrecha salarial — pasa el cursor para ver el detalle
Fig. 25.5: Demo en vivo — la brecha salarial de género: al pasar el cursor sobre un elemento aparece un panel con su detalle, sin alterar la vista general. Es el «details on demand» del mantra — la primera impresión queda limpia y la información fina llega sólo cuando el lector la pide.
🟢 demo en vivoMapa de terremotos — pasa el cursor sobre un sismo
Fig. 25.6: Demo en vivo — un mapa interactivo de terremotos de Chile: cada sismo es un punto y, al pasar el cursor por encima, aparecen sus datos (magnitud, fecha, lugar). El caso arquetípico del hover — el mapa se mantiene legible y limpio, y el dato puntual aparece sólo donde el lector está mirando.

Selección de Elementos: permitir que los usuarios seleccionen elementos individuales o múltiples en una visualización añade personalización. Por ejemplo, en un gráfico de dispersión, el usuario puede usar una selección rectangular o de lazo para resaltar varios puntos a la vez y examinarlos más a fondo, mientras atenúa los otros elementos.

Otras Manipulaciones en Visualización de Información

🎛️ Dos palancas que no entran en el mantra — pero valen oro. Animación temporal y cambio de representación. Lo que las une: cada una le pasa al usuario una decisión que solía tomar el diseñador — qué momento ver y en qué codificación leerlo.

Animaciones Temporales (Fig. 25.7): las animaciones permiten observar cómo evolucionan los datos a lo largo del tiempo. Por ejemplo, una visualización de crecimiento poblacional al estilo Gapminder puede usar animaciones para mostrar los cambios por década, y el usuario puede pausar o ajustar la velocidad según su interés en ciertos periodos temporales. Otro patrón frecuente: un mapa del mundo donde la intensidad de cada zona evoluciona año a año (Fig. 25.8).

🟢 demo en vivoMigración de gaviota — pulsa play en la animación
Fig. 25.7: Demo en vivo — la migración de una gaviota reproducida como animación temporal: el recorrido avanza paso a paso y el lector puede pausar o ajustar el ritmo. La animación convierte el tiempo en movimiento, que el cerebro lee mucho más fácil que una maraña de líneas.
🟢 demo en vivoIntensidad global — pulsa play y mira pasar los años
Fig. 25.8: Demo en vivo — un mapa del mundo donde la intensidad de cada zona evoluciona año a año: pulsa play y los focos de actividad crecen, se desplazan y se apagan. La animación temporal vuelve legible de un vistazo una evolución que, como tabla o como decenas de líneas superpuestas, sería imposible de seguir.

Cambio de Representación Visual (Fig. 25.9): los usuarios pueden alternar entre diferentes representaciones de los mismos datos —por ejemplo, entre porcentajes y valores absolutos, o entre barras y líneas— con un solo clic. Esta interacción permite descubrir nuevos patrones o insights que no serían evidentes en una única representación visual.

🟢 demo en vivoBest-sellers por género — alterna entre cantidad y porcentaje
Fig. 25.9: Demo en vivo — best-sellers por género del autor, 1950-2015. Un botón alterna entre cantidad y porcentaje: la misma data, dos preguntas distintas. En porcentaje se ve a las autoras acercándose a la paridad; en cantidad se ve que, además, el mercado entero creció. Ninguna de las dos vistas miente — y elegir sólo una le habría escondido al lector la mitad de la historia.

Plotly.jsplotly_hoverplotly_clickFiltros

T3. Plotly interactivo: implementando el mantra de Shneiderman

Implementar el mantra Overview → Zoom & Filter → Details on Demand

Overview first, zoom & filter, details on demand. Las tres palabras de Shneiderman que separan un PDF estático de una herramienta exploratoria.

Del gráfico estático a la exploración

Hasta T2 todo era estático: el lector lee la imagen y pasa de página. En la cápsula 22 (Primero el Bosque, Después el Árbol) vimos el mantra de Shneiderman:

Overview first → Zoom & Filter → Details on Demand

Esta cápsula implementa cada paso del mantra con Plotly y muestra cómo los proyectos del curso lo aplican.

No hace falta tener los tres pasos. Algunos proyectos solo necesitan details on demand (el mapa de terremotos: ya ves todo, el hover añade detalle). Otros solo zoom & filter (una serie temporal larga donde el filtro por año da legibilidad). Otros los tres. Decidí qué hace falta según los datos, no por completar la lista.

Eventos en Plotly — la base técnica

Plotly emite eventos cada vez que el usuario interactúa con el gráfico. Suscribirse es una sola línea:

const div = document.getElementById('myDiv');

div.on('plotly_hover',    e => { /* mouse encima de un punto */ });
div.on('plotly_unhover',  e => { /* el mouse se va */ });
div.on('plotly_click',    e => { /* clic en un punto */ });
div.on('plotly_selected', e => { /* selección con el lasso */ });

Cada evento recibe un objeto e donde e.points[0] apunta al dato bajo el cursor: e.points[0].x, e.points[0].y, e.points[0].pointIndex.

Con esto resolvemos los tres pasos del mantra. Vamos en orden.

Paso 1 — Overview: la vista general

El primer paso del mantra es mostrar el bosque entero antes que cualquier árbol. Esto ya lo hicimos en T1 y T2: cada gráfico estático que produjimos es un overview.

  • T1: brecha salarial (50 estados a la vez), tickets de soporte (12 meses), velocidades de auto, medallistas olímpicos, viento V Región
  • T2: terremotos de Chile, electricidad por región, migración de gaviota, gasto militar mundial, mundiales de fútbol, montañas rusas

Antes de añadir cualquier interacción, asegurate que el overview ya se entiende solo. Si el gráfico estático no comunica nada, la interactividad no lo va a salvar.

Damos el overview por hecho a partir de acá y nos enfocamos en los dos pasos siguientes.

Paso 2 — Zoom & Filter

El segundo paso del mantra: cuando los datos son muchos, dejar al lector acotar la vista a la porción que le interesa.

Lo más simple: un <select> que filtra por categoría y vuelve a dibujar. Plotly.react() es la versión eficiente de newPlot(): sustituye los datos sin re-crear todo el gráfico.

document.getElementById('anio').addEventListener('change', e => {
  const año = e.target.value;
  const filtrados = (año === 'ALL')
                  ? datos
                  : datos.filter(d => d.fecha.startsWith(año));
  Plotly.react('myDiv', tracesDe(filtrados), layout);
});

Apple stock + filtro por año (menú) · sólo filtro

Tres años de cotización Apple en una sola línea. Un <select> con los años permite acotar la vista. Sin hover panel — esta versión muestra el filtro puro, no el detalle bajo el cursor:

function render(year) {
  const { x, y } = filterByYear(year);
  Plotly.react('myDiv', [buildTrace(x, y)], { hovermode: false });
}
yearSelect.addEventListener('change', e => render(e.target.value));

🟢 demo en vivoApple stock — sólo filtro (sin hover)

📚 Didáctica · sólo el filtro. Compará con la versión 4 más abajo, donde los tres pasos del mantra coexisten.

Apple stock + filtro por slider (rango continuo) · sólo filtro

Variante más expresiva: dos <input type=range> definen un rango de índices. El usuario puede acotar a una ventana arbitraria, no a una categoría fija. Útil para comparar dos ventanas temporales (ej. el bajón de mayo 2016 vs. la recuperación de fin de año). Tampoco hay hover — sólo filtro.

sliderMin.addEventListener('input', render);
sliderMax.addEventListener('input', render);
function render() {
  const a = +sliderMin.value, b = +sliderMax.value;
  const x = APPLE_DATES.slice(a, b + 1);
  const y = APPLE_PRICES.slice(a, b + 1);
  Plotly.react('myDiv', [buildTrace(x, y)], { hovermode: false });
}

🟢 demo en vivoApple stock — sólo filtro por slider de rango

📚 Didáctica · misma idea, control más fino, sin hover.

Cuándo el filtro importa

Los filtros de arriba son didácticos: la serie temporal de Apple ya se lee bien sin filtrar. Pero hay casos donde filtrar es lo que hace la visualización entendible:

  • muchas categorías superpuestas — la brecha salarial: 50 estados a la vez tapan unos a otros, filtrar por región abre legibilidad
  • rangos temporales largos con eventos puntuales — terremotos 2000–2024: filtrar por década permite contar una historia por período
  • una variable temporal continua — un slider de año que barre un mapa década a década (lo veremos abajo en gasto militar mundial)

Antes de añadir un filtro preguntate: ¿el lector entiende mejor con esto, o solo es decoración interactiva? Si la respuesta es "decoración", probablemente sobra.

Paso 3 — Details on Demand

El tercer paso del mantra: una vez que el lector ya está mirando una zona, permitirle pedir el detalle de un dato individual sin saturar la interfaz inicial.

La técnica básica: hover (o clic) muestra un panel HTML con la información extra; al sacar el mouse el panel desaparece.

Graphicacy: cuando muestres detalles, muestra el número como elemento visual (una barra que crece, un punto en una escala, un bar chart secundario) — no como texto crudo. El curso de InfoVis es sobre traducir números a percepción: aplicalo también en los paneles de detalle.

Hover básico (sólo el mecanismo)

Un bar chart simple. Cuando el mouse pasa sobre una barra, un <div> debajo se actualiza con el mes y el valor:

Plotly.newPlot('myDiv', [{ x: meses, y: valores, type: 'bar' }]);

document.getElementById('myDiv').on('plotly_hover', e => {
  const p = e.points[0];
  document.getElementById('info').innerHTML = `<b>${p.x}</b> → ${p.y} tickets`;
});
document.getElementById('myDiv').on('plotly_unhover', () => {
  document.getElementById('info').innerHTML = '— pasa el mouse sobre una barra —';
});

🟢 demo en vivoHover básico — pasa el mouse sobre las barras

📚 Didáctica · solo muestra el mecanismo, no es lo que esperamos en el proyecto.

Hover sobre línea temporal (Apple stock)

La misma técnica sobre una serie temporal larga. La clave: desactivar el tooltip por defecto de Plotly (hoverinfo: 'none') y reemplazarlo con un panel HTML controlado por nosotros, con hovermode: 'x' para que el cursor "enganche" el dato vertical más cercano.

const trace = {
  x: APPLE_DATES, y: APPLE_PRICES,
  type: 'scatter', mode: 'lines',
  hoverinfo: 'none'                  // apagamos el tooltip estándar
};
Plotly.newPlot('myDiv', [trace], { hovermode: 'x' });

myDiv.on('plotly_hover', e => {
  const p = e.points[0];
  info.innerHTML = `<b>${p.x}</b> → $${p.y.toFixed(2)}`;
});

🟢 demo en vivoApple stock — hover sobre la línea

📚 Didáctica · misma técnica, ahora sobre 504 días de cotización.

Hover con panel narrativo (brecha salarial)

Tomamos el scatter de la brecha salarial de T1 y le añadimos hover con un panel lateral que muestra el estado, el sueldo de mujeres y el sueldo de hombres bajo el cursor:

const trace = {
  x: maleSalaries, y: femaleSalaries,
  mode: 'markers',
  hoverinfo: 'none',                  // ← apaga el tooltip estándar
  marker: { size: 4, color: '#888' }
};

myDiv.on('plotly_hover', data => {
  const i = data.points[0].pointIndex;
  document.getElementById('state').textContent = states[i];
  document.getElementById('woman').textContent = '$' + femaleSalaries[i];
  document.getElementById('man').textContent   = '$' + maleSalaries[i];
  document.getElementById('details').style.display = 'block';
});

myDiv.on('plotly_unhover', () => {
  document.getElementById('details').style.display = 'none';
});

🟢 demo en vivoBrecha salarial — hover muestra panel con detalle por estado

🎯 Esperada · este es el nivel del proyecto. Pasa el mouse sobre los puntos.

Decisión: aquí no hay filtro. Con 50 estados, details on demand ya basta para responder la pregunta "¿cómo está mi estado?". Añadir filtro por región sería acumular interacción: la lectura no mejora. El mantra es guía, no checklist.

Mapa de terremotos interactivo

Tomamos el mapa estático de T2 y le añadimos hover. Sin audio todavía — eso es T4. Cuando el mouse entra a un terremoto:

  • el panel lateral muestra nombre, regiones, magnitud, muertos
  • aparece un ícono de tsunami si hubo
  • se oculta el SVG de contexto (las etiquetas estáticas), porque ahora el panel da los detalles
myMap.on('plotly_hover', data => {
  const t = terremotos[data.points[0].pointIndex];
  document.getElementById('nombre').innerHTML   = t.Nombre;
  document.getElementById('regiones').innerHTML = t.Zonas;
  document.getElementById('muertos').innerHTML  = t.Muertos;
  document.getElementById('magnitud').innerHTML = t.Magnitud;
  if (t.Tzunami) document.getElementById('tzunami').style.display = 'block';
  document.getElementById('details').style.opacity = 1;
  document.getElementById('context').style.opacity = 0;   // ocultamos las etiquetas
});

myMap.on('plotly_unhover', () => {
  document.getElementById('details').style.opacity = 0;
  document.getElementById('context').style.opacity = 1;   // restauramos
});

🟢 demo en vivoMapa interactivo de terremotos — hover muestra detalles

🎯 Esperada · este es el nivel del proyecto. Pasa el mouse sobre cada terremoto.

Otra vez, sin filtro. Los terremotos son ~30 puntos sobre el mapa de Chile — ya se ven todos. Filtrar por década reduciría puntos que no estaban estorbando. Details on demand suficiente.

Combinar los pasos del mantra

A veces los tres pasos coexisten en un mismo viz. La regla: añadí cada paso solo si responde a una pregunta del lector que los anteriores no responden.

Ejemplo didáctico — Apple stock con los tres pasos

La misma serie temporal de antes, pero ahora:

  • Overview — la línea completa al cargar
  • Zoom & Filter — el <select> reduce a un año
  • Details on Demand — el panel inferior muestra fecha + precio bajo el cursor

🟢 demo en vivoApple stock — los tres pasos coexisten

📚 Didáctica · acá filtro y hover **se complementan**: el filtro acota a un año, el hover lee el día. Compará con 2a (sólo filtro) y 1 (sólo hover).

Proyecto del curso — Roaller-coaster (filtro continente + hover bidireccional)

El proyecto de montañas rusas más rápidas combina:

  • Zoom & filter: <select> continente — el mapa se reproyecta a la región elegida y se muestran sólo las top 10 de ese continente
  • Details on demand: hover sobre un marker (o sobre la lista lateral) resalta el otro y abre un panel con park, ubicación y velocidad
  • Graphicacy: en el panel, la velocidad no se lee como número primero — se ve como una barra coloreada que crece de 0 a 250 km/h. El número aparece debajo, pero la barra ya comunicó la magnitud relativa

🟢 demo en vivoMontañas rusas — filtro continente + hover bidireccional + barra graphicacy

🎯 Proyecto · zoom & filter + details on demand + graphicacy. La versión sonora (efecto Doppler) está en T4.

Proyecto del curso — Gasto militar (slider de año + hover por país)

El gasto militar mundial combina:

  • Zoom & filter (temporal): slider de año 1960→2018 que barre el mapa coroplético; puedes ver la evolución histórica (Guerra Fría, post-1989, post-2001) década a década
  • Details on demand: hover sobre cualquier país → panel lateral con una barra de % del PIB sobre la escala discreta (graphicacy: el marcador se posiciona en la barra de colores, no leemos el porcentaje como texto primero)

🟢 demo en vivoGasto militar — slider de año + hover por país

🎯 Proyecto · los dos primeros pasos del mantra trabajando juntos. La versión con servo Arduino está en T7.

Más allá del mantra — animación temporal

Algunas interacciones útiles no encajan en los tres pasos. La animación temporal es una de ellas: no es overview, no es filtro, no es detail-on-demand. Pero comunica — porque el dato cambia con el tiempo y el ritmo de la animación es parte del mensaje.

Proyecto del curso — Migración de gaviota (animación + details narrativo)

El recorrido de la gaviota se anima mes a mes con un botón "Migrar". En cada paso:

  • la rotta dibujata fino a quel punto si colora (el resto resta sbiadito)
  • un panel narrativo cuenta qué está pasando (estación, contexto biológico)
  • una barra de progreso (graphicacy) muestra dónde estamos en el viaje
function step(idx) {
  if (idx >= TOTAL) { stopAnimation(true); return; }
  Plotly.react('myMap', [...activeTracesUpTo(idx), movingMarker(idx)], layout);
  updatePanel(idx);                     /* season text + progress bar */
  setTimeout(() => step(idx + 1), 250);
}

🟢 demo en vivoMigración de gaviota — animación + details narrativo

🎯 Proyecto · la animación es la interacción. Pulsa "Migrar". Versión sonora en T4 (Tone.js mapea la latitud al tono), versión con sensor de mano en T6.

Cómo se aplica en otros proyectos del curso (sólo details on demand)

Dos proyectos donde details on demand es la única interacción que hace falta — porque el overview ya es legible y no hay nada útil que filtrar. Ambos aplican graphicacy en el panel.

Electricidad por región — la barra es el consumo

El mapa estático ya está en T2. La versión interactiva añade una sola cosa: hover sobre una región → panel con una barra horizontal que crece proporcional al consumo (no leemos "60 millones kcal/persona", vemos una barra casi llena vs. una vacía). El número aparece como referencia secundaria.

🟢 demo en vivoElectricidad — hover muestra barra de consumo proporcional

🎯 Proyecto · graphicacy puro. Pasa el mouse por una región del mapa. La versión con sensor de mano (señalar la región con el dedo) está en T6.

Mundiales de fútbol — el bar chart es la asistencia

El mapa coroplético ya está en T2. La versión interactiva añade hover → bar chart lateral con la asistencia de cada Mundial: las barras moradas son los años donde el país hospedó, las grises son los otros. El usuario lee la magnitud y el patrón temporal visualmente, sin números primero.

🟢 demo en vivoMundiales — hover muestra bar chart de asistencia (host highlighted)

🎯 Proyecto · graphicacy con bar chart secundario. La versión con marcadores ArUco está en T6.

Más allá de los mapas — interactividad sobre líneas, scatter, barras

Los proyectos que vimos hasta aquí usan mapas como overview. Pero el mantra y la graphicacy se aplican igual a una línea temporal, un scatter o un bar chart. Tres ejemplos del curso, todos non-mapa.

Autos más rápidos del mundo — details on demand sobre línea + indicador

Una línea temporal (1900–2020) con cada coche que ha batido el record mundial de velocidad. Anotaciones estáticas marcan los hitos (Mercedes 113, Jaguar 200, Bugatti 407, Koenigsegg 458 km/h). El hover sobre cualquier punto: - abre un panel con foto del coche + nombre + año + comentario - actualiza un indicador velocímetro (Plotly indicator con gauge) que muestra la velocidad como aguja sobre escala — graphicacy puro

🟢 demo en vivoAutos más rápidos — hover muestra foto + indicador de velocidad

🎯 Proyecto · details on demand con doble graphicacy: foto (qué auto) + gauge (qué tan rápido). La versión sonora con efecto Doppler está en T4.

100m planos olímpicos — details on demand sobre scatter doble

Dos series scatter (hombres en azul, mujeres en oro) con los tiempos de cada Olimpiada de 1896 a 2020. Hover sobre un punto: - muestra foto del medallista - nombre, ciudad, año, tiempo - estrellas oro identifican los récords actuales - una "X" gris marca la descalificación por dopaje (Marion Jones 2000)

🟢 demo en vivo100m olímpicos — hover muestra foto + tiempo del medallista

🎯 Proyecto · details on demand sobre scatter. Iconografía en los marcadores (estrella = récord, X = descalificado) ya cuenta antes del hover. Versión sonora + servo Arduino está en T7.

Viento V Región — details on demand sobre línea temporal

Velocidad del viento medida a lo largo de 2024 en la V Región. Línea simple con anotaciones estáticas en los picos (47 km/h el 13 de junio, 46 km/h el 2 de agosto). Hover sobre cualquier punto: - muestra fecha + velocidad - abre un gráfico de dirección del viento (rosa de los vientos) que visualiza el ángulo medido ese día — graphicacy con icono direccional

🟢 demo en vivoViento V Región — hover muestra dirección + velocidad por fecha

🎯 Proyecto · details on demand con segundo viz como detail (rosa de los vientos). La versión sonora con paisajes de viento está en T4.

Lo que viene después

En T4 añadimos audio sobre toda esta interacción: cada hover y cada clic dispara un sonido proporcional al dato. Ahí los mismos proyectos del curso aparecen en su forma sonora completa.

En T5/T6/T7 los mismos proyectos se completan con sensores físicos (cámara, marcadores ArUco, mano) y actuadores (servo Arduino). Ahí no podemos embeber la interacción (necesita hardware) — los mostramos en video, con link al código fuente.

Sonificación: audificación, earcons, iconos auditivos y alarmas inteligentes

Cierra los Ojos y Escucha el Dato

Visualizetor: máquina letal de dashboards

La vista tiene un límite. Con la sonificación convertimos datos en sonido — como el monitor cardíaco — para percibir patrones, anomalías y cambios a través del oído.

En la cápsula anterior vimos cómo la interacción visual —siguiendo el mantra Overview first, zoom and filter, then details-on-demand— amplía las capacidades de las visualizaciones estáticas. Pero la vista no es el único canal disponible: cuando el espacio visual está saturado, cuando el usuario no puede mirar continuamente la pantalla, o cuando los datos cambian en tiempo real, el sonido se convierte en una alternativa o complemento muy potente.

Esta cápsula está dedicada exclusivamente a la sonificación: el arte y la ciencia de transformar datos en sonido para que el oído pueda interpretarlos.

¿Qué es la sonificación?

La sonificación es una técnica que transforma datos en sonido con el propósito de representar información de manera auditiva. Esta herramienta convierte valores numéricos o categóricos en estímulos sonoros, permitiendo que patrones o tendencias en los datos sean percibidos a través del oído. Similar a cómo las visualizaciones de datos representan información gráficamente, la sonificación emplea el sonido para interpretar y analizar datos.

En ciertos contextos la visualización puede ser insuficiente o innecesaria. Aquí es donde la sonificación ofrece una alternativa efectiva, facilitando la identificación de cambios, anomalías y patrones a través del canal auditivo. Por ejemplo, el monitoreo médico, como en el caso del monitoreo cardiaco. En situaciones críticas, el personal médico podría no tener tiempo de mirar pantallas continuamente, pero un cambio en el ritmo cardíaco puede ser captado inmediatamente a través de una señal sonora.

Objetivos y Ventajas de la Sonificación

El principal objetivo de la sonificación es comunicar información de manera auditiva, distribuyendo la carga cognitiva entre los sentidos. El oído humano es altamente sensible a variaciones en el tono (la altura o frecuencia de un sonido), volumen (la intensidad o nivel sonoro), ritmo (la temporalidad y el patrón de los sonidos) y timbre (la cualidad o color del sonido que permite distinguir entre diferentes fuentes sonoras, ej., flauta y piano), lo que permite identificar cambios en los datos con gran precisión. En situaciones donde la vista está ocupada o los datos evolucionan rápidamente, como en el monitoreo médico o sistemas de control automovilístico, el sonido ofrece una ventaja considerable.

Las ventajas de la sonificación incluyen:

  • Alivio de la carga visual: Al depender del canal auditivo, se reduce la saturación del espacio visual.
  • Acceso a información dinámica: En contextos donde los datos cambian rápidamente, como sistemas de alerta o monitoreo en tiempo real, el sonido permite detectar cambios de forma inmediata (ej., monitoreo cardiaco).
  • Facilidad para detectar patrones sutiles: El oído es especialmente sensible a pequeñas variaciones, lo que lo convierte en una herramienta ideal para detectar anomalías en los datos.

Ese último punto —cazar lo que se sale del patrón— tiene un ejemplo célebre: la sonificación de un algoritmo de ordenamiento de burbuja defectuoso.

🔊 Pon play y vas a oír el bug. Un bubble sort sano ordena de menor a mayor: la sonificación sube de tono de forma limpia y pareja. El algoritmo con el error rompe ese barrido ascendente, y el oído pesca el tropiezo al instante — antes de que la vista alcance a contar un solo paso.

🔊 Algoritmo de ordenamiento de burbuja con un bug — sonificado

Sonic Interaction Design (SID)

El Sonic Interaction Design (SID) es una disciplina que combina el diseño de interacción con la computación musical y sonora, centrando su estudio en el uso del sonido para transmitir información, significado y emociones en contextos interactivos. A diferencia de la sonificación pasiva, donde el usuario escucha sin influir en los sonidos generados, el SID explora cómo el sonido puede integrarse en sistemas donde los usuarios participan activamente.

SID tiene aplicaciones en áreas como videojuegos, interfaces interactivas y sistemas de monitoreo en tiempo real. En estos contextos, el diseño sonoro no solo comunica información sino que también mejora la experiencia del usuario, facilitando la comprensión y respuesta rápida ante los datos.

🔊 Aquí el sonido te responde a ti, no al revés. En la sonificación pasiva el dato suena y uno escucha; en el SID el usuario actúa —golpea, inclina, aplaude— y el sistema le contesta con sonido. Estos cuatro clips del Sonification Handbook recorren esa idea, de la interacción sonora más básica al objeto que suena según cómo lo mueves.

🎬 SID — interacción sonora básica

🎬 Martillo con sonidos diferentes según el material que se golpea

🎬 Earcons parametrizados — distintos sonidos para "eliminar archivo grande" vs "eliminar archivo pequeño"

🎬 Inclinación de un objeto sonificada en tiempo real

Y un ejemplo práctico: una interacción "clap to control" donde aplaudir cambia el estado del sistema (Fig. 27.1).

Fig. 27.1: Ejemplo de interacción «clap to control»: aplaudir cambia el estado del sistema. Muestra cómo un evento sonoro simple —fácil de producir por el usuario y fácil de detectar por la máquina— puede convertirse en una primitiva de interfaz audible sin necesidad de pantallas ni controles tradicionales.

Un caso más ambicioso es el Gamelunch (Fig. 27.2): una mesa de comedor sonoramente aumentada. Mientras el comensal corta, aliña la ensalada o sirve una bebida, sensores de fuerza traducen cada gesto en sonido sintetizado en tiempo real — SID en estado puro, donde la acción del usuario y la respuesta sonora forman un mismo lazo. Su giro ingenioso es el principio de contradicción: la mesa devuelve sonidos «equivocados», ajenos a lo que el gesto haría esperar, y ese choque le revela al comensal —por absurdo— cuánto se apoya, sin darse cuenta, en el sonido de cada acto cotidiano.

Fig. 27.2: El Gamelunch (CHI 2008): una mesa de comedor sonoramente aumentada. Sensores de fuerza capturan los gestos del comensal —cortar, aliñar, servir— y los mapean en tiempo real a modelos de síntesis de sonido. Devuelve a propósito sonidos contradictorios e inesperados: al chocar con lo que el oído espera, el comensal descubre —por absurdo— cuánto dependen los actos cotidianos del sonido del entorno.

Sonificación directa

Un ejemplo de sonificación directa consiste en asignar propiedades del sonido a variables de datos de manera inmediata y sencilla. La representación sonora de una trayectoria es un caso típico (Fig. 27.3): los datos de posición que cambian en tiempo real se traducen en varios parámetros sonoros — el tono refleja la altura del objeto en movimiento, la espacialización reproduce el sonido de izquierda a derecha para indicar el movimiento horizontal, y el ritmo representa la velocidad del desplazamiento. La misma técnica también funciona pre-grabada, sin interacción (Fig. 27.4), cuando el objetivo es comunicar el patrón en lugar de dejarlo explorar.

Fig. 27.3: Sonificación interactiva de una trayectoria: los datos de posición se traducen en parámetros sonoros —el tono refleja la altura del objeto, la espacialización izquierda-derecha indica el movimiento horizontal, y el ritmo representa la velocidad—. Caso típico de sonificación directa: un mapeo inmediato entre variables de datos y propiedades del sonido.
Fig. 27.4: Variante pre-grabada de sonificación directa: misma técnica de mapeo entre variables de datos y parámetros sonoros, pero sin interacción en tiempo real. Útil cuando el objetivo es comunicar el patrón a una audiencia, más que dejarla explorar.

Audificación

La audificación es una técnica específica de sonificación que convierte datos en sonido sin aplicar transformaciones complejas. Se suele utilizar en datos secuenciales o temporales, como señales sísmicas o biomédicas, donde los datos —en su forma original— son inherentemente audibles cuando se aceleran o se reproducen al ritmo correcto.

Las ondas sísmicas son demasiado lentas para ser audibles, pero al acelerarlas miles de veces, el oído percibe inmediatamente la diferencia entre un terremoto débil y uno catastrófico:

🔊 Terremotos — ondas sísmicas aceleradas

El estetoscopio es el ejemplo clásico de audificación: el médico escucha directamente las ondas acústicas del corazón, sin ningún mapeo intermedio.

🔊 Estetoscopio — sonidos cardiacos directos

Navegación de información a través del sonido

La navegación de datos en el contexto de la sonificación se refiere al uso del sonido para explorar y comprender grandes volúmenes de información. Así como navegamos el mundo físico continuamente para buscar información visual o táctil, el sonido puede complementar y mejorar nuestras capacidades naturales para desplazarnos en un entorno de datos abstracto.

En la navegación de datos mediante interfaces auditivas, el oído se convierte en una herramienta clave para identificar patrones, relaciones y cambios en los datos. Los sonidos proporcionan pistas sobre la estructura y el contenido de los datos, permitiendo a los usuarios "moverse" por el conjunto de información sin necesidad de una representación visual directa.

Un ejemplo claro de navegación auditiva es la interfaz Sound Torch, que utiliza el concepto de "linterna sonora" para explorar un espacio bidimensional representativo de datos. En este sistema, los usuarios pueden moverse por un entorno y emplear la "linterna" para enfocarse en los sonidos cercanos. A medida que el usuario dirige la linterna hacia distintas áreas del espacio de datos, los sonidos correspondientes se intensifican, lo que permite identificar y analizar información específica.

🎬 Sound Torch — navegación auditiva en un espacio de datos

Iconos auditivos

Los iconos auditivos son representaciones sonoras de eventos o acciones específicas, similares a los iconos visuales en interfaces gráficas. Son sonidos cotidianos asociados a funciones comunes —como el sonido de una puerta al cerrarse para indicar que se ha completado una tarea—. Este enfoque facilita la comprensión rápida y natural de las acciones en sistemas complejos, mejorando la accesibilidad.

🔊 Escucha los cuatro: los entiendes sin que nadie te los explique, ¿cachái? Esa es la fuerza del icono auditivo — es un sonido del mundo real (agua, un grifo, grava), y por eso su significado llega solo. El reverso de la moneda: solo funciona cuando existe un sonido cotidiano que ya evoque la acción que quieres señalar.

🔊 Agua salpicando — para representar una acción repentina o un cambio en un sistema

🔊 Goteo de un grifo — para una acción continua o alerta de bajo nivel (proceso en espera)

🔊 Pasos sobre grava — para un progreso gradual o movimiento dentro de un sistema

🔊 Agua hirviendo — para alertas de alta intensidad o advertencias críticas

Earcons

Los Earcons son secuencias sonoras breves y estructuradas que transmiten información en pantallas auditivas. A diferencia de los iconos auditivos, los Earcons son más abstractos y modulares, lo que permite representaciones más detalladas. Son útiles en aplicaciones donde se necesita representar una amplia variedad de eventos —como en sistemas de monitoreo de procesos— ya que pueden ser combinados y parametrizados para transmitir múltiples niveles de información (Fig. 27.5).

Fig. 27.5: Ejemplos prácticos de earcons: secuencias sonoras breves, abstractas y modulares que transmiten información en interfaces auditivas. Su carácter combinable y parametrizable permite representar familias enteras de eventos con variaciones controladas de tono, ritmo y timbre.

Alarmas Auditivas Inteligentes

Las alarmas auditivas inteligentes son sistemas diseñados para emitir señales de advertencia en situaciones críticas. A diferencia de las alarmas tradicionales, estas están integradas en entornos de trabajo complejos y se ajustan a las condiciones del contexto para evitar la sobrecarga auditiva. Un diseño eficiente incluye sonidos que son fáciles de reconocer y discriminar, permitiendo a los usuarios responder de manera rápida y efectiva ante situaciones de emergencia.

Una alarma sincrónica con el pulso arterial sigue el ritmo cardíaco del paciente. El sonido se alinea perfectamente con los latidos, proporcionando una representación sonora directa y en tiempo real del estado cardiovascular. Útil en contextos médicos donde se requiere monitorear de manera constante el pulso sin depender de visualizaciones.

🔊 Alarma sincrónica con el pulso arterial

Una alarma de despertar se activa cuando el paciente comienza a despertarse. El sonido alerta al personal sanitario del cambio sin necesidad de observación visual constante.

🔊 Alarma de despertar — paciente saliendo del sueño

Aplicaciones en Tecnología Asistiva

La sonificación juega un papel crucial en la tecnología asistiva, especialmente para personas con discapacidades visuales. Al transformar información visual en señales sonoras, estas tecnologías mejoran la accesibilidad y permiten que los usuarios interpreten datos de manera precisa. Por ejemplo, los lectores de pantalla convierten el texto en sonido, mientras que otros sistemas proporcionan orientación espacial auditiva, facilitando la navegación.

Uso de voz en la visualización de información

En la representación de datos, los spearcons, la mensajería de voz automatizada y la síntesis de texto a voz (TTS) ofrecen ventajas significativas en situaciones donde el sonido puede mejorar la comprensión o donde la carga visual es alta.

  • Spearcons: fragmentos acelerados de palabras habladas. Útiles para indicar eventos o cambios importantes en los datos. Permiten recibir información auditiva de manera rápida, sin recurrir al texto o gráficos.
  • Mensajería de voz: uso automatizado de mensajes de voz mediante síntesis o grabaciones predefinidas, en sistemas de monitoreo o control para transmitir información precisa en tiempo real. Estos mensajes se activan automáticamente cuando ocurren eventos críticos.
  • Síntesis de texto a voz (TTS): tecnología particularmente útil para hacer accesibles los datos textuales a personas con discapacidades visuales, o cuando se requiere una interpretación rápida de información numérica o textual sin apartar la atención de otras tareas visuales.

Estas tecnologías auditivas no solo complementan la representación de los datos, sino que también optimizan la forma en que los usuarios pueden interactuar con ellos, haciendo que la experiencia sea más ágil, accesible y efectiva.


Tone.jsWebAudioFontMIDIPlotly.jsAudio

T4. Sonificación: MP3, Tone.js, WebAudioFont y Web Speech API

Datos que suenan: del MP3 al instrumento real, todo desde el navegador

Los gráficos se ven. Pero también pueden sonar — y a veces el oído entiende patrones que el ojo se pierde. MP3, Tone.js, Web Audio: tres puertas a la información audible.

Del gráfico interactivo al sonido

En T3 hicimos los proyectos del curso interactivos: hover, filtros, animación. Aquí los mismos viz los hacemos sonar.

Cinco estrategias para sonificar

  1. Iconos sonoros — un MP3 pre-grabado por categoría (lluvia, viento, …)
  2. Tonos sintetizados con Tone.js — flexibles, suenan a sintético
  3. Soundfonts (WebAudioFont) — instrumentos reales con control MIDI
  4. Voz (TTS, Web Speech API) — narrar valores en palabras
  5. Combinaciones — la práctica real, donde se mezclan varias

Empezamos por las didácticas para ver cada técnica aislada. Después el ejemplo del curso (la casita que tiembla). Después la versión "contraten dos personas" que combina varias estrategias para contar una historia. Y finalmente los proyectos estudiantes, organizados por estrategia.

Versiones didácticas — cada técnica aislada

Estrategia 1 — Iconos sonoros (MP3)

Un MP3 pre-grabado por categoría. Es la más simple: hace falta tener el archivo y reproducirlo es una línea de JS.

Conseguir el audio

  • Freesound.org — biblioteca Creative Commons
  • YouTube → MP3 con y2mate.is (con cabeza)
  • Grabar con el celular y traer al computador

Editar: Tenacity

Tenacity (fork libre de Audacity) recorta, mezcla, normaliza, exporta a MP3 / WAV (Fig. 28.1). Gratuito y multiplataforma.

Captura de Tenacity (fork libre de Audacity), el editor multipista que la cápsula propone para preparar los clips MP3 de sonificación. Antes de tocar Tone.js o WebAudioFont en código, hay que cortar y normalizar audio — y Tenacity es la herramienta más simple para hacerlo sin coste. Paso 1 del flujo de sonificación del curso.
Fig. 28.1: Captura de Tenacity (fork libre de Audacity), el editor multipista que la cápsula propone para preparar los clips MP3 de sonificación. Antes de tocar Tone.js o WebAudioFont en código, hay que cortar y normalizar audio — y Tenacity es la herramienta más simple para hacerlo sin coste. Paso 1 del flujo de sonificación del curso.

Reproducir

const audio = new Audio("lluvia-fuerte.mp3");
audio.play();

Demo didáctica — dos barras, dos MP3

🟢 demo en vivoDos barras → dos MP3 — click para reproducir

📚 Didáctica · solo el mecanismo plotly_click + new Audio().play().

Estrategia 2 — Tonos sintetizados (Tone.js)

Cuando los datos varían continuamente y quieres que cada valor tenga su propia altura, los MP3 quedan cortos: harían falta hartos. Tone.js sintetiza el tono en el navegador, en tiempo real.

<script src="https://unpkg.com/tone"></script>
// IMPORTANTE: el navegador requiere un gesto del usuario antes de
// reproducir audio. Encerrá Tone.start() en un click:
document.getElementById('start').addEventListener('click', async () => {
  await Tone.start();
});

const synth = new Tone.Synth().toDestination();
synth.triggerAttackRelease('C4', '8n');     // Do central, corchea

Mapear altura visual ↔ altura sonora

function mapToFreq(value, min, max) {
  return 200 + ((value - min) / (max - min)) * 600;   // [200..800] Hz
}

MIDI — el lenguaje musical

MIDI numera cada nota: Do central = 60, una octava arriba = 72, cada semitono = 1. Mapear a MIDI en lugar de Hz hace que las diferencias se perciban musicalmente — el oído reconoce intervalos:

function mapToMidi(v, min, max) {
  return 60 + Math.round(((v - min) / (max - min)) * 24);    // 2 octavas
}

El esquema Fig. 28.2 resume el mapeo de punta a punta: cada barra del gráfico se proyecta sobre el teclado, y la tecla que alcanza fija el número MIDI que suena. Barra más alta, tecla más aguda.

Del gráfico al teclado — cada barra (un mes) se proyecta sobre el piano y se convierte en una nota. MIDI numera las notas de forma lineal: el Do central es **60** y cada semitono suma **1**, hasta llegar a **72** (Do, una octava más arriba). Mapear el dato a un número MIDI en lugar de una frecuencia en Hz hace que las diferencias se escuchen como **intervalos musicales** reconocibles: una barra más alta es, literalmente, una nota más aguda.
Fig. 28.2: Del gráfico al teclado — cada barra (un mes) se proyecta sobre el piano y se convierte en una nota. MIDI numera las notas de forma lineal: el Do central es 60 y cada semitono suma 1, hasta llegar a 72 (Do, una octava más arriba). Mapear el dato a un número MIDI en lugar de una frecuencia en Hz hace que las diferencias se escuchen como intervalos musicales reconocibles: una barra más alta es, literalmente, una nota más aguda.

Demo didáctica — please-hire básico

El mismo dataset que la viñeta de T1 (tickets recibidos vs procesados), pero sin narrativa. Click en cualquier barra → suena la nota MIDI proporcional al valor (triangle para Received, sine para Processed). "Play Sequence" recorre los 12 meses.

function mapValueToMIDI(v, inMin, inMax, outMin, outMax) {
  return Math.round((v - inMin) * (outMax - outMin) / (inMax - inMin) + outMin);
}

document.getElementById('myDiv').on('plotly_click', d => {
  const midiNote = mapValueToMIDI(d.points[0].y, minValue, maxValue, 45, 81);
  const synth = new Tone.Synth({ oscillator: { type: 'sine' } }).toDestination();
  synth.triggerAttackRelease(Tone.Frequency(midiNote, "midi"), "0.5");
});

🟢 demo en vivoplease-hire básico — click en cualquier barra para oír la nota

📚 Didáctica · sólo el mecanismo Tone.js sobre el mismo dataset. Comparála con el combinado más abajo donde se cuenta una historia.

Estrategia 3 — Instrumentos reales (WebAudioFont)

Tone.js suena sintético. Para que suene a piano de verdad, guitarra, trompeta, usamos WebAudioFont (surikov/webaudiofont), una librería con cientos de instrumentos.

<script src="https://surikov.github.io/webaudiofontdata/sound/0730_FluidR3_GM_sf2_file.js"></script>
const audioCtx = new AudioContext();
const player   = new WebAudioFontPlayer();
player.queueWaveTable(audioCtx, audioCtx.destination,
  _tone_0730_FluidR3_GM_sf2_file, 0, 60, 1);    // Do central, 1 segundo

Demo didáctica — Apple stock + piano

Botón "Play data": el piano recorre la serie temporal del precio de Apple, una nota por día, altura proporcional al precio.

🟢 demo en vivoApple stock + piano WebAudioFont — botón "Play data"

📚 Didáctica · técnica funcional pero la línea ya se ve. Sirve para aprender, no es nivel de proyecto.

Apple + filtros + sonificación — más didáctico

Los mismos demos de filtro de T3 con sonificación encima. Filtrar la serie y reproducirla con piano: la técnica funciona pero el filtro y el sonido son decoración — no comunican nada que el gráfico no diga.

🟢 demo en vivoApple stock — filtro con menú + sonificación
🟢 demo en vivoApple stock — doble slider + sonificación

📚 Didáctica · combinaciones técnicas. Útil para aprender a integrarlas, pero el filtro y el sonido aquí son decoración: no comunican nada que el gráfico filtrado solo no comunique.

Estrategia 4 — Voz (Web Speech API)

const u = new SpeechSynthesisUtterance("Dos personas renunciaron en mayo");
u.lang = "es-es";
window.speechSynthesis.speak(u);

Sola es útil para accesibilidad y narración, pero su fuerza real aparece combinada con las otras estrategias (lo veremos abajo en el combinado).

Ejemplo del curso — la casita que tiembla (terremotos)

El mapa interactivo de T3 con audio encima. Tres MP3 (low.mp3, medium.mp3, high.mp3) que se mezclan según la magnitud — no se elige uno, los tres suenan a la vez con volúmenes distintos:

const highAudio   = new Audio("high.mp3");
const mediumAudio = new Audio("medium.mp3");
const lowAudio    = new Audio("low.mp3");

myPlot.on('plotly_click', data => {
  const m = terremotos[data.points[0].pointIndex].Magnitud;
  highAudio.volume   = Math.max(0, Math.min(1, m - 7.9));
  mediumAudio.volume = Math.max(0, Math.min(1, m - 6.9));
  lowAudio.volume    = Math.max(0, Math.min(1, m - 5.9));
  [highAudio, mediumAudio, lowAudio].forEach(a => {
    a.currentTime = 0; a.play();
  });
});

Truco: la mezcla por volúmenes da una transición orgánica entre magnitudes — un terremoto 7.5 suena distinto a uno 8.5 sin saltos.

🟢 demo en vivoCasita que tiembla — click en cualquier terremoto del mapa

🎯 Proyecto · el sonido recrea físicamente la experiencia del terremoto. La casita que tiembla, en el navegador. Aquí la sonificación no decora: cuenta.

Combinar estrategias — "Contraten dos personas"

El demo más rico de la cápsula. Sobre el gráfico de tickets de T1, el botón "▶ Cuéntame en sonidos" dispara una secuencia que combina varias estrategias para contar una pequeña historia:

  • una línea roja vertical que avanza mes a mes (visual)
  • un tono sintético FM (Tone.js, E2) cuya frecuencia baja según la diferencia entre tickets recibidos y procesados
  • en mayo, una voz (SpeechSynthesis, E4) anuncia "dos personas renunciaron en mayo"
  • al mismo tiempo, un MP3 de puerta cerrándose (icono sonoro, E1) suena dos veces — las dos personas que se fueron
  • al final, una caída tonal lenta (Tone.js, E2 otra vez) representa la imposibilidad de recuperarse, y la voz cierra: "no podemos recuperarnos desde entonces"
// Las tres estrategias trabajan juntas en el mismo tick
synth.triggerAttackRelease(freqByDiff, "4n");           // E2: tono
if (mes === 4) {
  doorClosing.currentTime = 0; doorClosing.play();         // E1: icono
  speak("dos personas renunciaron en mayo");              // E4: voz
}

🟢 demo en vivoplease-hire combinado — botón "Cuentame en sonidos"

🎯 Proyecto · combina tono + voz + icono sonoro al servicio de la narrativa. La sonificación aquí amplifica el mensaje de la viñeta original.

Proyectos del curso — organizados por estrategia

Cada proyecto del curso eligió la estrategia que encaja con el dato y con la experiencia que querían provocar. Acá los iframes están en vivo — no hay videos: la sonificación se escucha sólo activándola.

Estrategia 1 (MP3 / iconos sonoros)

Lluvia en Chile — MP3 naturales por intensidad

Tres MP3 de lluvia natural (suave, media, fuerte) cruzados con las precipitaciones por región. Click en una región → suena la intensidad de su lluvia. El sonido elegido es mimético: la lluvia suena a lluvia.

🟢 demo en vivoLluvia en Chile — click en una región

🎯 Proyecto · sonificación con significado emocional. Conecta el dato abstracto con la sensación física de estar bajo esa lluvia.

Viento V Región — paisajes sonoros por categoría

Brisa para días suaves, ventiscas de campo para días intensos, naturaleza ambiente para los medianos. Mapeo discreto (3 categorías) pero culturalmente reconocible.

🟢 demo en vivoViento V Región — versión sonora

🎯 Proyecto · paisaje sonoro como dimensión de comprensión.

Mundiales fútbol — cheers proporcional a asistencia

Hover sobre un país → el público del estadio aplaude. El volumen de los cheers crece con la asistencia del Mundial que ese país hospedó. Cuando un país no tiene datos, suena un "no encontrado".

🟢 demo en vivoMundiales fútbol — hover en un país

🎯 Proyecto · MP3 ambient (cheer del público) + modulación de volumen. Conecta dato (asistencia) con experiencia (estar en el estadio).

Electricidad por región — pulso que se acelera

MP3 de un pulso que se reproduce a intervalo proporcional al consumo. Más consumo → pulso más rápido. La velocidad de repetición codifica el dato — variación temporal del mismo MP3.

🟢 demo en vivoElectricidad — hover en una región para oír el pulso

🎯 Proyecto · MP3 corto + modulación de la frecuencia de repetición. Cabe en estrategia 1 con un giro temporal.

100m olímpicos — pasos de carrera con tempo

MP3 loop de pasos corriendo. Click en un medallista → el loop se reproduce con playbackRate proporcional a su tiempo de carrera. Al final más rápido → loop más acelerado.

🟢 demo en vivo100m olímpicos — click en un medallista

🎯 Proyecto · MP3 + playbackRate. La velocidad mecánica del audio refleja la velocidad humana del corredor.

Gasto militar mundial — 6 niveles MP3 discretos

Click en un país → suena uno de seis MP3, según el bucket de % PIL. Más serie discreta del mundo: una alarma diferente para cada nivel (de aviso suave a alarma de guerra).

🟢 demo en vivoGasto militar — click en un país

🎯 Proyecto · iconos sonoros discretos por bucket. Comunican jerarquía de gravedad sin números.

Estrategia 2 (Tono sintetizado)

Autos más rápidos — oscilador con rampa de frecuencia

Click en un coche → un Tone.Oscillator parte de 30 Hz y hace una rampa lineal hasta el doble de la velocidad del coche en Hz, en 3 segundos. El crescendo del tono encarna la aceleración del coche.

🟢 demo en vivoAutos más rápidos — click en un punto

🎯 Proyecto · sintético justificado — un MP3 grabado no captura la rampa lineal de aceleración.

Combinación — Tono + Voz (Estrategia 2 + 4)

Cuando el sonido sintético solo no basta, una voz narrante después da contexto: el oído percibe primero la magnitud sonora, luego el cerebro recibe la información detallada en palabras.

Montañas rusas — Doppler sintético + voz narrante

Click en un coaster: primero un tono sintético tipo Doppler (sube y baja imitando el paso del coaster frente al oído, frecuencia mapea velocidad). Cuando el Doppler termina, una voz (Web Speech API) lee nombre, ubicación, parque y velocidad. Sintético + voz: el tono emociona, la voz informa.

function narrarYSonificar(c) {
  playDoppler(c.Speed, () => {              // E2: Web Audio
    speechSynthesis.speak(new SpeechSynthesisUtterance(
      `La montaña rusa ${c.coaster_name} está en ${c.Park}. ` +
      `Su velocidad máxima es de ${c.Speed} kilómetros por hora.`
    ));                                       // E4: voz
  });
}

🟢 demo en vivoMontañas rusas — click en un marker: Doppler + voz narrante

🎯 Proyecto · combina tono sintético (E2, imita el paso físico) + voz (E4, da los datos en palabras). El sintético no existe como MP3 — se construye en tiempo real.

Migración de gaviota — tono por latitud + voz por estación

La animación temporal de T3 ahora habla. Mientras la gaviota recorre la rotta: - un tono Tone.js cuya frecuencia mapea la latitud suena en cada paso - cuando cambia la estación, una voz (Web Speech API) anuncia "Verano", "Otoño", …

synth.triggerAttackRelease(latitudeToFreq(lat), '100n');
if (currentSeason !== seasonName) speak(seasonName);    // estrategia 4

🟢 demo en vivoMigración — click "Migrar" para iniciar

🎯 Proyecto · tono continuo (E2) + voz (E4). El sonido marca el ritmo del viaje, la voz da estructura narrativa.

Tres contextos donde la sonificación aporta

  • Emocionar — música, narrativa, paisajes sonoros (lluvia, viento, casita que tiembla)
  • Amplificar cognición — alarmas, monitoreo (médico, networking)
  • Accesibilidad — discapacidad visual, narración de gráficos

Si tu proyecto no encaja en ninguno de los tres, probablemente la sonificación está sobrando.

Prototipado: virtual, mixto y físico — fidelidad y reconfigurabilidad

Falla Barato, Aprende Caro

Visualizetor: máquina letal de dashboards

Diseñar en la pantalla está bien para empezar. Pero antes de invertir cien horas en programar la versión final, hay que prototipar. Un prototipo es una pregunta hecha objeto.

¿Qué es un prototipo?

Un prototipo es una versión temprana y simplificada de una representación visual de información. Imagina que estás diseñando un panel de control para visualizar métricas: antes de desarrollar la interfaz final, creas una representación básica para visualizar cómo se presentará la información. Esto permite explorar diferentes enfoques y evaluar la efectividad de la visualización antes de invertir en su desarrollo completo. Este proceso se conoce como prototipado y es fundamental en el diseño de visualizaciones de datos y la fisicalización de información.

Tipos de Prototipado en Visualización de Datos

El prototipado en visualización de datos puede adoptar diversas formas, según el tipo de datos que se estén representando y las interacciones que se deseen explorar. A continuación, examinamos tres enfoques principales:

  • El prototipado virtual se centra en crear representaciones digitales de los datos. Utiliza herramientas de visualización para simular cómo se presentarán los datos en un entorno interactivo. Esto permite realizar pruebas rápidas y obtener retroalimentación sobre la navegación y la efectividad de la visualización. Por ejemplo, al crear un gráfico interactivo, se pueden ajustar los elementos visuales y analizar cómo los usuarios interactúan con ellos.
  • El prototipado mixto combina elementos físicos y virtuales para crear una experiencia de visualización enriquecida. Por ejemplo, un prototipo físico que integre realidad aumentada (AR) puede superponer datos digitales sobre un objeto físico, permitiendo a los usuarios interactuar con la información de manera más tangible. Este enfoque es especialmente útil en la fisicalización de datos, donde el objetivo es hacer que los datos sean más accesibles y comprensibles a través de experiencias interactivas.
  • El prototipado físico implica la creación de modelos tangibles que representan datos o conceptos. Por ejemplo, maquetas tridimensionales que visualizan patrones de datos complejos. Estos prototipos pueden ser interactivos si incorporan sensores y actuadores programables, permitiendo a los usuarios explorar los datos a través de interacciones físicas. Esto es fundamental en la fisicalización de datos, ya que transforma la información abstracta en experiencias concretas que pueden ser tocadas y manipuladas.

🧩 Tres tipos, tres preguntas. Si un prototipo es una pregunta hecha objeto, el tipo que elijas depende de qué quieres averiguar: el virtual responde «¿cómo se navega?», el físico «¿cómo se siente en la mano?», y el mixto «¿cómo se funde el dato con el espacio real?».

Estos tres enfoques se ilustran lado a lado en el ejemplo (Fig. 29.1): a la izquierda un prototipo virtual, en el centro uno mixto y a la derecha uno físico.

Tres prototipos de InfoVis lado a lado — virtual, mixto y físico. Encarna la idea inicial de la cápsula: un prototipo es
Fig. 29.1: Tres prototipos de InfoVis lado a lado — virtual, mixto y físico. Encarna la idea inicial de la cápsula: un prototipo es "una pregunta hecha objeto", y según qué preguntes (¿cómo se navega?, ¿cómo se siente al tacto?, ¿cómo se integra con el espacio real?) elegirás un tipo u otro. Tres modalidades, tres preguntas distintas.

Técnicas de Prototipado Rápido en Visualización de Datos

El prototipado rápido es crucial para iterar sobre ideas y conceptos en la visualización de datos. Algunas técnicas incluyen:

  • Bocetos en Papel: Dibujos rápidos que capturan ideas y conceptos visuales. Son ideales para explorar representaciones de datos de manera ágil y comunicar ideas iniciales sin preocuparse por los detalles técnicos.
  • Maquetas Físicas: Modelos tridimensionales que permiten a los usuarios interactuar con los datos de manera tangible. Al integrar sensores, estas maquetas pueden responder a las interacciones, ofreciendo una evaluación más rica de la ergonomía y el tamaño en el contexto de la visualización de datos.
  • Simulaciones en Software: Prototipos digitales que permiten probar flujos de usuario y evaluar cómo los usuarios navegan por los datos. Son especialmente útiles para obtener comentarios realistas sobre la interacción y el diseño de la visualización.

La comparación (Fig. 29.2) muestra estas tres técnicas en paralelo: una maqueta física, un boceto en papel y un mockup de software.

Tres técnicas de prototipado rápido — maqueta, papel, software — mostradas en paralelo. Refuerza la lección
Fig. 29.2: Tres técnicas de prototipado rápido — maqueta, papel, software — mostradas en paralelo. Refuerza la lección "falla barato, aprende caro": las tres tienen en común que se construyen en horas, no semanas, y por eso permiten descartar ideas malas antes de invertir en la implementación final. Materiales reciclados, lápiz y software simple bastan.

Niveles de Fidelidad en Prototipos de Visualización

La fidelidad del prototipo es un factor clave en la visualización de datos. No todos los prototipos necesitan ser precisos y detallados. Dependiendo de la etapa del proyecto y los objetivos, se pueden emplear diferentes niveles de fidelidad:

  • Los prototipos de baja fidelidad son rápidos y esquemáticos, enfocándose en la idea general de la visualización sin preocuparse por los detalles específicos. Son útiles para explorar múltiples conceptos, obtener retroalimentación temprana y ahorrar tiempo en las fases iniciales del diseño de visualización.
  • Los prototipos de fidelidad media ofrecen más detalles que los bocetos, pero no alcanzan la complejidad de un producto final. Permiten refinar conceptos, evaluar flujos de usuario con mayor realismo y comunicar ideas visualmente con cierto grado de interactividad.
  • Los prototipos de alta fidelidad son versiones detalladas y cercanas al producto final. Incluyen elementos visuales y funcionales que permiten evaluar la experiencia del usuario en profundidad. Son ideales para presentar a inversores o partes interesadas y para validar detalles específicos de la visualización.

🪜 Baja fidelidad temprano, alta fidelidad tarde. El error clásico del principiante es pulir demasiado pronto: montar un prototipo de alta fidelidad sólo para explorar ideas cuesta horas y, peor, te enamora del producto antes de validarlo. Mientras más temprana la etapa, más esquemático conviene el prototipo.

El esquema (Fig. 29.3) resume los tres niveles de fidelidad con un ejemplo representativo de cada uno (consulta la presentación para más ejemplos).

Evolución de la fidelidad de un prototipo a lo largo de cuatro etapas — de cartón a aluminio fresado por CNC. Lección clave: cuanto más temprano en el ciclo, menor fidelidad conviene. Hacer un prototipo de alta fidelidad para explorar conceptos es perder tiempo y enamorarse del producto antes de validarlo. Cada nivel sirve para una etapa distinta del diseño.
Fig. 29.3: Evolución de la fidelidad de un prototipo a lo largo de cuatro etapas — de cartón a aluminio fresado por CNC. Lección clave: cuanto más temprano en el ciclo, menor fidelidad conviene. Hacer un prototipo de alta fidelidad para explorar conceptos es perder tiempo y enamorarse del producto antes de validarlo. Cada nivel sirve para una etapa distinta del diseño.

Factores Clave: Reconfigurabilidad y Nivel de Habilidad

Al elegir el tipo de prototipo, es esencial considerar factores como:

  • Reconfigurabilidad: La capacidad del prototipo para ser reordenado o modificado en nuevas configuraciones. Esto permite probar diferentes representaciones de datos sin comenzar desde cero, facilitando la exploración de múltiples enfoques visuales.
  • Nivel de Habilidad: El nivel de destreza técnica requerido para crear o manipular el prototipo. Los prototipos de baja fidelidad suelen requerir menos habilidades técnicas, mientras que los de alta fidelidad pueden necesitar conocimientos más avanzados.

🧭 Lee el diagrama como una brújula, no como teoría. Antes de construir nada, ubica tu proyecto en el plano: si vas a iterar harto, busca un prototipo de alta reconfigurabilidad y baja barrera técnica —kits de construcción, cartón—. Deja los métodos caros de rehacer para cuando el diseño ya esté casi cerrado.

El diagrama (Fig. 29.4) cruza ambos factores —reconfigurabilidad y nivel de habilidad técnica requerida— y ubica los distintos tipos de prototipo en el plano resultante.

Matriz que cruza fidelidad, reconfigurabilidad y nivel de habilidad técnica requerido para cuatro tipos de prototipo (kits de construcción, modelado en cartón, modelado en arcilla, impresión 3D económica). Ayuda a elegir conscientemente: si necesitas iterar mucho, busca alta reconfigurabilidad y baja barrera técnica. La cápsula usa esta imagen como herramienta de decisión, no como teoría — antes de empezar a construir, situate en el mapa y elige la región adecuada.
Fig. 29.4: Matriz que cruza fidelidad, reconfigurabilidad y nivel de habilidad técnica requerido para cuatro tipos de prototipo (kits de construcción, modelado en cartón, modelado en arcilla, impresión 3D económica). Ayuda a elegir conscientemente: si necesitas iterar mucho, busca alta reconfigurabilidad y baja barrera técnica. La cápsula usa esta imagen como herramienta de decisión, no como teoría — antes de empezar a construir, situate en el mapa y elige la región adecuada.

Interactividad en Visualización de Datos Físicas e Interactivas

Más allá del nivel de fidelidad, la interactividad del prototipo es una decisión clave que afecta tanto la complejidad como las preguntas que el prototipo puede responder. Cada modalidad ilumina aspectos distintos de la experiencia del usuario.

Prototipos en Pantalla

Los prototipos en pantalla son representaciones digitales que pueden ir desde maquetas interactivas simples (Figma, InVision) hasta simulaciones de alta fidelidad cercanas al producto final. Sus tres ventajas concretas:

  • Probar flujos de usuario completos — el usuario navega como en el producto real, lo que permite identificar puntos de fricción.
  • Evaluar navegación e interacción — facilita pruebas sobre si la información se presenta de manera clara.
  • Obtener feedback realista — el usuario interactúa y comenta sobre la experiencia, no sobre una imagen estática.

Prototipos Físicos

Los prototipos físicos son modelos tangibles construidos con cartón, espuma, plástico, o materiales reciclados. Se vuelven interactivos al integrar sensores y actuadores programables (servos, parlantes, vibradores, LEDs). Ejemplos típicos en InfoVis: maquetas de dispositivos donde se mostrarán datos, prototipos de instalaciones para museos, modelos arquitectónicos que integran visualización. Sus ventajas son específicas:

  • Evaluar ergonomía y experiencia táctil — el peso, la textura y el tamaño físico importan, y sólo se pueden probar en el cuerpo.
  • Simular movimientos y acciones físicas — qué pasa cuando el usuario toca, agita, gira el dispositivo.
  • Obtener feedback de uso real — el contexto físico (luz, ruido, otras personas alrededor) es difícil de simular en pantalla.

Prototipado Offline y Online

El proceso de prototipado también se puede partir en dos modos: offline y online.

El prototipado offline usa lápiz, papel, cartón, cinta adhesiva, recortes. Su ventaja es la velocidad y el bajísimo costo de modificar: arrancas un papel, dibujas otro, en cinco minutos tienes una alternativa para comparar. Es ideal para los primeros pasos de materialización de una idea y para compartir visiones iniciales con el equipo sin compromiso.

El prototipado online, en cambio, lleva el diseño a una dimensión más avanzada usando simulaciones interactivas con software o hardware específico. Ofrece dos cosas que el offline no puede: probar flujos de usuario y funcionalidades en un entorno cercano al producto final, y obtener insights sobre la viabilidad técnica (¿se puede construir esto en hardware real? ¿el sensor responde bien?).

La regla práctica: empezar offline y muy a mano, y pasar a online sólo cuando las preguntas de diseño ya no se pueden responder en papel.


Sensores y actuadores multipropósito: cámara, micrófono, parlante, pantalla

Tu Celular Ya Tiene Todo lo que Necesitas

Visualizetor: máquina letal de dashboards

Para que un prototipo físico sea interactivo, necesita dos cosas: sentidos para percibir (sensores), y manos para actuar (actuadores). Y lo mejor: tu celular ya los tiene todos.

Cómo crear visualizaciones físicas e interactivas

Una visualización física e interactiva no se limita a mostrar datos; también permite que el prototipo tome decisiones a partir del entorno y que el usuario participe activamente. Para lograrlo, todo sistema combina dos clases de componentes:

  • Los sensores detectan cambios en el entorno físico (movimiento, luz, sonido, proximidad) y los convierten en datos digitales que el sistema puede procesar.
  • Los actuadores introducen cambios en el entorno físico en respuesta a esos datos: mover un motor, encender una luz, reproducir un sonido, vibrar.

🧠 Un sistema interactivo funciona como un cuerpo. Los sensores son los sentidos —vista, oído, tacto— que captan el mundo; el procesador es el cerebro que decide; los actuadores son las manos y la voz que lo modifican. La sinergia de las tres partes es lo que vuelve viva a una InfoVis física, en vez de un mero objeto decorativo.

La misma anatomía se reconoce en una persona (Fig. 30.1) y en una máquina (Fig. 30.2).

El lado humano de la analogía sensor–procesador–actuador: los sentidos —vista, oído, tacto— captan el mundo, el cerebro decide y las manos y la voz lo modifican. Sirve de espejo para entender cómo se organiza un sistema físico interactivo.
Fig. 30.1: El lado humano de la analogía sensor–procesador–actuador: los sentidos —vista, oído, tacto— captan el mundo, el cerebro decide y las manos y la voz lo modifican. Sirve de espejo para entender cómo se organiza un sistema físico interactivo.
El lado máquina de la analogía: sensores que capturan datos del entorno, un procesador que los interpreta y actuadores que ejecutan la respuesta. La misma arquitectura del cuerpo humano —percibir, decidir, actuar— trasladada a un dispositivo.
Fig. 30.2: El lado máquina de la analogía: sensores que capturan datos del entorno, un procesador que los interpreta y actuadores que ejecutan la respuesta. La misma arquitectura del cuerpo humano —percibir, decidir, actuar— trasladada a un dispositivo.

📱 Tu celular ya trae todos los sensores y actuadores que un prototipo necesita. No hace falta comprar hardware suelto: basta con el aparato que ya llevas en el bolsillo.

El esquema (Fig. 30.3) reparte los componentes del smartphone en dos familias: en azul los sensores —cámara, micrófono, GPS, giroscopio, acelerómetro y el tacto de la pantalla—; en verde los actuadores —parlantes, pantalla y vibrador—.

Esquema del smartphone como caja de sensores y actuadores. En azul, los sensores que captan el entorno —cámara, micrófono, GPS, giroscopio, acelerómetro y pantalla táctil—; en verde, los actuadores que actúan sobre él —parlantes, pantalla y vibrador—. Resume la tesis de la cápsula: el hardware de un prototipo interactivo ya está en el bolsillo.
Fig. 30.3: Esquema del smartphone como caja de sensores y actuadores. En azul, los sensores que captan el entorno —cámara, micrófono, GPS, giroscopio, acelerómetro y pantalla táctil—; en verde, los actuadores que actúan sobre él —parlantes, pantalla y vibrador—. Resume la tesis de la cápsula: el hardware de un prototipo interactivo ya está en el bolsillo.

Sensores Multipropósito

Los sensores multipropósito son dispositivos diseñados para detectar y medir una amplia variedad de cambios en el entorno físico, transformando esas observaciones en datos utilizables. A diferencia de los sensores específicos, que tienen un propósito limitado (como medir la temperatura o la presión), los sensores multipropósito pueden adaptarse a diversas aplicaciones, lo que les permite captar información de manera más dinámica en InfoVis físicas e interactivas. Estos sensores a menudo requieren procesamiento de datos y técnicas de inteligencia artificial (IA) para interpretar las señales y actuar de manera efectiva. Por ejemplo, el uso de bibliotecas como Google MediaPipe permite el análisis de video y la detección de características en tiempo real, ampliando las capacidades de los sensores.

A continuación, se detallan algunos tipos de sensores multipropósito:

Las cámaras pueden detectar una variedad de elementos en el ambiente, incluyendo:

  • Movimiento en el ambiente: Identifican cambios en la posición de objetos o personas, facilitando interacciones dinámicas.
  • Luz: Miden la intensidad de la luz, lo que puede influir en la presentación visual de la información.
  • Presencia: Detectan la presencia de personas en el área, activando la visualización solo cuando hay interacción.
  • Marcadores ARUCO: Se utilizan para el seguimiento preciso de objetos en entornos de realidad aumentada.
  • Reconocimiento facial: Pueden identificar caras, expresiones faciales y la posición de puntos salientes (landmarks), lo que permite adaptar la experiencia del usuario.
  • Seguimiento de cuerpos: Identifican la posición y los puntos salientes de los cuerpos, permitiendo interacciones más personalizadas.
  • Seguimiento de manos: Detectan la posición y los puntos salientes de las manos, facilitando interacciones táctiles y gestuales.

Los micrófonos son esenciales para captar el entorno sonoro y pueden detectar:

  • Cantidad de ruido: Proporcionan una aproximación de los niveles de sonido en el ambiente.
  • Habla: Permiten la interacción verbal y pueden integrarse en sistemas de reconocimiento de voz.
  • Eventos de sonidos: Se utilizan para clasificar y responder a diferentes tipos de sonidos en el entorno.

Combinación de Sensores

La potencia de un prototipo crece cuando se combinan sensores complementarios para capturar fenómenos que ninguno por sí solo podría medir bien:

  • Acelerómetros — miden aceleración lineal y, indirectamente, la inclinación de un dispositivo respecto a la gravedad. Detectan agitaciones, golpes, rotaciones bruscas.
  • Giroscopios — miden velocidad angular en los tres ejes. Combinados con el acelerómetro, dan la orientación 3D completa del dispositivo en el espacio.

La combinación acelerómetro+giroscopio es la que permite, por ejemplo, que un celular sepa si está en horizontal o vertical, si gira sobre la mano, o si está siendo sacudido como un sismo. Cualquier prototipo que requiera tracking de posición en 3D —juegos, navegación, fisicalización de movimiento— depende de esta combinación.

Actuadores Multipropósito

Los actuadores multipropósito son dispositivos que permiten a los sistemas de InfoVis interactuar con el entorno físico. A diferencia de los actuadores específicos, que tienen una función concreta (como encender una luz o mover un motor), los actuadores multipropósito pueden adaptarse a diferentes necesidades de interacción y respuesta. Estos dispositivos son fundamentales para traducir los datos procesados en acciones tangibles que enriquecen la experiencia del usuario.

A continuación, se presentan algunos ejemplos de actuadores multipropósito:

Los parlantes son actuadores que pueden:

  • Reproducir sonidos: Proporcionan retroalimentación auditiva en respuesta a interacciones del usuario.
  • Reproducir notas musicales: Se pueden usar para crear experiencias interactivas basadas en la música.
  • Reproducir habla: Permiten la comunicación verbal entre el sistema y el usuario.

Las pantallas son herramientas visuales clave en la InfoVis que pueden:

  • Mostrar visualizaciones de datos: Facilitan la representación gráfica de información de manera efectiva y atractiva.
  • Reproducir el comportamiento de componentes físicos: Pueden simular el funcionamiento de lámparas, interruptores y perillas (gracias al sensor táctil), proporcionando una experiencia interactiva realista.

La pantalla, gracias al sensor táctil, puede incluso reproducir el comportamiento de controles físicos tradicionales como interruptores y perillas (Fig. 30.4).

Controles físicos —interruptores, perillas, sliders— junto a sus equivalentes en una pantalla táctil. Gracias al sensor de toque, la pantalla puede emular casi cualquier control físico tradicional: accionar un interruptor o girar una perilla, ahora sobre vidrio — un actuador que, además, hace de sensor.
Fig. 30.4: Controles físicos —interruptores, perillas, sliders— junto a sus equivalentes en una pantalla táctil. Gracias al sensor de toque, la pantalla puede emular casi cualquier control físico tradicional: accionar un interruptor o girar una perilla, ahora sobre vidrio — un actuador que, además, hace de sensor.

Existen herramientas como Protobject Framework que permiten prototipar de manera rápida y sencilla sistemas físicos interactivos para visualización de información, utilizando los sensores y actuadores de los smartphones.

Ejemplos de Prototipos de InfoVis Físicas e Interactivas

Para aterrizar la teoría, conviene ver siete prototipos concretos donde sensores y actuadores cobran sentido. Cada uno responde a una pregunta de visualización con la combinación mínima de hardware que la hace posible.

📱 Siete prototipos de verdad — cada uno con su video. Lo que sigue no son ideas en el papel: son sistemas que funcionan, construidos con los sensores y actuadores del celular. Fíjate cómo, en cada caso, bastan dos o tres componentes para volver tangible una harto interesante pregunta de datos.

Visualización del Consumo de Energía

Una cámara cuenta cuántas personas hay en la habitación mediante detección facial o reconocimiento de movimiento, y los datos de consumo eléctrico se ajustan en tiempo real según ese número. La pregunta: ¿cómo cambia el consumo per cápita con la ocupación? (Fig. 30.5)

Fig. 30.5: Prototipo «consumo de energía»: una cámara cuenta las personas frente a ella y el gráfico de consumo eléctrico se recalcula en vivo según la ocupación. Sensor: cámara (conteo de caras). Pregunta: ¿cómo cambia el consumo per cápita cuando entra o sale gente?

Regulación de Temperatura

Un giroscopio y un acelerómetro montados sobre una puerta detectan su apertura y el grado de la misma. Cuando la puerta se abre, el sistema calcula el descenso de temperatura proyectado y lo dibuja en un gráfico en tiempo real. La pregunta: ¿cuánto calor pierdo si dejo la puerta entreabierta? (Fig. 30.6)

Fig. 30.6: Prototipo «regulación de temperatura»: un giroscopio y un acelerómetro montados sobre una puerta miden cuánto se abre, y el sistema dibuja en tiempo real la caída de temperatura proyectada. Sensores: giroscopio + acelerómetro. Pregunta: ¿cuánto calor se pierde con la puerta entreabierta?

Simulación de Terremotos

Una casita LEGO con un acelerómetro adentro; el usuario la sacude y el sistema busca, en una base histórica de sismos chilenos, cuál se acerca más en intensidad al movimiento generado. La pregunta: ¿cuánto se siente realmente un terremoto de magnitud 7,5? (Fig. 30.7)

Fig. 30.7: Prototipo «simulación de terremotos»: una casita LEGO con un acelerómetro adentro; al sacudirla, el sistema busca en una base histórica de sismos chilenos cuál coincide en intensidad. Sensor: acelerómetro. Pregunta: ¿cuánto se siente de verdad un terremoto de magnitud 7,5?

Filtrado de Datos por Distancia

La cámara mide la proximidad del usuario a la pantalla y ajusta automáticamente el zoom de la visualización (más cerca, más detalle; más lejos, vista general). Implementa el mantra de Shneiderman con el cuerpo. (Fig. 30.8)

Fig. 30.8: Prototipo «filtrado por distancia»: la cámara mide la proximidad del cuerpo a la pantalla y ajusta el zoom de la visualización —más cerca, más detalle; más lejos, vista general—. Sensor: cámara. Es el mantra «overview → zoom & filter» ejecutado con el cuerpo.

Predicciones del Precio del Bitcoin

La cámara reconoce gestos, expresiones faciales y posición de las manos; un acelerómetro detecta la inclinación de objetos físicos. Según las reacciones del usuario, el sistema muestra una predicción optimista, neutral o pesimista. La pregunta: ¿cómo influye el sesgo emocional del lector en la lectura de proyecciones? (Fig. 30.9)

Fig. 30.9: Prototipo «predicciones de Bitcoin»: la cámara lee gestos y expresiones y un acelerómetro mide la inclinación de objetos; según las reacciones del usuario el sistema muestra una proyección optimista, neutral o pesimista. Pregunta: ¿cómo sesga la emoción del lector la lectura de una predicción?

Control de Exportaciones de Productos

Productos físicos (porotos, té, atún) marcados con códigos ARUCO se mueven sobre una superficie; la cámara los rastrea y el gráfico de exportaciones por país se reordena en tiempo real. La pregunta: ¿qué pasa con el ranking si pongo el foco en este producto? (Fig. 30.10)

Fig. 30.10: Prototipo «control de exportaciones»: productos físicos (porotos, té, atún) con marcadores ARUCO se mueven sobre una mesa; la cámara los rastrea y el gráfico de exportaciones por país se reordena en vivo. Sensor: cámara (ARUCO). Pregunta: ¿cómo cambia el ranking al enfocar un producto?

Interacción con un Mapa Físico

Un mapa impreso, una cámara que sigue el dedo índice del usuario, y un parlante que dice en voz alta el monto exportado de frutas del país tocado. La pregunta: ¿se puede explorar un dataset geográfico sin pantalla? (Fig. 30.11)

Fig. 30.11: Prototipo «mapa físico»: un mapa impreso, una cámara que sigue la punta del dedo índice y un parlante que dice en voz alta las exportaciones del país señalado. Sensor: cámara (mano); actuador: parlante. Pregunta: ¿se puede explorar un dataset geográfico sin pantalla?

Cada ejemplo es minimalista por diseño: una pregunta, dos o tres sensores, una respuesta tangible. Combinaciones más complejas (cámara + acelerómetro + parlante) sólo se justifican cuando la pregunta lo exige. La regla de oro: el hardware sirve a la pregunta, no al revés.


Fisicalización para comunicación, educación y accesibilidad

Los Datos También Se Tocan

Visualizetor: máquina letal de dashboards

Imaginen un mundo donde los datos no viven solo en pantallas, donde se tocan, se sienten en las manos. Eso es fisicalización de datos. Y existe desde hace siglos.

Fisicalización para comunicación y educación

La fisicalización de datos se utiliza en comunicación y educación para transformar datos abstractos en objetos físicos que las personas pueden ver, tocar y manipular. Esto permite a educadores y comunicadores presentar la información de manera más clara y tangible, ayudando al público a comprender conceptos complejos de forma más intuitiva.

Enseñar con las manos no es nuevo — tiene siglos. De los modelos sólidos de geometría de George Adams a los bloques LEGO de Hans Rosling, el gesto es siempre el mismo: volver agarrable una idea abstracta. Y lo que las manos manipulan, la cabeza lo retiene mucho mejor.

Dos ejemplos clásicos (Fig. 31.1) ilustran esta tradición: en el siglo XVIII, George Adams construyó modelos sólidos de geometría tridimensional para enseñar matemáticas, y más tarde Dorothy Hodgkin creó modelos moleculares físicos para explicar descubrimientos científicos como la estructura de la penicilina.

George Adams (siglo XVIII) con modelos sólidos para enseñar geometría, y Dorothy Hodgkin con modelos moleculares para explicar la penicilina. Demuestra que la fisicalización no es una novedad tecnológica del siglo XXI: hace siglos que los conceptos abstractos se enseñan mejor cuando se tocan. Material histórico que legitima toda la cápsula.
Fig. 31.1: George Adams (siglo XVIII) con modelos sólidos para enseñar geometría, y Dorothy Hodgkin con modelos moleculares para explicar la penicilina. Demuestra que la fisicalización no es una novedad tecnológica del siglo XXI: hace siglos que los conceptos abstractos se enseñan mejor cuando se tocan. Material histórico que legitima toda la cápsula.

En tiempos modernos, Hans Rosling popularizó el uso de objetos cotidianos como bloques LEGO y rollos de papel para ilustrar temas como el crecimiento de la población mundial Fig. 31.2. Estos métodos no solo capturan la atención del público, sino que también refuerzan la comprensión a través de la interacción física (Fig. 31.3).

Hans Rosling apilando bloques físicos frente al público para mostrar el crecimiento de la población mundial. Versión moderna y mediática de la lección que viene desde Adams: cuando el dato se manipula físicamente, se retiene mucho más. La fisicalización es persuasión y memoria, no sólo visualización.
Fig. 31.2: Hans Rosling apilando bloques físicos frente al público para mostrar el crecimiento de la población mundial. Versión moderna y mediática de la lección que viene desde Adams: cuando el dato se manipula físicamente, se retiene mucho más. La fisicalización es persuasión y memoria, no sólo visualización.
Fig. 31.3: Hans Rosling en acción: usando bloques LEGO y rollos de papel como objetos cotidianos para ilustrar el crecimiento de la población mundial. Ejemplo paradigmático de cómo la fisicalización improvisada con materiales banales puede comunicar tendencias estadísticas con una claridad inmediata —y memorable— que ningún gráfico de pantalla logra.

En resumen, la fisicalización en ámbitos educativos y de comunicación ofrece una forma  accesible e inclusiva de aprender y compartir conocimientos e involucrar a las personas de manera más profunda.

Fisicalización para la accesibilidad

La fisicalización de datos es una herramienta prometedora para mejorar el acceso a la información para personas con discapacidades visuales. Al convertir datos abstractos en objetos físicos que pueden ser tocados y manipulados, la fisicalización ofrece nuevas formas de representar información de manera tangible y accesible, más allá de los medios visuales tradicionales. En esta sección, se exploran sistemas tradicionales y recientes desarrollos en tecnologías de fisicalización que apoyan la accesibilidad para personas con discapacidad visual.

Para un lector ciego, lo físico no es un extra: es la única puerta. Un gráfico en pantalla simplemente no existe sin la vista. Llevar el dato al relieve, al pin, al objeto que se manipula es lo que vuelve la información de verdad accesible — y esta sección lo recorre, de lo más artesanal a lo más tecnológico.

Sistemas de baja tecnología

Gráficos Táctiles: Desde el siglo XIX, los gráficos táctiles han sido utilizados para representar imágenes, mapas y gráficos en papel en relieve, permitiendo que las personas con discapacidad visual puedan explorar contenido visual de forma háptica.

  • Uso: Ampliamente utilizados en escuelas, estos gráficos proporcionan una forma de presentar información compleja, como mapas temáticos y gráficos estadísticos, mediante el tacto.
  • Limitaciones: Aunque útiles, los gráficos táctiles están restringidos a medios 2D, lo que limita la complejidad de la información que se puede transmitir.

Tableros de Gráficos: Los tableros de gráficos son herramientas simples que consisten en tablas de corcho con líneas en relieve. Estudiantes pueden colocar pines y usar bandas elásticas para crear gráficos táctiles 2D.

  • Uso Educativo: Estos tableros permiten a los estudiantes ciegos construir y manipular sus propios gráficos, promoviendo el aprendizaje activo y la comprensión de conceptos matemáticos y gráficos.
  • Beneficios: Facilitan la creación directa y la exploración táctica de gráficos, lo que fomenta el aprendizaje interactivo.

Ambos sistemas se ven combinados en Fig. 31.4: a la izquierda los gráficos táctiles impresos en relieve, a la derecha los tableros con pines y bandas elásticas.

Gráficos táctiles en relieve y tableros de corcho con clavos y bandas elásticas — dos soluciones de baja tecnología para usuarios con discapacidad visual. Recordatorio importante: la fisicalización para accesibilidad no necesita impresoras 3D ni tecnología avanzada; con papel, corcho y pines se entrega autonomía gráfica a estudiantes ciegos desde hace décadas.
Fig. 31.4: Gráficos táctiles en relieve y tableros de corcho con clavos y bandas elásticas — dos soluciones de baja tecnología para usuarios con discapacidad visual. Recordatorio importante: la fisicalización para accesibilidad no necesita impresoras 3D ni tecnología avanzada; con papel, corcho y pines se entrega autonomía gráfica a estudiantes ciegos desde hace décadas.

Impresión 3D para Gráficos Táctiles

Con la llegada de las impresoras 3D, es posible crear gráficos táctiles con relieves pronunciados y personalizados. Esto permite a los usuarios generar gráficos táctiles en casa con mayor precisión y accesibilidad. Los relieves más pronunciados mejoran la capacidad de lectura táctil y ofrecen la posibilidad de representar datos de manera más detallada y clara.

Algunos ejemplos de visualizaciones impresas en 3D Fig. 31.5 muestran cómo el relieve significativo permite a usuarios ciegos seguir los contornos con los dedos.

Visualizaciones impresas en 3D con relieves pronunciados — barras táctiles, superficies topográficas. La impresión 3D acerca a casa la posibilidad de generar gráficos táctiles personalizados, y la investigación muestra que el relieve pronunciado supera ampliamente al 2D en relieve plano. Aporte reciente al canon de la fisicalización accesible.
Fig. 31.5: Visualizaciones impresas en 3D con relieves pronunciados — barras táctiles, superficies topográficas. La impresión 3D acerca a casa la posibilidad de generar gráficos táctiles personalizados, y la investigación muestra que el relieve pronunciado supera ampliamente al 2D en relieve plano. Aporte reciente al canon de la fisicalización accesible.

La investigación ha mostrado que los gráficos extruidos en 3D, que permiten a los usuarios ciegos seguir los contornos de los objetos, son más efectivos que los gráficos tradicionales en 2D.

Sistemas de Gráficos Tangibles Interactivos

Tangible Graph Builder: Inspirado en el tablero de gráficos, este sistema combina objetos tangibles con tecnología de seguimiento y sonificación. Permite a los estudiantes ciegos construir gráficos en 3D, como gráficos de barras y de líneas, con retroalimentación auditiva para mejorar la comprensión.

Linespace: Es un sistema interactivo que permite a los usuarios ciegos explorar gráficos táctiles en tiempo real. Utiliza una impresora 3D equipada con un raspador mecánico que permite generar y borrar gráficos táctiles bajo demanda, mediante gestos y comandos de voz.

El salto: del relieve fijo al gráfico que responde. Un gráfico táctil impreso es un objeto cerrado — lo que salió, salió. Tangible Graph Builder y Linespace rompen esa rigidez: la superficie táctil escucha, se regenera y dialoga con el usuario. Es el mismo paso de la vista general a la interacción, ahora bajo los dedos.

Estos dos sistemas se muestran lado a lado en Fig. 31.6: Tangible Graph Builder con sus bloques físicos sobre una superficie con sensores, y Linespace con la impresora 3D y el raspador mecánico que permite generar y borrar gráficos bajo demanda.

Tangible Graph Builder y Linespace — dos sistemas de gráficos táctiles interactivos. Llevan la fisicalización accesible al territorio de la interactividad: ya no son objetos estáticos que se tocan, sino sistemas que responden, se regeneran y dialogan con el usuario. Apuntan al futuro de la visualización para personas ciegas: tangible y reactivo.
Fig. 31.6: Tangible Graph Builder y Linespace — dos sistemas de gráficos táctiles interactivos. Llevan la fisicalización accesible al territorio de la interactividad: ya no son objetos estáticos que se tocan, sino sistemas que responden, se regeneran y dialogan con el usuario. Apuntan al futuro de la visualización para personas ciegas: tangible y reactivo.

Tangible Reels: Sistema que permite a los usuarios ciegos construir y explorar redes físicas de líneas sobre una superficie plana, usado para representar jerarquías o gráficos de barras.

Oportunidades Futuras

Aunque la fisicalización de datos ha avanzado significativamente, todavía hay áreas de oportunidad para investigar y desarrollar. Actualmente, muchos sistemas de fisicalización accesibles se basan en adaptaciones de gráficos en 2D, pero existen posibilidades de crear representaciones más ricas que aprovechen al máximo las capacidades hápticas de los usuarios ciegos.

  • Nuevas Dimensiones Físicas: Representaciones que utilicen texturas, temperatura o suavidad podrían abrir nuevas vías para que las personas con discapacidades visuales exploren datos de forma más completa.
  • Interacción Más Profunda: Incorporar sistemas que permitan una mayor interactividad y personalización podría mejorar la experiencia de exploración de datos y fomentar una comprensión más profunda.

Fisicalización estética: pantallas ambientales, arte informativo y esculturas de datos

Una Mesa Que Pesa Como el Sistema

Visualizetor: máquina letal de dashboards

La fisicalización no solo informa, también puede emocionar. Cuando los datos se vuelven escultura o ambiente, algo cambia en cómo los sentimos.

Físicalización para disfrutar experiencias y generar significado

La físicalización de datos, cuando se aborda desde la disciplina de la visualización de la información, suele tener propósitos mayormente pragmáticos. Sin embargo, conceptualizaciones más amplias, como la visualización estética, artística o casual, han reconocido que también puede ser aprovechada para expresar y no solo comunicar puntos de vista específicos relacionados con los datos.

De lo pragmático a lo estético

🎨 La belleza y el juego no son adornos: son motivos legítimos. La visualización clásica se mide por rendimiento —rápida, exacta, clara—. Pero un dato que además divierte o emociona invita a volver, a explorar, a quedarse. La fisicalización estética persigue justamente eso: que el dato no sólo se entienda, sino que se disfrute.

Dentro del campo de la visualización de información, la representación de datos se orienta mayoritariamente hacia objetivos prácticos. Sin embargo, enfoques más amplios, como la visualización estética, artística o casual, destacan cómo estas representaciones también pueden emplearse para expresar, en lugar de simplemente comunicar, puntos de vista particulares relacionados con los datos. Estas visualizaciones, al llegar a una audiencia más amplia y menos experta en alfabetización visual, han motivado la investigación sobre cómo características hedónicas, como la "diversión" o la "belleza", pueden complementar los criterios pragmáticos tradicionales de rendimiento en visualización.

El Modelo de Motivación Promotor-Inhibidor (PIMM) proporciona un marco valioso para analizar los factores que influyen en el uso de visualizaciones, y se vuelve especialmente pertinente al considerar la físicalización de datos. Este enfoque transforma la representación de información en experiencias sensoriales y físicas, lo que estimula una interacción más rica y envolvente con los datos.

En este contexto, la físicalización actúa como un motivador promotor clave. La posibilidad de interactuar físicamente con las representaciones de datos permite a los usuarios explorar, jugar y experimentar con la información de maneras que las visualizaciones tradicionales no pueden ofrecer. Esta interactividad no solo despierta la curiosidad, sino que también fomenta un sentido de conexión y compromiso con el contenido, lo que resulta en una experiencia de aprendizaje más efectiva.

Las motivaciones promotoras, como la diversión y la estética, se ven intensificadas por la naturaleza tangible de las físicalizaciones. Cuando los usuarios pueden manipular y explorar físicamente los datos, su interés y atención se incrementan, lo que a su vez facilita una comprensión más profunda y duradera de la información. Esto se traduce en una mayor frecuencia y duración de la interacción, ya que las personas se sienten más atraídas a regresar a estas experiencias que enriquecen su comprensión de los datos.

Además, las representaciones memorables que surgen de la físicalización no solo cautivan a los usuarios, sino que también mejoran la retención y el aprendizaje a largo plazo. Este tipo de interacción no solo transforma la forma en que se perciben los datos, sino que también abre nuevas oportunidades para comunicar información de manera efectiva y accesible.

Pantallas ambientales y arte informativo

El ámbito de las pantallas ambientales ha sido pionero en la creación de algunas de las primeras físicas de datos habilitadas por computadora. Estos sistemas experimentan con la traducción de valores de datos en aspectos ambientales percibidos de manera sutil, como la luz, el sonido o el movimiento, que pueden ser procesados en segundo plano por los sentidos humanos.

🎨 Información que percibes sin mirarla. Una pantalla ambiental no reclama tu atención: traduce el dato en luz, sonido o movimiento que el cuerpo registra de fondo, mientras haces otra cosa. No todo dato necesita un dashboard — algunos viven mejor como el clima del espacio.

Dos ejemplos clásicos de pantallas ambientales (Fig. 32.1) ilustran este enfoque: la instalación Pinwheels presenta información a través de sutiles cambios en luz, sonido y movimiento, permitiendo a los usuarios percibir datos sin centrarse directamente en ellos; mientras que el BusMobile indica la proximidad de autobuses a una parada mediante la altura de los números que representan a cada vehículo, ofreciendo una forma intuitiva de acceder a esta información en un entorno público.

Pinwheels y BusMobile — dos pantallas ambientales pioneras que muestran datos sin pedir atención focalizada. Encarnan la idea central de la cápsula: la fisicalización puede ser sutil, pasar casi desapercibida, y aun así informar. No todo dato necesita un dashboard; algunos viven mejor como trasfondo del espacio.
Fig. 32.1: Pinwheels y BusMobile — dos pantallas ambientales pioneras que muestran datos sin pedir atención focalizada. Encarnan la idea central de la cápsula: la fisicalización puede ser sutil, pasar casi desapercibida, y aun así informar. No todo dato necesita un dashboard; algunos viven mejor como trasfondo del espacio.

El arte informativo, por su parte, integra datos en formas artísticas. Un ejemplo es la instalación Infotropism (Fig. 32.2), donde una planta robótica se inclina hacia una lámpara cuya iluminación depende del uso de un contenedor de reciclaje, ilustrando el impacto del comportamiento ecológico a través del crecimiento de la planta. Este enfoque estético y sutil logra comunicar información sobre el medio ambiente de una manera visualmente agradable y simbólica.

Infotropism — una planta robótica que se inclina hacia una lámpara controlada por el uso de un contenedor de reciclaje. Va más allá de informar: hace que el comportamiento ecológico colectivo adquiera un cuerpo vivo. La cápsula la usa como ejemplo de
Fig. 32.2: Infotropism — una planta robótica que se inclina hacia una lámpara controlada por el uso de un contenedor de reciclaje. Va más allá de informar: hace que el comportamiento ecológico colectivo adquiera un cuerpo vivo. La cápsula la usa como ejemplo de "arte informativo": el dato se vuelve estética y, por eso, emociona y se recuerda.

Expresión artística

La visualización de datos también es empleada fuera de los entornos científicos, en campos como el diseño gráfico, la arquitectura y el arte interactivo. Estas representaciones suelen ser más abstractas, con el objetivo de provocar una reflexión en lugar de transmitir información clara y precisa.

🎨 Cuando la forma misma es el mensaje. En una escultura de datos el significado no vive en una leyenda ni en un eje: vive en el objeto — en su peso, su tamaño, su resistencia a ser manipulado. La forma deja de mostrar el dato y pasa a argumentarlo, a veces con una carga política que una pantalla no podría transmitir.

Por ejemplo, el concepto de escultura de datos combina cualidades funcionales y artísticas para promover una mayor comprensión de fenómenos sociales o científicos. Un ejemplo icónico es el Data Table (Fig. 32.3), una mesa cuya superficie refleja estadísticas de la riqueza global: si se invierte, muestra una distribución equitativa, pero su peso real dificulta esta acción, representando las barreras para cambiar el sistema económico actual.

Data Table — una mesa cuya superficie es la distribución desigual de la riqueza global, y cuyo peso real dificulta voltearla para mostrar el reparto equitativo. La pieza convierte el dato en una metáfora física que se siente con los músculos: cambiar el sistema económico no es ligero. Encarna lo que la cápsula llama escultura de datos, donde la forma comunica el mensaje político.
Fig. 32.3: Data Table — una mesa cuya superficie es la distribución desigual de la riqueza global, y cuyo peso real dificulta voltearla para mostrar el reparto equitativo. La pieza convierte el dato en una metáfora física que se siente con los músculos: cambiar el sistema económico no es ligero. Encarna lo que la cápsula llama escultura de datos, donde la forma comunica el mensaje político.

Tecnologías para la físicalización

Históricamente, las físicalizaciones de datos se realizaban de manera manual, lo que requería considerable tiempo y esfuerzo. No obstante, los avances tecnológicos han facilitado la creación de estas representaciones, permitiendo incorporar dinamismo y computación en ellas. Este desarrollo es paralelo a la evolución de las visualizaciones tradicionales, que también dependían de un trabajo manual intensivo.

Fabricación Digital: Las tecnologías de fabricación digital, como la impresión 3D y el corte láser (Fig. 32.4), han acelerado drásticamente el proceso de creación de físicalizaciones estáticas. Estas herramientas han sido adoptadas por científicos para visualizar datos tridimensionales y se utilizan cada vez más para generar gráficos accesibles y dar forma física a datos personales. La disponibilidad generalizada de estas tecnologías ha contribuido a un aumento significativo en la creación de esculturas de datos en la última década.

Cortadora láser e impresora 3D doméstica — las dos máquinas que democratizaron la creación de fisicalizaciones en la última década. Lo que antes requería un taller industrial ahora cabe en una sala. La cápsula menciona este cambio para explicar por qué las esculturas de datos pasaron de ser raras a habituales.
Fig. 32.4: Cortadora láser e impresora 3D doméstica — las dos máquinas que democratizaron la creación de fisicalizaciones en la última década. Lo que antes requería un taller industrial ahora cabe en una sala. La cápsula menciona este cambio para explicar por qué las esculturas de datos pasaron de ser raras a habituales.

Agilizar el Diseño: La creación de archivos de diseño, esenciales para la fabricación digital, puede ser un proceso complicado. Es por esto que la investigación en interacción humano-computadora se está enfocando en simplificar esta tarea mediante herramientas que permiten leer datos y proponer físicalizaciones parametrizables. Aunque existen sistemas como MakerVis (Fig. 32.5), que soportan la creación de gráficos en 3D y son compatibles con diversas tecnologías de fabricación, todavía no hay una herramienta de propósito general que permita a los usuarios físicalizar cualquier conjunto de datos, lo que deja un amplio espacio para la investigación futura.

Fig. 32.5: MakerVis: sistema de investigación que automatiza la creación de fisicalizaciones tridimensionales a partir de datos, generando los archivos de fabricación digital (impresión 3D, corte láser) sin que el usuario deba escribir manualmente la geometría. Un paso hacia herramientas de propósito general para fisicalizar cualquier conjunto de datos.

Tecnologías de Actuación: Las tecnologías de actuación son fundamentales para que las físicalizaciones sean tan interactivas y receptivas como las visualizaciones en pantalla. La subcomunidad de interacción humano-computadora que trabaja en interfaces tangibles se centra en proponer tecnologías que permiten el control computacional de las geometrías físicas y las propiedades materiales, como por ejemplo EMERGE y inForm (Fig. 32.6), dos interfaces transformables basadas en matrices de pines actuados que reconstruyen barras y formas 3D dinámicas.

EMERGE e inForm — matrices de pines motorizados que suben y bajan formando barras 3D dinámicas. Avance de frontera en fisicalización: superficies que se reconfiguran en tiempo real, acercando los gráficos físicos al dinamismo de los digitales. Apuntan al futuro en el que un dashboard podrá ser táctil y mutable, no sólo pixeles en pantalla.
Fig. 32.6: EMERGE e inForm — matrices de pines motorizados que suben y bajan formando barras 3D dinámicas. Avance de frontera en fisicalización: superficies que se reconfiguran en tiempo real, acercando los gráficos físicos al dinamismo de los digitales. Apuntan al futuro en el que un dashboard podrá ser táctil y mutable, no sólo pixeles en pantalla.

Un ejemplo accesible de estas tecnologías es LEGO Technics Fig. 32.7. Aunque presenta limitaciones, permite a las personas interactuar físicamente con estructuras sencillas que representan datos mediante bloques de plástico, motores y servos. Esto fomenta una experiencia lúdica que invita a explorar y comprender mejor la información a través de la manipulación directa.

Fig. 32.7: Mecanismos LEGO Technic — engranajes, palancas, ejes, motores — ensamblados sin soldadura. Bajada accesible de los pines motorizados de EMERGE/inForm: lo que en investigación cuesta miles de dólares, en una mesa de clase se prototipa con LEGO. La cápsula lo destaca por su modularidad: ideal para experimentar sin compromiso técnico previo.
Nota sobre Técnicas de Prototipado Rápido para Físicalizaciones Para desarrollar nuestras físicalizaciones de datos, emplearemos técnicas sencillas de prototipado rápido (ver clase 18 y 19) que nos permitan experimentar y materializar ideas de manera eficiente y accesible. Estas técnicas incluyen: * Papel y cartón: Materiales versátiles que nos permiten crear maquetas y estructuras básicas rápidamente, facilitando la visualización de conceptos. * Cinta adhesiva: Herramienta esencial para unir y asegurar elementos en nuestras construcciones, lo que ayuda a mantener la integridad estructural de los prototipos. * Impresoras 2D: Utilizaremos impresoras para producir gráficos, etiquetas y otros elementos visuales que cubrirán partes de nuestras estructuras en 3D, mejorando la presentación y comprensión de la información. * Smartphones y computadoras: Estos dispositivos servirán como herramientas para interactuar con las físicalizaciones, a través de sus sensores y actuadores, como parlantes, cámaras y acelerómetros, permitiendo la incorporación de datos digitales y experiencias interactivas. * LEGO Technics: Este sistema nos permite construir estructuras físicas que incorporan componentes reactivos, como motores y servos, lo que añade una dimensión interactiva y lúdica a nuestras representaciones de datos. A través de estas técnicas de prototipado rápido, buscaremos crear físicalizaciones que no solo sean efectivas en la comunicación de información, sino que también inviten a la exploración y comprensión activa por parte de los usuarios.

Ejemplos de fisicalización de información

Más allá de los ejemplos canónicos vistos en esta cápsula, vale la pena conocer el catálogo de referencia de la comunidad: la página Data Physicalization (dataphys.org) mantiene un repositorio extenso de proyectos de visualización tangible, desde piezas históricas hasta instalaciones contemporáneas. La galería principal permite filtrar por técnica, material y propósito, y es una fuente recurrente de inspiración tanto para proyectos pedagógicos como para esculturas de datos serias. Conviene tenerla siempre cerca cuando estés diseñando una fisicalización propia: lo más probable es que alguien ya haya explorado una variante de tu idea y haya documentado qué funcionó y qué no.


ProtobjectJavaScriptSmartphoneFisicalización

T5. Protobject Framework: tu celular es el sensor, tu computador la pantalla

Cada página HTML es un dispositivo. Conectarlos sin instalar nada

Tu celular tiene más sensores que un laboratorio de los 90. Tu computador, más pantalla que un cine de los 70. Conectarlos para crear visualizaciones físicas es cuestión de unas pocas líneas.

¿Qué es Protobject Framework?

Un framework que convierte cada página HTML en un dispositivo independiente y los hace comunicar entre sí en tiempo real. Sin servidores propios, sin hardware adicional. Tu computador es la pantalla, tu celular el sensor, y ambos hablan vía WebSocket.

Tu celular es el sensor. Tu computador es la pantalla. Protobject los conecta.

Estructura del proyecto

Un proyecto Protobject es una carpeta con varios .html. Cada uno representa un dispositivo:

  • index.html → la visualización (corre en el computador)
  • button.html, hand.html, face.html, … → sensores / controles (corren en celulares u otras ventanas)

No solo smartphones — también cámaras, sensores Arduino, otros computadores.

Boilerplate de cada página

Cada .html empieza con dos <script>:

<!DOCTYPE html>
<html>
<head>
  <script src="https://app.protobject.com/framework/p.js"></script>
  <script src="config.js"></script>
</head>
<body>
  <script>
    // tu código acá
  </script>
</body>
</html>

config.js declara los dispositivos

Todas las páginas del proyecto cargan el mismo config.js, que declara las páginas que componen el prototipo:

// config.js — compartido por todas las páginas
Protobject.initialize([
  { name: "Visualización", page: "index.html"  },
  { name: "Botón",         page: "button.html" }
]);

index.html es la página principal (la pantalla del computador); las demás son dispositivos secundarios que se conectan al escanear un QR (Fig. 33.1).

Estructura de archivos de un proyecto Protobject — index.html, config.js y un .html por cada dispositivo, con config.js abierto a la derecha. Muestra cómo se organiza un proyecto donde el celular es el sensor y el computador la pantalla: cada rol vive en un archivo separado y todos se comunican a través del config compartido. Anatomía mínima del framework.
Fig. 33.1: Estructura de archivos de un proyecto Protobject — index.html, config.js y un .html por cada dispositivo, con config.js abierto a la derecha. Muestra cómo se organiza un proyecto donde el celular es el sensor y el computador la pantalla: cada rol vive en un archivo separado y todos se comunican a través del config compartido. Anatomía mínima del framework.

Comunicación entre páginas

// Enviar a una página específica
Protobject.Core.send({ encendido: true }).to("index.html");

// Enviar a todas las demás
Protobject.Core.send({ temperatura: 25 });

// Recibir
Protobject.Core.onReceived(mensaje => {
  console.log("Llegó:", mensaje);
});

Los mensajes son JSON — cualquier objeto serializable.

Versión didáctica: botón → lámpara

El "hola mundo" de Protobject. Dos páginas, una visualización (index.html) y un control en el celular (button.html).

button.html (celular):

const btn = new Protobject.Button({ label: "ON / OFF" });
let estado = false;
btn.onPress(() => {
  estado = !estado;
  Protobject.Core.send(estado).to("index.html");
});

index.html (computador):

const lamp = new Protobject.Lamp({ width: '100%', height: '80vh' });
Protobject.Core.onReceived(encendido => {
  lamp.setColor(encendido ? { r:0, g:255, b:100 } : { r:0, g:0, b:0 });
});
💻 Abrir el demo lamp · necesita un celular emparejado via QR de Protobject

Sensores del celular

Para hacer cosas más interesantes que un botón, usa los sensores del smartphone:

Sensor Objeto Protobject Datos
Acelerómetro Protobject.Acceleration x, y, z (m/s²)
Giroscopio Protobject.Orientation alpha, beta, gamma (°)
Inclinación Protobject.Inclination tilt 3D filtrado
// Reaccionar al ángulo del celular
Protobject.Orientation.onChange(angle => {
  // angle.alpha = brújula (0-360)
  // angle.beta  = inclinación adelante/atrás (-180 a 180)
  // angle.gamma = inclinación izquierda/derecha (-90 a 90)
  Protobject.Core.send({ angulo: angle.gamma }).to("index.html");
});

Versión esperada — calefacción / puerta abierta

El celular es la puerta de una casa. Inclinarlo simula abrirla. La visualización en pantalla muestra:

  • Plotly de la temperatura interior (curva exponencial decreciente)
  • Cuanto más se abre la puerta, más rápido baja la temperatura
  • Pasado cierto umbral suena un MP3 de fondo y aparece el mensaje "Cerrá la puerta"
// door.html (celular — la "puerta")
Protobject.Orientation.onChange(angle => {
  Protobject.Core.send({ apertura: Math.abs(angle.gamma) }).to("index.html");
});
// index.html (computador — la "casa")
let temperatura = 20;
let aperturaActual = 0;

Protobject.Core.onReceived(({ apertura }) => {
  aperturaActual = apertura;
});

setInterval(() => {
  // pérdida de calor proporcional a la apertura
  temperatura -= aperturaActual * 0.05;
  actualizarPlotly(temperatura);
  if (aperturaActual > 4) reproducirAlerta();
}, 100);

🎬 video del prototipo físicoEnergy Estimation — heater + door open (Protobject framework demo)

💻 Abrir el demo heater · necesita un celular emparejado (la inclinación del celular = puerta abriéndose)
🎯 Proyecto · el gesto de inclinar el celular encarna la metáfora de abrir la puerta — sensor físico + dato + sonido construyen una narrativa coherente. Esto es nivel de proyecto. (Ver el funcionamiento en el video del overview, arriba.)

Todos los proyectos del curso usan Protobject

Cada proyecto del curso construye sobre las bases de esta cápsula: config.js declara los dispositivos, Protobject.Core.send/onReceived los conecta, y al menos un sensor del celular o de la cámara forma parte del prototipo. Esto es la columna vertebral que sostiene los demos de T6 (sensores avanzados) y T7 (Arduino).

Algunos ejemplos rápidos — el detalle visual y el código completo están en T6 / T7:

Proyecto Sensor Protobject Cápsula donde lo vemos
Casita que tiembla acelerómetro celular T5 base → completo en T7
Electricidad por región HandSensor (mano) T6
Migración de gaviota HandSensor (gesto) T6
Mundiales de fútbol Aruco (marcadores físicos) T6
Cereales Acceleration (agitar el paquete) T6
Medallistas 100m Arduino (servo continuo) T7
Gasto militar mundial Arduino (servo "lanzamisil") T7
Montañas rusas sin sensor, solo audio T4
Lluvia / viento sin sensor, solo audio T4

El patrón es siempre el mismo: una index.html con la visualización + una o varias páginas secundarias (hand.html, arduino.html, aruco.html, motionsensor.js, …) que actúan como sensores. La cápsula T6 entra en detalle.

Más ejemplos del framework Protobject

El framework tiene también una galería de prototipos ubicomp (no data-viz): alarmas con sensor de movimiento, alertas de ruido, correctores de postura, iluminación inteligente, cerraduras con código. Sirven como inspiración para entender la amplitud de cosas que se pueden hacer con la misma base que vimos acá.

Ver la galería ubicomp del framework

Lo que viene después

En T6 subimos un escalón: usamos la cámara web con MediaPipe para detectar manos, cuerpo y cara. El usuario interactúa con el cuerpo entero, sin tocar nada.

En T7 cerramos con Arduino + LEGO Technic: el dato sale de la pantalla y mueve un servo físico.

Versiones didácticassolo muestran el mecanismo. NO son nivel de proyecto.
Versiones esperadascon narrativa, diseño y mensaje claro. Este es el nivel de proyecto.
ProtobjectMediaPipeArUcoComputer Vision

T6. Sensores físicos con MediaPipe: ArUco, mano, cuerpo y cara

MediaPipe en el navegador: tu cuerpo es la interfaz

Tu mano apunta, tu cara mira, tu cuerpo se mueve: todo eso son datos que el navegador puede leer en tiempo real. La interfaz dejó de ser solo un mouse hace rato.

Más allá del botón: cuerpo y objetos como sensor

Protobject incluye modelos de visión computacional (MediaPipe de Google) que corren directamente en el navegador, sin servidores ni instalaciones. Tu cámara web se convierte en un sensor de alta precisión.

Privacidad: todo el procesamiento es local. La cámara nunca envía video a servidores externos.

ArUco: objetos físicos como input

Imprimes marcadores ArUco con un generador online (Fig. 34.1), los pegas a objetos físicos (porotos, té, atún, ...) y la cámara los reconoce. Cambiando el orden vertical de los objetos, se reordena el orden de las series del gráfico.

Generador online de marcadores ArUco (chev.me/arucogen). Punto de partida típico del flujo de MediaPipe del curso: imprime estos cuadrados, pégalos sobre objetos reales, y de pronto el celular puede seguirlos en tiempo real. Atajo prácticamente gratuito para tracker físico-digital sin hardware especializado.
Fig. 34.1: Generador online de marcadores ArUco (chev.me/arucogen). Punto de partida típico del flujo de MediaPipe del curso: imprime estos cuadrados, pégalos sobre objetos reales, y de pronto el celular puede seguirlos en tiempo real. Atajo prácticamente gratuito para tracker físico-digital sin hardware especializado.
// order.html (cámara)
Protobject.Aruco.onDetected(markers => {
  // markers = [{ id: 1, x, y }, { id: 100, x, y }, ...]
  const orderById = markers.sort((a, b) => a.y - b.y).map(m => m.id);
  Protobject.Core.send({ order: orderById }).to("index.html");
});

🎬 video del prototipo físicoDynamic Visualization of Product Export Data — ArUco markers reorder bars

💻 Abrir el demo ordering · necesita cámara + marcadores ArUco impresos (genéralos en chev.me/arucogen)
📚 Didáctica · muestra la mecánica ArUco → orden de series, sin storytelling. (El video del overview de T5, arriba, los muestra en acción.)

Mano: Protobject.HandSensor (MediaPipe Hand)

Detecta 21 landmarks por mano y categorías de gestos predefinidos (Thumb_Up, Thumb_Down, Open_Palm, Closed_Fist, ...).

Demo finger — el dedo señala el mapa

El landmark 8 es la punta del dedo índice. Su posición sobre un mapa SVG detecta sobre qué país está apuntando, y Protobject.TextToSpeech narra las exportaciones de fruta de ese país.

// hand.html (cámara)
Protobject.HandSensor.onChange(hand => {
  const tip = hand.landmarks[8];                  // {x: 0-1, y: 0-1}
  Protobject.Core.send({ x: tip.x, y: tip.y }).to("index.html");
});
// index.html
Protobject.Core.onReceived(({ x, y }) => {
  const country = countryAt(x, y);
  if (country !== currentCountry) {
    currentCountry = country;
    Protobject.TextToSpeech.play({
      lang: "es-CL",
      text: `${country} exportó ${exports[country]} millones`
    });
  }
});

🎬 video del prototipo físicoInteractive Map for Fruit Export Data — finger touch on a physical map

💻 Abrir el demo finger · necesita cámara web (MediaPipe HandSensor detecta la punta del índice)
📚 Didáctica · concepto claro pero diseño visual mínimo.

Cuerpo: Protobject.BodySensor (MediaPipe Pose)

Detecta 33 puntos del esqueleto (nariz, hombros, codos, caderas, ...). Los más útiles:

  • landmarks 11 y 12 → hombros (distancia entre ellos = zoom)
  • landmark 0 → nariz (posición horizontal = pan)

Demo bodyzoom — el cuerpo controla el gráfico

Acercarse a la cámara → la distancia entre hombros aumenta → zoom in en la cotización de Apple. Moverse a la izquierda o derecha → el nose corre horizontalmente → pan sobre la línea temporal.

// body.html (cámara)
Protobject.BodySensor.onChange(landmarks => {
  const dx = landmarks[12].x - landmarks[11].x;        // distancia hombros
  const zoom = mapToRange(dx, 0.1, 0.4, 1, 10);
  const pan  = landmarks[0].x;                          // nariz horizontal
  Protobject.Core.send({ zoom, pan }).to("index.html");
});

Filtro de Kalman. Las landmarks de MediaPipe tiemblan frame a frame. El demo aplica un filtro de Kalman simple para suavizar el valor antes de enviarlo, evitando que el gráfico vibre.

🎬 video del prototipo físicoInteractive Visualization Adjusted by Body Movement and Position

💻 Abrir el demo bodyzoom · necesita cámara web (MediaPipe Pose detecta hombros y nariz)
📚 Didáctica · muestra MediaPipe Pose + Kalman + Plotly. Pero el zoom con el cuerpo no aporta nada que el zoom con mouse no haga mejor: la interacción es impresionante, no significativa. Útil como demo técnica, no como modelo de proyecto.

Cara: Protobject.FaceSensor (MediaPipe Face)

Devuelve blendshapes (categorías como sonrisa, ceño fruncido, ojos cerrados) y permite contar caras frente a la cámara.

Demo bcprediction — sonrisa / pulgar / inclinación

Tres dispositivos en paralelo cambian la predicción de Bitcoin:

  • sonrisa detectada → "Optimista"
  • ceño fruncido → "Pesimista"
  • pulgar arriba/abajo (HandSensor) → ídem
  • inclinar el celular (Inclination) → ídem

Los tres caminos llegan al mismo index.html que actualiza la predicción.

Protobject.FaceSensor.onChange(face => {
  const smile = face.blendshapes.mouthSmileLeft + face.blendshapes.mouthSmileRight;
  const frown = face.blendshapes.browDownLeft   + face.blendshapes.browDownRight;
  if (smile > 0.5)     Protobject.Core.send("Optimista");
  else if (frown > 0.5)Protobject.Core.send("Pesimista");
  else                 Protobject.Core.send("Neutral");
});

🎬 video del prototipo físicoBitcoin Price Prediction Based on User Interaction — gestures + face + tilt

💻 Abrir el demo bcprediction · necesita cámara web + celular emparejado (FaceSensor + HandSensor + Inclination)
📚 Didáctica · sirve como provocación creativa pero sonreír al gráfico no cambia el dato — la interacción no comunica conocimiento sobre Bitcoin, solo demuestra la integración multi-sensor. Útil para aprender la técnica.

Demo consumption — el contexto cambia los datos

Cuántas caras hay frente a la cámara → tantos perfiles de consumo eléctrico se resaltan en el gráfico polar. La InfoVis se adapta al número de personas que la están mirando.

Protobject.FaceSensor.onChange(face => {
  const n = face.faceLandmarks.length;            // cuántas caras detectadas
  Protobject.Core.send({ personas: n }).to("index.html");
});

🎬 video del prototipo físicoDynamic Data Display Based on People Count — face counter changes the chart

💻 Abrir el demo consumption · necesita cámara web (cuenta caras frente al lente)
🎯 Proyecto · adaptación contextual significativa: el dato mostrado cambia en función de quién lo está mirando. La interacción aporta — el sensor lee el contexto colectivo, no es un control.

Cuándo el sensor avanzado vale la pena

Mirando los demos didácticos arriba (zoom con cuerpo, sonrisa para Bitcoin) queda claro un patrón: la cámara y MediaPipe son tan novedosos que es fácil usarlos sin pensar. La pregunta importante no es "¿puedo detectar sonrisas?" sino "¿la sonrisa cuenta algo del dato?".

Antes de añadir un sensor avanzado al proyecto preguntate:

  1. ¿El sensor lee el contexto (cuántos están mirando, dónde apuntan, en qué orden ponen los objetos) — o es un control disfrazado de sensor?
  2. ¿Hay una alternativa con mouse/teclado igual de buena? Si sí, el sensor probablemente es decoración.
  3. ¿La interacción emociona, contextualiza o hace accesible? (los tres contextos que ya vimos en T4 para sonificación).

Si las tres respuestas son sí, adelante.

Proyectos del curso — cuándo el sensor sí aporta

Estos son demos hechos por estudiantes en años anteriores donde el sensor funciona por una razón. Cada uno reutiliza una visualización que ya vimos en T1 / T2 y le añade un sensor físico que encaja con la metáfora del dato.

El video es lo importante — los prototipos físicos no se pueden ejecutar en el sitio (necesitan cámara web, marcadores ArUco impresos, celular emparejado, …). El código fuente está disponible como recurso secundario para inspirarte en tu proyecto.

Electricidad por región (Chile)

La mapa estático de T2 (consumo per cápita por región) ahora reacciona a la mano: acercar el índice al mapa resalta la región bajo el dedo con su consumo. Acá el gesto de "señalar" mapea a la metáfora de "esa región" — se siente natural, no decorativo.

🎬 EjemploConsumo de Energía en Chile
Créditos: Desarrollado por el Grupo 6 (InfoVis 2024-II). Se realizaron ajustes visuales y físicos para optimizar la experiencia interactiva.
💻 Código fuente · sensor: Protobject.HandSensor · viz base: T2 estático

Migración de gaviota

La trayectoria estática de T2 y la sonificación de T4 se ejecutan ahora a partir de un gesto de la mano: el "soltar la gaviota" dispara la animación del recorrido. El gesto es ritual, no botón.

🎬 EjemploMigración de Gaviotas
Créditos: Desarrollado por el Grupo 21 (InfoVis 2024-II). Se realizaron ajustes visuales para mejorar la claridad de la representación.
💻 Código fuente · sensor: Protobject.HandSensor + Tone.js · viz base: T2 estático · sonificación: T4

Mundiales de fútbol

El mapa coroplético de T2 (países anfitriones) navegable con marcadores ArUco físicos: cada marcador representa un Mundial. Cambiar de torneo es mover un objeto, no hacer click.

🎬 EjemploCopa del Mundo — Países Anfitriones
Créditos: Desarrollado por Benjamín Santander, Nicolás San Martín, Rodolfo Cruz (Grupo 17, InfoVis 2024-II). Se realizaron pequeñas revisiones visuales para mejorar la accesibilidad y la claridad.
💻 Código fuente · sensor: Protobject.Aruco · viz base: T2 estático

Cereales

El celular se transforma en contador físico dentro del paquete: el sensor de movimiento (acelerómetro) detecta cuándo se agita. El acto de agitar el paquete mapea a "estimar cuánto cereal queda".

🎬 EjemploDispensador de Cereales Inteligente
Créditos: Desarrollado por el Grupo 5 (InfoVis 2024-II). El proyecto fue revisado para mejorar la integración física y la interacción.
📦 sensor: Protobject.Acceleration (celular dentro del paquete)

Tabla resumen — cuándo usar cada sensor

Sensor Para… Latencia típica
Protobject.Aruco objetos físicos discretos ~30 fps
Protobject.HandSensor gestos finos, señalar ~30 fps
Protobject.BodySensor postura, distancia, gestos amplios ~25 fps
Protobject.FaceSensor expresión, conteo de personas ~30 fps
Protobject.Acceleration movimiento del celular < 10 ms
ArduinoLEGO TechnicServosProtobjectCapstone

T7. Arduino + LEGO Technic: actuadores físicos y capstone de la casita que tiembla

Servos, motores y la 'casita que tiembla': todo el curso en un demo

La información que se siente. Servos que vibran, motores que giran, piezas LEGO que tiemblan al ritmo de un terremoto real. El último paso del curso: hacer que los datos tomen forma física.

Del dato al objeto: actuadores físicos

Los sensores del celular son potentes (T5–T6), pero para objetos que se mueven, vibran o cambian de forma necesitamos actuadores físicos. LEGO Technic + Arduino es el camino que el curso usa.

LEGO Technic: mecanismos sin soldar

LEGO Technic permite construir mecanismos complejos (engranajes, palancas, poleas) con piezas que encajan con precisión. No requiere herramientas ni soldadura.

Por qué para InfoVis:

  • modificar y reiterar es gratis (desmontar y rearmar)
  • piezas estandarizadas → prototipado rápido
  • compatibles con servos hobby

Recursos para aprender: - Brick Experiment Channel — experimentos con mecanismos LEGO

Servos: angulares vs continuos

Hay dos tipos de servo, y conviene distinguirlos antes de ensamblar (Fig. 35.1).

Dos servomotores hobby montados en soportes LEGO Technic — uno angular (180° con tope) y uno continuo (rotación sin tope). Inventario básico del capstone
Fig. 35.1: Dos servomotores hobby montados en soportes LEGO Technic — uno angular (180° con tope) y uno continuo (rotación sin tope). Inventario básico del capstone "casita que tiembla": cada tipo de servo sirve para mover algo diferente. Conviene tener claros los dos sabores antes de empezar a ensamblar.
  • Servo angular (M, 180°) — ideal para indicadores tipo aguja, valor que se mapea a posición.
  • Servo continuo (C) — gira sin tope, ideal para hacer vibrar un objeto, empujarlo, o moverlo a velocidad variable.

Conexión a Arduino

Tres cables por servo: Señal · 5V · Tierra (Fig. 35.2).

Diagrama de cableado servo-Arduino con los tres cables señal/5V/GND identificados. Imagen de referencia técnica indispensable para que no se queme nada en el primer intento — un cableado erróneo puede dañar el servo o el Arduino. La cápsula la usa como check-list visual antes de encender la placa.
Fig. 35.2: Diagrama de cableado servo-Arduino con los tres cables señal/5V/GND identificados. Imagen de referencia técnica indispensable para que no se queme nada en el primer intento — un cableado erróneo puede dañar el servo o el Arduino. La cápsula la usa como check-list visual antes de encender la placa.

Regla del curso: usar siempre pin 5 o pin 6 para servos.

Son los dos pines que asume todo el código de ejemplo del curso (Fig. 35.3).

Placa Arduino con los pines 5 y 6 resaltados. Convención del curso para los servos — cualquier código de ejemplo asume estos dos pines. Decisión arbitraria pero compartida que evita que cada estudiante invente su propio mapeo y que ningún ejemplo del material funcione plug-and-play.
Fig. 35.3: Placa Arduino con los pines 5 y 6 resaltados. Convención del curso para los servos — cualquier código de ejemplo asume estos dos pines. Decisión arbitraria pero compartida que evita que cada estudiante invente su propio mapeo y que ningún ejemplo del material funcione plug-and-play.

Alimentación: el Arduino se conecta por USB-C al PC, o por adaptador a un smartphone.

API Protobject.Arduino

Protobject incluye un bridge Web Serial que conecta Arduino directamente desde el navegador (Chrome / Edge), sin instalar drivers. Cargas un sketch genérico una vez en el Arduino, y desde JS controlas los pines:

await Protobject.Arduino.start();             // pide permiso Web Serial
Protobject.Arduino.servoWrite({ pin: 5, value: 90 });        // angular 0-180°
Protobject.Arduino.contServoWrite({ pin: 5, value: 1500 });  // continuo (-1500..1500)

Versión didáctica: knob → servo continuo

El "hola mundo" de Arduino con Protobject. Dos páginas:

index.html (la perilla en pantalla):

const perilla = new Protobject.Knob({ min: -1500, max: 1500 });
perilla.onChange(value => {
  Protobject.Core.send({ speed: value }).to("arduino.html");
});

arduino.html (la pestaña con permiso Web Serial):

await Protobject.Arduino.start();
Protobject.Core.onReceived(data => {
  Protobject.Arduino.contServoWrite({ pin: 5, value: data.speed });
});
💻 Abrir el demo knob-servo · necesita Arduino + servo continuo conectado por USB (Web Serial)
📚 Didáctica · solo muestra cómo conectar Arduino con Protobject. Sin contexto ni datos.

Versión esperada — la casita que tiembla (capstone)

Este demo integra todo lo del curso técnico, en orden:

Cápsula Aporta Cómo aparece
T1 gráfico Plotly base gráfico magnitud × fecha
T2 Plotly Geo + SVG mapa scattergeo de Chile + SVG de contexto
T3 interacción hover y click sobre cada terremoto
T4 sonificación tres MP3 mezclados según magnitud
T5 Protobject + smartphone acelerómetro del celular como sensor
T6 Kalman / sensor avanzado suaviza la aceleración detectada
T7 Arduino + servo servo continuo vibra una casita LEGO

Así se ve el prototipo físico terminado (Fig. 35.4).

La casita LEGO final sobre la plataforma con servo y Arduino — el capstone del curso. Cierra la trayectoria completa que recorrió la materia: del CSV en Plotly (T1) al sismo que sacude un objeto físico. Cada cápsula técnica añadió una pieza, y aquí están todas juntas funcionando — datos, interactividad, sonificación, fisicalización.
Fig. 35.4: La casita LEGO final sobre la plataforma con servo y Arduino — el capstone del curso. Cierra la trayectoria completa que recorrió la materia: del CSV en Plotly (T1) al sismo que sacude un objeto físico. Cada cápsula técnica añadió una pieza, y aquí están todas juntas funcionando — datos, interactividad, sonificación, fisicalización.
mapa.on('plotly_click', e => {
  const m = e.points[0].marker.color;     // magnitud

  // 1. sonido (T4)
  new Audio(audioFor(m)).play();

  // 2. servo: velocidad ~ magnitud (T7)
  const speed = Math.round(scale(m, 5, 9, 600, 1500));
  Protobject.Core.send({ speed }).to("arduino.html");

  // 3. cortar después de 4 segundos
  setTimeout(() => {
    Protobject.Core.send({ speed: 0 }).to("arduino.html");
  }, 4000);
});

🎬 video del prototipo físicoCasita que tiembla — capstone del curso

🎯 Proyecto · capstone integral. La vibración física recrea la sensación corporal del terremoto que el dato describe — el actuador no decora, encarna.
💻 Código fuente del capstone · necesita Arduino + servo continuo + casita LEGO para correr en vivo

Proyectos del curso — actuadores con sentido

Seis demos de estudiantes donde el actuador funciona por una razón. Cada uno reutiliza una visualización que ya vimos en cápsulas anteriores y le añade movimiento físico —o vibración— que encarna el dato.

El video es lo importante — los proyectos físicos no se pueden ejecutar en el sitio (necesitan Arduino, servo y montaje LEGO). El código fuente se mantiene como recurso secundario.

Medallistas 100m olímpicos

El bar chart estático de T1 (medallistas 100m) ahora se cruza con un servo: pasas el mouse sobre cada ganador y el servo gira a una velocidad proporcional a su tiempo de carrera; al mismo tiempo suena un loop de pasos corriendo. La velocidad mecánica encarna la velocidad humana.

🎬 Ejemplo100 Metros en las Olimpiadas
Créditos: Maximiliano Cabrera, Matías Oliva, Lorenzo Muñoz (Grupo 13, InfoVis 2024-II). El proyecto fue ajustado para integrar un dispositivo físico.
💻 Código fuente · actuador: Protobject.Arduino.contServoWrite · viz base: T1 estático

Gasto militar mundial

El mapa coroplético de T2 (gasto militar como % del PIB) y el slider por año que vimos en T3 se completan ahora con un servo: click en un país y el servo hace el gesto de "lanzar un misil" — sube, dispara, vuelve a la posición inicial. El gasto militar literal se convierte en gesto literal. Provocador y claro.

🎬 EjemploGasto Militar Mundial
Créditos: Jaime Hormazábal, Juan Pablo Palma, Yampai Ludueña (Grupo 22, InfoVis 2024-II). Se realizaron ajustes visuales y físicos para mejorar la experiencia interactiva.
💻 Código fuente · actuador: Protobject.Arduino.servoWrite (angular) · viz base: T2 estático

Intensidad del viento

El gráfico estático de T1 (intensidad del viento en la Quinta Región) se completa con dos servos a la vez: al pasar el mouse sobre una medición, un servo angular gira como veleta para apuntar la dirección del viento, mientras un servo continuo gira a una velocidad proporcional a su intensidad. El objeto se vuelve un anemómetro físico — de dónde sopla y con cuánta fuerza, a la vez.

🎬 EjemploIntensidad del Viento — Quinta Región
Créditos: Nicolás Acevedo, Alan Saavedra, Pablo Utrera (Grupo 11) y Grupo 14 (InfoVis 2024-II). Se integraron las visualizaciones de ambos grupos para representar tanto la intensidad como la dirección del viento.
💻 Código fuente · actuador: Protobject.Arduino.servoWrite + contServoWrite · viz base: T1 estático

Montañas rusas más rápidas

El mapa de T2 (las montañas rusas más rápidas del mundo) se cruza con un servo continuo: al hacer click en una montaña rusa, el servo acelera hasta una velocidad proporcional a la del juego — arranca suave y sube, como el carro al soltar el freno. La velocidad mecánica encarna la velocidad del vértigo.

🎬 EjemploMontañas Rusas más Rápidas
Créditos: Desarrollado por el Grupo 4 (InfoVis 2024-II). Se realizaron ajustes visuales para mejorar la interacción del usuario.
💻 Código fuente · actuador: Protobject.Arduino.contServoWrite · viz base: T2 estático

Lluvias en Chile

El mapa de lluvias por región de Chile —cuya versión sonora vimos en T4— suma un servo angular que funciona como aguja de un medidor: al recorrer una estación, el servo apunta a una posición proporcional a la intensidad de la lluvia. El dato meteorológico se vuelve gesto de instrumento.

🎬 EjemploLluvias en Chile
Créditos: La representación física fue diseñada por el Grupo 7 (InfoVis 2024-II), y aunque se mantuvo la idea original, fue ajustada para ofrecer una experiencia inmersiva. Se realizaron cambios significativos en la visualización y sonificación.
💻 Código fuente · actuador: Protobject.Arduino.servoWrite (angular) · sonificación: T4

Autos más rápidos

El gráfico estático de T1 (los autos más rápidos del mundo) suma dos canales físicos: al pasar el mouse sobre un auto, el celular vibra con una frecuencia atada a su velocidad; al hacer click, un servo continuo hace avanzar un auto de LEGO sobre la mesa — acelera, frena y se detiene. La cifra se siente en la mano y se ve correr.

🎬 EjemploAutos más Rápidos del Mundo
Créditos: Matías Acuña, Gaspar Magna, Pablo Rabelo (Grupo 29, InfoVis 2024-II). El proyecto fue reescrito en JavaScript puro y se mejoró la representación física para una experiencia más fluida.
💻 Código fuente · actuador: Protobject.Arduino.contServoWrite + Protobject.Haptic · viz base: T1 estático

Otros actuadores

Actuador Controla Uso típico en InfoVis
Servo angular posición 0-180° aguja indicadora
Servo continuo velocidad/dirección barra que sube, vibrador
LED RGB color estado categórico
LED strip (WS2812) color × N LEDs escala visual
Buzzer tono alertas sonoras
Motor paso a paso posición precisa mecanismos finos

Diseño de la fisicalización

No es solo "conectar hardware". El objeto físico debe:

  1. Codificar datos claramente — movimiento / color / forma → variable
  2. Ser legible sin instrucciones — si necesita explicación, rediseñá
  3. Complementar lo digital — no reemplazar la pantalla, dialogar con ella
  4. Ser reproducible — materiales accesibles, proceso documentado
Versiones didácticassolo muestran el mecanismo. NO son nivel de proyecto.

Bibliografía Completa

  • A. Dix (2013). Introduction to Information Visualisation. Information Retrieval Meets Information Visualization, LNCS 7757, 2013, pp 1-27

  • Munzner, T. (2014). Visualization analysis and design. CRC press.

  • Spence, R. (2001). Information visualization (Vol. 1). New York: Addison-Wesley.

  • Cabitza, F. (2020). Introduzione alla Visualizzazione dei Dati, in Batini, C. et al., La scienza dei dati.

  • Ware, C. (2019). Information visualization: perception for design. Morgan Kaufmann.

  • E.R. Tufte (2001). The visual display of quantitative information. Cheshire, CT: Graphics press.

  • A. Cairo (2016). The truthful art: data, charts, and maps for communication. New Riders.

  • Contexto, Real Academia Española

  • Bellino, A., & Bascuñán, D. (2020). Design and evaluation of writebetter: A corpus-based writing assistant. IEEE Access, 8, 70216-70233.

  • Harris, J. J., Schwarzkopf, D. S., Song, C., Bahrami, B., & Rees, G. (2011). Contextual illusions reveal the limit of unconscious visual processing. Psychological science, 22(3), 399-405.

  • Knaflic, C. N. (2015). Storytelling with data: A data visualization guide for business professionals. John Wiley & Sons.

  • Yau, N. (2013). Data points: Visualization that means something. John Wiley & Sons.

  • Caveats — A collection of dataviz caveats by data-to-viz.com

  • Misleading graph — Wikipedia

  • Deming Cycle

  • Plotly.js

  • Tone.js

  • Protobject Framework

  • Tufte, E. R., & Graves-Morris, P. R. (1983). The visual display of quantitative information (Vol. 2, No. 9). Cheshire, CT: Graphics press.

  • Krzywinski, M., Savig, E. Multidimensional data. Nat Methods 10, 595 (2013).

  • Data looks better naked

  • Shneiderman, B. (2003). The eyes have it: A task by data type taxonomy for information visualizations. In The craft of information visualization (pp. 364-371). Morgan Kaufmann.

  • Zuk, T., Schlesier, L., Neumann, P., Hancock, M. S., & Carpendale, S. (2006, May). Heuristics for information visualization evaluation. In Proceedings of the 2006 AVI workshop on BEyond time and errors: novel evaluation methods for information visualization (pp. 1-6).

  • Locoro, A., Cabitza, F., Actis-Grosso, R., & Batini, C. (2017). Static and interactive infographics in daily tasks: A value-in-use and quality of interaction user study. Computers in Human Behavior, 71, 240-257.

  • Bellino, A. (2015). Enhancing pinch-drag-flick paradigm with two new gestures: Two-finger-tap for tablets and tap\&tap for smartphones. In Human-Computer Interaction–INTERACT 2015: 15th IFIP TC 13 International Conference, Bamberg, Germany, September 14-18, 2015, Proceedings, Part III 15 (pp. 534-551). Springer International Publishing.

  • Hermann, T., Hunt, A., & Neuhoff, J. G. (2011). The sonification handbook (Vol. 1). Berlin: Logos Verlag.

  • Bellino, A., & Rocchesso, D. (2024, June). Controlling Trajectories with OneButton and Rhythm. In Proceedings of the 2024 International Conference on Advanced Visual Interfaces (pp. 1-3).

  • Beaudouin-Lafon, M., & Mackay, W. E. (2007). Prototyping tools and techniques. In The human-computer interaction handbook (pp. 1043-1066). CRC Press.

  • Dragicevic, P., Jansen, Y., & Vande Moere, A. (2020). Data physicalization. Handbook of human computer interaction, 1-51.

  • Bellino, A., & Herskovic, V. (2023, September). Protobject as a tool for teaching computational thinking to designers: student perceptions on usability. In Proceedings of the 15th Biannual Conference of the Italian SIGCHI Chapter (pp. 1-8).

  • Krumm, J. (Ed.). (2018). Ubiquitous computing fundamentals. CRC Press.

  • Rogers, Y. (2023). Interaction design: beyond human-computer interaction.

  • MediaPipe Solutions guide | Google AI Edge | Google AI for Developers

  • Gallery of Physical Visualizations and Related Artifacts (dataphys.org)

Aprendizaje activo

Actividades de clase

22 actividades — una por cápsula. Cada una abre en una pestaña nueva — la hoja de trabajo para estudiantes va acompañada de una guía con respuestas para el/la docente. Clic en el título de una cápsula para volver a leer su contenido.

CÁPSULA 06

El contexto manda: audiencia, narrativa y puntos de vista en InfoVis

CÁPSULA 20

Data-Ink ratio y atributos preatentivos: menos tinta, más mensaje

CÁPSULA 32

Fisicalización estética: pantallas ambientales, arte informativo y esculturas de datos

Ejemplos

Proyectos de estudiantes

No es solo la casita. Cada semestre los estudiantes construyen sus propias visualizaciones —interactivas, sonoras y físicas— sobre los datos que ellos eligen. Estos son algunos de esos proyectos.

🎬 EjemploProyectos 2025-II
🎬 EjemploConsumo de Energía en Chile
Créditos: Desarrollado por el Grupo 6 (InfoVis 2024-II). Se realizaron ajustes visuales y físicos para optimizar la experiencia interactiva.
🎬 EjemploMigración de Gaviotas
Créditos: Desarrollado por el Grupo 21 (InfoVis 2024-II). Se realizaron ajustes visuales para mejorar la claridad de la representación.
🎬 EjemploCopa del Mundo — Países Anfitriones
Créditos: Desarrollado por Benjamín Santander, Nicolás San Martín, Rodolfo Cruz (Grupo 17, InfoVis 2024-II). Se realizaron pequeñas revisiones visuales para mejorar la accesibilidad y la claridad.
🎬 EjemploDispensador de Cereales Inteligente
Créditos: Desarrollado por el Grupo 5 (InfoVis 2024-II). El proyecto fue revisado para mejorar la integración física y la interacción.
🎬 Ejemplo100 Metros en las Olimpiadas
Créditos: Maximiliano Cabrera, Matías Oliva, Lorenzo Muñoz (Grupo 13, InfoVis 2024-II). El proyecto fue ajustado para integrar un dispositivo físico.
🎬 EjemploGasto Militar Mundial
Créditos: Jaime Hormazábal, Juan Pablo Palma, Yampai Ludueña (Grupo 22, InfoVis 2024-II). Se realizaron ajustes visuales y físicos para mejorar la experiencia interactiva.
🎬 EjemploIntensidad del Viento — Quinta Región
Créditos: Nicolás Acevedo, Alan Saavedra, Pablo Utrera (Grupo 11) y Grupo 14 (InfoVis 2024-II). Se integraron las visualizaciones de ambos grupos para representar tanto la intensidad como la dirección del viento.
🎬 EjemploMontañas Rusas más Rápidas
Créditos: Desarrollado por el Grupo 4 (InfoVis 2024-II). Se realizaron ajustes visuales para mejorar la interacción del usuario.
🎬 EjemploLluvias en Chile
Créditos: La representación física fue diseñada por el Grupo 7 (InfoVis 2024-II), y aunque se mantuvo la idea original, fue ajustada para ofrecer una experiencia inmersiva. Se realizaron cambios significativos en la visualización y sonificación.
🎬 EjemploAutos más Rápidos del Mundo
Créditos: Matías Acuña, Gaspar Magna, Pablo Rabelo (Grupo 29, InfoVis 2024-II). El proyecto fue reescrito en JavaScript puro y se mejoró la representación física para una experiencia más fluida.