|
| 1 | +<!doctype html> |
| 2 | +<html lang="es"> |
| 3 | +<head> |
| 4 | +<meta charset="utf-8" /> |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | +<title>SINAPSE · Marco de visualización</title> |
| 7 | +<link rel="stylesheet" href="../assets/sinapse.css" /> |
| 8 | +</head> |
| 9 | +<body> |
| 10 | +<div class="wrap"> |
| 11 | + |
| 12 | +<header class="masthead"> |
| 13 | + <div class="brand"><a href="../index.html">SINAPSE</a><small>Ciencia · Tecnología · Industria</small></div> |
| 14 | + <div> |
| 15 | + <div class="issue"> |
| 16 | + <strong>Marco de visualización</strong> |
| 17 | + Documento interno · v1<br/> |
| 18 | + Mayo 2026 |
| 19 | + </div> |
| 20 | + <div class="lang-switch" aria-label="Selector de idioma"> |
| 21 | + <a class="active" href="./viz-framework.html" lang="es">ES</a> |
| 22 | + <span class="sep">|</span> |
| 23 | + <a href="../en/editorial/viz-framework.html" lang="en">EN</a> |
| 24 | + </div> |
| 25 | + </div> |
| 26 | +</header> |
| 27 | + |
| 28 | +<section> |
| 29 | + <div class="section-head"><span class="num">§ 00</span><h2>Por qué este documento</h2></div> |
| 30 | + <p>Toda figura en SINAPSE compite por la atención del lector con la prosa, los papers y la próxima notificación del móvil. Si una visualización no comunica más rápido y mejor que el párrafo equivalente, sobra. Este marco define las reglas operativas que cada gráfico de la revista debe cumplir antes de publicarse, ancladas a la tradición consolidada del campo (Tufte, Knaflic, Few, Cairo, FT/NYT graphics).</p> |
| 31 | + <p>El validador automatizado (<code>scripts/validate-issue.py</code>) verifica las reglas mecánicamente verificables. Las que requieren juicio editorial (selección de tipo de gráfico, claridad del mensaje) son responsabilidad del editor en cada cierre.</p> |
| 32 | +</section> |
| 33 | + |
| 34 | +<section> |
| 35 | + <div class="section-head"><span class="num">§ 01</span><h2>Integridad del dato</h2></div> |
| 36 | + <p><em>Referencia: Edward Tufte · </em><em>The Visual Display of Quantitative Information</em><em> (1983, 2001).</em></p> |
| 37 | + <ul> |
| 38 | + <li><strong>Data-ink ratio alto.</strong> Maximizar la tinta dedicada al dato; eliminar adornos, sombras, gradientes decorativos, 3D.</li> |
| 39 | + <li><strong>Cero chartjunk.</strong> Ningún elemento que no aporte información cuantitativa o estructural verificable.</li> |
| 40 | + <li><strong>Escalas honestas.</strong> Barras siempre desde 0. Ejes con quiebres marcados explícitamente si son necesarios.</li> |
| 41 | + <li><strong>Sin distorsión de área.</strong> El área de un elemento gráfico debe ser proporcional al dato que representa. Pies en 3D, perspectivas isométricas y "rosas" decorativas están prohibidos.</li> |
| 42 | + <li><strong>Lie factor < 1.05.</strong> El tamaño de un efecto en el gráfico no puede diferir del tamaño en los datos por más de 5 %.</li> |
| 43 | + </ul> |
| 44 | +</section> |
| 45 | + |
| 46 | +<section> |
| 47 | + <div class="section-head"><span class="num">§ 02</span><h2>Selección del tipo de gráfico</h2></div> |
| 48 | + <p><em>Referencia: Financial Times Visual Vocabulary (Berow, Smith, Bremer) · Stephen Few · </em><em>Show Me the Numbers</em><em>.</em></p> |
| 49 | + <p>Identificar primero la <strong>relación que se quiere mostrar</strong>, después elegir el tipo:</p> |
| 50 | + <details open> |
| 51 | + <summary>Tabla de decisión</summary> |
| 52 | + <div class="body"> |
| 53 | + <dl> |
| 54 | + <dt>Comparación de magnitudes</dt> |
| 55 | + <dd>Barras horizontales si las etiquetas son largas; verticales si la cantidad de series es chica y el eje X es ordinal o temporal.</dd> |
| 56 | + <dt>Parte/todo (suma a 100 %)</dt> |
| 57 | + <dd>Pie chart si hay ≤6 segmentos y al menos uno es claramente dominante. Stacked bar si hay 7+ segmentos o si se comparan varias distribuciones en paralelo. Treemap si hay jerarquía.</dd> |
| 58 | + <dt>Cambio en el tiempo</dt> |
| 59 | + <dd>Línea (no barras) si hay 5+ puntos. Slope chart para comparar dos puntos en el tiempo entre múltiples series.</dd> |
| 60 | + <dt>Distribución de una variable</dt> |
| 61 | + <dd>Histograma o densidad. Box plot solo si la audiencia conoce el constructo.</dd> |
| 62 | + <dt>Correlación entre dos variables</dt> |
| 63 | + <dd>Scatter plot. Marcar el coeficiente y la incertidumbre.</dd> |
| 64 | + <dt>Ranking</dt> |
| 65 | + <dd>Barras horizontales ordenadas. Dot plot si el orden es lo importante y las magnitudes son secundarias.</dd> |
| 66 | + <dt>Magnitudes contra una referencia</dt> |
| 67 | + <dd>Bullet chart (Few) o lollipop con marcador de objetivo.</dd> |
| 68 | + </dl> |
| 69 | + </div> |
| 70 | + </details> |
| 71 | +</section> |
| 72 | + |
| 73 | +<section> |
| 74 | + <div class="section-head"><span class="num">§ 03</span><h2>Carga cognitiva y diseño</h2></div> |
| 75 | + <p><em>Referencia: Cole Nussbaumer Knaflic · </em><em>Storytelling with Data</em><em> (2015).</em></p> |
| 76 | + <ul> |
| 77 | + <li><strong>Un punto focal por gráfico.</strong> Usar atributos preatentivos (color saturado, peso tipográfico) para guiar la mirada al dato que importa; el resto en gris/atenuado.</li> |
| 78 | + <li><strong>Etiquetas dentro de la figura</strong> cuando el espacio lo permite. La leyenda lateral es la segunda opción; el pie de imagen externo es la tercera.</li> |
| 79 | + <li><strong>Todos los segmentos del mismo gráfico muestran su valor cuantitativo</strong> — porcentaje, cifra o ambos. Es regla SINAPSE: no se etiqueta solo el mayor o el menor.</li> |
| 80 | + <li><strong>Texto mínimo 10 px en pantalla.</strong> Si una etiqueta requiere fuente más pequeña, replantear el tipo de gráfico o el espacio asignado.</li> |
| 81 | + <li><strong>Eliminar líneas de cuadrícula</strong> a menos que el lector deba leer valores exactos. Si están, en gris muy claro (<code>#d9d4c9</code>).</li> |
| 82 | + </ul> |
| 83 | +</section> |
| 84 | + |
| 85 | +<section> |
| 86 | + <div class="section-head"><span class="num">§ 04</span><h2>Veracidad y contexto</h2></div> |
| 87 | + <p><em>Referencia: Alberto Cairo · </em><em>The Truthful Art</em><em> (2016).</em></p> |
| 88 | + <ul> |
| 89 | + <li><strong>Toda figura cita su fuente</strong> explícitamente, dentro del SVG o en el <code>figcaption</code>. Sin fuente, no se publica.</li> |
| 90 | + <li><strong>Unidad de medida explícita</strong> en cada eje y leyenda.</li> |
| 91 | + <li><strong>Cobertura temporal y geográfica</strong> indicada en la nota inferior.</li> |
| 92 | + <li><strong>Aproximaciones marcadas</strong> con <code>≈</code> o <code>~</code> en el dato; los cálculos propios se identifican como tales.</li> |
| 93 | + <li><strong>Si los porcentajes no suman 100 %</strong> por redondeo, se declara en la nota inferior. Si la diferencia es >1 %, no es redondeo: hay que recalcular.</li> |
| 94 | + <li><strong>Sample size</strong> presente cuando aplica (n=…).</li> |
| 95 | + </ul> |
| 96 | +</section> |
| 97 | + |
| 98 | +<section> |
| 99 | + <div class="section-head"><span class="num">§ 05</span><h2>Accesibilidad</h2></div> |
| 100 | + <p><em>Referencia: WCAG 2.2 AA · ColorBrewer (Brewer, Harrower) · Color Universal Design (Okabe & Ito).</em></p> |
| 101 | + <ul> |
| 102 | + <li><strong>Contraste texto/fondo ≥ 4.5:1</strong> para texto normal; ≥ 3:1 para texto grande (≥18 px).</li> |
| 103 | + <li><strong>Paleta apta para daltonismo.</strong> Los cuatro tonos SINAPSE (<code>#1a1a1a</code>, <code>#5a3a3a</code>, <code>#8b1a1a</code>, <code>#b08a8a</code>) son una rampa monocromática segura para deuteranopía y protanopía. No introducir colores adicionales sin propósito.</li> |
| 104 | + <li><strong>Cada <code><svg></code></strong> debe tener <code>role="img"</code> y <code>aria-label</code> descriptivo del contenido (no solo del tipo de gráfico).</li> |
| 105 | + <li><strong>Información nunca solo en color.</strong> Las series se diferencian además por etiquetas textuales o patrón.</li> |
| 106 | + <li><strong>Tamaño de objetivo táctil ≥ 24 px</strong> para elementos clickables si el gráfico es interactivo (no es nuestro caso por ahora).</li> |
| 107 | + </ul> |
| 108 | +</section> |
| 109 | + |
| 110 | +<section> |
| 111 | + <div class="section-head"><span class="num">§ 06</span><h2>Convenciones específicas SINAPSE</h2></div> |
| 112 | + <ul> |
| 113 | + <li><strong>Paleta única:</strong> <code>--ink #1a1a1a</code>, <code>--accent #8b1a1a</code>, <code>--muted #5b5b5b</code>; tonos derivados <code>#5a3a3a</code> y <code>#b08a8a</code> para series cuantitativas. Fondo siempre <code>--paper #fffdf8</code>.</li> |
| 114 | + <li><strong>Tipografía:</strong> serif (Source Serif Pro) para cifras grandes; mono (IBM Plex Mono) para etiquetas y unidades; sin sans-serif dentro de gráficos.</li> |
| 115 | + <li><strong>SVG inline únicamente.</strong> Sin imágenes externas (PNG, JPG); sin librerías JS de visualización.</li> |
| 116 | + <li><strong><code>viewBox</code> obligatorio</strong>, sin <code>width</code>/<code>height</code> fijos — los gráficos deben escalar.</li> |
| 117 | + <li><strong>Pie chart máximo 6 segmentos.</strong> Con 7+ usar stacked bar o treemap.</li> |
| 118 | + <li><strong>Stacked bar:</strong> orden de mayor a menor de izquierda a derecha; segmentos <5 % con callout obligatorio.</li> |
| 119 | + <li><strong>Bar chart comparativo</strong> entre regiones: ordenar por magnitud, no por orden alfabético, salvo que el orden alfabético sea informativo.</li> |
| 120 | + </ul> |
| 121 | +</section> |
| 122 | + |
| 123 | +<section> |
| 124 | + <div class="section-head"><span class="num">§ 07</span><h2>Checklist pre-publicación</h2></div> |
| 125 | + <p>Cada gráfico debe pasar esta lista antes del commit del número. El validador automatizado verifica los puntos marcados con <code>(auto)</code>; el resto requiere revisión editorial.</p> |
| 126 | + <ol> |
| 127 | + <li><code>(auto)</code> <code><svg></code> tiene <code>role="img"</code> y <code>aria-label</code>.</li> |
| 128 | + <li><code>(auto)</code> <code>viewBox</code> declarado; sin <code>width</code>/<code>height</code> hard-coded.</li> |
| 129 | + <li><code>(auto)</code> Todos los segmentos de un pie/stacked bar muestran su valor numérico.</li> |
| 130 | + <li><code>(auto)</code> Porcentajes de un pie/stacked bar suman 100 ± 1 pp.</li> |
| 131 | + <li><code>(auto)</code> Texto SVG ≥ 9 px declarado.</li> |
| 132 | + <li><code>(auto)</code> Cita de fuente presente (en SVG o en <code>figcaption</code>).</li> |
| 133 | + <li><code>(editor)</code> Tipo de gráfico es el correcto para la relación que se muestra.</li> |
| 134 | + <li><code>(editor)</code> Hay un punto focal claro.</li> |
| 135 | + <li><code>(editor)</code> Unidades y cobertura temporal/geográfica explícitas.</li> |
| 136 | + <li><code>(editor)</code> Si hay aproximaciones, están marcadas con <code>≈</code>/<code>~</code>.</li> |
| 137 | + <li><code>(editor)</code> Paleta dentro de los tonos SINAPSE; sin colores extras.</li> |
| 138 | + </ol> |
| 139 | +</section> |
| 140 | + |
| 141 | +<footer class="colophon"> |
| 142 | + <strong>SINAPSE</strong> · marco de visualización · documento interno.<br/> |
| 143 | + Anclado a: Tufte (1983), Few (2004), Knaflic (2015), Cairo (2016), FT Visual Vocabulary, WCAG 2.2.<br/> |
| 144 | + <a href="../index.html">← volver al índice</a> · <a href="./guia.html">guía editorial</a> |
| 145 | +</footer> |
| 146 | + |
| 147 | +</div> |
| 148 | +</body> |
| 149 | +</html> |
0 commit comments