Developer Guide
Practical integration guide for implementing DataVisual.js in your applications.
Covers setup, data models, and common integration patterns.
Included in Starter Kit download
API Reference
Complete option-by-option reference for all DataVisual.js configuration parameters,
methods, and advanced features.
Full reference included in Starter Kit
Styling Guide
Comprehensive guide for customizing fonts, colors, themes, and visual appearance
of your data visualizations.
Included in Starter Kit download
Quick Start
Package summary and recommended reading order. Get started with DataVisual.js
in minutes with included sample files.
Included in Starter Kit download
Sample Files
Working HTML examples including starter samples, themed demos, single-value snapshots,
and auto-play patterns.
4+ working samples included in Starter Kit
Live Demos
Explore interactive examples across different industries: Healthcare, Finance, Sales,
and more. See Visual Intelligence in action.
Getting Started
Installation
Download the Visual Intelligence Starter Kit which includes DataVisual.js, gl-matrix,
documentation, and working samples.
Basic Setup
<!-- Include required libraries -->
<script src="./gl-matrix-min.js"></script>
<script src="./DataVisual.js"></script>
<!-- Create container -->
<div id="vis-wrap" style="width:100%; height:600px;"></div>
<!-- Initialize visualization -->
<script>
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: "Revenue", color: "#0074BD", glow: true },
{ label: "Users", color: "#16BD00", glow: true },
{ label: "Costs", color: "#E35A00", glow: true }
]
});
</script>
Key Features
- WebGL-accelerated rendering for smooth animations
- Interactive progression playback with scrubber controls
- Native browser MP4 video recording
- Presentation mode with staged reveals
- Auto-play mode for passive embedded animations
- Customizable styling with fonts, colors, and themes
- Single-value snapshots or multi-row time-series
- Mobile responsive and cross-browser compatible
- No external dependencies (only gl-matrix required)
Common Integration Patterns
1. Interactive Dashboard
Real-time data with user controls:
new DataVisual(container, {
autoplay: false,
presentationMode: false,
// ... your data
});
2. Auto-Play Embedded Visual
Passive animation with hidden controls:
new DataVisual(container, {
autoplay: true,
initialOverlay: false,
presentationMode: false,
// ... your data
});
// Hide controls: .dv-timeline-controls { display: none !important; }
3. Presentation Mode
Staged reveal for impactful presentations:
new DataVisual(container, {
presentationMode: true,
initialOverlay: true,
titleAnim: "scale",
// ... your data
});
4. Static Snapshot
Single-value current state display:
new DataVisual(container, {
autoplay: false,
data: [["Current", 72, 41, 19]],
// ... your cylinders
});
Video Recording
The Visual Intelligence API includes native browser MP4 recording capabilities via the MediaRecorder API.
Users can generate shareable video outputs of their data stories.
Key Points:
- Recording initiated through built-in UI controls
- MP4 format with H.264 codec (browser-dependent)
- Microphone permission required (browser security)
- Best performance on Chrome and Edge browsers
- Captures full progression from start to end
- Download button provided after recording completes
Get the Visual Intelligence Starter Kit
Complete package with DataVisual.js, comprehensive documentation,
and working sample files. Everything you need to start building visual intelligence applications.
Download Starter Kit
Contact Us
Additional Resources
Included in Starter Kit
- README.md - Package summary
- DEVELOPERS-GUIDE.md - Integration guide
- API-REFERENCE.md - Complete API reference
- STYLING-GUIDE.md - Theming and customization
- startersample.html - First working example
- themed-starter-sample.html - Styling example
- singlevalue-sample.html - Static snapshot pattern
- basic-series-no-player.html - Auto-play pattern
