Visual Intelligence API

DataVisual.js - Transform raw data into interactive visual intelligence with motion-based outputs and video generation capabilities.

Overview

The Visual Intelligence API allows developers to render interactive visualizations from raw data, generate motion-based outputs, export visualizations to video, and embed visual intelligence into applications.

Interactive Mode

Real-time exploration with user-driven controls and progression playback.

Recording Mode

Export visuals to MP4 video for shareable, presentation-ready outputs.

Embedded Mode

Live visuals in dashboards with real-time updates and auto-play capabilities.

WebGL Rendering

GPU-accelerated visuals with smooth animations and motion effects.

Quick Start

1. Include Required Files

<script src="./gl-matrix-min.js"></script>
<script src="./DataVisual.js"></script>

2. Create Container

3. Initialize Visualization

new DataVisual(document.getElementById("vis-wrap"), {
  title: "Quarterly Performance\\nFY 2025",
  data: [
    ["Q1", 120, 40, 18],
    ["Q2", 135, 52, 23],
    ["Q3", 150, 61, 30],
    ["Q4", 162, 70, 36]
  ],
  cylinders: [
    { label: "Series A", color: "#0074BD", glow: true },
    { label: "Series B", color: "#16BD00", glow: true },
    { label: "Series C", color: "#E35A00", glow: true }
  ]
});

Core API

Constructor

new DataVisual(container, options)

Parameter	Type	Description
container	HTMLElement	DOM element to mount the visualization
options	Object	Configuration object (see below)

Required Options

Option	Type	Description
data	Array<Array>	Data rows: [label, value1, value2, ...]
cylinders	Array<Object>	Cylinder configurations (label, color, glow)

Common Options

Option	Type	Default	Description
title	string	""	Title text (supports \\n for line breaks)
autoplay	boolean	true	Auto-start progression on load
playSpeed	number	1500	Milliseconds per frame
presentationMode	boolean	false	Staged reveal with pause
initialOverlay	boolean	true	Show intro overlay/fade
showGrid	boolean	true	Display grid lines
background	string	"#000"	Background color

Data Structure

Data Array Format

Each row represents a time point or category:

data: [
  [label, value1, value2, value3, ...],
  ["Q1", 120, 40, 18],
  ["Q2", 135, 52, 23],
  ["Q3", 150, 61, 30]
]

row[0] - Label shown in date/scrubber display
row[1], row[2], etc. - Numeric values for cylinders
Invalid values are coerced to 0
Rows play in array order

Cylinder Configuration

cylinders: [
  { 
    label: "Revenue",
    color: "#0074BD",
    glow: true,
    prefix: "$",
    valueIndex: 1
  },
  {
    label: "Users",
    color: "#16BD00",
    glow: true,
    format: (value) => value.toFixed(2)
  }
]

Property	Type	Description
label	string	Text shown below cylinder
color	string	Hex color (#RRGGBB) or rgb()
glow	boolean	Enable outer glow effect
prefix	string	Display prefix (e.g., "$", "%")
valueIndex	number	Explicit row index for this cylinder
format	function	Custom formatter: (value, row) => string

Common Use Cases

Static Snapshot (Single Value)

new DataVisual(container, {
  title: "Current Status",
  autoplay: false,
  data: [["Now", 72, 41, 19]],
  cylinders: [
    { label: "Active", color: "#0074BD", glow: true },
    { label: "Pending", color: "#FFA500", glow: true },
    { label: "Issues", color: "#E35A00", glow: true }
  ]
});

Auto-Play Animation (No Controls)

new DataVisual(container, {
  autoplay: true,
  initialOverlay: false,
  presentationMode: false,
  // ... data and cylinders
});

// Hide controls with CSS:
// #vis-wrap .dv-timeline-controls { display: none !important; }

Presentation Mode (Staged Reveal)

new DataVisual(container, {
  presentationMode: true,
  initialOverlay: true,
  titleAnim: "scale",
  // ... data and cylinders
});

Video Recording

The API supports native browser MP4 recording via MediaRecorder. Recording is initiated through the built-in UI controls when enabled.

            Important Notes:
            Recording requests microphone permission (browser requirement)

Get the Visual Intelligence Starter Kit

Includes DataVisual.js, documentation, and working samples.

Download Starter Kit View Demos Contact Us