Proportional Area Chart

Categoría Composición

Qué es

Círculos, cuadrados u otras formas donde el área es proporcional al valor. Permite comparar magnitudes cuando las diferencias son muy grandes.

Para qué sirve

Para comparar magnitudes con diferencias de escala muy amplias (ej: economías nacionales) donde un eje lineal quedaría ilegible.

Cómo leerlo

Anatomía

Los círculos de área proporcional ya se usaban a comienzos del siglo XIX para comparar el tamaño de territorios y poblaciones, aplicando a una forma circular el mismo principio de "que el área hable" que otros formatos aplicaban a barras. Un principio de diseño gráfico bien establecido señala que el área es una de las variables visuales más débiles para representar magnitud, porque el ojo humano compara mal superficies, sobre todo cuando las formas no son idénticas. El error más común al construir uno de estos gráficos a mano no es de diseño sino de matemática: escalar el radio en vez del área de forma lineal con el valor. Como el área de un círculo depende del cuadrado del radio, escalar el radio linealmente exagera las diferencias entre categorías, igual que ocurre en un polar area chart mal construido.

Marcos rectangulares concéntricos de un hueco de edificio, cada uno claramente más chico que el anterior a medida que se aleja: la misma lógica de un proportional area chart, donde el tamaño de cada forma —no su posición— es lo único que codifica la magnitud

Por qué funciona

Fundamento perceptivo

Permite mostrar diferencias de varios órdenes de magnitud en un espacio compacto. La forma más grande 'impacta' visualmente incluso antes de leer los números.

Errores comunes

El ojo subestima el área

El sistema visual humano subestima de forma sistemática las diferencias de área, mucho más de lo que subestima diferencias de longitud —duplicar el área de una figura no se percibe como "el doble", sino como una diferencia bastante más modesta. Por eso este tipo de gráfico funciona mejor para transmitir una impresión general de magnitud que para que el lector compare valores con precisión.
Formas distintas para las mismas figuras

Comparar un círculo con un cuadrado, o figuras de proporciones distintas entre sí, agrega una variable de forma que no tiene relación con el dato y que dificulta aún más la comparación de área. Mantener la misma forma geométrica para todas las figuras del gráfico es lo mínimo para que la única variable en juego sea el tamaño.
Sin valores numéricos superpuestos

Dado que el área ya es, de por sí, un canal impreciso para leer magnitudes exactas, omitir la cifra numérica sobre o junto a cada figura deja al lector sin ninguna forma de conocer el valor real —solo una impresión aproximada de qué figura es más grande que cuál.

Dónde se usa

Contextos de aplicación

PIB de países

Comparación del Producto Interno Bruto entre economías de tamaño muy distinto.

Capitalización de empresas

Valor bursátil de compañías dentro de un mismo sector o índice.

Población de ciudades

Tamaño relativo de distintas ciudades o áreas metropolitanas.

Cómo construirlo

El mismo gráfico, en 11 librerías open source

Cada librería resuelve las mismas decisiones de diseño, como la escala, el espaciado entre barras o la inserción de la etiqueta de valor, de un modo distinto. Algunas las automatizan; otras las dejan explícitas en el código, a criterio de quien lo escribe. Comparar once implementaciones con los mismos datos y el mismo color de marca aísla esa diferencia, que de otro modo queda oculta detrás de estilos visuales distintos.

Matplotlib License (estilo BSD)

ax.scatter() ya usa "s" como área por defecto (una excepción notable entre las librerías Python), pero Circle patches con radio explícito es más directo para alinear los círculos sobre una misma línea base.

import matplotlib.pyplot as plt
import math

items = [
    {"label": "India", "value": 1463.9, "valueLabel": "1.464", "color": "#490827"},
    {"label": "EE.UU.", "value": 347.3, "valueLabel": "347", "color": "#760D3E"},
    {"label": "Chile", "value": 19.9, "valueLabel": "20", "color": "#C08AA3"},
]
centros_x = [130, 330, 460]
k = 118 / math.sqrt(max(d["value"] for d in items))

# ax.scatter() ya usa "s" como AREA por defecto (una excepcion notable
# entre las librerias Python), pero Circle patches con radio explicito
# es mas directo para alinear los circulos sobre una misma linea base.
fig, ax = plt.subplots(figsize=(7.2, 3.6))
for item, cx in zip(items, centros_x):
    r = math.sqrt(item["value"]) * k
    ax.add_patch(plt.Circle((cx, r), r, color=item["color"], alpha=0.85))
    ax.text(cx, r, item["valueLabel"], ha="center", va="center", color="white", fontweight="bold")
    ax.text(cx, -14, item["label"], ha="center")
ax.set_aspect("equal"); ax.axis("off")
plt.show()