add the colors by dynamics

index.html

@@ -34,6 +34,7 @@
   		<button id="draw" class="button draw">
   			draw
   		</button>
+      <!-- <span id="focus" class="phylo-focus">▸ focus</span> -->
 	</div>
 
 	<!-- row 2 & 3 -->
@@ -49,12 +50,17 @@
 	<div class="phylo-isoline" id="phyloIsoLine"></div>
 
   <div class="phylo-isoline-info" id="phyloIsolineInfo">
-    <button id="reset" class="button reset">
-      <i class="fas fa-expand-arrows-alt"></i>
-    </button>
-    <button id="label" class="button label">
-      <i class="fas fa-align-center"></i>      
-    </button>  
+    <div class="btn-group">
+      <button id="reset" class="button reset">
+        <i class="fas fa-expand-arrows-alt"></i>
+      </button>
+      <button id="label" class="button label">
+        <i class="fas fa-dot-circle"></i>      
+      </button>  
+      <button id="heading" class="button heading">
+        <i class="fas fa-sort-alpha-down"></i>      
+      </button>       
+    </div>     
   </div>  
 
 	<!-- row 4 -->
@@ -86,6 +92,7 @@
         try {
           document.querySelector("#reset").style.visibility = "visible"
           document.querySelector("#label").style.visibility = "visible"
+          document.querySelector("#heading").style.visibility = "visible"
           json = JSON.parse(e.target.result);
           draw(json)
         } catch (error) {
@@ -125,6 +132,14 @@
 
     // draw PhyloInfo
 
+    window.freq = {};
+    var jsonFreq = (json.phyloTermsFreq).slice(2,-2).split("),(");
+
+    jsonFreq.forEach(function(elem){
+      let arr = elem.split(',')
+      window.freq[arr[0]] = parseFloat(arr[1])
+    })
+
     window.nbDocs     = parseFloat(json.phyloDocs);
     window.nbBranches = parseFloat(json.phyloBranches);
     window.nbGroups   = parseFloat(json.phyloGroups);
@@ -165,7 +180,8 @@
                 gId  : parseInt(g._gvid)  ,
                size  : parseInt(g.support),
                label : (g.label.slice(1, g.label.length - 1)).split('|'),
-               foundation : (g.foundation.slice(1, g.foundation.length - 1)).split('|') }
+               foundation : (g.foundation.slice(1, g.foundation.length - 1)).split('|'),
+               role : ((g.role.slice(1, g.role.length - 1)).split('|')).map(e => parseInt(e.trim()))}
     });    
 
     var links = json.edges.filter(edges => edges.edgeType == "link").map(function(l){
@@ -239,9 +255,9 @@
     class phyloPhyloInfo extends React.Component {
         render() {
           return   <div className="phylo-phylo-info" id="phyloPhyloInfo">
-                      <span><b>{this.props.nbTerms}</b> terms</span>
-                      <span><b>{this.props.nbGroups}</b> groups</span>
-                      <span><b>{this.props.nbBranches}</b> branches</span>
+                      <span><b id="phyloTerms">{this.props.nbTerms}</b> terms</span>
+                      <span><b id="phyloGroups">{this.props.nbGroups}</b> groups</span>
+                      <span><b id="phyloBranches">{this.props.nbBranches}</b> branches</span>
                    </div> 
         }
     }          

lib/css/qlobbe.css

@@ -42,7 +42,7 @@ body {
 
 .phylo-folder {
   grid-row: 1;
-  grid-column: 2 / 16;
+  grid-column: 2 / 10;
 }
 
 /* -------------------- */
@@ -102,8 +102,8 @@ body {
 .phylo-isoline-info {
   grid-row: 2 / 4;
   grid-column: 15 / 16;  
-  padding-top: 50%;
-  padding-bottom: 50%;
+  padding-top: 30%;
+  padding-bottom: 30%;
 }
 
 /* -------------------- */
@@ -203,6 +203,10 @@ i.how:hover span {
   font-size: 12px;
 }
 
+.header {
+  font-weight: bold;
+}
+
 /* ---------- input ---------- */
 
 .button {
@@ -216,10 +220,22 @@ i.how:hover span {
   color: white;
 }
 
+.btn-group button{
+  margin-top: 1px;
+  margin-bottom: 1px;
+  display: block;
+  width: 40px;
+}
+
 .draw {
   display: none;
 }
 
+.phylo-focus {
+  fill: #f8381f;
+  color: #f8381f;
+}
+
 .reset {
   visibility: hidden;
 }
@@ -228,6 +244,15 @@ i.how:hover span {
   visibility: hidden;
 }
 
+.heading {
+  visibility: hidden;
+}
+
+.headed {
+  background-color: #0d1824;
+  color: white;  
+}
+
 .labeled {
   background-color: #0d1824;
   color: white;
@@ -273,6 +298,14 @@ i.how:hover span {
   stroke: #fff;
 }
 
+.x-mark-over {
+  fill: #f3be54;
+}
+
+.x-mark-focus {
+  fill: #f8381f;
+}
+
 .tick text {
   font-family: "Inter-Regular";
 }
@@ -320,28 +353,29 @@ i.how:hover span {
 /* ---------- group ---------- */
 
 .group-outer {
-  stroke-width: 1px;
+  stroke-width: 0.8px;
   stroke: #fff;
   fill: #fff;
 }
 
 .group-inner {
-  stroke-width: 1px;
+  stroke-width: 0.8px;
   stroke: #0d1824;
   fill: #0d1824;
   /*cursor: pointer;*/ 
   z-index: 10;
 }
 
-.group-inner-focus {
-  stroke: #f8381f;
+.group-heading {
+  fill: #fff;
+  stroke: #A9A9A9;
 }
 
-.group-inner-unfocus {
-  stroke: #A9A9A9;
+.group-focus {
+  stroke: #f8381f;
 }
 
-.group-path-focus {
+.group-unfocus {
   stroke: #A9A9A9;
 }
 
@@ -357,13 +391,46 @@ i.how:hover span {
 
 .term:hover {
   font-weight: bold;
+  fill: #f8381f;  
+}
+
+.term-unfocus {
+  /*fill: #A9A9A9;*/
+}
+
+.term-focus {
+  /*fill: black;*/
 }
 
 .term-path {
   fill: none;
-  stroke: #f8381f;
+  stroke: #F0684D;
   stroke-width: 1.5px;
-  z-index: 1;
+}
+
+.emerging {
+  /*text-decoration: underline #F0684D;*/
+  /*fill:#5AA350;*/
+  fill: #5AA350;
+}
+
+.decreasing {
+  /*text-decoration: underline #74B5FF;*/
+  fill: #11638F;
+}
+
+.path-focus {
+  fill: none;
+  stroke: #F0684D;
+  stroke-width: 1.5px;
+}
+
+.path-unfocus {
+  stroke: #A9A9A9;
+}
+
+.path-heading {
+  stroke: #A9A9A9;
 }
 
 /* ---------- phylo ---------- */
@@ -406,6 +473,13 @@ i.how:hover span {
   z-index: 100;
 }
 
+.peak-focus {
+  font-size: 18px;
+  stroke-width: 2px;
+  stroke: #F0684D;
+}
+
+
 .peak-label {
   text-align: center;
   font-family: "Inter-Regular";

ressources.js

@@ -82,6 +82,8 @@ function xOverFlow(ticks,arr) {
     })
 }
 
+var branchFocus = [];
+
 function addMarkX(ticks,ws,ids) {
     ticks.each(function(t,i){
         d3.select(this)
@@ -91,7 +93,11 @@ function addMarkX(ticks,ws,ids) {
           .attr("height","8")
           .attr("width",ws[i] + 1)
           .attr("class","x-mark")
-          .attr("id", "xmark-" + ids[i]) 
+          .attr("id", "xmark-" + ids[i])
+
+        if (branchFocus.includes("" + ids[i])) {
+          d3.select("#xmark-" + ids[i]).style("fill","#F0684D");
+        }
     })
 }
 
@@ -121,8 +127,8 @@ function addMarkY(ticks) {
 function setYDomain(labels) {
     var inf = labels[0].from,
         sup = labels[labels.length - 1].from;
-    // inf = new Date((inf.getFullYear() - 1),6,0);
-    inf = new Date((1980 - 1),6,0);
+    inf = new Date((inf.getFullYear() - 1),6,0);
+    // inf = new Date((1960 - 1),6,0);
     sup = new Date((sup.getFullYear() + 1),0,0);
     return [inf,sup];
 }
@@ -133,10 +139,10 @@ function groupTermsBy(elements, attr) {
   for (var i = 0; i < elements.length; i++) {
     let from = elements[i].getAttribute(attr)
     if (curr != from) {
-      grouped[from] = [[(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy")]];
+      grouped[from] = [[(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]];
       curr = from
     } else {
-      grouped[from].push([(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy")]);
+      grouped[from].push([(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]);
     }
   }
   return Object.values(grouped);
@@ -215,8 +221,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
          .attr("visibility","visible")
          .text("▲")
          .on("mouseover", peakOver)
-         .on("mouseout",  peakOut);          
-
+         .on("mouseout",  peakOut)
+         .on("click", peakClick);    
 
     /* *** draw the phylo *** */
 
@@ -296,9 +302,9 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
     }   
 
     var linkGen = d3.linkVertical();
-    var groupLinks = links.map(l => ({source: findGroup(l.from, xScale, yScale), target: findGroup(l.to, xScale, yScale)}));
+    var groupLinks = links.map(l => ({source: findGroup(l.from, xScale, yScale), target: findGroup(l.to, xScale, yScale),from: l.from, to: l.to}));
 
-    var groupAncestors = aLinks.map(l => ({source: findGroup(l.from, xScale, yScale), target: findGroup(l.to, xScale, yScale)}));
+    var groupAncestors = aLinks.map(l => ({source: findGroup(l.from, xScale, yScale), target: findGroup(l.to, xScale, yScale),from: l.from, to: l.to}));
 
     panel
       .selectAll("path")
@@ -307,13 +313,15 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
       .attr("d", linkGen)
       .attr("fill", "none")
       .attr("stroke","#0d1824")
-      .attr("class","group-path")    
+      .attr("class", "group-path")
+      .attr("source",d => d.from)
+      .attr("target",d => d.to)    
 
     // https://observablehq.com/@mbostock/fit-text-to-circle
 
     /* fake group content */
 
-    var colors = ["#f8381f","#aa8c58","#74b5ff","#0d1824"];
+    var colors = ["#F0684D","#aa8c58","#74b5ff","#0d1824"];
 
     /* groups */    
 
@@ -364,6 +372,7 @@ 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); 
 
         showPeak()
     }
@@ -375,6 +384,9 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
     d3.select("#label").on("click",showLabel);   
 
     function showLabel() {
+      if ((document.getElementsByClassName("header"))[0].style.visibility != "hidden") {
+        showHeading()
+      }
       doubleClick()
       let ngrams = document.getElementsByClassName("ngrams")
       let groups = document.getElementsByClassName("group-inner")
@@ -397,6 +409,94 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
       }
     }
 
+    /* role & dynamic */
+
+    d3.select("#heading").on("click",showHeading);
+
+    var emergences = {};
+
+    groups.forEach(function(g){
+      // is emerging ?
+      if ((g.role).includes(0)) {
+        for (var i = 0; i < (g.role).length; i++) {
+          if ((g.role)[i] == 0) {
+            var gf = parseInt(((g.foundation)[i]).trim())
+            if (gf in emergences) {
+              (emergences[gf].x).push(xScale(g.x));
+              (emergences[gf].y).push(yScale(g.from));
+            } else {
+               emergences[gf] = {"label":g.label[i],"x":[xScale(g.x)],"y":[yScale(g.from)]}
+            }
+          }
+        }
+      }
+    });
+
+    var keys = Object.keys(emergences);
+    var fontDomain = [Math.min(...(Object.values(window.freq))),Math.max(...(Object.values(window.freq)))];
+
+    const arraySum = (acc, curr) => acc + curr;
+
+    function rdm() {
+      if (Math.random() > 0.5) {
+        return 1;
+      } else {
+        return -1;
+      }
+    }
+
+    var fontScale = d3.scaleLinear().domain([0,Math.max(...(Object.values(window.freq)))]).range([2,10]);
+    var opacityScale = d3.scaleLinear().domain([0,Math.max(...(Object.values(window.freq)))]).range([0.3,1]);
+
+    keys.forEach(function(k){
+      let x = ((emergences[k]).x).reduce(arraySum) / ((emergences[k]).x).length
+      let y = ((emergences[k]).y).reduce(arraySum) / ((emergences[k]).y).length
+      var freq = 0;
+      if (k in window.freq) {
+        freq = window.freq[k];
+      }
+      panel.append("text")
+           .attr("x",x + (rdm() * Math.random() * 10))
+           .attr("y",y + (rdm() * Math.random() * 10))
+           .attr("fdt",k)
+           .style("font-size", fontScale(freq) + "px")
+           .style("opacity", opacityScale(freq))
+           .attr("class","header")
+           .style("visibility","hidden")
+           .style("text-anchor", "middle")
+           .text((emergences[k]).label);
+    });
+
+    function showHeading() {
+      if ((document.getElementsByClassName("ngrams"))[0].style.visibility != "hidden") {
+        showLabel()
+      }
+      doubleClick()
+      let headers = document.getElementsByClassName("header")      
+      let groups = document.getElementsByClassName("group-inner")
+      if (headers[0].style.visibility == "hidden") {
+        document.getElementById("heading").classList.add("headed")
+        for (var i = 0; i < groups.length; i++) {
+          groups[i].style.fill = "#f5eee6";
+          groups[i].classList.add("group-heading")
+        }
+        d3.selectAll(".group-path").classed("path-heading",true);       
+        for (var i = 0; i < headers.length; i++){
+          headers[i].style.visibility = "visible";
+        }
+      } else {
+        document.getElementById("heading").classList.remove("headed")
+        for (var i = 0; i < groups.length; i++) {
+          groups[i].style.fill = "#61a3a9";
+          groups[i].classList.remove("group-heading")
+        }        
+        d3.selectAll(".group-path").classed("path-heading",false);      
+        for (var i = 0; i < headers.length; i++){
+          headers[i].style.visibility = "hidden";
+        }
+      }   
+    }
+
     /* groups */
 
     function textWidth(text) {
@@ -404,22 +504,24 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
         return context.measureText(text).width;
     }
 
-    function toLines(words,fdt,targetWidth) {
+    function toLines(words,fdt,role,targetWidth) {
       let line;
       let lineWidth0 = Infinity;
       const lines = [];
       for (let i = 0, n = words.length; i < n; ++i) {
         let lineText1 = (line ? line.text + " " : "") + words[i];
         let lineFdt1 = (line ? line.fdt + " " : "") + fdt[i];
+        let lineRole1 = (line ? line.role + " " : "") + role[i];
         let lineWidth1 = textWidth(lineText1);
         if ((lineWidth0 + lineWidth1) / 2 < targetWidth + 10) {
           line.width = lineWidth0 = lineWidth1;
           // line.text = lineText1;
           line.text.push(words[i])
           line.fdt.push(fdt[i])
+          line.role.push(role[i])
         } else {
           lineWidth0 = textWidth(words[i]);
-          line = {width: lineWidth0, text: [words[i]], fdt: [fdt[i]]};
+          line = {width: lineWidth0, text: [words[i]], fdt: [fdt[i]], role: [role[i]]};
           lines.push(line);
         }
       }
@@ -466,7 +568,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
 
         var lineHeight = 12,
             targetWidth = Math.sqrt(textWidth(g.label.join('').trim()) * radius),
-            lines = toLines(g.label,g.foundation,targetWidth),
+            lines = toLines(g.label,g.foundation,g.role,targetWidth),
             textRadius = toTextRadius(lines,lineHeight)
             textRatio = (radius - 0.5) / textRadius;
 
@@ -474,12 +576,14 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
 
           let words  = lines[i].text,
               fdt    = lines[i].fdt,
-              terms  = mergeLists(words,fdt)
+              roles  = lines[i].role,
+              terms  = mergeLists(words,fdt,roles)
               toSpan = (acc, w) => acc + "<tspan fdt=" + w[1] 
-                                       + " class='term fdt-" + (w[1]).trim() + "'"
+                                       + " class='term fdt-" + (w[1]).trim() + " " + "g-" + g.gId + findRole(w[2]) + "'"
                                        + " gy=" + yScale(g.from)
                                        + " gx=" + xScale(g.x)
                                        + " gid=" + g.gId
+                                       + " bid=" + g.bId
                                        + " from="   + (g.from).getFullYear()
                                        + ">" + w[0] + "</tspan>";
 
@@ -489,22 +593,43 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
               .attr("text-anchor", "middle")
               .style("font-size", 12 * textRatio + "px")
               .style("visibility", "hidden")
-                .append("tspan") 
+                .append("tspan")
                   .attr("x", xScale(g.x))
                   .attr("y", yScale(g.from) + (i - lines.length / 2.8) * (lineHeight * textRatio))
-                  .html(terms.reduce(toSpan,""));
+                  .html(terms.reduce(toSpan,"")); 
 
-          d3.selectAll(".term").on("click",termClick);
+
+          d3.selectAll(".term")
+            .on("click",termClick)
+            // .on("mouseover",function(){
+            //   d3.selectAll(".term").classed("term-unfocus",true);
+            //   d3.selectAll(".term").filter(".g-" + this.getAttribute("gid")).classed("term-focus",true);
+            // })
+            // .on("mouseout",function(){
+            //   d3.selectAll(".term").classed("term-unfocus",false);
+            //   d3.selectAll(".term").classed("term-focus",false);
+            // });
 
         }
     }
 
+    d3.selectAll(".header").raise();
 
 
-    function mergeLists(l1,l2) {
+    function findRole(r) {
+      if (r == 0) {
+        return " emerging";
+      } else if (r == 2) {
+        return " decreasing";
+      } else {
+        return "";
+      }
+    }
+
+    function mergeLists(l1,l2,l3) {
       let merged = [];
       for (let i = 0; i < l1.length; i++) {
-            merged.push([l1[i],l2[i]])
+            merged.push([l1[i],l2[i],l3[i]])
       }
       return merged;
     }
@@ -543,7 +668,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
     }
 
     function showPeak() {
-        d3.selectAll(".peak").style("visibility",function(peak,i){
+        d3.selectAll(".peak").style("fill",function(peak,i){
             var isVisible = d3
                 .selectAll(".branch-" + i)
                 .nodes()
@@ -558,74 +683,118 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
                 .reduce((mem,cur) => {return mem || cur;})
             if (isVisible) {
                 d3.select("#peak-shadow" + i).attr("visibility","visible");
-                return "visible";
+                return "#0d1824";
             } else {
                 d3.select("#peak-shadow" + i).attr("visibility","hidden");
-                return "hidden";
+                return "#A9A9A9";
             }
         })
     }
 
-    function termClick () {
-
-      // remove old focus
-      d3.selectAll(".term-path").remove();
-      var groups = document.getElementsByClassName('group-inner');
+    function countTerms(groups) {
+      var terms = [];
       for (var i = 0; i < groups.length; i++) {
-        groups[i].classList.remove("group-inner-focus");
-        groups[i].classList.add("group-inner-unfocus");
+        let gid = ((groups[i].node().getAttribute("id")).split("group"))[1]
+        d3.selectAll(".g-" + gid).nodes().forEach(e => terms.push(e.getAttribute("fdt")))
       }
-      var paths = document.getElementsByClassName('group-path');
-      for (var i = 0; i < paths.length; i++) {
-        paths[i].classList.add("group-path-focus");
+      return (Array.from(new Set(terms))).length;
+    }
+
+    function countBranches(groups) {
+      var branches = [];
+      for (var i = 0; i < groups.length; i++) {
+        branches.push(groups[i].node().getAttribute("bId"));
       }
+      return (Array.from(new Set(branches))).length;
+    }
+
+    function termClick () {
+
+      // remove old focus
+      initPath()
 
       // catch the last transformations
       var transform = d3.select("#group" + this.getAttribute("gid")).node().getAttribute("transform");
 
+      // focus
+      document.querySelector("#phyloPhylo").innerHTML = this.textContent;
+      document.querySelector("#phyloPhylo").classList.add("phylo-focus");
 
+      // find the relevant links
       var idx = this.getAttribute("fdt"),
           terms = document.getElementsByClassName("fdt-" + idx),
+          paths = document.getElementsByClassName("group-path"),
           periods = groupTermsBy(terms,"from");
 
+      var gids  = [],
+          groups = [];
+
       for (var i = 0; i < terms.length; i++) {
-        let gid = (terms[i]).getAttribute("gid");
-        d3.select("#group" + gid).node().classList.remove("group-inner-unfocus")
-        d3.select("#group" + gid).node().classList.add("group-inner-focus")
+        gids.push((terms[i]).getAttribute("gid"));
+        let group = d3.select("#group" + (terms[i]).getAttribute("gid"))
+        group.classed("group-unfocus",false)
+             .classed("group-focus",true);
+        groups.push(group)
+        //highlight the branches peak
+        d3.select("#peak-" + (terms[i]).getAttribute("bid")).classed("peak-focus",true);
+        branchFocus.push((terms[i]).getAttribute("bid"));
+        d3.select("#xmark-" + (terms[i]).getAttribute("bid")).style("fill","#F0684D");
+      }
+
+      // facet
+      document.querySelector("#phyloGroups").innerHTML = groups.length;
+      document.querySelector("#phyloTerms").innerHTML = countTerms(groups);
+      document.querySelector("#phyloBranches").innerHTML = countBranches(groups);
+      document.querySelector("#phyloGroups").classList.add("phylo-focus");
+      document.querySelector("#phyloTerms").classList.add("phylo-focus");
+      document.querySelector("#phyloBranches").classList.add("phylo-focus");
+
+
+      for (var i = 0; i < paths.length; i++) {
+        if (gids.includes((paths[i]).getAttribute("source")) && (paths[i]).getAttribute("target")) {
+          paths[i].classList.add("path-focus");
+          paths[i].classList.remove("path-unfocus");
+        }
       }
 
+      var bids  = [];
+
       for (var i = 0; i < periods.length; i++) {
         if (i != periods.length - 1) {
           for (var j = 0; j < periods[i].length; j++) {
+            bids.push(periods[i][j][2])
             var x1 = periods[i][j][0],
                 y1 = periods[i][j][1];
             for (var k = 0; k < periods[i + 1].length; k++) {
               var x2 = periods[i + 1][k][0],
                   y2 = periods[i + 1][k][1];
-
-              // draw the paths
-              panel
-                .append("path")
-                .attr("class","term-path")
-                .attr("d", function(d) {
-                  return "M" + x1 + "," + y1
-                    + "C" + x2 + "," + y1
-                    + " " + x2 + "," + y2
-                    + " " + x2 + "," + y2;                        
-                })
-                .attr("transform",transform)
-                .style("stroke-opacity", 0.6)
-                .lower();
+              if ((periods[i][j][2] != periods[i + 1][k][2]) && (!bids.includes(periods[i + 1][k][2]))) {
+                // draw the links between branches
+                panel
+                  .append("path")
+                  .attr("class","term-path")
+                  .attr("d", function(d) {
+                    return "M" + x1 + "," + y1
+                      + "C" + x2 + "," + y1
+                      + " " + x2 + "," + y2
+                      + " " + x2 + "," + y2;                        
+                  })
+                  .attr("transform",transform)
+                  .style("stroke-opacity", 0.4)
+                  .lower();
+              }
+              bids.push(periods[i + 1][k][2])
             }
           }
         }
       }
 
-      d3.selectAll(".group-path").lower();
+      d3.selectAll(".path-unfocus").lower();
     }
 
     function peakOver (b,i) {
-        d3.select("#peak-" + i).node().setAttribute("class","peak peak-over");
+        d3.select("#peak-" + i).classed("peak-focus",false);
+        d3.select("#peak-" + i).classed("peak-over",true);
         label.text(b.label.replace(/"/g,''))
              .style("visibility", "visible")
              .style("top", (yScale0(b.y) + div0.top  - 18) + "px")
@@ -634,10 +803,20 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
     }
 
     function peakOut (b,i) {
-        d3.select("#peak-" + i).node().setAttribute("class","peak");
+        d3.select("#peak-" + i).classed("peak-over",false);
+        if (branchFocus.includes("" + b.bId)) {
+          d3.select("#peak-" + i).classed("peak-focus",true);
+        }
         branchOut();
     }
 
+    function peakClick (b,i) {
+      let tx = ((d3.selectAll(".group-inner").filter(".branch-" + b.bId).nodes())[0]).getAttribute("cx")
+      svg.transition()
+          .duration(750)
+          .call(zoom.transform, d3.zoomIdentity.translate(((wo + xo) / 2) - tx, 0).scale(1));      
+    }
+
     function branchOver(bId) {
         d3.select("#xmark-"  + bId).style("fill","#f3be54");
         d3.select("#hover-" + bId).style("visibility","visible"); 
@@ -647,6 +826,9 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
         d3.selectAll(".peak-label").style("visibility","hidden");
         d3.selectAll(".branch-hover").style("visibility","hidden");
         d3.selectAll(".x-mark").style("fill","#4A5C70");  
+        for (var i = 0; i < branchFocus.length; i++) {
+          d3.select("#xmark-" + branchFocus[i]).style("fill","#F24C3D");
+        }
     }
 
     function tickOver() {
@@ -665,33 +847,54 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
         peakOut(branch,ego)
     }
 
-    function groupOver() {
-        var from = this.getAttribute("from");
-        d3.select("#y-highlight-" + from).style("visibility","visible");
-        // d3.select("#y-mark-year-inner-" + from).node().setAttribute("class","y-mark-year-inner-highlight");
-        // d3.select("#y-mark-year-outer-" + from).node().setAttribute("class","y-mark-year-outer-highlight");
-        // d3.select("#y-label-" + from).node().setAttribute("class","y-label-bold");
+    // function groupOver() {
+    //     var from = this.getAttribute("from");
+    //     d3.select("#y-highlight-" + from).style("visibility","visible");
+    //     // d3.select("#y-mark-year-inner-" + from).node().setAttribute("class","y-mark-year-inner-highlight");
+    //     // d3.select("#y-mark-year-outer-" + from).node().setAttribute("class","y-mark-year-outer-highlight");
+    //     // d3.select("#y-label-" + from).node().setAttribute("class","y-label-bold");
+    // }
+
+    // function groupOut() {
+    //     var from = this.getAttribute("from");
+    //     d3.select("#y-highlight-" + from).style("visibility","hidden");
+    //     // d3.select("#y-mark-year-inner-" + from).node().setAttribute("class","y-mark-year-inner");
+    //     // d3.select("#y-mark-year-outer-" + from).node().setAttribute("class","y-mark-year-outer");
+    //     // d3.select("#y-label-" + from).node().setAttribute("class","y-label");
+    // }
+
+    function initPath () {
+      d3.selectAll(".group-inner")
+        .classed("group-unfocus",true)
+        .classed("group-focus",false);
+      d3.selectAll(".group-path")
+        .classed("path-unfocus",true)
+        .classed("path-focus",false);        
+      d3.selectAll(".term-path").remove();
+      d3.selectAll(".peak").classed("peak-focus",false);
+      d3.selectAll(".x-mark").style("fill","#4A5C70");
+      branchFocus = [];
     }
 
-    function groupOut() {
-        var from = this.getAttribute("from");
-        d3.select("#y-highlight-" + from).style("visibility","hidden");
-        // d3.select("#y-mark-year-inner-" + from).node().setAttribute("class","y-mark-year-inner");
-        // d3.select("#y-mark-year-outer-" + from).node().setAttribute("class","y-mark-year-outer");
-        // d3.select("#y-label-" + from).node().setAttribute("class","y-label");
-    }   
-
     function doubleClick() {
+      d3.selectAll(".group-inner")
+        .classed("group-unfocus",false)
+        .classed("group-focus",false);
+      d3.selectAll(".group-path")
+        .classed("path-unfocus",false)
+        .classed("path-focus",false);
       d3.selectAll(".term-path").remove();
-      var groups = document.getElementsByClassName('group-inner');
-      for (var i = 0; i < groups.length; i++) {
-        groups[i].classList.remove("group-inner-focus");
-        groups[i].classList.remove("group-inner-unfocus");
-      }    
-      var paths = document.getElementsByClassName('group-path');
-      for (var i = 0; i < paths.length; i++) {
-        paths[i].classList.remove("group-path-focus");
-      }        
+      document.querySelector("#phyloPhylo").innerHTML = "phylomemy";
+      document.querySelector("#phyloPhylo").classList.remove("phylo-focus");
+      document.querySelector("#phyloGroups").innerHTML = window.nbGroups;
+      document.querySelector("#phyloTerms").innerHTML = window.nbTerms;
+      document.querySelector("#phyloBranches").innerHTML = window.nbBranches;
+      document.querySelector("#phyloGroups").classList.remove("phylo-focus");
+      document.querySelector("#phyloTerms").classList.remove("phylo-focus");
+      document.querySelector("#phyloBranches").classList.remove("phylo-focus");      
+      d3.selectAll(".peak").classed("peak-focus",false);
+      d3.selectAll(".x-mark").style("fill","#4A5C70");    
+      branchFocus = [];  
     } 
 
 }