Renderers

The @torchjsorg/viz package provides several low-level renderer classes that can draw tensors directly to a WebGPU canvas with zero-copy overhead.

Diagram showing data flowing from Tensor to WebGPU Canvas

HeatmapRenderer

Used for visualizing 2D tensors or slices of high-dimensional tensors as heatmaps.

import { HeatmapRenderer } from '@torchjsorg/viz';

// Initialize with a canvas element
const renderer = new HeatmapRenderer(canvas);

// Render a tensor directly
renderer.render(activations, {
  colorScale: 'magma',
  minValue: 0,
  maxValue: 1
});

PointCloudRenderer

Optimized for rendering hundreds of thousands of points in 3D space. Perfect for embedding visualization.

import { PointCloudRenderer } from '@torchjsorg/viz';

const renderer = new PointCloudRenderer(canvas);

renderer.render(embeddings, {
  pointSize: 2,
  colors: labels // Optional tensor of colors;
});

LineChartRenderer

A high-performance alternative to DOM-based charting libraries, capable of streaming millions of data points.

import { LineChartRenderer } from '@torchjsorg/viz';

const renderer = new LineChartRenderer(canvas);
renderer.append([newLossValue]);

Common Renderer Features

Feature	Description
Zero-Copy	Data is read directly from GPU buffers
Resizing	Automatic handling of canvas resolution changes
Interactivity	Built-in support for zoom, pan, and hover

Next Steps

Analysis - Learn about GPU-accelerated data processing.
React UI - High-level components powered by these renderers.