KB Topic Graph 3D
Mappa tridimensionale force-directed dei topic estratti da 6.000+ video della Knowledge Base: Lex Fridman, Huberman Lab, Dwarkesh, Y Combinator, B Heroes, Marcello Ascani e altri. Dataset mockato (50 topic, 100 connessioni). Three.js client-side, privacy-first.
Rendering 3D disponibile nel browser.
Per disabilitare l'animazione, usa il pulsante "Pausa simulazione" nella sidebar.
Dataset e metodologia
Dataset mockato (fase attuale)
Questo tool usa un dataset mockato di 50 nodi-topic e 100 edge. Il dataset reale (D11) con 6.000+ video e topic estratti via NLP sara' integrato in una fase futura del progetto.
Force-directed simulation
Algoritmo custom vanilla: repulsione Coulomb tra nodi + spring attraction sugli archi (proporzionale al peso co-appearance) + gravity centramento. Nessuna dipendenza npm esterna oltre Three.js.
SSR safety
Three.js viene importato dinamicamente solo in browser via isPlatformBrowser. Il rendering 3D non e' eseguito durante la fase SSR del server Angular.
Come utilizzare KB Topic Graph 3D
Esplora il grafo 3D
Il grafo si carica automaticamente e ruota lentamente attorno al centro. Ogni sfera rappresenta un topic emerso dai video della knowledge base, colorata in base alla "famiglia" tematica (AI/ML, startup-funding, biotech, ecc.).
Filtra per cluster o famiglia tematica
Usa i filtri laterali per selezionare uno o più cluster (canale/podcast di origine, es. Lex Fridman, Huberman) o famiglie tematiche: il grafo si rigenera mostrando solo i nodi corrispondenti.
Regola la soglia minima di video
Alza la soglia "minVideoCount" per nascondere i topic marginali e concentrarti sui nodi più corposi, cioè i temi ricorrenti in molti video.
Seleziona un nodo per i dettagli
Clicca su un nodo per aprire il pannello con le informazioni del topic selezionato. Puoi mettere in pausa la simulazione fisica con "isSimulating" per bloccare le posizioni e osservare meglio i collegamenti.
Suggerimenti
- Se il grafo appare troppo denso, alza la soglia minima di video per isolare i temi davvero ricorrenti prima di esplorare i collegamenti minori.
- Disattiva la simulazione (isSimulating) prima di leggere con attenzione le etichette dei nodi: con la rotazione automatica attiva la lettura è più difficile.
Domande frequenti
Cosa rappresentano i nodi e gli archi del grafo?
Ogni nodo è un topic estratto dai video della knowledge base di Federico (es. "reinforcement learning" o "seed funding"); la dimensione del nodo riflette quanti video trattano quel topic. Gli archi collegano topic che ricorrono spesso insieme negli stessi video, indicando correlazione tematica.
Il dataset è basato sui 6.000+ video reali della knowledge base?
Il dataset mostrato è un campione mockato di 50 nodi-topic e 100 archi, uno scope ridotto pensato per dimostrare la visualizzazione 3D senza appesantire il caricamento della pagina. Non riflette l'esatto conteggio completo dei 6.000 video.
Perché il grafo non si vede subito durante il caricamento della pagina?
Il rendering 3D usa Three.js, una libreria che richiede l'API Canvas del browser e non è disponibile lato server. Per questo l'import è dinamico e protetto da isPlatformBrowser: durante il Server-Side Rendering la pagina si carica senza il grafo, che appare non appena il codice JavaScript viene eseguito nel browser.
Cosa fa il pulsante di simulazione (isSimulating)?
Quando è attivo, ad ogni frame viene eseguito un passo dell'algoritmo force-directed che riposiziona i nodi in base alle forze di attrazione/repulsione tra topic collegati. Disattivandolo, le posizioni si congelano nell'ultimo stato calcolato, utile per osservare con calma la struttura del grafo senza il movimento continuo.
Posso combinare filtro cluster e filtro famiglia tematica insieme?
Sì, i filtri sono cumulativi: se selezioni sia un cluster (es. "y-combinator") sia una famiglia (es. "startup-funding"), il grafo mostrerà solo i nodi che soddisfano entrambi i criteri contemporaneamente.