Sterling: una paleta para datos con voz propia

Sterling empezó con una distancia incómoda: podía encontrar algo interesante en los datos, pero no siempre podía convertirlo en una pieza que quisiera publicar con orgullo.

Durante mis #ViernesDeVisualizaciones aprendí que producir una gráfica y publicar una historia no son la misma tarea. Podía hacer un análisis, descubrir un patrón y tener la sensación de que había algo que valía la pena contar. Después venía la parte difícil: ¿cómo convertirlo en una imagen que se sintiera propia, que funcionara dentro de una entrada de blog, que pudiera circular en Instagram o en Twitter, y que no perdiera su fuente ni sus datos en el camino?

Esa distancia también me alcanzó con trabajo más formal. Publiqué un artículo y nunca hablé en Twitter de sus hallazgos. No era porque los resultados no importaran. No encontraba una manera de mostrarlos que se sintiera tan cuidada como el trabajo detrás de ellos. Y cuando colaboraba con otras personas, me costaba pedirles que empezaran desde cero con las decisiones editoriales que hacen compartible una visualización: título, color, jerarquía, fuente, proporción, exportación y crédito.

Los defaults rara vez resuelven eso. Una paleta predeterminada puede ser funcional, pero no necesariamente dice quién hizo la pieza. Una captura de pantalla puede ser rápida, pero no siempre conserva el tamaño, el fondo o los colores de lo que la audiencia vio. Una imagen bonita puede circular, pero no necesariamente permite descargar sus datos procesados, comprobar la fuente o compartirla desde un teléfono.

Sterling es mi respuesta a ese problema. Es una paleta, sí. También es un conjunto de componentes para Markdown que convierte una visualización en una pieza editorial completa: una afirmación, una lectura guiada, una fuente, una firma y rutas para llevarse la imagen o la tabla.

De Tableau a lectores humanos y agénticos

Soy matemática de formación y trabajo como Data Visualization Engineer en Zillow. Entré para construir dashboards en Tableau. Poco después, con la llegada de herramientas como OpenClaw, mi trabajo empezó a cambiar: hoy pienso menos en un dashboard como una superficie final y más en los distintos sistemas que deben poder consumir los datos de forma correcta.

Cuando una visualización la consume sólo una persona, existe una interpretación que cuidar: la de quien la mira. Con sistemas agénticos aparecen dos. Hay que cuidar lo que interpreta la persona y también lo que interpreta el agente sobre los datos, sobre la gráfica y sobre lo que otro agente pueda decir de ella.

Eso no hizo que necesitara menos preparación de datos. Hizo que necesitara más. Las máquinas son más cuadradas en su forma de consumir información: necesitan contratos, nombres consistentes, estructuras explícitas y procedencia. Pero el hecho de que un sistema pueda leer una tabla no vuelve irrelevante a la experiencia humana. Al contrario. La visualización sigue siendo donde diseño atención, contexto, confianza y deseo de seguir leyendo.

Por eso Sterling no trata las figuras como imágenes mudas. La data y sus gráficas deberían ser compartibles, verificables y trazables dentro de su marco de gobernanza. Si alguien recibe una gráfica, no debería tener que reconstruir una tabla a partir de píxeles para hacer una comparación propia. Si la comparte, debería conservar el resultado que vio. Si necesita revisar de dónde salió, la fuente tendría que estar cerca.

Una figura es una pequeña demostración

En matemáticas, una conclusión no basta por sí sola. Importa que se pueda seguir el camino que la sostiene. Quise que las figuras de Sterling funcionaran con esa misma disciplina, sin convertirlas en una página de documentación.

El título formula una afirmación. El subtítulo explica qué hay que mirar. Cuando una codificación categórica importa, la leyenda vive dentro de esa frase: color, forma y texto aparecen juntos antes de que la mirada tenga que viajar por la página. La gráfica sostiene la afirmación. La fuente permite volver a ella. Y el punto violeta que cierra el título toma el gesto de mi sitio: un pequeño QED editorial.

Esto resuelve una fricción que parecía pequeña hasta que empecé a repetirla. Las leyendas apartadas añaden un viaje visual y ocupan un bloque que rara vez ayuda a la lectura. El color, por sí solo, tampoco debería cargar con una categoría. Sterling puede combinarlo con forma, etiquetas directas, contornos o agrupación. La accesibilidad no es una opción que se activa al final: es una decisión sobre cuántas señales recibe quien está leyendo.

La figura también reúne sus acciones. Puede copiarse como imagen, descargarse como PNG, compartirse con el menú nativo en móvil o exportar el CSV de la información procesada. No sustituye la fuente original. Más bien evita que una persona tenga que adivinar los valores que ya se usaron para construir la visualización.

<SterlingFigure
  labelPrimary="Dispersión"
  labelSecondary="Categórica"
  title="Tres especies se separan antes de leer la leyenda"
  subtitle="Color y forma distinguen:"
  legend={[
    { label: "setosa", colorIndex: 0, shape: "circle" },
    { label: "versicolor", colorIndex: 1, shape: "square" },
    { label: "virginica", colorIndex: 2, shape: "triangle" },
  ]}
  source="R datasets::iris"
  size="wide"
>
  <SterlingScatterPlot {...iris} showLegend={false} />
</SterlingFigure>

La persona que escribe no tiene que volver a resolver la firma, el idioma, la fuente o el margen inferior. Y si una mejora llega a SterlingFigure, llega a cada figura que ya vive dentro del blog.

Veintiocho maneras de empezar a contar

