Skip to contents

Create Interactive Time Series Plot with Image Popups

Source: R/ts_plus_images.R
ts_plus_images.Rd

Creates an interactive time series plot using Chart.js where users can click on data points to view corresponding images in a modal popup. Images are matched to data points based on dates extracted from filenames. Includes zoom functionality on the horizontal axis.

Usage

ts_plus_images(
  data,
  image_folder = NULL,
  output_file = NULL,
  var_column = "mean_centroid",
  variable_name = NULL,
  identifier = NULL
)

Arguments

data

A data.frame containing the time series data. Must include a 'date' column.

image_folder

Character. Path to folder containing images. Images should have dates in YYYYMMDD format in their filenames (e.g., "sensor_data_20231215.png"). If NULL, no images will be displayed. Default is NULL.

output_file

Character. Path for the output HTML file. If provided, creates a standalone HTML file with accompanying image folder. If NULL, creates a temporary file and opens in browser. Default is NULL.

variable_name

Character. Descriptive name for the y-variable to use in plot labels and title (e.g., "Temperature", "BBAI Centroid"). If NULL, uses the y_column name. Default is NULL.

identifier

Character. An identifier to include in the plot title (e.g., sensor ID, location name). If provided, will be shown as "Interactive Time Series - variable_name (identifier)". Default is NULL.

y_column

Character. Name of the column in data to use for the y-axis values. Default is "mean_centroid".

Value

Invisibly returns the HTML content as a character string.

Details

The function creates an interactive time series plot where:

  • Data points with corresponding images appear as red circles

  • Data points without images appear as blue circles

  • Clicking on data points shows detailed information

  • Clicking on points with images opens a modal with the full-size image

  • The plot includes tooltips and keyboard support (Esc to close modals)

  • Zoom controls for the horizontal axis (drag to zoom, double-click to reset)

Image files should contain dates in YYYYMMDD format in their filenames. Supported image formats: PNG, JPG, JPEG, GIF, BMP.

When output_file is specified, the function creates:

  • A standalone HTML file at the specified location

  • A "ts_images" subfolder containing copies of all relevant images

Examples

if (FALSE) { # \dontrun{
# Basic usage
ts_plus_images(my_data)

# With images and custom labels
ts_plus_images(my_data, 
               image_folder = "path/to/images",
               y_column = "temperature",
               variable_name = "Temperature (°C)",
               identifier = "Sensor-001")

# Save to HTML file
ts_plus_images(my_data,
               image_folder = "path/to/images",
               output_file = "temperature_analysis.html",
               y_column = "temp",
               variable_name = "Daily Temperature",
               identifier = "Weather Station A")
} # }