Linked Force Layout & Icicle Diagram

Built with blockbuilder.org

forked from EoinMGB's block: Linked Force Layout & Icicle Diagram

<!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;

</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)'
								}
								})
	  
	  
}

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>

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

https://d3js.org/d3.v3.min.js