");
var middleDropdown = dropdown.append("li").attr("class","dropdown");
middleDropdown.append("button").attr("class","btn btn-default dropdown-toggle")
- .attr("type", "button").attr("data-toggle","dropdown").html("Middle nodes").append("span").attr("class","caret");
+ .attr("type", "button").attr("data-toggle","dropdown").html("Middle "+treeType+" nodes").append("span").attr("class","caret");
middleDropdown.append("ul").attr("class","dropdown-menu").html("
");
var outerDropdown = dropdown.append("li").attr("class","dropdown");
outerDropdown.append("button").attr("class","btn btn-default dropdown-toggle")
- .attr("type", "button").attr("data-toggle","dropdown").html("Outer nodes").append("span").attr("class","caret");
+ .attr("type", "button").attr("data-toggle","dropdown").html("Outer "+treeType+" nodes").append("span").attr("class","caret");
outerDropdown.append("ul").attr("class","dropdown-menu").html("
");
};
d3.dendrogram.makeCartesianDendrogram =function (selector, data, options) {
options = options || {};
+ function zoom() {
+ svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+ }
+
+
+ // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
+ var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);
+ var viewerWidth = $(document).width();
+ var viewerHeight = $(document).height();
+
var w = options.width || d3.select(selector).style('width') || d3.select(selector).attr('width'),
h = options.height || d3.select(selector).style('height') || d3.select(selector).attr('height');
+
+
var tree = options.tree || d3.layout.cluster()
.size([h, w])
.sort(function(node) { return node.children ? parseInt(node.children.length) : -1; })
.children(options.children || function(node) {
return node.children;
});
var diagonal = options.diagonal || d3.dendrogram.rightAngleDiagonal();
var vis = options.vis || d3.select(selector).append("svg")
- .attr("width", w + 300)
- .attr("height", h + 30)
- .append("g")
+ //.attr("width", w + 300)
+ //.attr("height", h + 30)
+ .attr("width", viewerWidth)
+ .attr("height", viewerHeight)
+ .attr("class", "overlay")
+ .call(zoomListener);
+
+
+
+ var svgGroup = vis.append("g")
.attr("transform", "translate(20, 20)");
+
var nodes = tree(data);
var legendRectSize = 10;
var legendSpacing = 10;
var yscale;
if (options.skipBranchLengthScaling) {
yscale = d3.scale.linear()
.domain([0, w])
.range([0, w]);
}
else{
yscale = scaleBranchLengths(nodes, w);
}
if (!options.skipTicks) {
- vis.selectAll('line')
+ svgGroup.selectAll('line')
.data(yscale.ticks(10))
.enter().append('svg:line')
.attr('y1', 0)
.attr('y2', h)
.attr('x1', yscale)
.attr('x2', yscale)
.attr("stroke", "#ddd");
- vis.selectAll("text.rule")
+ svgGroup.selectAll("text.rule")
.data(yscale.ticks(10))
.enter().append("svg:text")
.attr("class", "rule")
.attr("x", yscale)
.attr("y", 0)
.attr("dy", -3)
.attr("text-anchor", "middle")
.attr('font-size', '8px')
.attr('fill', '#ccc')
.text(function(d) { return Math.round(d*100) / 100; });
}
- var link = vis.selectAll("path.link")
+ var link = svgGroup.selectAll("path.link")
.data(tree.links(nodes))
.enter().append("svg:path")
.attr("class", "link")
.attr("d", diagonal)
.attr("fill", "none")
.attr("stroke", "#aaa")
- .attr("stroke-width", "4px");
+ .attr("stroke-width", "2px");
var first = 1;
makeDropdownSkeleton("Phylo");
- var innerNodes = vis.selectAll("g.innerNode")
+ var innerNodes = svgGroup.selectAll("g.innerNode")
.data(nodes)
.enter().append("g")
.attr("class", function(n) {
if (n.children) {
if (n.depth === 0) {
return "root node";
} else {
return "inner node";
}
}
else{
if (first){
var count = 0;
for (var key in n) {
if (n.hasOwnProperty(key))
@@ -369,78 +461,76 @@
{
addLeafButton(key, count, 'inner', 0, '#innerPhyloLeaves', '#phylogram') ;
addLeafButton(key, count, 'middle', 0, '#middlePhyloLeaves', '#phylogram');
addLeafButton(key, count, 'outer', 0, '#outerPhyloLeaves', '#phylogram');
}
}
count += 1;
}
first = 0;
}
return "innerLeaf";
}
})
.attr("transform", function(d) { return "translate(" + (d.y) + "," + (d.x) + ")"; });
- var innerLeaves = vis.selectAll("g.innerLeaf")
+ var innerLeaves = svgGroup.selectAll("g.innerLeaf")
.append("circle")
.attr("r", '3')
.style("fil", 'none');
- var middleLeaves = vis.selectAll("g.middleLeaf")
+ var middleLeaves = svgGroup.selectAll("g.middleLeaf")
.data(nodes)
.enter().append("svg:g")
.attr("class", function(n) {
if (n.children) {
return "nill";
}
else{
return "middleLeaf";
}
});
- vis.selectAll("g.middleLeaf")
+ svgGroup.selectAll("g.middleLeaf")
.attr("transform", function(d) { return "translate(" + (d.y +10 ) + "," + d.x + ")"; })
.append("circle")
.attr("r", '3')
.style("fil", 'none');
- var outerLeaves = vis.selectAll("g.outerLeaf")
+ var outerLeaves = svgGroup.selectAll("g.outerLeaf")
.data(nodes)
.enter().append("svg:g")
.attr("class", function(n) {
if (n.children) {
return "nill";
}
else{
return "outerLeaf";
}
})
.attr("transform", function(d) { return "translate(" + (d.y+20 ) + "," + d.x + ")"; });
- vis.selectAll("g.outerLeaf")
+ svgGroup.selectAll("g.outerLeaf")
.append("svg:circle")
.attr("r", '3')
.attr('stroke', 'black')
.style("stroke-width", ".25px")
- .attr('stroke-width', '.25px')
.attr('fill', 'greenYellow')
- .attr('fill', 'black')
- .attr('stroke-width', '2px');
+ .attr('fill', 'black');
- vis.selectAll('g.root.node')
+ svgGroup.selectAll('g.root.node')
.append('svg:circle')
.attr("r", 10)
.style("fill", function(d){
if (d.name !==" "){return "d.whiteToBlack";}
})
.attr('stroke', '#369')
.attr('stroke-width', '2px');
if (!options.skipLabels){
vis.selectAll('g.inner.node')
.append("svg:text")
.attr("dx", -6)
.attr("dy", -6)
.attr("text-anchor", 'end')
.attr('font-size', '8px')
@@ -452,127 +542,149 @@
.attr("dx", 8)
.attr("dy", 3)
.attr("text-anchor", "start")
.attr('font-family', 'Helvetica Neue, Helvetica, sans-serif')
.attr('font-size', '6px')
.attr('fill', 'black')
.text(function(d) { return d.name + ' ('+d.length+')'; });
}
return {tree: tree, vis: vis};
};
d3.dendrogram.makeRadialDendrogram = function(selector, data, options) {
options = options || {};
- radius = (options.radius || 800) / 2; // Global for the legend placement. See function updateLegend.
- var cluster = d3.layout.cluster().size([360, radius - 40]);
+ radius = (options.radius || 700) / 2; // Global for the legend placement. See function updateLegend.
var tree = options.tree || d3.layout.cluster()
- .size([360, radius - 40]);
+ .size([360, radius - 45]);
var diagonal=d3.svg.diagonal.radial()
.projection(function(d){return [d.y, d.x / 180 * Math.PI];});
var vis=d3.select(selector)
.append("svg")
- .attr("width", 200+(radius * 2))
+ .attr("width", (radius * 2) + 550)
.attr("height", radius * 2)
.append("g")
- .attr("transform","translate(" + (radius + 150) + "," + radius + ")");
+ .attr("transform","translate(" + (radius) + "," + radius + ")");
+
+ var tooltip = d3.select(selector)
+ .append('div')
+ .attr('class', 'tooltip')
+ .style("opacity",0);
var legendRectSize=20;
var legendSpacing=4;
var currentLegend=-1;
- var nodes=cluster.nodes(data);
+ var nodes=tree.nodes(data);
var link=vis.selectAll("path.link")
- .data(cluster.links(nodes)).enter()
+ .data(tree.links(nodes)).enter()
.append("path")
.attr("class", "link")
.attr("fill", "none")
.attr("stroke", "#aaa")
- .attr("stroke-width", "4px")
+ .attr("stroke-width", "2px")
.attr("d", diagonal);
makeDropdownSkeleton("Dendro");//Looks for the div 'dropdown' and generates the outer list and buttons
// For the radial display the interior node color options are constant (calculated on the backend in the C code)
addNodeButton("#interiorDendroNodes" ,2, selector, "Tpm distance");
addNodeButton("#interiorDendroNodes" ,3, selector, "Square root tpm distance");
addNodeButton("#interiorDendroNodes" ,4, selector, "Quad root tpm distance");
var first = 1;
var innerNodes = vis.selectAll("g")
.data(nodes).enter()
.append("g")
.attr("class", function(n) {
if (n.children) {
return "internalNode";
}
else{
if (first){
var count = 0;
for (var key in n) {
if (n.hasOwnProperty(key)) {
if (key != "x" && key!="y" && key!= "name" && key!="kids" && key!="length" && key!="colorGroup" && key!="parent" && key!="depth" && key!="rootDist"){
- addLeafButton(key, count, 'inner', 0, '#innerDendroLeaves', '#dendrogram');
- addLeafButton(key, count, 'middle', 15, '#middleDendroLeaves', '#dendrogram');
- addLeafButton(key, count, 'outer', 30, '#outerDendroLeaves', '#dendrogram') ;
+ addLeafButton(key, count, 'inner', 5, '#innerDendroLeaves', '#dendrogram');
+ addLeafButton(key, count, 'middle', 17, '#middleDendroLeaves', '#dendrogram');
+ addLeafButton(key, count, 'outer', 29, '#outerDendroLeaves', '#dendrogram') ;
}
}
count += 1;
}
first = 0;
}
return "g.innerLeaf";
}
})
.attr("transform", function(d){return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";});
var interiorNodes = vis.selectAll("g.internalNode")
.append("circle")
+ .on("mouseover", function(d) {
+ tooltip.transition()
+ .duration(200)
+ .style("opacity", .9);
+ result = "Contributing genes: " + d.contGenes + "
";
+ for (var n in d.geneList){
+ result = result + n + " " + d.geneList[n] + "
";
+ }
+ tooltip.html(result)
+ .style("left", (d3.event.pageX + 5) + "px")
+ .style("top", (d3.event.pageY - 28) + "px");
+ })
+ .on("mouseout", function(d) {
+ tooltip.transition()
+ .duration(500)
+ .style("opacity", 0);
+ }
+ )
.attr("r", function(d){
- if (d.name==" "){return 1 + Math.sqrt(d.kids);}
+ if (d.name==" "){
+ return 1 + Math.sqrt(d.kids);}
else{return 0;}
})
.style("fill", function(d){
if (d.name==" "){return d.whiteToBlack;}
else{return "none";}})
- .style("stroke", "steelblue")
- .style("stroke-width", "1.25px");
+ .style("stroke", "black")
+ .style("stroke-width", ".25px");
var innerLeaves = vis.selectAll("g.innerLeaf")
.data(nodes).enter()
.append("g")
.attr("class", "innerLeaf")
.attr("transform",function(d){return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";});
innerLeaves.append("circle")
.attr("r", function(d){
- if (d.name !==" "){return 5;}})
+ if (d.name !==" "){return 4;}})
.style("fill", function(d){
if (d.name !==" "){return "d.whiteToBlack";}
- });
+ })
+ .attr("transform","translate(" + 5 + "," + 0 + ")");
var middleLeaves = vis.selectAll("g.middleLeaf")
.data(nodes).enter()
.append("g")
.attr("class", "middleLeaf")
- .attr("transform",function(d){return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";});
-
- middleLeaves.append("circle")
- .attr("r", 5)
- .style("fill","none")
- .attr("transform","translate(" + 15 + "," + 0 + ")");
+ .attr("transform",function(d){return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";})
+ .append("circle")
+ .attr("r", 4)
+ .style("fill","none");
var outerLeaves = vis.selectAll("g.outerLeaf")
.data(nodes).enter()
.append("g")
.attr("class", "outerLeaf")
.attr("transform",function(d){return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";})
.append("circle")
- .attr("r", 5)
+ .attr("r", 4)
.style("fill","none");
return {tree: tree, vis: vis};
};
})();