Bolas de Harvey

Valorar criterios con cuartos de círculo.

Definición

Las bolas de Harvey ponen una matriz de rasgos por producto y, en cada celda, un círculo relleno en cuartos: vacío, un cuarto, medio, tres cuartos o lleno. Se lee por grados, no por cifras. Se usa en comparativas de producto y de proveedores.

Editar con tus datos SVG Spec JSON

Datos: feature · criteria · value
Buena para: Comparar productos rasgo a rasgo con un grado aproximado.
Evítala cuando: Cuando la diferencia exacta importa: dos valores distintos pueden dibujar la misma bola.
Se lee bien: Entre 1 y 12 elementos; dibuja hasta 1000
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é
`feature` · opcional	string	La FILA de la matriz. Sin alias que case, la primera columna de texto.
`criteria` · opcional	string	La COLUMNA de la matriz. Se prefiere la segunda columna de texto sobre el alias.
`value` · opcional	number	0-100 que se REDONDEA a uno de cinco grados (0/25/50/75/100). Un 61 y un 74 dibujan la misma bola.

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 · 468 × 519 px

Escritorio · 848 × 642 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Basta con un grado aproximado?

Si hay que leer la cifra exacta, una tabla la escribe tal cual.

Sí: quédate con bolas de harvey

No: usa Tabla gráfica

¿La matriz es pequeña?

Si hay muchas filas y columnas, un mapa de calor se lee mejor de un vistazo.

Sí: quédate con bolas de harvey

No: usa Mapa de calor

¿Los grados son de cumplimiento y no etapas de madurez con nombre?

Si cada nivel es una etapa definida de una escala, un modelo de madurez las nombra.

Sí: quédate con bolas de harvey

No: usa Modelo de madurez

Código

La misma pieza, con tus datos

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

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

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

Dudas

¿Qué valores admite?

De 0 a 100, que se reducen a uno de cinco grados: vacío, un cuarto, medio, tres cuartos o lleno. La bola afirma el grado, no la cifra: un 61 y un 74 dibujan la misma.

¿Cómo sabe qué es fila y qué es columna?

La primera columna de texto es la fila (el rasgo) y la segunda, la columna (el criterio o producto).

¿Cuántas filas caben?

Se lee bien hasta unas 12.

¿Qué hace si faltan datos?

Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.

¿Cómo se ve en el móvil?

El motor la recompone a 420 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.

Relacionadas