Watch-Later visualization: a 3D YouTube content explorer

Context

A Watch Later list shows videos chronologically, but gives little help recalling why they were saved or how they relate to one another. I explored a three-dimensional view of an exported list as another way to browse saved videos.

I designed and implemented both the text preprocessing pipeline and the Svelte/Three.js 3D interface myself. The project combined work on data representation with an interactive way to browse saved videos.

Data pipeline

I implemented and applied a three-step text preprocessing pipeline to prepare the visualization data:

1. Language normalization: I used Amazon Translate to normalize multilingual content for analysis.
2. Signal extraction: I used TF-IDF to extract informative terms from the text.
3. Dimensionality reduction: I applied Truncated SVD to the sparse TF-IDF matrix to produce a compact representation for the visualization.

The resulting dataset gives each video a position in a text-derived space and a relevance score.

Spatial model

The project explored using position and size to organize saved videos in three dimensions. The preprocessing work supplied analysis data for the visualization; the currently linked browser demo uses a simplified client-side model.

In that demo, the data loader extracts keywords from titles and descriptions, calculates a heuristic display score, and generates positions geometrically. The display score includes a random component and also controls thumbnail size. These browser calculations do not read SVD coordinates from the input data, so the current demo layout should be understood as an interface prototype rather than a view of the preprocessing pipeline’s semantic output.

Interface and implementation

I designed and implemented two views:

• Keyword Sphere: An overview of topics, with relationships revealed on hover.
• Video Universe: A view of individual videos in three dimensions.

• Three.js CSS3DRenderer renders DOM thumbnails and labels as 3D objects.
• Svelte + TypeScript provides the reactive UI layer and static typing.
• TrackballControls handles camera navigation and motion.
• Client-side demo processing loads a JSON dataset and derives keywords, display scores, sizes, and positions in the browser.

Limits

The demo loads a sample dataset. Preparing another dataset requires a manual YouTube Watch Later export; the browser demo does not automatically retrieve an individual’s list. The input is a Watch Later list, not general watch history.

Demo

The project is deployed at Youniverse, where the visualization can be explored with sample data.