30:T3d23,// Prompt: map keyphrases to canonical form canonical = ({ "language acquisition": "language acquisition", "second language learning": "language acquisition", "second language": "language acquisition",//"second language", "second language acquisition": "language acquisition", "language learning": "language acquisition", "error analysis": "error analysis", "attitudes": "attitudes", "cerebral dominance": "brain asymmetry", "motivation": "motivation", "brain asymmetry": "brain asymmetry", "child language": "child language", "foreign language teaching": "language teaching", "grammatical morphemes": "grammatical morphemes", "language teaching": "language teaching", "adult learners": "adult learners", "adult second language acquisition": "language acquisition", "adult second language learning": "language acquisition", "affective factors": "affective factors", "bilingualism": "bilingualism", "children": "children", "English syntax": "syntax", "foreigner talk": "foreigner talk", "formal instruction": "formal instruction", "hemispheric specialization": "brain asymmetry", "interlanguage": "interlanguage", "language": "language", "language aptitude": "language aptitude", "linguistics": "linguistics", "Monitor Model": "Monitor Model", "pronunciation": "pronunciation", "right hemisphere": "brain asymmetry", "adult second language performance": "language performance", "aphasia": "aphasia", "auditory evoked potentials": "auditory evoked potentials", "cerebral asymmetry": "brain asymmetry", "cerebral organization": "brain asymmetry", "child speech": "child language", "children's speech": "child language", "Chinese child": "child language", "competence": "competence", "creativity": "creativity", "critical period": "critical period", "discourse analysis": "discourse analysis", "education": "education", "English": "English", "ESL proficiency": "language proficiency", "ESL students": "ESL learners", "factor analysis": "factor analysis", "first language": "first language", "foreign language": "foreign language", "formal and informal environments": "learning environments", "German learners": "language learners", "hemispheric asymmetry": "brain asymmetry", "individual differences": "individual differences", "instruction": "instruction", "introduction": "introduction", "L2 acquisition": "language acquisition", "language development": "language development", "language learning strategies": "language learning strategies", "language proficiency": "language proficiency", "lateralization": "brain asymmetry", "learner errors": "learner errors", "left hemisphere": "brain asymmetry", "Monitor": "Monitor Model", "morpheme acquisition": "morpheme acquisition", "morpheme order": "morpheme order", "multilingualism": "multilingualism", "natural order": "natural order", "neurology": "neurology", "psycholinguistics": "psycholinguistics", "second language learner": "language learner", "second language teaching": "language teaching", "TESOL": "TESOL", "theory and practice": "theory and practice", "two studies": "studies", "achievement measures": "achievement measures", "acquisition": "language acquisition", "acquisition data": "acquisition data", "adolescents": "adolescents", "adult learner": "adult learners", "adult second language production": "language production", "adult verbal interaction": "verbal interaction", "adults": "adults", "age": "age", "age differences": "age differences", "age factor": "age factor", "agrammaticism": "agrammaticism", "appositional mind": "appositional mind", "aptitude": "language aptitude", "aptitude tests": "language aptitude", "asymmetry": "brain asymmetry", "attitude": "attitudes", "attitude variables": "attitudes", "audition": "audition", "bilateral alpha activity": "brain asymmetry", "bilingual education": "bilingualism", "bilingual syntax": "syntax", "Bilingual Syntax measure": "syntax", "biological foundations": "biological foundations", "brain damage": "brain damage", "buttons": "buttons", "case report": "case study", "case study": "case study", "cerebral commissurotomy": "brain asymmetry", "cerebral hemispheric asymmetry": "brain asymmetry", "child acquisition": "child language", "child development": "child development", "child grammar": "child language", "child language acquisition": "child language", "child language development": "child language", "child learners": "child language", "child listener": "child language", "childhood": "childhood", "Chinese speakers": "language speakers", "classroom": "classroom", "classroom implications": "classroom", "classroom learning": "classroom", "classroom settings": "classroom", "cognitions": "cognitions", "cognitive factors": "cognitive factors", "cognitive strategies": "cognitive strategies", "cognitive-affective traits": "affective factors", "college graduates": "college graduates", "commands": "commands", "commissurotomy": "brain asymmetry", "communication": "communication", "communicative competence": "communicative competence", "comparative studies": "studies", "compartmentalized control": "brain asymmetry", "conscious grammar": "grammar", "contextual factors": "contextual factors", "contrasting structures": "syntax", "contrastive analysis": "contrastive analysis", "contrastive data": "contrastive data", "corpus callosum": "brain asymmetry", "cortical speech areas": "brain asymmetry", "cross-cultural": "cross-cultural", "cross-sectional study": "studies", "current issues": "current issues", "delayed oral practice": "oral practice", "derivational complexity": "syntax", "developmental parameters": "child development", "developmental psychology": "developmental psychology", "developmental sequence": "developmental sequence", "developmental sequences": "developmental sequence", "developmental theory": "developmental theory", "dichotic listening": "brain asymmetry", "difficulty order": "difficulty order", "discourse": "discourse", "ear asymmetry": "brain asymmetry", "EEG": "EEG", "EEG study": "EEG", "EFL proficiency": "language proficiency", "ego states": "ego states", "empathy": "empathy", "English acquisition": "language acquisition", "English and Spanish": "language", "English as a foreign language": "foreign language", "English structures": "syntax", "epilepsy": "epilepsy", "error sources": "error analysis", "error treatment": "error analysis", "errors": "learner errors", "ESL classrooms": "classroom", "ESL compositions": "ESL learners", "ESL learner": "ESL learners", "ESL learners": "ESL learners", "ESL sequences": "ESL learners", "ESL teaching": "language teaching", "ESL variables": "ESL learners", "ESOL classroom": "classroom", "experimental task": "experimental task", "experiments": "experiments", "feedback": "feedback", "first language learners": "language learners", "foreign accents": "foreign accents", "foreign language grammar": "grammar", "foreign language learning": "language acquisition", "foreign language testing": "language testing", "foreigner-talk": "foreigner talk", "foreigners": "foreigners", "formal-functional distinction": "formal-functional distinction", "free responses": "free responses", "free speech": "speech", "French language": "language", "French learning": "language acquisition", "functional plasticity": "brain asymmetry", "general language proficiency": "language proficiency", "good language learner": "language learner", "good language learners": "language learner", "grammaticality judgments": "grammaticality judgments", "group work": "group work", "handedness": "handedness", "Hebrew-English bilinguals": "bilingualism", "hemisphere specialization": "brain asymmetry", "hemispherectomy": "brain asymmetry", "human mind": "human mind", "hypercorrection": "hypercorrection", "hypnotizability": "hypnotizability", "imitation": "imitation", "importance": "importance", "individual variation": "individual differences", "infant grasp": "infant grasp", "infant language": "child language", "input data": "input data", "integrated control": "brain asymmetry", "intelligence": "intelligence", "intensive language training": "language training", "intensive training": "language training", "interaction patterns": "interaction patterns", "interhemispheric plasticity": "brain asymmetry", "interlanguage hypothesis": "interlanguage", "introspective study": "introspective study", "Japanese child": "child language", "Japanese learner": "language learners", "Japanese learners": "language learners", "L1 influence": "first language", "L2 competence": "language proficiency", "language behavior": "language behavior", "language composition": "language composition", "language disorders": "language disorders", "language heterogeneity": "language heterogeneity", "language input": "language input", "language learner diary": "language learner", "language of teaching": "language teaching", "language pedagogy": "language teaching", "language representation": "language representation", "language specialization": "language specialization", "language teaching method": "language teaching", "language testing": "language testing", "language training": "language training", "language understanding": "language understanding", "lateral eye movements": "brain asymmetry", "laterality effects": "brain asymmetry", "learner error": "learner errors", "learning behaviors": "learning behaviors", "learning problems": "learning problems", "learning strategy": "learning strategies", "linguistic and non-linguistic functions": "linguistic functions", "linguistic competence": "linguistic competence", "linguistic input": "language input", "linguistic register": "linguistic register", "linguistic theory": "linguistic theory", "logical thinking": "logical thinking", "maternal speech style": "motherese", "maturational constraints": "maturational constraints", "meaning": "meaning", "memory": "memory", "metalinguistic awareness": "metalinguistic awareness", "methodologies": "methodologies", "methodology": "methodologies", "methods": "methodologies", "Mexican-Americans": "Mexican-Americans", "minimal language teaching": "language teaching", "Monitor use": "Monitor Model", "morphemes": "morphemes", "mother's speech": "motherese", "motherese": "motherese", "motivational variables": "motivation", "multivariate analysis": "multivariate analysis", "musical perception": "musical perception", "mutually exclusive hypotheses": "hypotheses", "native language": "first language", "native speaker": "native speaker", "native-like accent": "accent", "natural approach": "natural approach", "natural environment": "natural environment", "natural sequences": "natural order", "natural setting": "natural environment", "naturalistic L2 acquisition": "language acquisition", "negation": "syntax", "neglected component": "neglected component", "neurolinguistics": "neurolinguistics", "neurological correlates": "neurological correlates", "newborn": "newborn", "non-interference": "non-interference", "Northwest Amazon": "Northwest Amazon", "notional syllabuses": "syllabuses", "noun inflection": "syntax", "ontogeny": "ontogeny", "oral practice": "oral practice", "oral production": "language production", "oral work": "oral practice", "overgeneralization": "overgeneralization", "paradoxes": "paradoxes", "parallel structures": "syntax", "patterns": "patterns", "personality": "personality", "personality characteristics": "personality", "personality variables": "personality", "physical response": "physical response", "physiological responses": "physiological responses", "Piaget": "Piaget", "politeness": "politeness", "postsemantic processes": "postsemantic processes", "practice": "practice", "productive ability": "productive ability", "pronunciation testing": "pronunciation", "proper intake": "proper intake", "psychological variables": "psychological variables", "psychology": "psychology", "quality vs quantity": "quality vs quantity", "research": "research", "research program": "research", "research trends": "research trends", "routines": "routines", "rules": "rules", "second language environment": "language environment", "second language performance": "language performance", "second language proficiency": "language proficiency", "second language research": "language research", "second language strategies": "language learning strategies", "second-language learning": "language acquisition", "selectivity": "selectivity", "self-esteem": "self-esteem", "semantic development": "semantic development", "sentence modalities": "syntax", "significance": "significance", "simple codes": "simple codes", "SLOPE test": "SLOPE test", "social factors": "social factors", "social psychology": "social psychology", "Spanish immersion": "language immersion", "Spanish learners": "language learners", "Spanish-speaking learner": "language learners", "speaking later": "speaking later", "speech": "speech", "speech act": "speech act", "speech disturbances": "speech disturbances", "speech functions": "speech functions", "speech inability": "speech inability", "speech integration": "speech integration", "speech perception": "speech perception", "speech region": "brain asymmetry", "speech specialization": "speech specialization", "speech to children": "motherese", "speech transcription": "speech transcription", "statistical analysis": "statistical analysis", "strategies": "learning strategies", "structural change": "structural change", "student errors": "learner errors", "student factors": "student factors", "studies": "studies", "success prediction": "success prediction", "successful learners": "successful learners", "successful learning": "successful learning", "syntactic development": "syntax", "syntactic regularities": "syntax", "syntax acquisition": "syntax", "syntax measure": "syntax", "syntax teaching": "syntax", "syntax theory": "syntax", "syntax variation": "syntax", "tachistoscopic recognition": "brain asymmetry", "teacher attitude": "teacher attitude", "teacher feedback": "teacher feedback", "teaching trends": "teaching trends", "temporal lobe seizures": "temporal lobe seizures", "temporal perception": "temporal perception", "TESL": "TESOL", "test distortion": "test distortion", "theoretical linguistics": "linguistic theory", "total physical response": "total physical response", "transfer learning": "transfer learning", "transfer strategy": "transfer strategy", "transferability": "transferability", "traumatic aphasia": "aphasia", "trends": "trends", "universal strategies": "universal strategies", "university students": "university students", "unpublished": "unpublished", "variations": "variations", "verb inflection": "syntax", "verbal environment": "verbal environment", "verbal perception": "verbal perception", "Vietnamese child": "child language", "visual field": "brain asymmetry", "visual fields": "brain asymmetry", "visual perception": "visual perception", "whole vs parts": "whole vs parts", "wild child": "wild child", "young children": "children" })31:T21c9,// prompt: I have this JSON object of keyphrases. It is your job to map each keyphrase to a single canonical topic, so that I can group them later. Replace each null entry with the appropriate topic: fields = ({ "language acquisition": "Language Learning", "brain asymmetry": "Neuroscience", "syntax": "Linguistics", "child language": "Language Development", "language teaching": "Education", "second language": "Language Learning", "error analysis": "Language Learning", "language proficiency": "Language Assessment", "attitudes": "Psychology", "ESL learners": "Language Learning", "language learners": "Language Learning", "motivation": "Psychology", "Monitor Model": "Language Learning", "classroom": "Education", "bilingualism": "Multilingualism", "language": "Linguistics", "language aptitude": "Language Learning", "learner errors": "Language Learning", "language learner": "Language Learning", "studies": "Research", "grammatical morphemes": "Linguistics", "adult learners": "Language Learning", "affective factors": "Psychology", "children": "Child Development", "foreigner talk": "Sociolinguistics", "interlanguage": "Language Learning", "pronunciation": "Phonetics and Phonology", "first language": "Language Learning", "motherese": "Language Development", "formal instruction": "Education", "linguistics": "Linguistics", "language performance": "Language Assessment", "aphasia": "Neuroscience", "foreign language": "Language Learning", "individual differences": "Psychology", "language learning strategies": "Language Learning", "natural order": "Language Learning", "TESOL": "Education", "oral practice": "Language Learning", "language training": "Education", "methodologies": "Education", "personality": "Psychology", "auditory evoked potentials": "Neuroscience", "competence": "Linguistics", "creativity": "Psychology", "critical period": "Language Development", "discourse analysis": "Linguistics", "education": "Education", "English": "Linguistics", "factor analysis": "Research", "learning environments": "Education", "instruction": "Education", "introduction": "General", "language development": "Language Development", "morpheme acquisition": "Linguistics", "morpheme order": "Linguistics", "multilingualism": "Multilingualism", "neurology": "Neuroscience", "psycholinguistics": "Linguistics", "theory and practice": "Education", "language production": "Linguistics", "case study": "Research", "child development": "Child Development", "grammar": "Linguistics", "developmental sequence": "Language Development", "EEG": "Neuroscience", "language testing": "Language Assessment", "speech": "Phonetics and Phonology", "language input": "Language Learning", "learning strategies": "Language Learning", "linguistic theory": "Linguistics", "natural environment": "Sociolinguistics", "research": "Research", "achievement measures": "Language Assessment", "acquisition data": "Language Learning", "adolescents": "Child Development", "verbal interaction": "Sociolinguistics", "adults": "Adult Learning", "age": "Psychology", "age differences": "Psychology", "age factor": "Psychology", "agrammaticism": "Neuroscience", "appositional mind": "Psychology", "audition": "Neuroscience", "biological foundations": "Neuroscience", "brain damage": "Neuroscience", "buttons": "Miscellaneous", "childhood": "Child Development", "language speakers": "Sociolinguistics", "cognitions": "Psychology", "cognitive factors": "Psychology", "cognitive strategies": "Psychology", "college graduates": "Education", "commands": "Linguistics", "communication": "Sociolinguistics", "communicative competence": "Linguistics", "contextual factors": "Sociolinguistics", "contrastive analysis": "Linguistics", "contrastive data": "Linguistics", "cross-cultural": "Sociolinguistics", "current issues": "General", "developmental psychology": "Psychology", "developmental theory": "Child Development", "difficulty order": "Linguistics", "discourse": "Linguistics", "ego states": "Psychology", "empathy": "Psychology", "epilepsy": "Neuroscience", "experimental task": "Research", "experiments": "Research", "feedback": "Education", "foreign accents": "Sociolinguistics", "foreigners": "Sociolinguistics", "formal-functional distinction": "Linguistics", "free responses": "Research", "grammaticality judgments": "Linguistics", "group work": "Education", "handedness": "Neuroscience", "human mind": "Psychology", "hypercorrection": "Linguistics", "hypnotizability": "Psychology", "imitation": "Psychology", "importance": "General", "infant grasp": "Child Development", "input data": "Research", "intelligence": "Psychology", "interaction patterns": "Sociolinguistics", "introspective study": "Research", "language behavior": "Linguistics", "language composition": "Linguistics", "language disorders": "Neuroscience", "language heterogeneity": "Sociolinguistics", "language representation": "Neuroscience", "language specialization": "Neuroscience", "language understanding": "Linguistics", "learning behaviors": "Psychology", "learning problems": "Psychology", "linguistic functions": "Linguistics", "linguistic competence": "Linguistics", "linguistic register": "Sociolinguistics", "logical thinking": "Psychology", "maturational constraints": "Language Development", "meaning": "Linguistics", "memory": "Psychology", "metalinguistic awareness": "Linguistics", "Mexican-Americans": "Sociolinguistics", "morphemes": "Linguistics", "multivariate analysis": "Research", "musical perception": "Neuroscience", "hypotheses": "Research", "native speaker": "Sociolinguistics", "accent": "Phonetics and Phonology", "natural approach": "Language Learning", "neglected component": "General", "neurolinguistics": "Neuroscience", "neurological correlates": "Neuroscience", "newborn": "Child Development", "non-interference": "Sociolinguistics", "Northwest Amazon": "Sociolinguistics", "syllabuses": "Education", "ontogeny": "Language Development", "overgeneralization": "Language Learning", "paradoxes": "General", "patterns": "Linguistics", "physical response": "Psychology", "physiological responses": "Neuroscience", "Piaget": "Child Development", "politeness": "Sociolinguistics", "postsemantic processes": "Linguistics", "practice": "Education", "productive ability": "Linguistics", "proper intake": "Language Learning", "psychological variables": "Psychology", "psychology": "Psychology", "quality vs quantity": "General", "research trends": "Research", "routines": "Linguistics", "rules": "Linguistics", "language environment": "Sociolinguistics", "language research": "Research", "selectivity": "General", "self-esteem": "Psychology", "semantic development": "Linguistics", "significance": "General", "simple codes": "Linguistics", "SLOPE test": "Language Assessment", "social factors": "Sociolinguistics", "social psychology": "Psychology", "language immersion": "Language Learning", "speaking later": "Language Development", "speech act": "Linguistics", "speech disturbances": "Neuroscience", "speech functions": "Phonetics and Phonology", "speech inability": "Neuroscience", "speech integration": "Neuroscience", "speech perception": "Phonetics and Phonology", "speech specialization": "Neuroscience", "speech transcription": "Phonetics and Phonology", "statistical analysis": "Research", "structural change": "Linguistics", "student factors": "Education", "success prediction": "Language Assessment", "successful learners": "Language Learning", "successful learning": "Language Learning", "teacher attitude": "Education", "teacher feedback": "Education", "teaching trends": "Education", "temporal lobe seizures": "Neuroscience", "temporal perception": "Neuroscience", "test distortion": "Language Assessment", "total physical response": "Language Learning", "transfer learning": "Language Learning", "transfer strategy": "Language Learning", "transferability": "Language Learning", "trends": "General", "universal strategies": "Language Learning", "university students": "Education", "unpublished": "Research", "variations": "Linguistics", "verbal environment": "Sociolinguistics", "verbal perception": "Neuroscience", "visual perception": "Neuroscience", "whole vs parts": "General", "wild child": "Language Development" })32:Tade,function focus(svg, {end = ()=>{}}= {}) { var g = svg.select("g"), pointer = {x:0,y:0}; g.attr('will-change','transform') let [x, y, w, h] = svg.attr("tabindex",0).attr('focusable', 'true').attr("viewBox").split(/\,| /); let res = 10 ** 3, div = 10**-3; let zoom = d3.zoom().interpolate(d3.interpolate); svg . call( zoom . extent([ [ 0, 0 ], [ w, h ]]) . scaleExtent([0.5, 32]) . on("start", ({sourceEvent})=>{}) . on("zoom", ({sourceEvent,transform }) =>{ svg.classed('zooming',sourceEvent?.type !== 'touchstart'); // mobile quick fix g.attr("transform", transform)}) . on("end", ()=>(svg.classed('zooming',null),end))) . call(zoom.scaleBy, 1); svg . on("dblclick.zoom blur", resetZoom) svg . on("pointermove",(e)=>{ pointer = d3.pointer(e,g.node())}) function resetZoom(event) { event . stopPropagation(); svg . transition().duration(450) . call(zoom.transform, d3.zoomIdentity) } svg.on("keydown", function (event) { //if(event.target == svg.node()) { event.preventDefault() && event.stopPropagation() let s = svg; //svg.transition('f').duration(200) s.interrupt(); console.log(pointer) var step = 16; var key = event.key || event.keyCode; // safari doesn't know .key switch (key) { case "Escape": case "Backspace": case "Esc": case 27: s.transition().duration(1250).call(zoom.interpolate(d3.interpolateZoom).transform, d3.zoomIdentity.translate(0, 0)) break; case "0": s.transition().duration(750).call( zoom.interpolate(d3.interpolate).transform, d3.zoomIdentity.translate(w / 2, h / 2).scale(6).translate(pointer[0]*-1/1.125,pointer[1]*-1/1.125) ); break; case "+": case "=": case 187: s.transition().duration(450).call(zoom.scaleBy, 2, [0,0]); break; case '-': case 189: s.transition().duration(450).call(zoom.scaleBy, 0.5, [0,0]); break; case "ArrowLeft": case "Left": case 37: s.call(zoom.translateBy, step, 0); break; case "ArrowRight": case "Right": case 39: s.call(zoom.translateBy, -step, 0); break; case "ArrowUp": case "Up": case 38: s.call(zoom.translateBy, 0, step); break; case "ArrowDown": case "Down": case 40: s.call(zoom.translateBy, 0, -step); break; case "Enter": this.parentElement.requestFullscreen(); //default: // debug('key pressed: \'' + key + '\''); } //} }); return svg; }33:T11fc,// includes inertial pan function focus2(svg, {end = ()=>{}}= {}) { var g = svg.select("g"), pointer = {x:0,y:0}; g.attr('will-change','transform'); let [x, y, w, h] = svg.attr("tabindex",0).attr('focusable', 'true').attr("viewBox").split(/\,| /).map(Number); let zoom = d3.zoom().interpolate(d3.interpolate); svg.call( zoom.extent([ [ 0, 0 ], [ w, h ]]) .scaleExtent([0.5, 32]) .on("start", ({sourceEvent})=>{}) .on("zoom", ({sourceEvent,transform }) => { svg.classed('zooming',sourceEvent?.type !== 'touchstart'); // mobile quick fix g.attr("transform", transform); }) .on("end", ()=>(svg.classed('zooming',null),end())) ).call(zoom.scaleBy, 1); svg.on("dblclick.zoom blur", resetZoom); svg.on("pointermove",(e)=>{ pointer = d3.pointer(e,g.node())}); function resetZoom(event) { event.stopPropagation(); svg.transition().duration(450) .call(zoom.transform, d3.zoomIdentity); } // --- Inertia State Variables --- let velocity = { x: 0, y: 0 }; let keysActive = { Up: 0, Down: 0, Left: 0, Right: 0 }; let animFrameId = null; const FRICTION = 0.90; // Lower values stop faster. Higher values slide longer. const ACCELERATION = 2.5; // Pixels per frame added while holding down a key const STOP_THRESHOLD = 0.05; // Minimum speed threshold before halting the animation loop // --- Core Inertial Loop --- function updateInertia() { // 1. Compute acceleration vector based on active keys let ax = -(keysActive.Right - keysActive.Left) * ACCELERATION; let ay = -(keysActive.Down - keysActive.Up) * ACCELERATION; // 2. Accumulate acceleration into velocity vectors velocity.x += ax; velocity.y += ay; // 3. Apply friction loss velocity.x *= FRICTION; velocity.y *= FRICTION; let totalSpeed = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y); if (totalSpeed > STOP_THRESHOLD || ax !== 0 || ay !== 0) { // 4. Translate D3 zoom state continuously based on calculated velocity svg.call(zoom.translateBy, velocity.x, velocity.y); animFrameId = requestAnimationFrame(updateInertia); } else { // Reset variables once below threshold to clean up memory loops velocity.x = 0; velocity.y = 0; animFrameId = null; } } function startLoop() { if (!animFrameId) animFrameId = requestAnimationFrame(updateInertia); } // --- Keyboard Event Handlers --- svg.on("keydown", function (event) { event.preventDefault(); event.stopPropagation(); let s = svg; s.interrupt(); console.log(pointer); var key = event.key || event.keyCode; // Safari compatibility fallback switch (key) { case "Escape": case "Backspace": case "Esc": case 27: s.transition().duration(1250).call(zoom.interpolate(d3.interpolateZoom).transform, d3.zoomIdentity.translate(0, 0)) break; case "0": s.transition().duration(750).call( zoom.interpolate(d3.interpolate).transform, d3.zoomIdentity.translate(w / 2, h / 2).scale(6).translate(pointer[0]*-1/1.125,pointer[1]*-1/1.125) ); break; case "+": case "=": case 187: s.transition().duration(450).call(zoom.scaleBy, 2, [0,0]); break; case '-': case 189: s.transition().duration(450).call(zoom.scaleBy, 0.5, [0,0]); break; // Setup dynamic key flags instead of direct step translations case "ArrowUp": case 38: keysActive.Up = 1; startLoop(); break; case "ArrowDown": case 40: keysActive.Down = 1; startLoop(); break; case "ArrowLeft": case 37: keysActive.Left = 1; startLoop(); break; case "ArrowRight": case 39: keysActive.Right = 1; startLoop(); break; case "Enter": this.parentElement.requestFullscreen(); } }); svg.on("keyup", function (event) { var key = event.key || event.keyCode; switch (key) { case "ArrowUp": case 38: keysActive.Up = 0; break; case "ArrowDown": case 40: keysActive.Down = 0; break; case "ArrowLeft": case 37: keysActive.Left = 0; break; case "ArrowRight": case 39: keysActive.Right = 0; break; } }); return svg } 34:T171c,// include inertial pan + zoom function focus3(svg, {end = ()=>{}}= {}) { var g = svg.select("g"), pointer = {x:0,y:0}; g.attr('will-change','transform'); let [x, y, w, h] = svg.attr("tabindex",0).attr('focusable', 'true').attr("viewBox").split(/\,| /).map(Number); let zoom = d3.zoom().interpolate(d3.interpolate); svg.call( zoom.extent([ [ 0, 0 ], [ w, h ]]) .scaleExtent([0.5, 32]) .on("start", ({sourceEvent})=>{}) .on("zoom", ({sourceEvent,transform }) => { svg.classed('zooming',sourceEvent?.type !== 'touchstart'); // mobile quick fix g.attr("transform", transform); }) .on("end", ()=>(svg.classed('zooming',null),end())) ).call(zoom.scaleBy, 1); svg.on("dblclick.zoom blur", resetZoom); svg.on("pointermove",(e)=>{ pointer = d3.pointer(e,g.node())}); function resetZoom(event) { event.stopPropagation(); svg.transition().duration(450) .call(zoom.transform, d3.zoomIdentity); } // --- Inertia State Variables --- let velocity = { x: 0, y: 0 }; let vZoom = 0; // Zoom velocity factor let keysActive = { Up: 0, Down: 0, Left: 0, Right: 0, ZoomIn: 0, ZoomOut: 0 }; let animFrameId = null; // --- Constants for Tuning --- const FRICTION = 0.90; // Lower values stop faster. Higher values slide longer. const ACCELERATION = 2.5; // Pixels per frame added while holding down a pan key const STOP_THRESHOLD = 0.05; // Minimum speed threshold before halting the animation loop const ZOOM_FRICTION = 0.85; // Friction specifically applied to the continuous zoom const ZOOM_ACCELERATION = 0.01; // Zoom speed growth factor per frame const ZOOM_STOP_THRESHOLD = 0.005; // --- Core Inertial Loop --- function updateInertia() { // 1. Compute acceleration vector based on active keys let ax = -(keysActive.Right - keysActive.Left) * ACCELERATION; let ay = -(keysActive.Down - keysActive.Up) * ACCELERATION; let az = (keysActive.ZoomIn - keysActive.ZoomOut) * ZOOM_ACCELERATION; // 2. Accumulate acceleration into velocity variables velocity.x += ax; velocity.y += ay; vZoom += az; // 3. Apply friction loss velocity.x *= FRICTION; velocity.y *= FRICTION; vZoom *= ZOOM_FRICTION; let totalSpeed = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y); let absZoomSpeed = Math.abs(vZoom); // Check if any dimension is still energetic enough to keep running if (totalSpeed > STOP_THRESHOLD || absZoomSpeed > ZOOM_STOP_THRESHOLD || ax !== 0 || ay !== 0 || az !== 0) { // 4. Transform scaling component incrementally around viewport center [w/2, h/2] // A multiplier of 1 component does nothing; 1 + vZoom handles fluid scaling if (absZoomSpeed > ZOOM_STOP_THRESHOLD || az !== 0) { svg.call(zoom.scaleBy, 1 + vZoom, /*[w / 2, h / 2]*/ [0,0]); } // 5. Translate D3 zoom state continuously based on calculated velocity if (totalSpeed > STOP_THRESHOLD || ax !== 0 || ay !== 0) { svg.call(zoom.translateBy, velocity.x, velocity.y); } animFrameId = requestAnimationFrame(updateInertia); } else { // Reset variables once below thresholds to stop processor overhead velocity.x = 0; velocity.y = 0; vZoom = 0; animFrameId = null; } } function startLoop() { if (!animFrameId) animFrameId = requestAnimationFrame(updateInertia); } // --- Keyboard Event Handlers --- svg.on("keydown", function (event) { event.preventDefault(); event.stopPropagation(); let s = svg; console.log(pointer); var key = event.key || event.keyCode; // Safari compatibility fallback switch (key) { case "Escape": case "Backspace": case "Esc": case 27: s.interrupt(); s.transition().duration(1250).call(zoom.interpolate(d3.interpolateZoom).transform, d3.zoomIdentity.translate(0, 0)) break; case "0": s.interrupt(); s.transition().duration(750).call( zoom.interpolate(d3.interpolate).transform, d3.zoomIdentity.translate(w / 2, h / 2).scale(6).translate(pointer[0]*-1/1.125,pointer[1]*-1/1.125) ); break; // Scale modifications hook directly into loop physics state flags case "+": case "=": case 187: keysActive.ZoomIn = 1; startLoop(); break; case '-': case 189: keysActive.ZoomOut = 1; startLoop(); break; // Setup dynamic directional movement flags case "ArrowUp": case 38: keysActive.Up = 1; startLoop(); break; case "ArrowDown": case 40: keysActive.Down = 1; startLoop(); break; case "ArrowLeft": case 37: keysActive.Left = 1; startLoop(); break; case "ArrowRight": case 39: keysActive.Right = 1; startLoop(); break; case "Enter": this.parentElement.requestFullscreen(); break; } }); svg.on("keyup", function (event) { var key = event.key || event.keyCode; switch (key) { case "+": case "=": case 187: keysActive.ZoomIn = 0; break; case '-': case 189: keysActive.ZoomOut = 0; break; case "ArrowUp": case 38: keysActive.Up = 0; break; case "ArrowDown": case 40: keysActive.Down = 0; break; case "ArrowLeft": case 37: keysActive.Left = 0; break; case "ArrowRight": case 39: keysActive.Right = 0; break; } }); return svg; } 35:T1aa5,// include inertial pan + zoom (optimised) function focus4(svg, {end = ()=>{}}= {}) { var g = svg.select("g"), pointer = {x:0,y:0}; // Use hardware-accelerated CSS properties g.style('will-change', 'transform'); let [x, y, w, h] = svg.attr("tabindex",0).attr('focusable', 'true').attr("viewBox").split(/\,| /).map(Number); let zoom = d3.zoom().interpolate(d3.interpolate); // --- Native Physics Mirror --- // Tracks state directly to avoid reading from the DOM/D3 in the loop let state = { x: 0, y: 0, k: 1 }; svg.call( zoom.extent([[0, 0], [w, h]]) .scaleExtent([0.5, 32]) .on("start", ({sourceEvent}) => { // If a user drags/pinches via mouse/touch, ingest the current state if (sourceEvent) { const t = d3.zoomTransform(svg.node()); state.x = t.x; state.y = t.y; state.k = t.k; } }) .on("zoom", ({sourceEvent, transform }) => { svg.classed('zooming', sourceEvent?.type !== 'touchstart'); // Only update if driven by external D3 inputs (like double-click or mouse wheel) if (sourceEvent) { state.x = transform.x; state.y = transform.y; state.k = transform.k; } // Fast hardware-accelerated rendering string g.style("transform", `translate3d(${state.x}px, ${state.y}px, 0px) scale(${state.k})`); }) .on("end", () => (svg.classed('zooming', null), end())) ).call(zoom.scaleBy, 1); svg.on("dblclick.zoom blur", resetZoom); svg.on("pointermove", (e) => { pointer = d3.pointer(e, g.node()) }); function resetZoom(event) { event.stopPropagation(); svg.transition().duration(450) .call(zoom.transform, d3.zoomIdentity); } // --- Inertia State Variables --- let velocity = { x: 0, y: 0 }; let vZoom = 0; let keysActive = { Up: 0, Down: 0, Left: 0, Right: 0, ZoomIn: 0, ZoomOut: 0 }; let animFrameId = null; // --- Constants for Tuning --- const FRICTION = 0.90; const ACCELERATION = 2.5; const STOP_THRESHOLD = 1; const ZOOM_FRICTION = 0.85; const ZOOM_ACCELERATION = 0.005; const ZOOM_STOP_THRESHOLD = 0.0002; // --- Core Inertial Loop --- function updateInertia() { let ax = -(keysActive.Right - keysActive.Left) * ACCELERATION; let ay = -(keysActive.Down - keysActive.Up) * ACCELERATION; let az = (keysActive.ZoomIn - keysActive.ZoomOut) * ZOOM_ACCELERATION; velocity.x += ax; velocity.y += ay; vZoom += az; velocity.x *= FRICTION; velocity.y *= FRICTION; vZoom *= ZOOM_FRICTION; let totalSpeed = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y); let absZoomSpeed = Math.abs(vZoom); if (totalSpeed > STOP_THRESHOLD || absZoomSpeed > ZOOM_STOP_THRESHOLD || ax !== 0 || ay !== 0 || az !== 0) { svg.classed('zooming', true); // 1. Zoom Math (Pure Local Execution) if (absZoomSpeed > ZOOM_STOP_THRESHOLD || az !== 0) { let factor = 1 + vZoom; let nextScale = state.k * factor; if (nextScale < 0.5) { factor = 0.5 / state.k; nextScale = 0.5; } if (nextScale > 32) { factor = 32 / state.k; nextScale = 32; } let cx = 0 ;// w / 2; let cy = 0 ;// h / 2; // Matrix scale arithmetic relative to viewport center anchor state.x = cx - (cx - state.x) * factor; state.y = cy - (cy - state.y) * factor; state.k = nextScale; } // 2. Pan Math (Pure Local Execution) if (totalSpeed > STOP_THRESHOLD || ax !== 0 || ay !== 0) { state.x += velocity.x; state.y += velocity.y; } // 3. Direct DOM Write (Bypasses D3 overhead completely) g.style("transform", `translate3d(${state.x}px, ${state.y}px, 0px) scale(${state.k})`); animFrameId = requestAnimationFrame(updateInertia); } else { // Reset movement variables velocity.x = 0; velocity.y = 0; vZoom = 0; animFrameId = null; svg.classed('zooming', null); // 4. Silent Synchronization back to D3 when movement stops completely // Keeps mouse-wheel and gestures seamlessly aligned for the next interaction svg.call(zoom.transform, d3.zoomIdentity.translate(state.x, state.y).scale(state.k)); end(); } } function startLoop() { if (!animFrameId) animFrameId = requestAnimationFrame(updateInertia); } // --- Keyboard Event Handlers --- svg.on("keydown", function (event) { event.preventDefault(); event.stopPropagation(); let s = svg; var key = event.key || event.keyCode; switch (key) { case "Escape": case "Backspace": case "Esc": case 27: s.interrupt(); s.transition().duration(1250).call(zoom.interpolate(d3.interpolateZoom).transform, d3.zoomIdentity.translate(0, 0)) break; case "0": s.interrupt(); s.transition().duration(750).call( zoom.interpolate(d3.interpolate).transform, d3.zoomIdentity.translate(w / 2, h / 2).scale(6).translate(pointer[0]*-1/1.125,pointer[1]*-1/1.125) ); break; case "+": case "=": case 187: keysActive.ZoomIn = 1; startLoop(); break; case '-': case 189: keysActive.ZoomOut = 1; startLoop(); break; case "ArrowUp": case 38: keysActive.Up = 1; startLoop(); break; case "ArrowDown": case 40: keysActive.Down = 1; startLoop(); break; case "ArrowLeft": case 37: keysActive.Left = 1; startLoop(); break; case "ArrowRight": case 39: keysActive.Right = 1; startLoop(); break; case "Enter": this.parentElement.requestFullscreen(); break; } }); svg.on("keyup", function (event) { var key = event.key || event.keyCode; switch (key) { case "+": case "=": case 187: keysActive.ZoomIn = 0; break; case '-': case 189: keysActive.ZoomOut = 0; break; case "ArrowUp": case 38: keysActive.Up = 0; break; case "ArrowDown": case 40: keysActive.Down = 0; break; case "ArrowLeft": case 37: keysActive.Left = 0; break; case "ArrowRight": case 39: keysActive.Right = 0; break; } }); return svg; } 36:T1b70,// include inertial pan + zoom (optimised: partial d3 transition fix) function focus5(svg, { end = () => {} } = {}) { var g = svg.select("g"), pointer = { x: 0, y: 0 }; // Use hardware-accelerated CSS properties g.style("will-change", "transform"); let [x, y, w, h] = svg .attr("tabindex", 0) .attr("focusable", "true") .attr("viewBox") .split(/\,| /) .map(Number); let zoom = d3.zoom().interpolate(d3.interpolate); // --- Native Physics Mirror --- // Tracks state directly to avoid reading from the DOM/D3 in the loop let state = { x: 0, y: 0, k: 1 }; svg .call( zoom .extent([ [0, 0], [w, h] ]) .scaleExtent([0.5, 32]) .on("start", ({ sourceEvent }) => { // If a user drags/pinches via mouse/touch, ingest the current state if (sourceEvent) { const t = d3.zoomTransform(svg.node()); state.x = t.x; state.y = t.y; state.k = t.k; } }) .on("zoom", ({ sourceEvent, transform }) => { svg.classed("zooming", sourceEvent?.type !== "touchstart"); // FIX: Always keep local state mirrors in sync with D3's internal transform matrix. // If sourceEvent is null/undefined, it means D3's programmatic transition is driving. state.x = transform.x; state.y = transform.y; state.k = transform.k; // Fast hardware-accelerated rendering string g.style( "transform", `translate3d(${state.x}px, ${state.y}px, 0px) scale(${state.k})` ); }) .on("end", () => (svg.classed("zooming", null), end())) ) .call(zoom.scaleBy, 1); svg.on("dblclick.zoom blur", resetZoom); svg.on("pointermove", (e) => { pointer = d3.pointer(e, g.node()); }); function resetZoom(event) { event.stopPropagation(); svg.transition().duration(450).call(zoom.transform, d3.zoomIdentity); } // --- Inertia State Variables --- let velocity = { x: 0, y: 0 }; let vZoom = 0; let keysActive = { Up: 0, Down: 0, Left: 0, Right: 0, ZoomIn: 0, ZoomOut: 0 }; let animFrameId = null; // --- Constants for Tuning --- const FRICTION = 0.9; const ACCELERATION = 2.5; const STOP_THRESHOLD = 1; const ZOOM_FRICTION = 0.85; const ZOOM_ACCELERATION = 0.005; const ZOOM_STOP_THRESHOLD = 0.0002; // --- Core Inertial Loop --- function updateInertia() { let ax = -(keysActive.Right - keysActive.Left) * ACCELERATION; let ay = -(keysActive.Down - keysActive.Up) * ACCELERATION; let az = (keysActive.ZoomIn - keysActive.ZoomOut) * ZOOM_ACCELERATION; velocity.x += ax; velocity.y += ay; vZoom += az; velocity.x *= FRICTION; velocity.y *= FRICTION; vZoom *= ZOOM_FRICTION; let totalSpeed = Math.sqrt( velocity.x * velocity.x + velocity.y * velocity.y ); let absZoomSpeed = Math.abs(vZoom); if ( totalSpeed > STOP_THRESHOLD || absZoomSpeed > ZOOM_STOP_THRESHOLD || ax !== 0 || ay !== 0 || az !== 0 ) { svg.classed("zooming", true); // 1. Zoom Math (Pure Local Execution) if (absZoomSpeed > ZOOM_STOP_THRESHOLD || az !== 0) { let factor = 1 + vZoom; let nextScale = state.k * factor; if (nextScale < 0.5) { factor = 0.5 / state.k; nextScale = 0.5; } if (nextScale > 32) { factor = 32 / state.k; nextScale = 32; } let cx = 0; // w / 2; let cy = 0; // h / 2; // Matrix scale arithmetic relative to viewport center anchor state.x = cx - (cx - state.x) * factor; state.y = cy - (cy - state.y) * factor; state.k = nextScale; } // 2. Pan Math (Pure Local Execution) if (totalSpeed > STOP_THRESHOLD || ax !== 0 || ay !== 0) { state.x += velocity.x; state.y += velocity.y; } // 3. Direct DOM Write (Bypasses D3 overhead completely) g.style( "transform", `translate3d(${state.x}px, ${state.y}px, 0px) scale(${state.k})` ); animFrameId = requestAnimationFrame(updateInertia); } else { // Reset movement variables velocity.x = 0; velocity.y = 0; vZoom = 0; animFrameId = null; svg.classed("zooming", null); // 4. Silent Synchronization back to D3 when movement stops completely // Keeps mouse-wheel and gestures seamlessly aligned for the next interaction svg.call( zoom.transform, d3.zoomIdentity.translate(state.x, state.y).scale(state.k) ); end(); } } function startLoop() { if (!animFrameId) animFrameId = requestAnimationFrame(updateInertia); } // --- Keyboard Event Handlers --- svg.on("keydown", function (event) { event.preventDefault(); event.stopPropagation(); let s = svg; var key = event.key || event.keyCode; switch (key) { case "Escape": case "Backspace": case "Esc": case 27: s.interrupt(); s.transition() .duration(1250) .call( zoom.interpolate(d3.interpolateZoom).transform, d3.zoomIdentity.translate(0, 0) ); break; case "0": s.interrupt(); s.transition() .duration(750) .call( zoom.interpolate(d3.interpolate).transform, d3.zoomIdentity .translate(w / 2, h / 2) .scale(6) .translate((pointer[0] * -1) / 1.125, (pointer[1] * -1) / 1.125) ); break; case "+": case "=": case 187: keysActive.ZoomIn = 1; startLoop(); break; case "-": case 189: keysActive.ZoomOut = 1; startLoop(); break; case "ArrowUp": case 38: keysActive.Up = 1; startLoop(); break; case "ArrowDown": case 40: keysActive.Down = 1; startLoop(); break; case "ArrowLeft": case 37: keysActive.Left = 1; startLoop(); break; case "ArrowRight": case 39: keysActive.Right = 1; startLoop(); break; case "Enter": this.parentElement.requestFullscreen(); break; } }); svg.on("keyup", function (event) { var key = event.key || event.keyCode; switch (key) { case "+": case "=": case 187: keysActive.ZoomIn = 0; break; case "-": case 189: keysActive.ZoomOut = 0; break; case "ArrowUp": case 38: keysActive.Up = 0; break; case "ArrowDown": case 40: keysActive.Down = 0; break; case "ArrowLeft": case 37: keysActive.Left = 0; break; case "ArrowRight": case 39: keysActive.Right = 0; break; } }); return svg; } 37:T23c8,zoomable = { let data = authPaths // paths.filter((d) => d.size > 0); // Specify the chart’s dimensions. const height = 1024; const radius = height / 6.6 ; // Create the color scale. const color = d3.scaleOrdinal( d3.quantize(d3.interpolateRainbow, topics.size + 1) ); const hierarchy = d3 .stratify() .path((d) => d.path)(data) /*.each((d) => d.data == null ? (d.data = { area: d.id.replace("/", ""), path: d.id.replace("/", ""), size: topics.get(d.id.replace("/", ""))?.size ?? Array.from(topics.values()).reduce((a, b) => a + b.size, 0) }) : d.data )*/ //hierarchy.count()/*sum(d=>d.size)*/.sort((a, b) => b.value - a.value); hierarchy .sum(d=>Math.pow(d?.freq,Math.max(0.000001,weight))) .sort((a, b) => b.value - a.value); //hierarchy.each(d=>d.value = d.value) const root = d3.partition() .size([2 * Math.PI, hierarchy.height + 1]) (hierarchy); root.each(d => d.current = d); // Create the arc generator. const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius * 1.5) .innerRadius(d => d.y0 * radius) .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) .classed("burstview",true) const defs = svg.append("defs") const style = (``) defs.html(style) const g = svg.append("g") .style("font", "10px sans-serif"); // Add a central label group for displaying the hovered cell label const centralLabel = g.append("g") .attr("class", "central-label") .attr("text-anchor", "middle") .style("user-select", "none"); // Append the arcs with hover interactions const path = g.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.id.split('/').pop()); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)) .on("mouseover", function (event, d) { // Darken the arc's fill color d3.select(this).attr("opacity", 0.5); // Update the central label with the hovered cell's label /*const labelText = d.id//.split('/').pop(); centralLabel.select("text") .text(labelText) .style("opacity", 1); // Make the label visible*/ // Clear any existing tspans in the central label centralLabel.selectAll("text").remove(); // Split the full path into segments const pathSegments = d.id.replace('/','').replaceAll('/','/ v /').split('/').filter(d=>d); const lineHeight = 1.2; // Line height in em units const totalHeight = pathSegments.length * lineHeight; // Create a new text element for the central label const labelText = centralLabel.append("text") .attr("y", "-" + ((totalHeight / 2) - lineHeight) + "em" ) // Adjust vertical position to center the entire block .attr("font-size", "16px") .attr("fill", "#333") .style("opacity", 1); // Make the label visible // Add each segment as a tspan pathSegments.forEach((segment, i) => { labelText.append("tspan") .attr("x", 0) // Align all tspans horizontally .attr("dy", i === 0 ? "0em" : `${lineHeight}em`) // Add spacing between lines .text(segment); }); }) .on("mouseout", function (event, d) { // Restore the original fill color d3.select(this).attr("opacity",1); // Hide the central label centralLabel.select("text").style("opacity", 0); }); // Make them clickable if they have children. path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); const format = d3.format(",d"); path.append("title") .text(d => `${d.ancestors().map((d,n) => d.id).reverse().join("/")}\n${format(d.value)}`); const label = g.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", d => +labelVisible(d.current)) .attr("transform", d => labelTransform(d.current)) //.attr("font-size",12) .text(d => d.id.split('/').pop().slice(0,24) + ' (' + format(d.value) + ')'); const parent = g.append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); // Handle zoom on click. // Handle zoom on click. function clicked(event, p) { parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = svg.transition().duration(event.altKey ? 7500 : 250); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path.transition().delay(100).duration(750) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); // Custom: hide entering labels /* label.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) // Hide entering labels during the transition .style("display", d => labelVisible(d.current) ? null : "none") .attr("fill-opacity", 0) // Start with opacity 0 for all transitioning labels .attrTween("transform", d => () => labelTransform(d.current)) .on("end", function(d) { // After the transition ends, fade in labels that are now visible if (labelVisible(d.target)) { d3.select(this) .style("display", null) // Ensure the label is visible .transition() .duration(250) // Adjust duration for fade-in effect .attr("fill-opacity", 1); // Fade in the label } else { d3.select(this).style("display", "none"); // Keep hidden if not visible } });*/ // Transition labels to their new positions and fade them in after the tween label.transition().duration(100).attr("fill-opacity", 0) .filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition().duration(550).delay((d,i)=> Math.round(i * 1.5)) .style("display", "none") // Reset display to allow fading in .attr("fill-opacity", 0) // Start with fully transparent labels .on("end", function() { // Fade in the labels after the transition ends d3.select(this).style("display", null) .transition() .duration(100) // Short fade-in duration .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)) }); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } //return svg.node(); let view = focus5(svg . attr('transform-origin','center'), /*{ end: ()=>updateCoords()}*/) . attr('viewBox',[-height/2,-height/2,height,height]), gap = 0; view . insert('rect','g').attr('id','bg') . attr('x','-1000%') . attr('y','-1000%') . attr('width','2000%') . attr('height','2000%') . attr('fill','white'); view . attr('style',` padding:${gap}px; width: ${width-(gap*2)}; max-width: ${width-(gap*2)}; border: 1px solid #ddd; border-radius: 8px; overflow:hidden; transform-origin: center; user-select: none; max-height: 620px; /* filter: sepia(5%) invert(96%) brightness(225%) sepia(25%);*/ `) let out = view.node() return out } 38:T453,nodes = { let edges = coWordEdges let maxdeg = 1; let dict = new Map( Object.entries( Object.groupBy( edges .map((d) => ({ aut: d.src, year: d.from })) .concat(edges.map((d) => ({ aut: d.tgt, year: d.till }))), (d) => d.aut ) ) .map((d) => [d[0], d[1].map((d) => d.year)]) .map((d) => [ d[0], { years: d[1], degree: (d[1].length > maxdeg? maxdeg = d[1].length : maxdeg = maxdeg,d[1].length), first: Math.min(...d[1]), last: Math.max(...d[1]), // mid: Math.round( (d[1].reduce((a, b) => a + b, 0) / d[1].length + Math.max(...d[1])) / 2 ) //(d3.median(d[1])+ Math.max(...d[1]))/2 } ]) // calculate end year based on degree: higher degree == later end year .map(d=>[d[0],({...d[1],mid:(((d[1].first + (d[1].last - d[1].first) * (d[1].degree / maxdeg))/*+d[1].mid*/)/1)})]) .sort((a, b) => b[1].mid - a[1].mid) .filter((d) => d[1].degree > 100) ); return dict } 39:Teb2,graph = { let header = ` rankdir = "TB"; ranksep = "0.2"; nodesep = "0.1"; concentrate = "true"; outputorder = "edgesfirst"; ratio = "auto"; size = "16,10"; edge[arrowsize="0.75", penwidth="0.25"] graph[bgcolor = "transparent" ]` let nodestyle = `node [ shape="box", margin="0.1,0", style="filled,rounded,bold", color="#e17892", fillcolor="white", labelfontcolor="white", fontcolor="#000000", fontname= Arial ]` let edgestyle = `edge [color="#dddddd", style="", fontname= Arial]` // all years let years = Array.from(nodes.values()) let range = [ 2 * Math.floor(Math.min(...years.map(d=>d.first)) / 2), 2 * Math.ceil(Math.max(...years.map(d=>d.last)) / 2) ] /*let groups = Object.entries( Object.groupBy(Array.from(nodes.entries()), (d) => d[1].last) )*/ let groups = Object.entries( Object.groupBy( Array.from(nodes.entries()), d => Math.round(d[1].mid) // Math.round(d[1].mid*2)/2 ) ).sort((a,b)=>parseFloat(a[0]) -parseFloat(b[0])) // selected years range = [ parseInt(groups.at(0)[0]), parseInt(groups.at(-1)[0]) ] let timeline = `node [fontsize=20, shape = box, fontname= Arial, fontsize = 14]; edge [/*style=invis*/penwidth=4];` // timeline = timeline + "\n" + Array.from({length:range[1]-range[0]},(_,i)=>' '+(i+range[0]) + ' -> ' + (i+range[0]+1)).join("\n") // code for 'half years' -> needs rounded groups also (see above) // Array.from({length:(range[1]-range[0])*2},(_,i)=>' "'+((i/2)+range[0]) + '" -> "' + ((i/2)+range[0]+0.5)+'"') //.map((d,i,f)=> !/\.5"$/.test(f[i-1]) ? d + 'node [style=""]' : d + 'node [style=invis]' ) //.join("\n") let filtered = coWordEdges .filter((d) => nodes.has(d.src) && nodes.has(d.tgt)) //.filter(d=> d.till <= nodes.get(d.tgt).first && d.from <= nodes.get(d.src).last) let edgelist = // prune edges using group slicing Object.values(Object.groupBy(filtered,d=>d.src)).map(d=>d.slice(0,4)).flat() .map((d) => ` "${d.src}" -> "${d.tgt}" [weight=${Math.pow(d.weight,0.5)}, penwidth=${Math.pow(d.weight,0.25)}, opacity=0.1, dir=none]`) .join("\n") return `digraph timeline { ${header} ${timeline} ${nodestyle} ${groups.map((d) => `{ rank=same; ${[d[0], d[1].map((d) => '"' + d[0] + '"').join(" ")].join(" ")}; }`).join("\n")} ${edgestyle} ${edgelist} ${''/* "Gardner" -> "Lambert" [weight=2.8284271247461903, penwidth=1.6817928305074292, opacity=0.1, dir=none, label="Influenced"] "Gardner" -> "Scarcella" [weight=3, penwidth=1.7320508075688772, opacity=0.1, dir=none, label="Mentorship"] "Lambert" -> "Carroll" [weight=2, penwidth=1.414213562373095, opacity=0.1, dir=none, label="Collaboration"] "Selinker" -> "Scarcella" [weight=3, penwidth=1.7320508075688772, opacity=0.1, dir=none, label="Foundational Work"] "Hatch" -> "Scarcella" [weight=3.4641016151377544, penwidth=1.8612097182041991, opacity=0.1, dir=none, label="Key Collaboration"] "Krashen" -> "Scarcella" [weight=7.483314773547883, penwidth=2.735564799734761, opacity=0.1, dir=none, label="Major Influence"] "Dulay" -> "Burt" [weight=4.123105625617661, penwidth=2.0305431848689306, opacity=0.1, dir=none, label="Shared Research"] "Schumann" -> "Seliger" [weight=1.7320508075688772, penwidth=1.3160740129524924, opacity=0.1, dir=none, label="Theoretical Alignment"] "Swain" -> "Scarcella" [weight=2.449489742783178, penwidth=1.5650845800732873, opacity=0.1, dir=none, label="Conceptual Contribution"] "Fröhlich" -> "Scarcella" [weight=1.7320508075688772, penwidth=1.3160740129524924, opacity=0.1, dir=none, label="Direct Influence"]*/} }`.replaceAll('\n','') }3a:T44d,coWordEdges = { let dict = Object.groupBy( prep.flatMap(({ authors, keyphrase, year }) => authors.flatMap((a) => keyphrase.map((p) => [canonical[p], { last: a.last.replace(/\-\'/g,''), year }]) ) ), (d) => d[0] ); let filt = Object.values(dict) .map((arr) => arr.map((d) => d[1])) .map((arr) => arr.map((x) => arr .map((y) => [x, y]) .filter( (d) => //Math.abs(d[0]?.year - d[1]?.year) > 1 && d[0].year <= d[1].year &&d[0].last != d[1].last ) .map((d) => ({ src: d[0].last, from: d[0].year, tgt: d[1].last, till: d[1].year })) ) ) .flat(2); let edges = Object.values(Object.groupBy(filt, (d) => d.src + "_" + d.tgt)) .map((d) => ({ ...d[0], weight: d.length })) .filter((d) => d.weight > 1 || d.src != "Krashen" || d.tgt != "Krashen") //.filter(d=> d.src != "Krashen" /*&& d.tgt != "Krashen"*/) .sort((a, b) => a.from - b.from); return edges; } 3b:T4ee,phraseAuthors = { let keep = new Set( Object.entries( Object.groupBy( prep.flatMap((d) => d.authors.map((d) => d.last)), (d) => d ) ) .filter((d) => d[1].length > 1) .sort((a, b) => b[1].length - a[1].length) .map((d) => d[0]) ); let also = new Set( prep .flatMap((d) => d.authors.flatMap((a) => d.keyphrase.map((d) => [d, a.last])) ) .filter((d) => counts.get(canonical[d[0]]).freq > 6) .map((d) => d[1]) ); // return prep.map( ({authors,keyphrase})=>Object.fromEntries(authors.map(a=>[a.last,keyphrase]))) // return prep.flatMap( ({authors,keyphrase})=> authors.map(a=> ({[a.last]:keyphrase}))) return Object.fromEntries( Object.entries( Object.groupBy( prep .flatMap(({ authors, keyphrase }) => authors.flatMap((a) => keyphrase.map((p) => [canonical[p], a.last])) ) .filter((d) => keep.has(d[1]) || also.has(d[1])), (d) => d[0] ) ).map((d) => [ d[0], Object.fromEntries( Object.entries(Object.groupBy(d[1], (d) => d[1])) .map((d) => [d[0], d[1].length]) .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])) ) ]) ); } 3c:T5a2,dot`digraph shells { rankdir = "TB"; ranksep = "0"; nodesep = "0.1"; concentrate = "false"; outputorder = "edgesfirst"; ratio = "auto"; size = "10,10"; edge[arrowsize="0.75", penwidth="0.5"] graph[bgcolor = "transparent" ] node [fontsize=20, shape = box, fontname= Arial, fontsize = 14]; 1972 -> 1976; 1976 -> 1978; 1978 -> 1980; 1980 -> 1982; 1982 -> 1984; 1984 -> 1986; 1986 -> 1988; 1988 -> 1990; 1990 -> future; node [shape="box", margin="0.1,0", style="filled,rounded,bold", color="#e17892", fillcolor="white", labelfontcolor="white", fontcolor="#000000", type="statement-map-node"] { rank=same; 1976 Mashey Bourne; } { rank=same; 1978 Formshell csh; } { rank=same; 1980 esh vsh; } { rank=same; 1982 ksh "System-V"; } { rank=same; 1984 v9sh tcsh; } { rank=same; 1986 "ksh-i"; } { rank=same; 1988 KornShell Perl rc; } { rank=same; 1990 tcl Bash; } { rank=same; "future" POSIX "ksh-POSIX"; } edge [color="#dddddd"] Thompson -> Mashey; Thompson -> Bourne; Thompson -> csh; csh -> tcsh; Bourne -> ksh; Bourne -> esh; Bourne -> vsh; Bourne -> "System-V"; Bourne -> v9sh; v9sh -> rc; Bourne -> Bash; "ksh-i" -> Bash; KornShell -> Bash; esh -> ksh; vsh -> ksh; Formshell -> ksh; csh -> ksh; KornShell -> POSIX; "System-V" -> POSIX; ksh -> "ksh-i"; "ksh-i" -> KornShell; KornShell -> "ksh-POSIX"; Bourne -> Formshell; edge [style=invis]; 1984 -> v9sh -> tcsh ; 1988 -> rc -> KornShell; //Formshell -> csh; //KornShell -> Perl; }` 3d:T410,/* Prompt: This is a list of authors. Your task is to transform this list into structured data. The desired format is JSON with citation entries converted to an array of shallow objects of the format: ``` { "authors": [ { "author1_initials": "...", "author1_firstname": "...", // expand initials if you're confident "author1_lastname": "..." }, { "author2_firstnameOrInitial": "...", // if multiple authors "author2_firstname": "...", // if multiple authors, expand initials if you're confident "author2_lastname": "..." // if multiple authors }, { ... // optional authors } ], "year": "...", "title": "...", "publication": "...", // if available "edition": "", // if available "conference": "", // if available "location": "" // if avaiable "pages": [startNum,endNum], "keyphrase": ["descriptive_phrase"] } ``` */ Krashen1981Acquisition = FileAttachment("Krashen (1981) - Second Language Acquisition and Second Language Learning (refs).json").json()3e:[{"id":"9ff1b35fd31e87174ad4d2db5819626e91693c071191da6da5dcb7ef37f242a929f61ac97b62501d5da8670f1206ef8a7628f07d0fa5bdbde33e66f7f673b873","href":"https://static.observableusercontent.com/files/9ff1b35fd31e87174ad4d2db5819626e91693c071191da6da5dcb7ef37f242a929f61ac97b62501d5da8670f1206ef8a7628f07d0fa5bdbde33e66f7f673b873","name":"Krashen (1981) - Second Language Acquisition and Second Language Learning (refs).json","type":"application/json","lastModified":1738299133233.034,"size":136319}] 2e:{"title":"LLMs in practice: keyphrase analysis","cells":[{"id":0,"value":"# LLMs in practice: keyphrase analysis\n## Stephen Krashen's *Second Language Acquisition* (1981)","pinned":false,"hidden":false,"mode":"md"},{"id":348,"value":"Using the new [Qwen2.5-Max](https://huggingface.co/spaces/Qwen/Qwen2.5-Max-Demo) and `Object.groupBy` to extract and summarise bibliographies, keyphrases and topics.\n\n- pin @ v1818","pinned":false,"hidden":false,"mode":"md"},{"id":682,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":676,"value":"## Topic wheel","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"viewof topK = Inputs.range([1, 100], {label: \"Top K\", step: 1, value: 8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"viewof weight = Inputs.range([0.000000, 1], {label: \"Reweigh\", value:0.5,step: 0.05})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"{\n let data = paths\n .filter((d) => d.freq > 0 && d.size > 1)\n .sort((a, b) => b.size - a.size || b.freq - a.freq);\n \n let svg = Sunburst(data, {\n margin:32,\n path: (d) => d.path, // e.g. flare/animate/Easing\n label: (d, n) =>\n n.id.split(\"/\").at(-1).slice(0, 22) +\n \" (\" +\n (n?.data?.freq ??\n topics.get(n.id.split(\"/\").at(-1))?.size ??\n topics.get(n.id.split(\"/\").at(-2))?.size ??\n [...topics.values()].reduce((a, b) => a + b.size, 0) + \" keyphrases\") +\n \")\", // display text\n value: (d) => Math.pow(d?.freq, Math.max(0.000001,weight)), // angle of each arc\n title: (d, n) =>\n [\n n.id.replaceAll(\"/\", \" > \"),\n d?.freq.toLocaleString() ?? topics.get(n.id.replace(\"/\", \"\"))?.size\n ].join(\"\\n\"), // hover text\n width,\n height: width,\n padding: 1\n });\n \n svg = d3.select(svg);\n svg.selectAll(\"text\").attr(\"font-size\", \"10.7\");\n\n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"counts = new Map(\n Object.entries(\n Object.groupBy(\n Object.entries(\n Object.groupBy(\n Krashen1981Acquisition.flatMap((d) => d.keyphrase),\n (d) => d\n )\n )\n .sort((a, b) => b[1].length - a[1].length || a[0].localeCompare(b[0]))\n .map((d) => [canonical[d[0]], { freq: d[1].length, form: d[0] }]),\n (d) => d[0]\n )\n )\n .map((d) => [\n d[0],\n {\n freq: d[1].reduce((pool, item) => pool + item[1].freq, 0),\n list: d[1].map((d) => d[1])\n }\n ])\n .sort((a, b) => b[1].freq - a[1].freq)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"topics = new Map(\n Object.entries(\n Object.groupBy(\n Array.from(counts.entries()).map((d) => [\n fields[d[0]],\n d[0],\n d[1].freq,\n d[1].list\n ]),\n (d) => d[0]\n )\n ).map((d) => [\n d[0],\n {\n size: d[1].reduce((pool, item) => pool + item[2], 0),\n list: d[1]\n .reduce(\n (pool, item) =>\n pool.concat(\n item[3].map(({ freq, form }) => ({\n size: item[2],\n freq,\n term: item[1],\n form\n }))\n ),\n []\n )\n .sort(\n (a, b) =>\n b.size - a.size || b.freq - a.freq || a.form.localeCompare(b.form)\n )\n }\n ]).sort( (a,b) => b[1].size - a[1].size || a[0].localeCompare(b[1]))\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"paths = Array.from(topics.entries()).flatMap((d) =>\n d[1].list.slice(0,topK).map(({ term, form, size, freq }) => ({\n area: d[0],\n path: term == form ? `${d[0]}/${term}` : `${d[0]}/${term}/${form}`,\n freq: term == form ? /*size*/ freq : freq,\n size:d[1].size\n }))\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":686,"value":"### Zoomable Sunburst","pinned":false,"hidden":false,"mode":"md"},{"id":2573,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2661,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2676,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2713,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2745,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"authPaths = Array.from(topics.entries()).flatMap((d) =>\n [...new Set(d[1].list.map((d) => d.term))].flatMap((p) =>\n [{ path: d[0] + \"/\" + p , freq: undefined }].concat(\n Object.entries(phraseAuthors[p] ?? { \"\": 0 }).map((a) => ({\n path: d[0] + \"/\" + p + \"/\" + a[0],\n last: a[0],\n freq: a[1]\n }))\n )\n )\n).filter(d=>d.freq>0)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1707,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":1703,"value":"### Co-author phrases","pinned":false,"hidden":false,"mode":"md"},{"id":1360,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2631,"value":"console.log(graph)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1287,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":1326,"value":"dot`${graph}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":2045,"value":"coAuthorEdges = Object.values(Object.groupBy(prep\n .flatMap((item) =>\n item.authors.flatMap((x, i, arr) =>\n arr\n .map((y) => ({ src: x.last, tgt: y.last,from:item.year, till:item.year}))\n .filter(({ src, tgt }) => src != tgt)\n )\n ),d=>d.src + \"_\" + d.tgt))\n .map((d) => ({ ...d[0], weight: d.length }))\n .filter((d) => d.weight > 1)\n .sort((a, b) => a.from - b.from);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2028,"value":"prep = Krashen1981Acquisition.map(({ authors, keyphrase, year }) => ({\n authors: authors.map((d) =>\n Object.fromEntries(\n Object.entries(d).map((d) => [\n d[0].split(\"_\")[1].replace(\"name\", \"\"),\n d[1]\n ])\n )\n ),\n keyphrase,\n year: parseInt(year)\n }));","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":700,"value":"### Data & Imports","pinned":false,"hidden":false,"mode":"md"},{"id":1151,"value":"argdownHeader = `===\nmodel:\n removeTagsFromText: true\n mode: loose\n \ncolor:\n colorScheme: iwanthue-red-roses\n relationColors:\n support: \"#dddddd\"\n attack: \"#dddddd\"\n undercut: \"#dddddd\"\n contrary: \"#dddddd\"\n contradictory: \"#dddddd\"\n entails: \"#dddddd\"\n\ndot: \n statement:\n minWidth: 0\n margin: \"0.05,0\" \n title:\n font: helvetica\n fontSize: 16\n bold: false\n text:\n font: argvu\n fontSize: 20\n argument:\n title:\n font: argvu\n fontSize: 20\n bold: true\n text:\n font: argvu\n fontSize: 20\n graphVizSettings: \n rankdir: LR \n ranksep: 0\n nodesep: 0.15\n concentrate: true\n outputorder: edgesfirst\n===`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1209,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"import {Sunburst} from \"@d3/sunburst\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}