");
-
+ outerDropdown.append("button")
+ .attr("id", "outerDropdown")
+ .attr("class","btn btn-default dropdown-toggle")
+ .attr("type", "button")
+ .attr("data-toggle","dropdown")
+ .html("Outer ring")
+ .append("span")
+ .attr("class","caret");
+
+ outerDropdown.append("ul")
+ .attr("class","dropdown-menu")
+ .html("
");
};
// This function generates the cartesian dendrogram (flat).
d3.dendrogram.makeCartesianDendrogram =function (selector, data, options) {
function zoom() {
svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
options = options || {};
// define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
var zoomListener = d3.behavior.zoom().scaleExtent([0.01, 10])
.on("zoom", zoom);
var w = options.width || d3.select(selector).style('width') || d3.select(selector).attr('width'),
@@ -468,48 +620,48 @@
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))
{
if (key != "x" && key!="y" && key!= "name" && key!="kids" && key!="length" && key!="colorGroup" && key!="parent" && key!="depth" && key!="rootDist")
{
- addLeafButton(key, count, 'inner', 0, '#innerPhyloLeaves', '#phylogram') ;
- addLeafButton(key, count, 'middle', 0, '#middlePhyloLeaves', '#phylogram');
- addLeafButton(key, count, 'outer', 0, '#outerPhyloLeaves', '#phylogram');
+ addLeafButton(key, count, 'inner', 0, '#innerPhyloLeaves', '#phylogram', 0) ;
+ addLeafButton(key, count, 'middle', 0, '#middlePhyloLeaves', '#phylogram', 0);
+ addLeafButton(key, count, 'outer', 0, '#outerPhyloLeaves', '#phylogram', 0);
}
}
count += 1;
}
first = 0;
}
return "innerLeaf";
}
})
.attr("transform", function(d) { return "translate(" + (d.y) + "," + (d.x) + ")"; });
var innerLeaves = svgGroup.selectAll("g.innerLeaf")
.append("circle")
.attr("r", '3')
- .style("fil", 'none');
+ .style("fill", 'none');
var middleLeaves = svgGroup.selectAll("g.middleLeaf")
.data(nodes)
.enter().append("svg:g")
.attr("class", function(n) {
if (n.children) {
return "nill";
}
else{
return "middleLeaf";
}
});
svgGroup.selectAll("g.middleLeaf")
.attr("transform", function(d) { return "translate(" + (d.y +10 ) + "," + d.x + ")"; })
@@ -575,66 +727,74 @@
d3.dendrogram.makeRadialDendrogram = function(selector, data, options) {
function zoom() {
svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
options = options || {};
var viewerWidth = $(document).width(); // Scale to fit.
var viewerHeight = $(document).height(); // Scale to fit.
var calc = Math.min(viewerWidth, viewerHeight);
radius = (calc -50)/ 2; // Global for the legend placement. See function updateLegend.
var tree = options.tree || d3.layout.cluster()
- .size([360, radius - 45]);
+ .size([360, radius - 45])
+ .separation(function separation(a, b) {
+ return (a.parent == b.parent ? 1 : 1) ; // Evenly place leaf nodes
+ });
- var zoomListener = d3.behavior.zoom().scaleExtent([1, 6])
+ var zoomListener = d3.behavior.zoom().scaleExtent([1, 10]) // Let the user zoom up to 10x
.on("zoom", zoom);
- var diagonal=d3.svg.diagonal.radial()
- .projection(function(d){return [d.y, d.x / 180 * Math.PI];});
+ var diagonal = options.diagonal || d3.dendrogram.radialRightAngleDiagonal(); // Makes links right angled.
+
+ var scaling = options.scaling || 1;
var width = viewerWidth -25,
height = viewerHeight - 50;
- var metaHorz = (viewerWidth)/8,
- metaVert = 6*(viewerHeight)/8;
+ var metaHorz = (viewerWidth)/20,
+ metaVert = 1*(viewerHeight)/2;
var vis = options.vis || d3.select(selector)
+ .attr("style", "display:inline-flex")
.append("svg")
.attr("width", 3*width/5 )
.attr("height", height)
.attr("class", "overlay")
.call(zoomListener);
var legendVis = options.vis || d3.select(selector)
.append("svg")
+ .style("background","rgb(239,239,239)")
.attr("class", "legendSvg")
.attr("width", 2*width/5)
.attr("height", height);
+ // Append a rectangle to the page for the dendrogram, let it take up 2/3 the width
vis.append ("rect")
.attr("width", 3*width/5)
.attr("height", height)
.style("fill", "none")
.style("stroke","black")
.style("stroke-width","5")
.style("opacity","0.5");
+ // Append a rectangle to the page for the legends, let it take up 1/3 the width
legendVis.append ("rect")
.attr("width", 2*width/5)
.attr("height", height)
.style("fill", "none")
.style("stroke","black")
.style("stroke-width","5")
.style("opacity","0.5");
legendVis.append("g");
var svgGroup = vis.append("g")
.attr("transform","translate(" + (radius) + "," + radius + ")");
d3.select("svg").on("wheel.zoom",null);
d3.select("svg").on("mousewheel.zoom",null);
@@ -643,218 +803,253 @@
.append('div')
.attr('class', 'tooltip')
.style("opacity",0);
var legendRectSize=20;
var legendSpacing=4;
var currentLegend=-1;
var nodes=tree.nodes(data);
var link=svgGroup.selectAll("path.link")
.data(tree.links(nodes)).enter()
.append("path")
.attr("class", "link")
.attr("fill", "none")
.attr("stroke", "black")
- .attr("stroke-width", ".1px")
+ .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)
- addLeafButton("Remove ring", -1, 'inner', 10, '#innerDendroLeaves', '#dendrogram');
- addLeafButton("Remove ring", -1, 'middle', 15, '#middleDendroLeaves', '#dendrogram');
- addLeafButton("Remove ring", -1, 'outer', 20, '#outerDendroLeaves', '#dendrogram') ;
- addLeafButton("Distance", 1, 'inner', 10, '#innerDendroLeaves', '#dendrogram');
- addLeafButton("Distance", 1, 'middle', 15, '#middleDendroLeaves', '#dendrogram');
- addLeafButton("Distance", 1, 'outer', 20, '#outerDendroLeaves', '#dendrogram') ;
-
- addNodeButton("#interiorDendroNodes" ,2, selector, "Tpm distance");
- addNodeButton("#interiorDendroNodes" ,3, selector, "Square root tpm distance");
- addNodeButton("#interiorDendroNodes" ,4, selector, "Quad root tpm distance");
- addNodeButton("#interiorDendroNodes" ,5, selector, "Make nodes smaller");
+ addNodeButton("#interiorDendroNodes" ,2, selector, "Node size: sqrt(kids)");
+ addNodeButton("#interiorDendroNodes" ,3, selector, "Node size: small");
+ addNodeButton("#interiorDendroNodes" ,4, selector, "Node size: normal");
+ addNodeButton("#interiorDendroNodes" ,5, selector, "Node size: large");
+ addNodeButton("#interiorDendroNodes" ,6, selector, "Link width: thin");
+ addNodeButton("#interiorDendroNodes" ,7, selector, "Link width: normal");
+ addNodeButton("#interiorDendroNodes" ,8, selector, "Link width: thick");
var first = 1;
-
+ var leafCount;
// These are true nodes in the sense that they are actually calculated and defined,
// however this code is not repsonsible for the actual visuale representation. This
// block only handles the backend DOM construction, the shapes and colors are assigned later.
+ var innerOffset, middleOffset, outerOffset, rawOffset;
+ var inR=6, midR=13, outR=20;
+
+
var trueNodes = svgGroup.selectAll("g")
.data(nodes).enter()
.append("g")
.attr("class", function(n) {
+ if (n.depth===0){
+ leafCount = n.kids;
+ rawOffset = Math.PI*2*(radius)/(parseInt(leafCount)*3);
+ innerOffset = Math.PI*2*(radius+inR)/(parseInt((leafCount*(scaling))*2));
+ middleOffset = Math.PI*2*(radius+midR)/(parseInt((leafCount*(scaling))*2));
+ outerOffset = Math.PI*2*(radius+outR)/(parseInt((leafCount*(scaling))*2));
+ addLeafButton("Distance", 1, 'inner', inR, '#innerDendroLeaves', '#dendrogram', innerOffset);
+ addLeafButton("Distance", 1, 'middle', midR, '#middleDendroLeaves', '#dendrogram', middleOffset);
+ addLeafButton("Distance", 1, 'outer', outR, '#outerDendroLeaves', '#dendrogram', outerOffset) ;
+ }
if (n.children) {
return "internalNode";
}
else{
if (first){
var count = 0;
for (var key in n) {
if (n.hasOwnProperty(key)) {
// Give each dropdown button a bunch of options.
if (key != "x" && key!="y" && key!= "name" && key!="kids" && key!="length" && key!="colorGroup" && key!="parent" && key!="depth" && key!="rootDist"){
- addLeafButton(key, count, 'inner', 10, '#innerDendroLeaves', '#dendrogram');
- addLeafButton(key, count, 'middle', 15, '#middleDendroLeaves', '#dendrogram');
- addLeafButton(key, count, 'outer', 20, '#outerDendroLeaves', '#dendrogram') ;
+ addLeafButton(capitalizeFirstLetter(key), count, 'inner', inR, '#innerDendroLeaves', '#dendrogram', innerOffset);
+ addLeafButton(capitalizeFirstLetter(key), count, 'middle', midR, '#middleDendroLeaves', '#dendrogram', middleOffset);
+ addLeafButton(capitalizeFirstLetter(key), count, 'outer', outR, '#outerDendroLeaves', '#dendrogram', outerOffset);
}
}
count += 1;
}
first = 0;
}
return "leaf";
}
})
.attr("transform", function(d){return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";});
-
+ function makePoints(n, k)
+ // Calculate the points for the polygon's. The Y value is automatically cast to 5, ie it will be 5
+ // pixels long. K is assumed to be the big end, while n is assumed to be the little end.
+ {
+ var point1, point2, point4;
+ point1 = (String((k-n)/2) + ",0").replace(" ", "");
+ point2 = (String((k+n)/2) + ",0").replace(" ", "");
+ point4 = (String(k) + ",7").replace(" ", "");
+ return(point2 + " " + point1 + " 0,7 " + point4);
+ }
// This section handles the internal node visual representation, including the node initial size/color
// and the tooltips (on click visualizations)
var filled = 1;
var prevSel, prevSel2;
var interiorNodes = svgGroup.selectAll("g.internalNode")
.append("circle")
.attr("r", function(d){ // Handle node size
if (d.name==" "){
- return 1 + Math.sqrt(d.kids);}
+ return Math.sqrt(d.kids-1);}
else{return 0;}
})
.style("fill", function(d){ // Handle node color
if (d.name==" "){return d.whiteToBlack;}
else{return "none";}})
.on("click", function(d) { // Tooltip stuffs
d3.select(this).style("fill", "red");
if (filled == 2) {
+ if (d3.select(this) != prevSel && d3.select(this) != prevSel2 && d != prevSel && d != prevSel2)
+ {
if (prevSel2.name==" "){prevSel.style("fill", prevSel2.whiteToBlack);}
else{prevSel.style("fill", "white");}
}
+ }
tooltip.transition()
.duration(200)
.style("opacity", 0.9);
result = "
"; // Make the tooltip a table, the first section is the basic meta data
count = 1;
- result = result +"| Node meta data | ";
+ result = result +"
| Node meta data | ";
for (var key in d) {
if (d.hasOwnProperty(key)) {
if (key == "number" || key == "rootDist" || key == "kids" || key == "tpmDistance" || key == "length" || key == "contGenes" || key == "normalizedDistance" || key == "depth")
{
if (count == 1){
count = 2;
- result = result +"
| " + key + " | " + d[key] + " | ";
+ result = result +"
| " + (key)+ " | " + (d[key]) + " | ";
}
else{
count = 1;
- result = result +"" + key + " | " + d[key] + " |
";
+ result = result +"" + (key) + " | " + (d[key]) + " | ";
}
}
}
}
count = 1;
// This section handles the tooltip representation for the top contributing genes.
- result = result +"| Top 10 contributing genes | TPM value contributed | ";
+ result = result +"
| Top 10 contributing genes | TPM value contributed | ";
for (var n in d.geneList){
if (count == 1){
count = 2;
- result = result +"
| " + n + " | " + d.geneList[n] + " | ";
+ result = result +"
| " + n + " | " + d.geneList[n] + " | ";
}
else{
count = 1;
- result = result +"" + n + " | " + d.geneList[n] + " |
";
+ result = result +"" + n + " | " + d.geneList[n] + " | ";
}
}
result = result + "";
count = 1;
- result = result +"| Leaf meta data | ";
+ result = result +"
| Leaf meta data | ";
for (var key in d) {
if (d.hasOwnProperty(key)) {
if (key != "x" && key!="y" && key!="kids" && key!="colorGroup" && key!="parent")
{
var sub1 = key, sub2 = d[key];
- if (typeof key === 'string' && key.length > 20)
+ if (typeof key === 'string' && key.length > 12)
{
- sub1 = key.substring(0,19)+"...";
+ sub1 = capitalizeFirstLetter(key.substring(0,10)+"...");
}
if (typeof d[key] === 'string' && d[key].length > 20)
{
- sub2 = d[key].substring(0,19)+"...";
+ sub2 = capitalizeFirstLetter(d[key].substring(0,19)+"...");
}
if (count == 1){
count = 2;
- result = result +"
| " + sub1 + " | " + sub2 + " | ";
+ result = result +"
| " + sub1 + " | " + sub2 + " | ";
}
else{
count = 1;
- result = result +"" + sub1 + " | " + sub2 + " |
";
+ result = result +"" + sub1 + " | " + sub2 + " | ";
}
}
}
}
result = result + "