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:
- Automatic detection of filter groups from filename structure
- Play/Pause controls with adjustable speed (0.05s to 5s on log scale)
- Keyboard shortcuts: ← → for navigation, Space for play/pause
- Filter dropdowns to switch between different group combinations
Sales Analysis by Region and Quarter
Use filters to switch between regions and quarters. Each region/quarter has 3 slides.
Filters
Keyboard shortcuts: ← Previous, → Next, Space Play/Pause
Example 2: Slides Generated from Function (VegaLite.jl)
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).
- Uses VegaLite.jl to create charts
- Charts are saved as SVG for best quality
- Supports VegaLite.jl, Plots.jl, Makie, or custom chart objects
Product Sales Analysis (VegaLite.jl Charts)
Generated slides using VegaLite.jl. Shows sales and profit for each product by category across 3 months.
Filters
Keyboard shortcuts: ← Previous, → Next, Space Play/Pause
Example 4: Embedded JPEG Images (Bitmap Format)
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.
- JPEG images embedded as base64-encoded data URLs
- Works for photographs and any bitmap images (PNG, JPEG)
- Larger file size than SVG but necessary for photos
- Still produces a single portable HTML file
Photo Slideshow (Embedded JPEG)
JPEG images embedded as base64 data. Each image is a bitmap encoded as text.
Keyboard shortcuts: ← Previous, → Next, Space Play/Pause
Summary
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
Image Format Comparison
- SVG (Vector): Drawing instructions, scalable, small file size - perfect for charts
- JPEG/PNG (Bitmap): Pixel data as base64, larger file size - needed for photographs
Storage Options
- 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
Key Features
- Interactive play/pause controls
- Adjustable playback speed (0.05s to 5s per slide on log scale)
- Keyboard shortcuts for navigation
- Filter dropdowns for group dimensions
- Support for PNG, JPEG, SVG, and PDF formats
- Supports VegaLite.jl, Plots.jl, Makie, or custom chart objects
Tips:
- Use arrow keys to navigate slides quickly
- Press space to toggle play/pause
- Change filters to see different slide combinations
- Adjust the delay slider to control autoplay speed
