Zenovay

Data Visualization

Analytics dashboards live or die by their visualizations. We've developed a systematic approach to presenting complex data in ways that are instantly understandable and actionable.

Chart Library Selection

We use different charting libraries based on specific needs:

  • Recharts: Our primary library for standard charts—line, bar, area, and pie. It's React-native, highly customizable, and handles responsive sizing well.
  • Chart.js: Used for specialized visualizations where Recharts falls short, particularly animated donut charts and radar plots.
  • Custom SVG: For unique visualizations like funnel charts and comparison bars, we build custom SVG components for complete control.

3D Globe Implementation

The interactive globe is Zenovay's signature visual element, showing real-time visitor locations:

  • Mapbox GL JS: Powers the 3D rendering with WebGL acceleration for smooth 60fps rotation and zoom.
  • Custom markers: Visitor pings are animated circles that pulse on arrival and fade after 10 seconds.
  • Arc connections: Lines connecting visitors to their destinations use quadratic bezier curves.
  • Fallback design: A CSS-animated 2D representation loads when WebGL isn't available.

Heatmap Visualization

Click and scroll heatmaps require careful color scaling:

  • Color gradient: Blue (cold) → Green → Yellow → Red (hot) provides intuitive density perception.
  • Logarithmic scaling: We apply log transformation to prevent hotspots from dominating the entire visualization.
  • Overlay rendering: Heatmaps are rendered as canvas overlays on page screenshots for perfect alignment.
  • Interactive inspection: Hovering reveals exact click counts and element selectors.

Color Scales for Analytics

Consistent color usage helps users quickly interpret data:

  • Performance metrics: Green (good) → Yellow (warning) → Red (critical) for bounce rates, load times, etc.
  • Visitor value: Blue intensity correlates with visitor score (0-100), darker meaning higher value.
  • Traffic sources: Each source type has a dedicated color— direct (blue), organic (green), social (purple), referral (orange).
  • Comparison charts: Current period uses primary blue, previous period uses muted gray for clear distinction.

Responsive Chart Design

Charts must work across all screen sizes:

  • Aspect ratio preservation: Charts maintain 16:9 on desktop, shift to 4:3 on mobile for better vertical use.
  • Label truncation: Long axis labels are truncated with ellipsis on small screens, full text in tooltips.
  • Legend placement: Bottom legends on mobile, side legends on desktop to maximize chart area.
  • Touch interactions: Larger tap targets and swipe gestures for time range navigation on touch devices.

Animation Guidelines

Motion should enhance understanding, not distract:

  • Initial load: Charts animate from zero on first render (300ms ease-out) to draw attention to data.
  • Data updates: Transitions between data states use 200ms duration to maintain context while showing change.
  • Hover states: Immediate response (no delay) for tooltips and highlight effects.
  • Reduced motion: All animations respectprefers-reduced-motion and can be disabled.