Sliding Window Visualization

An interactive visualization tool for understanding sliding window attention patterns across 1D, 2D, and 3D spaces. 🔍

Why this tool? While 1D sliding window is intuitive, 2D/3D cases are tricky—spatially adjacent tokens may be far apart in memory, and memory-adjacent tokens may be far apart spatially. This visualization clarifies the mapping and helps you design effective sparse attention patterns for multi-dimensional data like images or videos.

Attention Pattern Examples

To help build intuition, here are four different sliding window configurations with $F=7, H=W=6$:

Fig. 2: Full Temporal, No Spatial Attends to all frames in temporal, only self in spatial.	Fig. 3: No Temporal, Full Spatial Attends only to current frame, all spatial positions.
Fig. 4: Limited Temporal, Full Spatial Sliding window of 3 frames, all spatial positions.	Fig. 5: Limited Temporal, Limited Spatial Sliding window of 3 frames, 3×3 spatial neighborhood.

Get Started

Web Demo

Visit the live demo at: https://niyunsheng.github.io/sliding-window-viz-3D/

Python

Python reference implementation is available in the python/ directory. For algorithm implementation details, see python/README.md.

Development

npm install      # Install dependencies
npm run dev      # Start dev server
npm run build    # Build for production
npm run deploy   # Deploy to GitHub Pages

Acknowledgments

Special thanks to Claude for assistance with the web visualization code.