Knowledge Base Topical Hierarchy in Three Dimensions
3D force-directed map of topics extracted from over 6,000 videos in the Knowledge Base: Lex Fridman, Huberman Lab, Dwarkesh, Y Combinator, B Heroes, Marcello Ascani and others. Mocked dataset (50 topic, 100 connections). Three.js client-side rendering for a privacy-first approach.
Rendering in the Browser Available.
To disable the animation use the "Pause simulation" button in the side bar.
Data and methodology
Mocked dataset (current phase)
This tool uses a mocked-up data set of 50 nodes and topics, with 100 edges. The real-world dataset D11 (with over +6000 videos) will be integrated into the project at some point in its future development using NLP to extract topic information.
Layout algorithm for graph visualization using a physical model of repulsive and attractive forces between nodes.
Custom algorithm: Coulomb repulsion between nodes + Spring attraction on edges (proportional to weight of joint appearance) + Gravity centering. No external NPM dependencies beyond Three.js.
Server-side rendering security
Three.js is imported dynamically only on the client-side through isPlatformBrowser. The Three.js rendering does not occur during Server-Side Rendering (SSR) of an Angular application.
Come utilizzare KB Topic Graph 3D
Explore the 3D graph
The graph loads automatically and slowly rotates around the center. Each sphere represents an emerging topic from the videos of the knowledge base, colored by its thematic family (AI/ML, startup funding, biotech, etc.).
Filter by theme cluster or family
Use side filters to select one or more clusters (channel/podcast origin, e.g., Lex Fridman, Huberman) or thematic families: the graph regenerates showing only corresponding nodes.
Set minimum video threshold
Raise the threshold "minVideoCount" to hide marginal topics and focus on major nodes, which are recurring themes in many videos.
Select a node for details
Click on a node to open the panel with information for the selected topic. You can pause physical simulation with "isSimulating" to lock positions and observe connections better.
Suggerimenti
- If the graph appears too dense, increase the minimum video threshold to isolate truly recurring topics before exploring smaller connections.
- Disable simulation (isSimulating) before carefully reading node labels: with automatic rotation active, reading is more difficult.
Domande frequenti
What do nodes and edges of a graph represent?
Each node is a topic extracted from videos in Federico's knowledge base (e.g., "reinforcement learning" or "seed funding"); the node size reflects how many videos cover that topic. Arrows connect topics that frequently co-occur together in the same videos, indicating thematic correlation.
Is the dataset based on over 6,000 real videos from our knowledge base?
The shown dataset is a mock sample of 50 nodes-topic and 100 edges, a reduced scope designed to demonstrate 3D visualization without overloading the page load. It does not reflect the complete count of 6,000 videos.
Why isn't the graph visible immediately during page loading?
3D rendering uses Three.js, a library that requires the browser's Canvas API and is not available on the server. This means dynamic imports are used and protected by isPlatformBrowser during Server-Side Rendering, so the page loads without the graph until JavaScript code runs in the browser.
What does the simulation button do?
When active, each frame executes a step of the force-directed algorithm that repositions nodes based on attraction/repulsion forces between connected topics. Disabling it, positions freeze in the last calculated state, useful for calmly observing graph structure without continuous movement.
Can I combine cluster filter and thematic family filter together?
Yes, filters are cumulative: if you select both a cluster (e.g., "y-combinator") and a family (e.g., "startup-funding"), the graph will only show nodes that satisfy both conditions simultaneously.