Tipos de gráficos explicados
Data Race ofrece nueve modos de gráfico distintos para cada conjunto de datos, además de una tabla de datos para números exactos. Cada modo destaca un aspecto diferente de los datos — clasificaciones, tendencias, composición, patrones geográficos, trayectorias de clasificación, el flujo del conjunto o la comparación directa de magnitud. Esta guía explica qué muestra cada visualización, cómo leerla y cuándo es más útil.
Carrera de gráfico de barras
La carrera de gráfico de barras es la visualización característica de Data Race. Muestra entidades clasificadas como barras horizontales, siendo la barra más larga la que representa el valor más alto. A medida que la animación avanza, las barras suben y bajan para reflejar los cambios de ranking, creando un efecto de carrera dinámico. Cada barra tiene código de color y está etiquetada con el nombre de la entidad, la bandera (para países) y el valor actual.
Cuándo usarla: Usa la carrera de gráfico de barras cuando quieras ver cómo cambian los rankings con el tiempo. Es especialmente efectiva para comparar un número moderado de entidades (10–20) y detectar ascensos o caídas dramáticas.
- La longitud de la barra representa el valor — las barras más largas significan valores más altos
- La posición de la barra muestra el rango — la barra superior es el rango #1
- Las transiciones suaves entre períodos muestran cambios de ranking
- Los colores son consistentes por entidad durante toda la animación
Gráfico de saltos
El gráfico de saltos muestra el rango de cada entidad en el tiempo sobre un eje 1..N, con el rango #1 en la parte superior. Las líneas suben y bajan cuando los rankings cambian, y los cruces marcan los momentos de adelantamiento. El enfoque está en el orden, no en los valores absolutos — una carrera reñida por el 1.º lugar se ve igual ya sea que la diferencia sea un dólar o un billón. Las entidades fijadas se dibujan con una línea más brillante y un halo alrededor del punto.
Cuándo usarla: Usa el gráfico de saltos cuando el orden de clasificación es la historia — posiciones olímpicas de medallas, las 10 principales economías a lo largo de un siglo, clasificaciones donde las posiciones se mezclan. Es la vista más clara de quién adelantó a quién y cuándo.
- El eje Y es el rango: #1 arriba, #N abajo
- Una línea que baja o sube muestra que esa entidad gana o pierde posición
- Dos líneas que se cruzan = una entidad adelantando a otra en ese período
- Las líneas horizontales planas significan que el rango se mantuvo estable
- Las entidades fuera del top-N visible aparecen como chips en el borde inferior
Gráfico de líneas
El gráfico de líneas traza el valor de cada entidad a lo largo del tiempo como una línea continua. Todas las entidades se muestran en los mismos ejes, facilitando la comparación de tendencias a largo plazo. El gráfico resalta el período actual con un marcador vertical, y puedes pasar el cursor sobre cualquier punto para ver el valor exacto. Las entidades fijadas se destacan con líneas más gruesas mientras las demás se desvanecen al fondo.
Cuándo usarla: Usa el gráfico de líneas cuando quieras rastrear tendencias a lo largo del tiempo, comparar trayectorias de crecimiento o identificar puntos de cruce donde una entidad supera a otra.
- El eje Y muestra la escala de valores, el eje X muestra los períodos de tiempo
- Cada línea representa una entidad — sigue una línea para ver su trayectoria
- Las pendientes más pronunciadas indican crecimiento o declive más rápido
- Las líneas que se cruzan muestran cambios de ranking entre entidades
Streamgraph
El streamgraph apila los valores brutos de cada entidad como bandas de colores alrededor de una línea base centrada, creciendo simétricamente hacia arriba y hacia abajo. La altura total en cualquier momento equivale al valor combinado de todas las entidades, por lo que ves composición Y magnitud total a la vez. Al reproducir, el flujo entra desde la izquierda — las bandas aparecen, se expanden y se reequilibran en una masa orgánica. Mejor en conjuntos de datos que crecen monótonamente donde el conjunto es la historia.
Cuándo usarla: Usa el streamgraph cuando quieras sentir el todo evolucionar como una sola forma fluida — el PIB mundial explotando mientras las regiones se reequilibran, el ecosistema OSS expandiéndose mientras nuevas bibliotecas desplazan a las antiguas, la capitalización bursátil creciendo mientras los sectores rotan.
- El grosor de la banda en cualquier punto = valor bruto de esa entidad en ese período
- Altura total del gráfico = suma de todas las entidades visibles (Top-N + Otros)
- Las bandas se extienden desde la izquierda a medida que avanza la animación — el borde delantero es el momento actual
- El centro permanece en y=0; el gráfico crece simétricamente hacia arriba y hacia abajo
- Las banderas aparecen dentro de cada banda; las bandas delgadas se recortan a una pequeña franja de color
Gráfico circular
El gráfico circular muestra la composición de valores para un período de tiempo determinado. Cada sector representa la participación de una entidad en el total. A medida que la animación avanza, los tamaños de los sectores se ajustan para reflejar las proporciones cambiantes. El gráfico es más informativo cuando unas pocas entidades grandes dominan el total, revelando patrones de concentración o diversificación.
Cuándo usarla: Usa el gráfico circular cuando quieras entender qué participación tiene cada entidad del total — por ejemplo, qué países producen más CO₂ o tienen la mayor participación del PIB.
- El tamaño del sector representa la participación de la entidad en el total
- Pasa el cursor sobre un sector para ver el porcentaje y valor exactos
- Los sectores pequeños se agrupan en 'Otros' para mantener la legibilidad
- Observa cómo los sectores crecen o se reducen con el tiempo para detectar cambios de dominancia
Mapa de árbol
El mapa de árbol divide el área del gráfico en rectángulos, cada uno dimensionado en proporción al valor de una entidad — cuanto mayor sea el valor, mayor será el rectángulo. El algoritmo d3-treemapResquarify mantiene las formas cuadradas a lo largo de los períodos, de modo que los rectángulos se deslizan y cambian de tamaño suavemente en lugar de reorganizarse caóticamente. Las entidades de cola larga por debajo del top-N se colapsan en una baldosa 'Otros' que crece y se reduce con el resto.
Cuándo usarla: Use el mapa de árbol cuando la historia sea 'cuánto del total ocupa cada entidad' y desee que todas las entidades estén empaquetadas en un solo marco — sin desplazamientos, sin divisiones en vistas separadas.
- El área del rectángulo es proporcional al valor de la entidad
- El rectángulo más grande es el puesto #1 — típicamente anclado en la parte superior izquierda
- Las formas se mantienen cuadradas a medida que el diseño se actualiza entre períodos, preservando la legibilidad
- Las baldosas por debajo del top-N se agrupan en un rectángulo de 'Otros'
- La bandera, el nombre y el valor se encuentran dentro de cada rectángulo; las baldosas delgadas omiten la bandera para encajar
Mapa coroplético
El mapa mundial colorea los países según sus valores usando una escala de colores continua. Los colores más oscuros o intensos indican valores más altos. El mapa ofrece una visión geográfica inmediata, destacando patrones regionales y agrupaciones difíciles de detectar en otros tipos de gráficos. Pasa el cursor sobre cualquier país para ver su nombre, valor y rango.
Cuándo usarla: Usa el mapa mundial cuando la geografía importa — para identificar agrupaciones regionales, comparar vecinos o ver cómo se distribuye una variable en los continentes.
- La intensidad del color corresponde al valor — consulta la leyenda para la escala
- Los países en gris no tienen datos disponibles para el período seleccionado
- Los patrones regionales (p. ej., agrupación europea, cinturón subsahariano) son fáciles de detectar
- Pasa el cursor para valores exactos; haz clic para fijar un país para comparación
Mapa de burbujas
El mapa de burbujas es un mapa de símbolos proporcionales: cada entidad se dibuja como un círculo fijado al centroide de su país (o región), con el radio del círculo proporcional al valor. La posición nunca se mueve — solo el radio y el color se animan. El resultado es una instantánea geográfica que crece y se reduce en su lugar a medida que avanza el tiempo, lo que facilita ver tanto 'dónde' como 'qué tan grande' en una sola vista.
Cuándo usarla: Use el mapa de burbujas cuando desee una única visual que combine geografía con magnitud — por ejemplo, observando cómo la capitalización de mercado se concentra en unas pocas ciudades costeras de EE. UU. mientras que burbujas más pequeñas se iluminan en Asia y Europa.
- La posición del círculo se fija en el centroide de cada país
- El radio del círculo es proporcional al valor en el período actual
- El valor se centra dentro del círculo (sin bandera — la ubicación identifica la entidad)
- El color sigue la paleta de categorías de la entidad, desvaneciéndose a medida que sale del top-N
- Los períodos sin datos no muestran un círculo para esa entidad
Burbujas
El gráfico de burbujas empaqueta cada entidad como un círculo flotante dimensionado por valor, con d3-force resolviendo colisiones para que los círculos se agrupen estrechamente sin superponerse. El diseño de empaquetamiento se recalcula por período y se interpola (lerped) entre períodos adyacentes para una animación suave. No hay ejes — la posición no tiene un significado cuantitativo; solo el tamaño lo tiene. Una escala global √(value) mantiene la entidad más grande de forma fiable como la más grande a medida que evolucionan los datos.
Cuándo usarla: Use el gráfico de burbujas cuando desee una comparación de magnitud pura, liberada de ejes y geografía — ideal para ver 'cuál es más grande y por cuánto' entre las entidades principales de un vistazo.
- El radio del círculo es proporcional a √(value) — la entidad más grande obtiene el círculo más grande
- La posición es decorativa; los círculos se desplazan pero su ubicación en píxeles no tiene significado de valor
- La bandera se sitúa a 18px si el espacio lo permite; oculta en círculos más pequeños de 4px
- El modo agregado (región/grupo) centra el valor sin bandera
- El color sigue la paleta de categorías de la entidad
Tabla de datos
La tabla de datos presenta todos los valores en una cuadrícula ordenable y desplazable. Cada fila muestra una entidad con su rango, nombre, valor, participación global y cambio interanual. A diferencia de los gráficos animados, la tabla muestra números precisos, haciéndola ideal para comparaciones detalladas y verificación de datos. Ordena por cualquier columna para encontrar los mejores actores, los mayores movimientos o entidades específicas.
Cuándo usarla: Usa la tabla de datos cuando necesites números exactos en lugar de impresiones visuales — para verificación de hechos, comparaciones detalladas o exportación de datos para análisis adicional.
- Ordena por la columna 'Valor' para ver las entradas más altas o más bajas
- La columna 'Cambio' muestra el crecimiento o declive respecto al período anterior
- Usa la columna 'Participación' para comparar la porción de cada entidad del total global
- Descarga la tabla como CSV para usar en hojas de cálculo o investigación
Elegir el gráfico correcto
Cada tipo de gráfico responde una pregunta diferente. El gráfico de barras responde '¿Quién está ganando ahora mismo?'. El gráfico de ranking responde '¿Quién superó a quién en la clasificación?'. El gráfico de líneas responde '¿Cómo evolucionó cada valor?'. El streamgraph responde '¿Cómo fluye el conjunto como uno?'. El gráfico circular responde '¿Qué parte posee cada uno en este momento?'. El mapa de árbol responde '¿Cuánto del total ocupa cada uno?'. El mapa coroplético responde '¿Dónde son los valores más altos geográficamente?'. El mapa de burbujas responde '¿Qué tan grande — y dónde?'. El gráfico de burbujas responde '¿Cómo se comparan las magnitudes brutas?'. Y la tabla responde '¿Cuáles son los números exactos?'. Cambiar entre vistas del mismo conjunto de datos le da una imagen completa de los datos desde múltiples ángulos.
- Clasificaciones y competencia → Barras
- Trayectorias de clasificación y adelantamientos → Ranking
- Tendencias y trayectorias a largo plazo → Líneas
- Composición fluyendo a través del tiempo → Streamgraph
- Participación en un momento → Circular
- Todas las entidades empaquetadas en un solo marco → Mapa de árbol
- Patrones geográficos → Mapa coroplético
- Geografía + magnitud en una vista → Mapa de burbujas
- Comparación de magnitud pura → Burbujas
- Valores exactos y exportación → Tabla de Datos