app-mpt/app/www/dendrogram.js

/* based on https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd */
Shiny.addCustomMessageHandler("dendrogram_values", function(message) {

    var dataset = message;
    var bardata = message.n;

    // Set the dimensions and margins of the diagram
    var margin = {top: 20, right: 90, bottom: 30, left: 90},
	width = (window.innerWidth * 0.9) - margin.left - margin.right,
	height = (window.innerHeight * 0.9) - margin.top - margin.bottom;

    // scales for barchart
    var xScale = d3.scaleBand()
	.domain(d3.range(bardata.length))
	.range([0, width * 0.4])
	.paddingInner(0.5);

    var yScale = d3.scaleLinear()
	.domain([0, d3.max(bardata)])
	.range([0, 15]);

    // append the svg object to the area reserved for the dendrogram
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var dendrogram_plot = d3.select("#dendrogram_area").append("svg")
	.attr("width", width + margin.right + margin.left)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate("
              + margin.left + "," + margin.top + ")");

    var i = 0,
	duration = 750,
	root;

    // declares a tree layout and assigns the size
    var dendrogram = d3.cluster().size([height, width * 0.4]);

    // Assigns parent, children, height, depth
    root = d3.hierarchy(dataset, function(d) { return d.children; });
    root.x0 = height / 2;
    root.y0 = 0;

    // Collapse after the second level
    root.children.forEach(collapse);

    update(root);

    //By default show bars only on last level
    hideBars(root);

    // Collapse the node and all it's children
    function collapse(d) {
	if(d.children) {
	    d._children = d.children;
	    d._children.forEach(collapse);
	    d.children = null;
	}
    }

    function update(source) {

	// Assigns the x and y position for the nodes
	var dataset = dendrogram(root);

	// Compute the new tree layout.
	var nodes = dataset.descendants(),
	    links = dataset.descendants().slice(1);

	// ****************** Nodes section ***************************

	// Update the nodes...
	var node = dendrogram_plot.selectAll('g.node')
	    .data(nodes, function(d) {return d.id || (d.id = ++i); });

	// Enter any new modes at the parent's previous position.
	var nodeEnter = node.enter().append('g')
	    .attr('class', 'node')
	    .attr('id', function(d) {
		return "node-" + (d.id -1);
	    })
	    .attr("transform", function(d) {
		return "translate(" + source.y0 + "," + source.x0 + ")";
	    })
	    .on('click', click);

	// Add Circle for the nodes
	nodeEnter.append('circle')
	    .attr('class', 'node')
	    .attr('r', 1e-6)
	    .style("fill", function(d) {
		return d._children ? "lightsteelblue" : "#fff";
	    });

	// Add labels for the nodes
	nodeEnter.append('text')
	    .attr("dy", ".35em")
	    .attr("x", function(d) {
		//return d.children || d._children ? -13 : 13;
		return -13;
	    })
	    .attr("text-anchor", function(d) {
		//return d.children || d._children ? "end" : "start";
		return "end";
	    })
	    .text(function(d) { return d.data.name; });

	// Add barcharts to nodes
	nodeEnter.selectAll("rect")
	    .data(bardata)
	    .enter()
	    .append("rect")
	    .classed("bars", true)
	    .attr("x", function(d, i) {
		return 13 + xScale(i);
	    })
	    .attr("y", function(d) {
		return 13 -yScale(d);
	    })
	    .attr("width", xScale.bandwidth())
	    .attr("height", function(d) {
		return yScale(d);
	    })
	    .attr("fill", function(d) {
		return "rgb(0, 0, " + Math.round(d * 10) + ")";
	    });

	// UPDATE
	var nodeUpdate = nodeEnter.merge(node);

	// Transition to the proper position for the node
	nodeUpdate.transition()
	    .duration(duration)
	    .attr("transform", function(d) {
		return "translate(" + d.y + "," + d.x + ")";
	    });

	// Update the node attributes and style
	nodeUpdate.select('circle.node')
	    .attr('r', 10)
	    .style("fill", function(d) {
		return d._children ? "lightsteelblue" : "#fff";
	    })
	    .attr('cursor', 'pointer');


	// Remove any exiting nodes
	var nodeExit = node.exit().transition()
	    .duration(duration)
	    .attr("transform", function(d) {
		return "translate(" + source.y + "," + source.x + ")";
	    })
	    .remove();

	// On exit reduce the node circles size to 0
	nodeExit.select('circle')
	    .attr('r', 1e-6);

	// On exit reduce the opacity of text labels
	nodeExit.select('text')
	    .style('fill-opacity', 1e-6);

	// ****************** links section ***************************

	// Update the links...
	var link = dendrogram_plot.selectAll('path.link')
	    .data(links, function(d) { return d.id; });

	// Enter any new links at the parent's previous position.
	var linkEnter = link.enter().insert('path', "g")
	    .attr("class", "link")
	    .attr('d', function(d){
		var o = {x: source.x0, y: source.y0};
		return diagonal(o, o);
	    });

	// UPDATE
	var linkUpdate = linkEnter.merge(link);

	// Transition back to the parent element position
	linkUpdate.transition()
	    .duration(duration)
	    .attr('d', function(d){ return diagonal(d, d.parent); });

	// Remove any exiting links
	var linkExit = link.exit().transition()
	    .duration(duration)
	    .attr('d', function(d) {
		var o = {x: source.x, y: source.y};
		return diagonal(o, o);
	    })
	    .remove();

	// Store the old positions for transition.
	nodes.forEach(function(d){
	    d.x0 = d.x;
	    d.y0 = d.y;
	});

	// Creates a curved (diagonal) path from parent to the child nodes
	function diagonal(s, d) {

	    path = `M ${s.y} ${s.x}
            C ${(s.y + d.y) / 2} ${s.x},
              ${(s.y + d.y) / 2} ${d.x},
              ${d.y} ${d.x}`;

	    return path;
	}

	// Toggle children on click.
	function click(d) {
	    //has children, so close them
	    if (d.children) {
		d._children = d.children;
		d.children = null;
		update(d);
		//toggleBars(d);
	    } else {
		//dont have children, so open them
		d.children = d._children;
		d._children = null;
		update(d);
		//toggleBars(d);
	    }
	    //update(d);
	    toggleBars(d);
	}
    }

    function showBars(d) {
	dendrogram_plot.selectAll("#node-" + (d.id -1) + " .bars")
	    .attr("fill", function(d) {
		return "rgb(0, 0, " + Math.round(d * 10) + ")";
	    });
    }

    function hideBars(d) {
	dendrogram_plot.selectAll("#node-" + (d.id -1) + " .bars")
	    .attr("fill", "none");
    }

    function toggleBars(d) {
	// show bars only on last level
	if (d.children) {
	    console.log("selecting #node-" + (d.id -1) + " .bars");
	    dendrogram_plot.selectAll("#node-" + (d.id -1) + " .bars")
		.attr("fill", "none");

	    d.children.forEach(toggleBars);
	} else {
	    console.log("selecting #node-" + (d.id -1) + " .bars");
	    dendrogram_plot.selectAll("#node-" + (d.id -1) + " .bars")
		.attr("fill", function(d) {
		    return "rgb(0, 0, " + Math.round(d * 10) + ")";
		});
	}
    }

});