El mapa de decisiones del track

El árbol del territorio

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.