Slides Examples

This page demonstrates the interactive Slides chart type in JSPlots.

File-based slides: Load images from a directory with automatic filtering
Function-generated slides: Create slides dynamically from data using a custom function
Interactive controls: Play/pause, navigation, adjustable speed
Filtering: Filter slides by group dimensions

Example 1: Slides from Directory Pattern

This example loads images from a directory following the pattern: prefix!group1!group2!...!slidenum.extension

The slides below were created from SVG files in the pattern: sales!Region!Quarter!SlideNum.svg

Features:

This example generates slides dynamically using a custom chart function.

The function receives the dataset, group values, and slide number, then generates a chart.

Charts are automatically saved and embedded (or stored externally based on dataformat).

This example demonstrates embedding JPEG photographs (bitmap format) in the HTML file.

Unlike SVG which stores drawing instructions, JPEG images are encoded as base64 binary data.

This page demonstrated four ways to use the Slides chart type:

Method 1 - From Directory (SVG): Load existing SVG files with automatic group detection
Method 2 - From Function (SVG, Embedded): Generate VegaLite charts as embedded SVG
Method 3 - From Function (External): Generate charts with external storage using parquet dataformat
Method 4 - From Directory (JPEG, Embedded): Load JPEG photographs as embedded base64 data

SVG (Vector): Drawing instructions, scalable, small file size - perfect for charts
JPEG/PNG (Bitmap): Pixel data as base64, larger file size - needed for photographs

Embedded (csv_embedded, json_embedded): All images embedded in HTML - single portable file
External (csv_external, json_external, parquet): Images stored in slides/ directory - better for large datasets

Tips: