add a wikipedia search

index.html

@@ -187,7 +187,7 @@
 
         for (var i = 0; i < keys.length; i++) {
           if (!(keys[i] in window.freq)) {
-            window.freq[keys[i]] = parseFloat(values[i])
+            window.freq[(keys[i]).trim()] = parseFloat(values[i])
           }
         }
       }
@@ -252,7 +252,7 @@
     class phyloHow extends React.Component {
         render() {
           return   <div className="phylo-how" id="phyloHow">
-                      <a href="./documentation.html" target="_blank">
+                      <a id="phyloSearch" href="./documentation.html" target="_blank">
                       <div className="switch">
                           <i className="far fa-question-circle how"></i> 
                           <i className="fa  fa-question-circle how">

lib/css/qlobbe.css

@@ -63,7 +63,7 @@ body {
   font-size: 14px;
   display: flex;
   align-items: center; 
-  justify-content: right; 
+  justify-content: right;
 }
 
 .phylo-corpus-info {
@@ -132,7 +132,10 @@ body {
 
 /* ---------- icons ---------- */
 
-a { color: inherit; }
+a { 
+  color: inherit; 
+  cursor: pointer;
+}
 
 .how {
   cursor: pointer;

ressources.js

@@ -138,7 +138,7 @@ function setYDomain(labels) {
     var inf = findInf(labels),
         sup = findSup(labels);
     inf = new Date((inf - 1),6,0);
-    // inf = new Date((1960 - 1),6,0);
+    // inf = new Date((1950 - 1),6,0);
     sup = new Date((sup + 1),0,0);
     return [inf,sup];
 }
@@ -390,7 +390,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
         panel.selectAll(".y-highlight").attr("transform", d3.event.transform);        
         panel.selectAll(".ngrams").attr("transform", d3.event.transform); 
         panel.selectAll(".term-path").attr("transform", d3.event.transform); 
-        panel.selectAll(".emergence").attr("transform", d3.event.transform); 
+        panel.selectAll(".emergence").attr("transform", d3.event.transform);
+        panel.selectAll(".header").attr("transform", d3.event.transform); 
 
         showPeak()
     }
@@ -480,6 +481,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
       let y = ((emergences[k]).y).reduce(arraySum) / ((emergences[k]).y).length;
       let bid = Array.from(new Set(branchByGroup[k]));
       var freq = 0;
+      // console.log(k)
+      // console.log(window.freq)
       if (k in window.freq) {
         freq = window.freq[k];
       }
@@ -487,6 +490,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
            .attr("x",x + (rdm() * Math.random() * 10))
            .attr("y",y + (rdm() * Math.random() * 10))
            .attr("fdt",k)
+           .attr("id","head" + k)
            .attr("mem-size", fontScale(freq))
            .attr("mem-opac", opacityScale(freq))
            .attr("bid",(emergences[k]).bid)
@@ -499,7 +503,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
            .text((emergences[k]).label)
            .on("click",function(){
               showLabel()
-              termClick((emergences[k]).label,k,this.getAttribute("transform"));
+              termClick((emergences[k]).label,k,k,"head");
            });
     });
 
@@ -637,7 +641,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
 
           d3.selectAll(".term")
             .on("click",function(){
-              termClick(this.textContent,this.getAttribute("fdt"),this.getAttribute("transform"));
+              termClick(this.textContent,this.getAttribute("fdt"),this.getAttribute("gid"),"group");
             })
             // .on("mouseover",function(){
             //   d3.selectAll(".term").classed("term-unfocus",true);
@@ -746,17 +750,22 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
       return (Array.from(new Set(branches))).length;
     }
 
-    function termClick (txt,idx,transform) {
+    function termClick (txt,idx,nodeId,typeNode) {
 
       // remove old focus
       initPath()
 
       // catch the last transformations
-      // var transform = d3.select("#group" + this.getAttribute("gid")).node().getAttribute("transform");
+      if (typeNode == "group") {
+        var transform = d3.select("#group" + nodeId).node().getAttribute("transform");
+      } else {
+        var transform = d3.select("#head" + nodeId).node().getAttribute("transform");
+      }
 
       // focus
       document.querySelector("#phyloPhylo").innerHTML = txt;
       document.querySelector("#phyloPhylo").classList.add("phylo-focus");
+      document.querySelector("#phyloSearch").setAttribute("href",'https://en.wikipedia.org/w/index.php?search="' + txt + '"')
 
       // find the relevant links