Tributary inlet

_.md

[ Launch: Tributary inlet ] 5273004 by hemulin

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

css

.node rect {
  cursor: pointer;
  fill: #fff;
  fill-opacity: .5;
  stroke: #3182BD;
  stroke-width: 1.5px;
}

.node circle {
opacity: .8;    
}

.node text {
  font: 15px sans-serif;
  pointer-events: none;
  font-weight: bold;
}

path.hiddenLink {
  fill: none;
  stroke: #426685;
  stroke-width: 2px;
}

path.shownLink {
  fill: none;
  stroke: red;
  stroke-width: 2.5px;
}

inlet.js

var data = {
							    "name": "flare",
							    "children": [
							        {
							        "name": "analytics",
							        "name": "graph",
							        "name": "optimization",
							            "children": [
							                {
							                "name": "AspectRatioBanker",
							                "size": 7074}
							          ],
							    	"name": "animate",
							        "name": "data",
							        "children": [
							            {
							            "name": "converters",
							            "children": [
							                {
							                "name": "Converters",
							                "size": 721},
							            {
							                "name": "DelimitedTextConverter",
							                "size": 4294},
							            {
							                "name": "GraphMLConverter",
							                "size": 9800},
							            {
							                "name": "IDataConverter",
							                "size": 1314},
							            {
							                "name": "JSONConverter",
							                "size": 2220}
							            ]}
							    ]}
							    ]
							};

							 var width = 600,
							      height = 300;
							 
							 var cluster = d3.layout.cluster()
							      .size([width, height-50]);
							 
							  var diagonal = d3.svg.diagonal()
							      .projection(function(d) { return [d.x, d.y]; });
							 
							 var vis = d3.select("svg").append("svg")
							     .attr("width", width)
							     .attr("height", height)
                             .append("g")
                             .attr("transform", "translate("+width/25+","+height/10+")");
							     
							   var nodes = cluster.nodes(data);

							   var node = vis.selectAll("g.node")
							       .data(nodes)
							     .enter().append("g")
							      .attr("class", "node")
							       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

								
								var links = vis.selectAll("path.link")
							       .data(cluster.links(nodes))
							     .enter().append("path")
							       .attr("class", "hiddenLink")
							       .attr("d", diagonal);
							
		
							
							   node.append("circle")
							       .attr("r", 7.5)
                               .style("fill","#51A351");
							 
							   node.append("text")
							       .attr("text-anchor", "middle")
                               .attr("dy", 3)
                               .text(function(d) { return d.name; });


function findLink(node_, child_) {
  for (var i = 0; i < links[0].length; i++) {//  console.log("source: ",links[0][i].__data__.source.name, "target: ", links[0][i].__data__.target.name);
    if (links[0][i].__data__.source.name == node_.name && links[0][i].__data__.target.name == child_.name)
      return i;
  }
  return -1;
}


function drawLink(node_, child_) {    
  var pathIndex = findLink(node_, child_);
  var pathToDraw = links[0][pathIndex];
  
  d3.select(pathToDraw).attr("class", "shownLink")
}

drawLink(nodes[2], nodes[2].children[1]);