Matriz de puntos

Resultados de casos individuales en cuadrícula.

Definición

La matriz de puntos es una cuadrícula fija de cien puntos, uno por unidad porcentual, en la que cada categoría pinta los que le tocan. Se lee contando, no estimando ángulos ni longitudes. Sirve para resultados de un ensayo, tasas de respuesta o cualquier reparto en porcentaje.

Editar con tus datos SVG Spec JSON

Datos: label · count
Buena para: Que el lector cuente qué parte de cada cien corresponde a cada categoría.
Evítala cuando: Cuando las diferencias entre categorías son de décimas: la cuadrícula solo resuelve puntos enteros.
Se lee bien: Entre 2 y 20 elementos; dibuja hasta 3000
Datos que faltan: Dibuja el valor ausente como cero.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`label` · opcional	string	La categoría a la que se pintan sus puntos, y su entrada de leyenda.
`count` · opcional	number	CUÁNTOS puntos de los cien se llevan. Un solo alias, «count»: cualquier otro nombre y la pieza devuelve [].

Tamaños

Recompuesta, no encogida

El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.

Móvil · 408 × 477 px

Escritorio · 848 × 662 px

Cuándo usarla

Tres preguntas antes de elegirla

¿El reparto se expresa en porcentajes de un total?

Si las cantidades son casos absolutos y no partes de cien, un gráfico de unidades dibuja una marca por caso.

Sí: quédate con matriz de puntos

No: usa Gráfico de unidades

¿Basta con una resolución de un punto porcentual?

Si las diferencias son de décimas, unas barras horizontales con su cifra las distinguen.

Sí: quédate con matriz de puntos

No: usa Gráfico de barras horizontales

¿Es un solo reparto?

Si comparas el reparto de varios grupos, unas barras apiladas los ponen uno junto a otro.

Sí: quédate con matriz de puntos

No: usa Barras apiladas

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('dotmatrix');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →