El mapa de decisiones del track
El árbol que va desde qué quieres dibujar hasta la tecnología concreta, y la lista ordenada de las decisiones de un gráfico con el nivel que responde a cada una.
Treinta niveles se resumen en un árbol y en una lista. El árbol responde a la primera pregunta, que es qué tecnología usar, y la lista ordena las decisiones que hay que tomar dentro de un gráfico, en el orden en que se toman y con el sitio donde está la respuesta. Esta es la página a la que se vuelve, no la que se lee una vez.
- Recorrer el árbol desde el tipo de contenido hasta la tecnología concreta.
- Ordenar las decisiones de un gráfico según su dependencia.
- Localizar rápidamente el nivel que responde a cada decisión.
- Reconocer las cuatro decisiones que no se pueden posponer.
El árbol del territorio
flowchart TB A[Que quieres dibujar] --> B[Interfaz y decoracion] A --> C[Iconos ilustracion y logotipos] A --> D[Datos] A --> E[Imagenes y manipulacion de pixeles] B --> B1[CSS puro con gradientes mascaras y filtros] C --> C1[SVG con currentColor y sprite reutilizable] D --> D1[Cuantos elementos y que interaccion hace falta] E --> E1[Lienzo con ImageData o filtros de contexto] D1 -->|pocos y con texto| D2[SVG generado por codigo] D1 -->|muchos| D3[Lienzo para los datos] D3 --> D4[Hibrido con SVG para ejes y etiquetas] D4 -->|si el lienzo no llega| D5[Subir a WebGL o WebGPU] style A fill:#cba6f7,color:#11111b style B fill:#89b4fa,color:#11111b style C fill:#89b4fa,color:#11111b style D fill:#89b4fa,color:#11111b style E fill:#89b4fa,color:#11111b style B1 fill:#a6e3a1,color:#11111b style C1 fill:#a6e3a1,color:#11111b style D1 fill:#f9e2af,color:#11111b style D2 fill:#a6e3a1,color:#11111b style D3 fill:#fab387,color:#11111b style D4 fill:#94e2d5,color:#11111b style D5 fill:#fab387,color:#11111b style E1 fill:#fab387,color:#11111b
Las cuatro ramas de arriba son la clasificación que hay que hacer antes que nada, y confundirlas es el error más caro del territorio:
Interfaz y decoración: fondos, formas decorativas, bordes complejos, transiciones. No uses SVG ni lienzo. CSS hace gradientes, máscaras, recortes, filtros y formas, se anima en el compositor y no añade ni un nodo. Un lienzo para pintar un fondo con gradiente es un error de categoría.
Iconos e ilustración: SVG, sin discusión. Vectorial, escalable, estilable desde CSS, accesible, y con el patrón de reutilización de use y su árbol de sombra y el patrón correcto para iconos.
Datos: la rama larga, y la que ocupa la mitad del track.
Imágenes y píxeles: lienzo, porque es el único que da acceso al array de píxeles.
Las decisiones de un gráfico, en orden
Están ordenadas por dependencia: cada una condiciona las siguientes, y tomarlas al revés obliga a rehacer.
Uno: qué frase tiene que producir el gráfico. Antes que nada. Sin ella no hay criterio para ninguna de las demás. Está en qué gráfico para qué pregunta.
Dos: qué canal codifica la variable principal. Posición, longitud, ángulo, área o color, con el coste medido de cada uno en la jerarquía perceptual. Esta decisión determina el tipo de gráfico, no al revés.
Tres: qué dominio tiene cada escala. Si empieza en cero, si se recalcula, si se comparte entre series o entre paneles. Es la decisión que más consecuencias tiene por línea de código, y está en qué es una escala.
Cuatro: qué tipo de escala. Lineal, logarítmica, de potencia, de tiempo, ordinal o de banda, según lineal, logarítmica y de potencia y tiempo, ordinal y de banda.
Cinco: cuántas marcas y con qué formato. El algoritmo de las marcas bonitas, con el contador derivado del tamaño y no fijo.
Seis: qué tecnología. El árbol de el enfoque híbrido, que a su vez depende del umbral de el umbral de elementos.
Siete: qué paleta. Secuencial, divergente o cualitativa, con el punto neutro donde de verdad está, según el color en visualización.
Ocho: cómo se anota. Título con verbo, etiquetado directo, líneas de referencia, según anotación, etiquetado y título.
Nueve: cómo se interactúa. Eventos del DOM o hit testing, con las cuatro técnicas de la interacción.
Diez: cómo sale del navegador. Exportación e impresión, según exportación y render en servidor y accesibilidad, impresión y zoom.
La tabla de referencia
| Necesito | Respuesta | Dónde |
|---|---|---|
| Un icono que herede el color del texto | fill="currentColor" |
currentColor |
| Reutilizar una forma muchas veces | symbol más use |
symbol y su viewBox |
| Un gradiente que no se deforma | gradientUnits="userSpaceOnUse" |
gradientUnits |
| Recortar con borde suave | mask en vez de clipPath |
elegir entre recorte y máscara |
| Una sombra que no se corta | Ampliar la región del filtro | la región del filtro |
| Texto que sobreviva a la exportación | Contornos o fuente incrustada | las fuentes en un SVG exportado |
| Que un gráfico se pueda leer sin ver | Tabla alternativa y navegación | una gráfica de datos accesible |
| Que el SVG de diseño no rompa nada | SVGO con los plugins correctos | SVGO y los plugins que rompen |
| Construir SVG desde JavaScript | createElementNS con el namespace |
createElementNS |
| Actualizar sin recrear el DOM | Reutilizar nodos por clave | actualizar en vez de recrear |
| Descargar el gráfico | Serializar con xmlns |
serializar y descargar |
| Un eje con buen aspecto | Las cinco piezas y sus alineaciones | construir un eje a mano |
| Escalas, formas y jerarquías ya escritas | d3-scale, d3-shape, d3-hierarchy |
la filosofía modular de D3 |
| Suavizar sin mentir | curveMonotoneX |
los generadores de forma |
| Que D3 no pelee con mi framework | Solo la matemática | D3 solo para la matemática |
| Muchos puntos con tooltip rápido | Índice espacial o color | la interacción |
Las cuatro que no se pueden posponer
Casi todas las decisiones de la lista se pueden cambiar más tarde con un coste razonable. Cuatro no, y conviene saber cuáles son antes de escribir la primera línea.
La separación entre cálculo y render. Añadirla después de tener tres gráficos escritos es reescribir los tres. Es la decisión estructural de la arquitectura de un sistema de visualización y hay que tomarla el primer día.
Si el gráfico tiene que existir fuera del navegador. Correos, informes, vistas previas de enlaces. Descubrirlo tarde puede obligar a cambiar de tecnología entera.
Si el contenido tiene que ser accesible y buscable. Es un requisito legal en muchos contextos, y si la respuesta es sí, la rama del árbol cambia de raíz.
Quién es el dueño del DOM. Mezclar dos dueños produce fallos que no se depuran. La decisión se toma al elegir la biblioteca y arreglarla después significa quitarla.
Las tres primeras son la misma pregunta formulada de tres maneras: ¿este gráfico va a vivir solo dentro de una pestaña abierta, o va a tener que existir en otros sitios? Si la respuesta es lo segundo, la arquitectura tiene que estar preparada antes de que llegue el requisito, porque cuando llegue vendrá con fecha.
Todo este track enseña a construir gráficos, así que conviene terminar el mapa con la salida que ningún mapa dibuja: no dibujar nada.
Un número grande gana a un gráfico de un dato. El indicador de «ventas del mes» no necesita un medidor semicircular, ni un anillo de progreso, ni una barra: necesita el número, grande, con su comparación al lado. Un gráfico de un solo valor usa el canal más caro para comunicar lo que un strong comunica mejor.
Una tabla gana a un gráfico cuando la tarea es buscar valores. Si el usuario viene a saber cuánto vendió el producto B en marzo, una tabla ordenable responde en un segundo y con precisión total. Un gráfico de barras le hace estimar. La tabla se puede copiar, se puede ordenar, se puede buscar y es accesible sin trabajo extra. La regla: gráfico para ver el patrón, tabla para leer el valor, y si hace falta lo uno y lo otro, pon los dos.
Una frase gana a un panel cuando la conclusión es estable. «El tiempo de respuesta lleva tres semanas por debajo del objetivo» es más útil que seis gráficos de los que hay que deducirlo. Un panel es una herramienta de exploración; si lo que quieres es comunicar un hecho, escribe el hecho.
Una miniatura de tendencia gana a un gráfico completo dentro de una tabla. Una línea de veinte píxeles de alto en una celda, sin ejes ni etiquetas, comunica la forma de la evolución sin ocupar sitio. Poner un gráfico completo por fila es lo que convierte una tabla útil en una página que no se puede leer.
El síntoma de que hay gráficos de más es fácil de reconocer: un panel donde ningún gráfico tiene un título con verbo. Si ninguno afirma nada, ninguno se está usando para decidir nada, y lo que hay es una colección de números decorados.
Y hay una versión más incómoda de la misma idea, que vale la pena decir al cerrar un track de treinta y un niveles: la parte difícil de la visualización de datos nunca ha sido dibujar. Dibujar está resuelto, y lo tienes resuelto tú a estas alturas. La parte difícil es saber qué pregunta se está haciendo el lector, qué datos la responden y si de verdad la responden. Todo lo demás de este track existe para que, cuando sepas la respuesta a eso, no haya nada técnico que te lo impida.
Coge el panel que uses a diario y clasifica cada uno de sus gráficos en una de cuatro casillas: tiene título con verbo, debería ser un número, debería ser una tabla, o sobra. Después cuenta cuántos quedan en la primera. Ese cociente es la medida más honesta de la calidad de un panel, y suele estar por debajo de un tercio.