Renderer Gallery
Browse all available renderers in @torchjsorg/viz. Each card shows a live preview rendered with mock data. Click to view full documentation.
These are low-level WebGPU renderers, not React components. For React apps, see the react-ui gallery which wraps these renderers with convenient React interfaces.
Tensor Visualization
Renderers for visualizing tensor data directly from GPU memory.
HeatmapRenderer
Render 2D tensors as color-mapped heatmaps with zero-copy GPU access
FeatureMapGridRenderer
Display CNN feature maps in a grid layout showing channel activations
KernelGridRenderer
Visualize convolutional kernels and filters from neural networks
Training & Metrics
Renderers for monitoring model training and displaying performance metrics.
LineChartRenderer
Plot time series data with support for multiple series and streaming updates
TrainingDashboard
Multi-panel dashboard for real-time training visualization
CurveRenderer
Draw ROC curves, PR curves, and other evaluation metrics
BoxPlotRenderer
Statistical box plots showing distribution quartiles and outliers
HistogramRenderer
Render distribution histograms with customizable binning
Model Analysis
Renderers for understanding model behavior and interpretability.
AttentionFlowRenderer
Visualize transformer attention patterns between tokens
GradientFlowRenderer
Display gradient magnitudes through network layers
SaliencyMapRenderer
Overlay saliency maps on input images for model interpretability
ConfusionMatrixRenderer
Render classification confusion matrices with normalization options
ModelArchitectureRenderer
Visualize neural network architecture as interactive diagrams
Embedding & Dimensionality Reduction
Renderers for visualizing high-dimensional data in 2D/3D space.
PointCloudRenderer
Interactive 3D point cloud with rotation, zoom, and color mapping
EmbeddingRenderer
2D/3D embedding visualization with clustering and labels
Graph & Network Visualization
Renderers for displaying relational and hierarchical data.
NetworkGraphRenderer
Force-directed graph layout for network visualization
SankeyRenderer
Sankey diagrams for flow visualization between categories
DendrogramRenderer
Hierarchical clustering dendrograms for cluster analysis
Analysis Utilities
The viz package also includes GPU-accelerated analysis functions for dimensionality reduction and clustering.
PCA
Principal Component Analysis
t-SNE
t-Distributed Stochastic Neighbor Embedding
UMAP
Uniform Manifold Approximation
K-Means
K-Means Clustering
DBSCAN
Density-Based Clustering
Hierarchical
Hierarchical Clustering
KDE
Kernel Density Estimation
Statistics
Compute tensor statistics
Usage Example
All renderers follow a consistent pattern:
import { HeatmapRenderer, createCanvasTarget } from '@torchjsorg/viz';
import torch from '@torchjsorg/torch.js';
await torch.init();
// Create tensor data
const attention = torch.rand(64, 64);
// Create renderer and target
const renderer = new HeatmapRenderer();
const canvas = document.getElementById('viz') as HTMLCanvasElement;
const target = createCanvasTarget(canvas);
// Render with options
renderer.render(attention, {
target,
colormap: 'viridis',
showColorbar: true,
});
// Export to image
const blob = await target.toBlob('png');More Resources
- Renderers Guide - Detailed documentation for each renderer
- Analysis Guide - GPU-accelerated analysis functions
- React UI Gallery - Higher-level React components that wrap these renderers