local-d3-simianviz.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Force layout</title>
		<script type="text/javascript" src="../d3-book/d3/d3.v3.js"></script>
		<style type="text/css">
			rect:hover {
				fill: red;
			}
			
			#tooltip {
				position: absolute;
				width: 450px;
				height: auto;
				padding: 10px;
				background-color: white;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				pointer-events: none;
			}
			
			#tooltip.hidden {
				display: none;
			}
			
			#tooltip p {
				margin: 0;
				font-family: sans-serif;
				font-size: 16px;
				line-height: 20px;
			}
		</style>
	</head>
	<body>
		<input id="chargebutton" type="button" value="More Charge" onclick="charge_button()" />

		<div id="tooltip" class="hidden">
			<p><span id="value">node</span></p>
		</div>
		<script type="text/javascript">
			//Dynamically grow a graph, adding nodes and edges
			//By Adrian Cockcroft @adrianco github.com/adrianco/d3grow
			//Width and height
			var w = 1200;
			var h = 700;
			//Graph data
			var dataset = {
				nodes: [],
				edges: []
			};
			var nodecount = 0;
			var charge = -200;
			//Initialize a default force layout, using the nodes and edges in dataset
			var force = d3.layout.force()
					.nodes(dataset.nodes)
					.links(dataset.edges)
					.size([w, h])
					.charge([charge]);
			force.linkDistance(function(d) {
                               return 10 + 7 * (d.source.size + d.target.size)/2;
			});
			var colors = d3.scale.category10();
			//var root;
			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
			//Every time the simulation "ticks", this will be called
			force.on("tick", function() {
				svg.selectAll("line").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; });
				svg.selectAll("circle").attr("cx", function(d) { return d.x; })
					 .attr("cy", function(d) { return d.y; });
				var k = .65;
				//root.y += (h*1/10 - root.y) * k;
				//root.x += (w*1/5 - root.x) * k;
			});
			// add a node and some edges
			var addnode = function(name) {
		                        //console.log("add node: " + name);
					dataset.nodes.push([name]);
					dataset.nodes[nodecount].size = 1;
					//root = dataset.nodes[nodecount];
					nodecount++;
			};
			var update = function() {
					console.log("update");
                        		svg.selectAll("line")
                                		.data(dataset.edges)
                                		.enter()
                                		.append("line")
                                		.style("stroke", "#ccc")
                                		.style("stroke-width", 2);
					svg.selectAll("circle")
                                		.data(dataset.nodes)
                                		.enter()
                              	 		.append("circle")
                                		.attr("r", function(d, i) {
							return Math.sqrt(d.size) * 2;
						})
                                		.style("fill", function(d, i) {
							var names = d[0].split(".")
							if (names.length < 4) {
								console.log(names)
								return colors(0)
							} else {
                                	       			return colors(names[3].length);
							}
                                		})
			  			.on("mouseover", function(d) {
						//Get this node's x/y values, then augment for the tooltip
						//var xPosition = parseFloat(d3.select(this).attr("x"));
						//var yPosition = parseFloat(d3.select(this).attr("y"));
						//Update the tooltip position and value
						d3.select("#tooltip")
						//	.style("left", xPosition + "px")
						//	.style("top", yPosition + "px")						
							.select("#value")
							.text(d);
						//Show the tooltip
						d3.select("#tooltip").classed("hidden", false);
			   			})
						.on("mouseout", function() {
						//Hide the tooltip
						d3.select("#tooltip").classed("hidden", true);
			   			})
                                		.call(force.drag);
					force.start();
			};
                        var findnode = function(nodename) {
				n = 0
                                for (; n < dataset.nodes.length; n++)
                                        if (dataset.nodes[n][0] == nodename) {
						dataset.nodes[n].size++;
                                		return dataset.nodes[n];
					}
				console.log("can't find " + nodename)
				return "";
                        }
			var addedge = function(s, t) {
				//console.log("edge between " + s + " and " + t);
				sn = findnode(s);
				tn = findnode(t);
				dataset.edges.push({ source: sn, target: tn });
			};
			function charge_button() {
				charge = charge - 20;
                                force.charge([charge]);
                                update();
                        }
                        var arch = window.location.search.substring(1);
                        if (arch == "") {
                                window.location.href = "?netflix"
                                arch = "netflix"
                        }
                        d3.json("json/" + arch + ".json", function(error, json) {
  				console.log(json.version);
				for (i = 0; i < json.graph.length; i++) {
					element = json.graph[i];
					if (element.node) {
						addnode(element.node);
					}
				}
				for (i = 0; i < json.graph.length; i++) {
                                        element = json.graph[i];
                                        if (element.edge) {
						addedge(element.source, element.target);
					}
				}
				update();
			});
		</script>
	</body>
</html>