Sterling tiene hoy veintiocho especies de visualización. No son “todos los gráficos que existen”, ni pretende serlo. Son las formas que recuerdo haber necesitado en algún punto de mi historia: barras y dispersión, claro, pero también dendrogramas, Manhattan plots, matrices de expresión, volcanos, correlogramas, violines, ridgelines, velas y mapas.

HTML trae muchas menos de esas posibilidades por defecto. Cuando D3.js entra a la ecuación, la variedad aumenta, pero también la probabilidad de que cada nueva gráfica parezca pertenecer a otro producto. El problema no era dibujar una forma. Era hacer que cada forma conservara una gramática común sin borrar lo que la hace útil.

Un histograma no necesita una paleta categórica sólo porque haya colores disponibles. Un violín debe seguir contando distribución, cuartiles, mediana, máximos y mínimos, no convertirse en una silueta decorativa. Un correlograma no puede mentir con el cambio de modo: en Sterling, los números del triángulo superior conservan sus colores entre light y dark, mientras que los círculos u óvalos invierten el tratamiento necesario para mantener contraste y significado.

La matriz de expresión fue otro recordatorio. No bastaba con pintar celdas. Tenía que especificar cómo esperaba que se agruparan los genes y portar el clustering jerárquico para reconstruir la matriz. Entre más variables debía configurar una visualización, más importante se volvía definir qué parte es regla compartida y qué parte pertenece a sus datos.

También hubo decisiones estadísticas que no aceptaban aproximaciones. Boxplots y violines usan las reglas de Tukey para sus outliers y resúmenes. Las densidades no pueden truncarse donde deja de verse cómodo. En una visualización editorial, el rigor no es una capa que se pone después del estilo. Es una condición para que el estilo merezca confianza.

El correlograma fue una prueba distinta: la misma codificación debía seguir diciendo lo mismo en una pantalla clara y en una oscura. Ahí fue donde entendí que no bastaba con cambiar una rampa. Los números del triángulo superior y las formas del inferior necesitan tratamientos distintos para conservar contraste sin cambiar el signo que comunican.

El espacio también cuenta la historia

Sterling tiene cuatro anchos: compact, medium, wide y full. No los pienso como breakpoints sin emoción. Son decisiones de composición y de ritmo de lectura.

Mi esposo es diseñador industrial y hace novelas gráficas. Al verlo decidir cuánto espacio darle a una escena, empecé a reconocer el mismo problema en una entrada de datos. Una idea pequeña puede vivir en el margen. Una comparación necesita más aire. Una pieza protagonista puede ocupar el ancho de la página. Si todo reclama el mismo espacio, nada tiene ritmo.

compact sirve para una nota lateral o una sola idea. medium es el tamaño natural de una entrada. wide deja respirar comparaciones y leyendas integradas. full se reserva para una pieza que debe detener la lectura, como una matriz compleja o una galería. La misma gráfica puede cambiar de ancho sin cambiar de identidad porque el componente sabe qué elementos mantener, qué espacio abrir y qué jerarquía respetar.

El espacio en blanco no es ausencia de contenido. Es una instrucción de lectura. Por eso preferí acercar las leyendas al subtítulo y dejar que el centro de la tarjeta perteneciera a los datos.

Tres soportes, ocho voces

La paleta clara comienza con #F6F3FB, el papel digital de La Matemaga. No es blanco clínico ni una superficie neutral sin decidir. El modo oscuro no invierte esos colores: recalibra luminancia y croma para luz emitida. Print tampoco intenta copiar la pantalla; traduce los pigmentos a una versión más sobria que anticipa tinta.

Las ocho voces categóricas permanecen en orden: violeta, teal, orquídea, ámbar, azul, coral, musgo y Payne. El violeta es la señal principal de mi sitio. Payne gray era el color favorito de mi esposo y se volvió necesario como voz neutral: no sólo para mostrar datos, sino para contar una historia con zonas de menor énfasis.

La primera versión era demasiado brillante y fría. La calibramos para que se sintiera viva en pantalla sin parecer una paleta genérica o low-effort. También hicimos pruebas de visión de color. Sterling funciona bien en la mayoría de simulaciones de anomalías cromáticas, pero no promete que ocho categorías sean igualmente distinguibles para cada tipo de daltonismo. Por eso insiste en redundancia, reducción de categorías y elección consciente de escala.

Una de las etimologías que se atribuyen a sterling es “pequeña estrella”. Me gustó antes de saber por qué: por la fonética, por la ternura y porque las estrellas ya forman parte de mi mundo visual. Después descubrí la otra asociación: la plata sterling tiene estándares de calidad y pureza. Eso hizo que el nombre se quedara. Quiero que una visualización hecha con este sistema se sienta así: pequeña, luminosa, rigurosa y lo bastante buena como para confiar en ella.

Un sistema que debe seguir creciendo

Sterling no está terminado. Está diseñado para crecer sin perder su procedencia. Quiero sumar nuevas especies, permitir más decisiones explícitas entre escalas categóricas, secuenciales y divergentes, y ofrecer formas cuidadosas de destacar una zona dentro de una escala neutral. Quiero que otras personas puedan cambiar la paleta, la firma y las decisiones de línea editorial sin tener que reconstruir cada pieza.

Pero el punto de partida se mantiene: publicar una historia de datos no debería sentirse como empezar un proyecto de diseño desde cero. Debería sentirse como algo digno de repetir.

Sterling mantiene las historias de datos visualmente coherentes. Datos con voz propia.

El repositorio de Sterling reúne las instrucciones de instalación, la referencia técnica de los componentes, las opciones para cambiar paleta y firma, y la guía para contribuir. Puedes explorar el sistema y su bestiario en la página de Sterling.