Commits

Casey Dunn  committed 2611eeb

refactoring so that visualization is separate from loading the json

  • Participants
  • Parent commits ece5207

Comments (0)

Files changed (2)

File force/force.html

     <meta http-equiv="content-type" content="text/html;charset=utf-8">
     <title>d3.js ~ Force-Directed Graph</title>
     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.9.5"></script>
+    <script type="text/javascript" src="phyloforce.js"></script>
     
     <style type="text/css">
 
   </head>
   <body>
 
-<div class='gallery' id='chart'> </div><link href='force.css' rel='stylesheet' type='text/css' /><script src='phyloforce.js' type='text/javascript'> </script>
+<div class='gallery' id='chart'> 
+</div>
 
+<link href='force.css' rel='stylesheet' type='text/css' />
+<script>
+	tree_from_json_file( 'siphonophorae.json' )
+</script>
 
-  
-  </body>
+
+</body>
 </html>

File force/phyloforce.js

+// A phylogeny viewer built with d3js
+// Casey Dunn, Brown University
+// 
+// Based on http://mbostock.github.com/d3/ex/force.html
+
+// Initialize layout and appearance variables
 var width = 960,
-    height = 500;
+	height = 500;
 
 var color = d3.scale.category20();
 
 var force = d3.layout.force()
-    .charge(-60)
-    .linkDistance(30)
-    .size([width, height]);
+	.charge(-60)
+	.linkDistance(30)
+	.size([width, height]);
 
 var svg = d3.select("#chart").append("svg")
-    .attr("width", width)
-    .attr("height", height);
-
-d3.json("siphonophorae.json", function(json) {
-  force
-      .nodes(json.nodes)
-      .links(json.links)
-      .start();
-
-  var link = svg.selectAll("line.link")
-      .data(json.links)
-      .enter().append("line")
-      .attr("class", "link")
-      .style("stroke-width", function(d) { return Math.sqrt(d.value); });
-
-  var node = svg.selectAll("circle.node")
-      .data(json.nodes)
-      .enter().append("circle")
-      .attr("class", "node")
-      .attr("r", 5)
-      .style("fill", function(d) { return color(d.group); })
-      .call(force.drag);
-
-  node.append("title")
-      .text(function(d) { return d.name; });
-
-  force.on("tick", function() {
-    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("cx", function(d) { return d.x; })
-        .attr("cy", function(d) { return d.y; });
-  });
-});
+	.attr("width", width)
+	.attr("height", height);
+
+// Initialize tree variable
+var tree;	// Phylogeny in d3 json format with nodes and links
+
+
+function visualize() {
+	// Visualize the phylogeny stored in tree
+	
+	// document.write(tree.nodes);
+	
+	force
+		.nodes(tree.nodes)
+		.links(tree.links)
+		.start();
+
+	var link = svg.selectAll("line.link")
+		.data(tree.links)
+		.enter().append("line")
+		.attr("class", "link")
+		.style("stroke-width", function(d) { return Math.sqrt(d.value); });
+
+	var node = svg.selectAll("circle.node")
+		.data(tree.nodes)
+		.enter().append("circle")
+		.attr("class", "node")
+		.attr("r", 5)
+		.style("fill", function(d) { return color(d.group); })
+		.call(force.drag);
+
+	node.append("title")
+		.text(function(d) { return d.name; });
+
+	force.on("tick", function() {
+		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("cx", function(d) { return d.x; })
+			.attr("cy", function(d) { return d.y; });
+	});
+}
+
+function tree_from_json_file( url ){
+	// url = 'siphonophorae.json'
+	// document.write(url);
+	d3.json(url, function(json) {
+		tree = json;
+		visualize();
+	});
+	
+}