Gráfico de rango-tamaño

Cuánto cae el valor al bajar de puesto.

Definición

Un gráfico de rango-tamaño ordena los ítems de mayor a menor y dibuja cada uno con su puesto y su tamaño, ambos en escala logarítmica. Si el reparto sigue una ley de potencia, los puntos forman una recta cuya pendiente es el exponente; los que se apartan, se ven apartándose. Se usa para ciudades, palabras, clientes o cualquier reparto muy desigual.

Editar con tus datos SVG Spec JSON

Datos: value · label · order
Buena para: Ver si un reparto desigual sigue una ley y qué ítems no la cumplen.
Evítala cuando: Cuando hay menos de una docena de ítems: cualquier lista ordenada baja y parece una ley.
Se lee bien: Entre 12 y 120 elementos; dibuja hasta 5000
Datos que faltan: Se niega a dibujar y dice qué valor falta.
Accesibilidad: Lector de pantalla: resumen en texto · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`value`	number	La magnitud de cada ítem, estrictamente positiva. Es lo que ordena y lo que se dibuja en el eje Y; el PUESTO se deriva de ella. Vale cualquier unidad que se pueda ordenar —esta forma no pide una magnitud con significado propio— y su nombre de columna rotula el eje Y.
`label` · opcional	string	El nombre del ítem. Se busca sólo por nombre —nunca «la primera columna de texto»— y, si falta, los puntos van sin rotular en vez de llevar un nombre que nadie pidió. Los que no encuentran hueco en la lámina se callan; el tooltip los sigue diciendo.
`order` · opcional	number	Un rango YA ESCRITO en el fichero. NO se usa para dibujar —el puesto se deriva ordenando por tamaño, que es lo que hace de esto un rango-tamaño y no una tabla— sino para poder DESMENTIRLO: si el orden que declara no coincide con el orden por tamaño, la figura aborta diciendo cuántas filas caen en otro puesto y cuál es la primera. Con dos órdenes distintos en la misma tabla, dibujar el mío y callar el tuyo sería sustituir tu dato.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Tienes al menos una docena de ítems?

Con pocos ítems, unas barras ordenadas los comparan sin pretender ninguna ley.

Sí: quédate con gráfico de rango-tamaño

No: usa Gráfico de barras horizontales

¿Buscas la ley del reparto y no qué parte acumulan los primeros?

Si la pregunta es cuánto suman los primeros ítems, el diagrama de Pareto lo responde.

Sí: quédate con gráfico de rango-tamaño

No: usa Diagrama de Pareto

¿Te importa el puesto de cada ítem y no sólo cuán desigual es el total?

Si basta con medir la desigualdad del conjunto, la curva de Lorenz es más directa.

Sí: quédate con gráfico de rango-tamaño

No: usa Curva de Lorenz

Código

La misma pieza, con tus datos

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

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

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

Dudas

¿Por qué los dos ejes van en logaritmo?

Porque en escala logarítmica una ley de potencia es una recta, y su pendiente es el exponente.

¿Cuándo escribe el exponente?

Sólo con doce ítems o más y un ajuste muy bueno, R² de 0,97 o superior. Por debajo, el ruido también parece una ley.

¿Puedo dar mi propio rango?

El puesto se calcula ordenando por tamaño. Si traes una columna de rango, sirve para comprobarla: si no coincide, la figura se detiene y dice cuántas filas difieren.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

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

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «cómo se reparten los valores»

Guía para elegir: cómo se reparten los valores →