TresPies · pila paramétrica de visualización de datos
casa-datos
Primitivas de gráficos y mapas coropléticos, la escala categórica de 8 colores de la casa, y una herramienta de datos de un solo archivo — la pila para un explorador de datos, un panel de indicadores, o una herramienta de análisis que puedes enviar por correo a alguien.
Cada número en esta página es un dato de muestra sintético, generado con fines de demostración — no proviene de ningún cliente, programa o lugar real.
01 · Gráfico de barras (sintético)
Una instantánea, cuatro programas
Un gráfico de barras con línea base en cero — las barras siempre comienzan en cero, así que las diferencias de altura representan proporciones reales, nunca una porción exagerada por un eje truncado. Los valores se imprimen directamente encima de cada barra, así que se leen bien incluso en escala de grises.
Valor sintético más reciente por programa demo en vivo
| Programa | Valor (idx) |
|---|---|
| Programa A | 62 |
| Programa B | 45 |
| Programa C | 78 |
| Programa D | 34 |
Dato sintético. Genera un nuevo ejemplo con una nueva semilla en el panel de parámetros de abajo.
02 · Gráfico de líneas (sintético)
Seis períodos, tres programas
Cada serie combina un color con su propia forma de marcador y patrón de guiones, y se etiqueta directamente al final de su línea — el color nunca es la única forma de distinguir dos series.
Tendencia sintética por período demo en vivo
| Programa | P1 | P2 | P3 | P4 | P5 | P6 |
|---|---|---|---|---|---|---|
| Programa A | 40 | 48 | 44 | 55 | 58 | 62 |
| Programa B | 60 | 55 | 50 | 47 | 46 | 45 |
| Programa C | 30 | 42 | 55 | 60 | 70 | 78 |
Dato sintético. Genera un nuevo ejemplo con una nueva semilla en el panel de parámetros de abajo.
03 · Panel pequeño múltiple (sintético)
Una escala, cuatro paneles
Los cuatro paneles comparten una sola escala en el eje y, calculada a partir de los datos de todos los programas. Eso es lo que los hace honestamente comparables de un vistazo — una barra más alta siempre significa un número más grande, panel a panel.
Los seis períodos por programa demo en vivo
| Programa | P1 | P2 | P3 | P4 | P5 | P6 |
|---|---|---|---|---|---|---|
| Programa A | 40 | 48 | 44 | 55 | 58 | 62 |
| Programa B | 60 | 55 | 50 | 47 | 46 | 45 |
| Programa C | 30 | 42 | 55 | 60 | 70 | 78 |
| Programa D | 50 | 44 | 62 | 58 | 40 | 34 |
Dato sintético. Genera un nuevo ejemplo con una nueva semilla en el panel de parámetros de abajo.
04 · Mapa coroplético (geometría sintética)
Una cuadrícula abstracta, no un lugar real
Una cuadrícula de 4×4 de sectores inventados, no una jurisdicción o frontera real. El color de relleno sigue una escala secuencial entre dos tokens; cada celda también imprime su propio valor, y su etiqueta alterna entre tinta y papel para que se lea bien en ambos extremos de la escala.
Cuadrícula sintética de sectores demo en vivo
| Sector | Valor (idx) |
|---|---|
| Sector A1 | 22 |
| Sector A2 | 48 |
| Sector A3 | 63 |
| Sector A4 | 90 |
| Sector B1 | 35 |
| Sector B2 | 55 |
| Sector B3 | 71 |
| Sector B4 | 40 |
| Sector C1 | 60 |
| Sector C2 | 28 |
| Sector C3 | 82 |
| Sector C4 | 51 |
| Sector D1 | 44 |
| Sector D2 | 66 |
| Sector D3 | 20 |
| Sector D4 | 77 |
Geometría sintética — una cuadrícula abstracta, nunca una frontera real. Para usar un GeoJSON real: ver el comentario final de choropleth.js.
Envía una herramienta por correo
tool.html es un solo archivo autónomo — sin nada externo. Pega un conjunto de datos pequeño, obtén un gráfico de barras, y envía el archivo mismo; no se necesita nada más para abrirlo.
La semilla de abajo regenera cada conjunto de datos sintético en esta página — los cuatro gráficos y sus tablas de datos se actualizan juntos, de forma reproducible.