32:T19f2,// Notebook Cell: viewof dashboard // Assembles a two-column interactive video dashboard linking an SVG Word Cloud to a YouTube iFrame player viewof dashboard = { // Target YouTube Video ID const videoId = "9Y4o6GDDUyM"; // 1. LAYOUT CONTAINER: Build responsive HTML container shell using Flexbox const container = html`

Instructions:

Click any word in the cloud to jump the video to its mention timestamp.
Clicking the same word repeatedly will cycle through each occurrence in the lecture.
Click any blank area of the word cloud to reset the selection and restart the video from the beginning.

`; // Query DOM elements inside container template const cloudCol = container.querySelector(".cloud-col"); const navStatus = container.querySelector(".nav-status"); const playerMount = container.querySelector("#yt-embed-target"); // Default instructions string stored for easy reset state const defaultInstruction = ` Instructions:

Click any word in the cloud to jump the video to its mention timestamp.
Clicking the same word repeatedly will cycle through each occurrence in the lecture.
Click any blank area of the word cloud to reset the selection and restart the video from the beginning.

`; // Initialize initial cell return value container.value = null; // HELPER: Safely call internal YouTube player options to force-enable English captions const enableCaptions = (player) => { try { if (player && typeof player.setOption === "function") { player.setOption("captions", "track", { languageCode: "en" }); player.setOption("cc", "track", { languageCode: "en" }); } } catch (err) { // Ignore API track option availability errors on unready frames } }; // 2. YOUTUBE API INITIALIZATION: Setup iFrame API dynamically let ytPlayer = null; const initYT = () => { if (window.YT && window.YT.Player) { // Instantiate new player on target target div ytPlayer = new window.YT.Player(playerMount, { videoId: videoId, playerVars: { enablejsapi: 1, // Enable controlling player via JavaScript playsinline: 1, // Allow mobile playback within page rather than fullscreen autoplay: 0, // Disable auto-start on load cc_load_policy: 1, // Show closed captions by default cc_lang_pref: "en", // Set English as preferred caption track rel: 0, // Limit related videos to same channel on end modestbranding: 1 // Minimize YouTube branding UI elements }, events: { onStateChange: (event) => { // State 1 = YT.PlayerState.PLAYING; ensure captions remain enabled if (event.data === 1) { enableCaptions(event.target); } } } }); } else { // Poll initialization if API script is still downloading setTimeout(initYT, 100); } }; // Inject YouTube iFrame API tag if not already injected into document head if (!window.YT) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(tag); } initYT(); // 3. MOUNT WORD CLOUD: Generate SVG cloud from words/config cells and append to DOM const cloudSvg = createWordCloudSvg(words, cloudConfig); cloudCol.appendChild(cloudSvg); // 4. INTERACTIVE EVENT BINDING: Direct event listener bridges SVG interactions to Video seeking cloudSvg.addEventListener("input", (e) => { // Read selected word state attached to the SVG's .value property const data = cloudSvg.value; container.value = data; if (data && data.timeSeconds !== undefined) { // SCENARIO A: A valid word with timestamp was clicked // Update UI Status Banner with active word metadata navStatus.innerHTML = `Active Mention: Jumped to "${data.text}" (Occurrence ${data.currentIndex} of ${data.totalOccurrences}) at ${data.timeFormatted}.
Click again to cycle occurrences, or click a blank area to reset to the start.`; // Programmatically jump YouTube player to timestamp and force play if (ytPlayer && typeof ytPlayer.seekTo === "function") { ytPlayer.seekTo(data.timeSeconds, true); ytPlayer.playVideo(); enableCaptions(ytPlayer); } } else { // SCENARIO B: Blank area clicked (Reset state) // Restore default UI instructions navStatus.innerHTML = defaultInstruction; // Jump video back to beginning (0:00) if (ytPlayer && typeof ytPlayer.seekTo === "function") { ytPlayer.seekTo(0, true); ytPlayer.playVideo(); enableCaptions(ytPlayer); } } // Notify Observable reactive cell system of the updated value container.dispatchEvent(new Event("input", { bubbles: true })); }); return container; }33:T449,## Acknowledgments & Collaboration This interactive Observable notebook was developed in collaboration with [**Gemini**](https://gemini.google.com/), Google’s AI assistant. Throughout the design and engineering process, AI assistance was leveraged for: * **Algorithm & Pipeline Design:** Craft and refine parsing engines for transcript ingestion, timestamp extraction, and keyword tokenization. * **Natural Language Processing:** Build custom filtering pipelines utilizing [`compromise`](https://github.com/spencermountain/compromise) for entity extraction, noun-phrase identification, and domain-specific stop-word removal. * **Interactive Dashboard Architecture:** Coordinate event-driven DOM interfaces bridging custom D3 SVG word clouds with the YouTube iFrame API for seamless, zero-reactivity-loop timestamp seeking. * **Code Quality & Documentation:** Comprehensive inline commenting, architectural breakdowns, and error handling. --- *Built with [Observable](https://observablehq.com/), [D3.js](https://d3js.org/), and [compromise NLP](https://github.com/spencermountain/compromise).*34:T15f2,// Observable Notebook Cell: words // Generates a filtered, weighted keyword frequency array with deduplicated video timestamp mappings words = { const completeTranscript = parsedTranscript .map(curr => curr.text || "") .join(" "); const doc = nlp(completeTranscript); // 1. FILTERING RULES & ALLOWLISTS const transcriptStopWords = new Set([ // Conversational fillers & speech markers "uh", "um", "like", "yeah", "okay", "ok", "so", "well", "right", "you know", "basically", "actually", "literally", "honestly", "obviously", "mean", "kind", "sort", "stuff", "thing", "things", "way", "ways", "lot", "lots", "guess", "maybe", "little", "part", "parts", "sense", "point", "idea", "example", "examples", // Common speech verbs "know", "think", "going", "just", "really", "see", "say", "said", "saying", "got", "get", "getting", "go", "goes", "went", "gone", "make", "makes", "made", "come", "comes", "came", "take", "takes", "took", "want", "wants", "look", "looks", "looking", "let", "lets", "tell", "tells", "told", "talk", "talking", "talked", "try", "trying", "tried", "need", "needs", "needed", "feel", "feeling", "call", "called", "use", "uses", "used", "using", "work", "works", // High-frequency pronouns, generic entities, & UI meta terms "people", "person", "somebody", "someone", "something", "anything", "everything", "nothing", "everybody", "everyone", "anybody", "nobody", "time", "times", "today", "day", "year", "years", "guy", "guys", "man", "user", "users", "human", "humans", "them", "our", "your", "yours", "their", "theirs", "him", "her", "me", "us", "you", "we", "they", // Word fragments, HTML elements, & transcript artifacts "pre", "re", "post", "sub", "pro", "non", "anti", "div", "span", // Grammatical function words "the", "be", "to", "of", "and", "a", "in", "that", "have", "i", "it", "for", "not", "on", "with", "he", "as", "do", "at", "this", "but", "his", "by", "from", "or", "an", "will", "my", "one", "all", "would", "there", "what", "up", "out", "if", "about", "who", "which", "when", "can", "here", "then", "than", "now", "also", "into", // Standard & Stripped Contractions "can't", "cant", "cannot", "could", "couldn't", "couldnt", "should", "shouldn't", "shouldnt", "wouldn't", "wouldnt", "don't", "dont", "doesn't", "doesnt", "didn't", "didnt", "isn't", "isnt", "aren't", "arent", "wasn't", "wasnt", "weren't", "werent", "haven't", "havent", "hasn't", "hasnt", "hadn't", "hadnt", "there's", "theres", "that's", "thats", "it's", "its", "what's", "whats", "here's", "heres", "who's", "whos", "where's", "wheres", "how's", "hows", "let's", "lets", "i'm", "im", "you're", "youre", "we're", "were", "they're", "theyre", "i've", "ive", "you've", "youve", "we've", "weve", "they've", "theyve", "i'll", "ill", "you'll", "youll", "he'll", "hell", "she'll", "shell", "we'll", "well", "they'll", "theyll", "i'd", "id", "you'd", "youd" ]); // Short technical acronyms/terms permitted despite length < 3 const shortAllowlist = new Set(["d3", "ai", "js", "ui", "svg", "api", "dom", "db", "3d", "2d"]); // Display map to preserve canonical casing const displayOverrides = new Map([ ["d3", "D3"], ["js", "JS"], ["ui", "UI"], ["ai", "AI"], ["svg", "SVG"], ["html", "HTML"], ["dom", "DOM"], ["api", "API"], ["3d", "3D"], ["2d", "2D"] ]); // 2. NLP EXTRACTION const matches = doc.match("(#Noun|#ProperNoun)").concat(doc.topics()); const termMap = new Map(); const totalMatches = matches.length || 1; matches.out('array').forEach(m => { let clean = String(m) .toLowerCase() .replace(/'s$/g, '') .replace(/[^\w\s-]/g, '') .trim(); const isAllowedShortTerm = shortAllowlist.has(clean); // Filter: bypass length check if term is present in shortAllowlist if ( !clean || (!isAllowedShortTerm && clean.length < 3) || transcriptStopWords.has(clean) || /^\d+$/.test(clean) ) { return; } const displayText = displayOverrides.get(clean) || clean; if (!termMap.has(displayText)) { termMap.set(displayText, { text: displayText, count: 0 }); } termMap.get(displayText).count += 1; }); // 3. METRIC COMPUTATION const rawTerms = Array.from(termMap.values()) .map(item => ({ ...item, freq: item.count / totalMatches })) .sort((a, b) => b.count - a.count); // 4. TIMESTAMP INDEXING (Deduplicated) // Uses Set structures to prevent identical timestamps caused by duplicate word occurrences // within a single transcript caption segment or overlapping transcript entries. const wordTimeMap = new Map(); for (const entry of parsedTranscript) { const extractedWords = entry.text .toLowerCase() .replace(/'s$/g, "") .replace(/[^\w\s]/g, "") .split(/\s+/); for (const word of extractedWords) { if (!word) continue; if (!wordTimeMap.has(word)) { wordTimeMap.set(word, new Set()); } wordTimeMap.get(word).add(entry.start); } } // Map deduplicated timestamps back to rawTerms as standard arrays rawTerms.forEach(item => { const normalizedLookup = item.text .toLowerCase() .replace(/'s$/g, "") .replace(/[^\w\s]/g, "") .trim(); const timeSet = wordTimeMap.get(normalizedLookup); item.startTimes = timeSet ? Array.from(timeSet) : []; }); // 5. OUTPUT THRESHOLD return rawTerms.filter(item => item.count >= 3).slice(0, 75); }35:Tc84,/** * Parses raw video/audio transcript text containing timestamps and text lines * into a structured array of cue objects. * * Supports both "MM:SS" and "HH:MM:SS" timestamp formats. * * @param {string} rawText - The unparsed transcript block. * @returns {Array

Styles