Skip to content

M
memiescape
Commit 8a2b7eda authored by qlobbe's avatar qlobbe
Browse files
Options

add the colors by dynamics

parent 6ff78c43
Hide whitespace changes
Inline Side-by-side
Showing with 392 additions and 99 deletions
index.html
View file @ 8a2b7eda
......@@ -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
View file @ 8a2b7eda
......@@ -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
View file @ 8a2b7eda
......@@ -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 = [];
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment