Dieciséis piezas reutilizables que respetan la grilla y los colores del sitio. Copiá cualquiera con un clic y pegalo en tu nota. Cambian de tono con el tema activo (Ámbar, Noche o Vial).
Cómo usar
1 · Tocá Copiar SVG en cualquier tarjeta.
2 · Pegá dentro de tu nota — en <figure class="inset"><div class="img">…</div></figure> o donde necesites.
3 · Editá números y etiquetas a mano. Los colores siguen automáticamente las variables de tema (--accent, --ink, etc.).
Series temporales.
Para mostrar evolución en el tiempo: tendencias, picos y mínimos. Pensados para notas de dossier o explainers de serie histórica.
01Línea anotada · serie larga
Curva anotada
Una serie larga con dos puntos destacados (pico + mínimo). Ideal para abrir un dossier sobre tendencias de mortalidad.
16:6Hero18+ años
02Sparkline · variación interanual
Sparkline + KPI
Mini-serie para acompañar una cifra grande. Va bien en sidebars, callouts o leads.
4:2,5Mini
03Escalonado · cambios de ley
Escalonado
Muestra cambios discretos (leyes, regulaciones) sobre un eje temporal continuo.
4:2,5Política pública
04Multi-línea · 3 provincias comparadas
Multi-línea
Tres series en paralelo con leyenda en el extremo derecho. Una en color, las otras dos en tono secundario para evitar competencia visual.
16:6Comparativo
Comparativos.
Para enfrentar cifras y resaltar diferencias. Funciona bien en notas sobre rankings provinciales, tipos de vehículo o cambios pre/post regulación.
05Barras · día de la semana
Barras verticales
Un valor destacado en color, el resto en tinta. Perfecto para resaltar el pico de un set semanal o anual.
4:2,57–12 categorías
06Ranking · top 6 provincias
Barras horizontales
Mejor que vertical cuando hay etiquetas largas. El líder en color, el resto en jerarquía neutra.
4:2,5Ranking
07Apiladas · composición víctimas
Barras apiladas
Composición porcentual a lo largo del tiempo. Funciona cuando importa la mezcla, no los totales.
4:2,53 series
08Slope · antes / después
Slope chart
Sólo dos puntos en el tiempo. La pendiente cuenta toda la historia. Ideal para "antes vs. después de la ley".
4:2,52–6 entidades
Distribuciones.
Para mostrar cómo se reparte algo: edad, hora, género, tipo de vehículo. La parte se entiende como fracción del todo.
09Dona · franja etaria
Dona con leyenda
Un único valor destacado dentro del aro. Las otras categorías quedan grises para no competir.
4:2,53–5 partes
10Pictograma · 100 víctimas
Pictograma (waffle)
Cien cuadros, cada uno es 1%. Es la mejor manera de mostrar proporciones humanas sin abstraer demasiado.
4:2,5100 unidades
11Histograma · velocidad al impacto
Histograma
La cifra como distribución. La barra modal queda destacada, mediana anotada con línea.
4:2,5Variable continua
12Heatmap · hora × día
Heatmap
7 × 24 celdas para ver el patrón temporal completo. El acento de color marca el cuadrante crítico.
4:2,5Patrón temporal
Geográficos.
Cuando el dónde es la historia: provincias, corredores, partidos. Mapas estilizados, no cartográficamente exactos.
13Mapa de puntos · siniestralidad por densidad
Mapa de puntos escalados
Contorno simplificado de Argentina. Los círculos crecen con la magnitud; el acento marca al líder.
16:6,7Mapa
14Corredor · puntos críticos
Corredor con marcas
Una ruta estilizada con puntos críticos sobre los kilómetros. Útil para notas de mapas viales.
4:2,5Ruta
Destacados & KPI.
Cifras grandes para abrir o cerrar una nota. Pensados para tarjetas en el masonry o pull-quotes con datos.
15Tarjeta KPI · cifra grande
KPI claro
La cifra como protagonista absoluto. Fondo claro, sirve para abrir secciones.
4:2,5Hero card
16Tarjeta KPI · oscura con tendencia
KPI oscuro + sparkline
Para resaltar cifras críticas. La sparkline va abajo, en color acento, para evitar visualmente "anclar" el dato a la línea.
4:2,5Fondo oscuro
Especiales.
Para casos puntuales: anatomía de un siniestro, comparación con países, cita destacada.
17Dot plot · tasa por 100 mil habitantes
Dot plot internacional
Ubicar a Argentina en el contexto regional. El punto destacado es más grande y el resto sirve de escala.
16:5Comparado
18Anatomía · descomposición de una cifra
Anatomía
Una sola cifra grande, descompuesta en sus partes a la derecha. Sirve como "abridor de dossier".
4:2,5Síntesis
Cómo se ve en una nota.
Estos son los tres usos más comunes. Copiá la estructura y reemplazá el SVG por el que necesites.
/* ── Hero a 16:7, fuera del cuerpo de texto ── */
<figure class="art-figure">
<svg viewBox="0 0 1280 560" preserveAspectRatio="xMidYMid slice">
/* pegá aquí el SVG */
</svg>
<div class="cap">FIG. 1 — Tu epígrafe acá</div>
</figure>
/* ── Inset a 16:9, dentro del cuerpo de la nota ── */
<figure class="inset">
<div class="img">
<svg viewBox="0 0 400 250"> … </svg>
</div>
<figcaption>Fig. 2 — Descripción breve</figcaption>
</figure>
/* ── KPI en sidebar / hero stats ── */
<div class="stat-block">
<div class="num crit">4.327</div>
<div class="label">Muertes en siniestros viales · 2025</div>
</div>