D3 Examples - Linked Force Layout & Icicle Diagram

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
rect {
  stroke: #fff;
}
​
.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}
​
.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: pointer
}
​
body{
    font-family: Sans-Serif
}
​
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var path = ["home"];
var width = ($(document).width()-50)/2;
    height = ($( document ).height()-50);
​
var x = d3.scale.linear()
    .range([0, width]);
​
var y = d3.scale.linear()
    .range([0, height]);
​
​
    
var color = d3.scale.category20c();
var colors = {"home":"red", "card":"green", "mortgage":"orange", "car":"purple"};
​
var partition = d3.layout.partition()
    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; });
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
var rect = svg.selectAll("rect");
​
d3.json("icicles.json", function(error, root) {
  if (error) throw error;
​
  rect = rect
      .data(partition(d3.entries(root)[0]))
    .enter().append("rect")
    .attr("id", function(d){return "rect_" + d.key})
    .attr("class", function(d){return d.key})
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .attr("width", function(d) { return x(d.dx); })
      .attr("height", function(d) { return y(d.dy); })
      .attr("fill", function(d) { if(d.key == "end"){
                                            return "white"
                                        }
                                    
                                        else{
                                            if(d.key == 'all'){
                                                return 'rgb(255, 148, 42)'
                                                }
                                        
                                        else{
                                            return 'rgb(174, 199, 232)'
                                        }
                                        }
                                })
      .on("click", clicked)
​
    current_location = "all"  
      
//TOOL TIP____________________________________________________________________ -->
var tooltip=d3.select("body").append("div")
.style("position","absolute")
.style("padding","0px")
.style("opacity","0")
.style("background", "white")
.style("border", "2px;")
.style("text-align","center")
.style("vertical-align","middle")
.style("padding","10px")
.attr("id", "tooltip");
​
      
      
      
      
    rect
    .on("mousemove", function(d){
            tooltip
            .html( function(){
                        if(d.parent){
                            return "<strong>" + d.key + "</strong>"+"<br/>" + d.value + "<br/>" + Math.round( d.value/d.parent.value*100 * 10 ) / 10 + "% of previous page"}
                    else{
                        return "<strong>" + d.key + "</strong>"
                    }
                    })
            .style("opacity", 1)
                    .style("left", function(){
                                        return(d3.event.pageX+30)+"px"
                                    })
                    .style("top", (d3.event.pageY-20)+"px")
    })
    .on("mouseout", function(){
        tooltip
            .style("opacity", 0)
            .style("left", "-100px")
            .style("top", "-100px")
    
    })  
      
    
​
      
});
var num = 0;
​
​
function allDescendants (node) {
    path.unshift(node.key);
    if(node.children){
        for (var i = 0; i < node.children.length; i++) {
          var child = node.children[i];
          path.unshift(child.key);
          allDescendants(child);
          
        }
    }
}
​
function clicked(d) {
    if(d.key != "end"){
      x.domain([d.x, d.x + d.dx]);
      y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);
    console.log("#node_" + current_location)
    console.log("#rect_" + current_location)
    d3.select("#rect_" + current_location).attr("fill", "rgb(174, 199, 232)");
    d3.select("#node_" + current_location).attr("fill", "rgb(174, 199, 232)");
    d3.select("#node_" + current_location).attr("r", 2);
    current_location = d.key
    d3.select("#rect_" + current_location).attr("fill", "rgb(255, 148, 42)"); //turn orange
    d3.select("#node_" + current_location).attr("fill", "rgb(255, 148, 42)"); //turn orange
    d3.select("#node_" + current_location).attr("r", 5);
    
      rect.transition()
          .duration(750)
          .attr("x", function(d) { return x(d.x); })
          .attr("y", function(d) { return y(d.y); })
          .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
          .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
           
      var current = d;
      path = [];
      
      allDescendants(current);
      
      //console.log(path);
      
      hide_nodes();
  }
}
​
​
​
​
    
​
​
​
​
</script>
​
<script>
​
var width = ($(document).width()-100)/2,
    height = ($(document).height()-50),
    root;
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("stroke", "#999")
    .attr("stroke-opacity", 0.6);   
    
var force = d3.layout.force()
    .linkDistance(5)
    .charge(-5)
    .gravity(.10)
    .size([width, height])
    .on("tick", tick)
    ;
​
​
​
var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");
​
d3.json("nodes.json", function(error, json) {
  if (error) throw error;
​
  root = json;
  update();
});
​
function update() {
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);
​
  // Restart the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start()
      ;
​
  // Update links.
  link = link.data(links, function(d) { return d.target.id; });
​
  link.exit().remove();
​
  link.enter().insert("line", ".node")
      .attr("class", "link");
​
  // Update nodes.
  node = node.data(nodes, function(d) { return d.id; });
​
  node.exit().remove();
​
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      //.on("click", click)
      .call(force.drag);
​
  nodeEnter.append("circle")
        .attr("id", function(d){return 'node_' + d.name})
      .attr("r", function(d){
                            if(d.name == "all"){
                                return 5
                            }
                            else{
                                return 2
                            }
                            })
        .on("click", node_clicked);;
​
  
​
  node.select("circle")
      .attr("fill", function(d) { 
                                if(d.name == 'all'){
                                    return 'rgb(255, 148, 42)'
                                }
                                else{
                                    return 'rgb(174, 199, 232)'
                                }
                                })
      
      
}
​
function tick() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
​
  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
​
function color(d) {
  return d._children ? "#3182bd" // collapsed package
      : d.children ? "#c6dbef" // expanded package
      : "#fd8d3c"; // leaf node
}
​
// Toggle children on click.
function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  //update();
}
​
// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;
​
  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }
​
  recurse(root);
  return nodes;
}
​
function hide_nodes(){
  // Fade all the segments.
  node.style("opacity", 0.2);
  link.style("opacity", 0.2);
​
  // Then highlight only those that are an ancestor of the current segment.
  node.filter(function(d) {
                return (path.indexOf(d.name) >= 0);
              })
      .style("opacity", 1);
      node.filter(function(d) {
                return (path.indexOf(d.name) >= 0);
              })
      .style("opacity", 1);
  link.filter(function(d) {
                return (path.indexOf(d.name) >= 0);
              })
      .style("opacity", 1);
      link.filter(function(d) {
                return (path.indexOf(d.source.name) >= 0);
              })
      .style("opacity", 1);
}
​
function node_clicked(d) {
    clicked(d3.select("#rect_"+d.name).data()[0]);
    
}
​
</script>
    