Los tableros de analíticas viven o mueren por sus visualizaciones. Hemos desarrollado un enfoque sistemático para presentar datos complejos de maneras que sean inmediatamente comprensibles y accionables.

Selección de librería de gráficos

Usamos diferentes librerías de gráficos según necesidades específicas:

Recharts: Nuestra librería principal para gráficos estándar: de línea, barra, área y circular. Es nativa de React, altamente personalizable y gestiona bien el tamaño adaptable.
Chart.js: Se usa para visualizaciones especializadas donde Recharts no es suficiente, particularmente gráficos de dona animados y radares.
SVG personalizado: Para visualizaciones únicas como gráficos de embudo y barras de comparación, construimos componentes SVG personalizados para control total.

Implementación del globo 3D

El globo interactivo es el elemento visual distintivo de Zenovay, mostrando ubicaciones de visitantes en tiempo real:

Mapbox GL JS: Impulsa el renderizado 3D con aceleración WebGL para una rotación y zoom suaves a 60fps.
Marcadores personalizados: Los pings de visitantes son círculos animados que pulsan al llegar y se desvanecen tras 10 segundos.
Conexiones en arco: Las líneas que conectan visitantes con sus destinos usan curvas de bezier cuadráticas.
Diseño alternativo: Una representación 2D animada con CSS se carga cuando WebGL no está disponible.

Visualización de mapas de calor

Los mapas de calor de clics y desplazamiento requieren un escalado de color cuidadoso:

Gradiente de color: Azul (frío) → Verde → Amarillo → Rojo (caliente) proporciona una percepción intuitiva de densidad.
Escala logarítmica: Aplicamos transformación logarítmica para evitar que los puntos calientes dominen toda la visualización.
Renderizado de superposición: Los mapas de calor se renderizan como superposiciones de canvas sobre capturas de pantalla de páginas para una alineación perfecta.
Inspección interactiva: Al pasar el cursor se revelan los conteos exactos de clics y selectores de elementos.

Escalas de color para analíticas

El uso consistente de colores ayuda a los usuarios a interpretar datos rápidamente:

Métricas de rendimiento: Verde (bien) → Amarillo (advertencia) → Rojo (crítico) para tasas de rebote, tiempos de carga, etc.
Valor del visitante: La intensidad del azul se correlaciona con la puntuación del visitante (0-100); más oscuro significa mayor valor.
Fuentes de tráfico: Cada tipo de fuente tiene un color dedicado: directa (azul), orgánica (verde), redes sociales (morado), referidos (naranja).
Gráficos de comparación: El período actual usa azul primario, el período anterior usa gris apagado para una distinción clara.

Diseño de gráficos adaptables

Los gráficos deben funcionar en todos los tamaños de pantalla:

Preservación de relación de aspecto: Los gráficos mantienen 16:9 en escritorio y cambian a 4:3 en móvil para un mejor uso vertical.
Truncamiento de etiquetas: Las etiquetas de eje largas se truncan con puntos suspensivos en pantallas pequeñas; texto completo en tooltips.
Ubicación de leyendas: Leyendas en la parte inferior en móvil, a los lados en escritorio para maximizar el área del gráfico.
Interacciones táctiles: Objetivos táctiles más grandes y gestos de deslizamiento para la navegación por rango de tiempo en dispositivos táctiles.

Pautas de animación

El movimiento debe mejorar la comprensión, no distraer:

Carga inicial: Los gráficos se animan desde cero en el primer renderizado (300ms ease-out) para llamar la atención sobre los datos.
Actualizaciones de datos: Las transiciones entre estados de datos usan 200ms de duración para mantener el contexto mientras muestran el cambio.
Estados al pasar el cursor: Respuesta inmediata (sin retraso) para tooltips y efectos de resaltado.
Movimiento reducido: Todas las animaciones respetan prefers-reduced-motion y pueden desactivarse.