Added a example file for what the graph visualization will look like …

…in web/force-collapsible.html . This starts issue #6. Next, I need to change the onlick function to do an ajax lookup for get the neighbors of the next node.
cegme · Sep 5, 2012 · 75a2b1a · 75a2b1a
1 parent 62eadf1
commit 75a2b1a
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 1 deletion.
diff --git a/web/d3.v2.min.js b/web/d3.v2.min.js
diff --git a/web/force-collapsible.html b/web/force-collapsible.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Force-Directed Graph</title>
+    <script type="text/javascript" src="d3.v2.min.js"></script>
+    <style type="text/css">
+
+circle.node {
+  cursor: pointer;
+  stroke: #000;
+  stroke-width: .5px;
+}
+
+line.link {
+  fill: none;
+  stroke: #9ecae1;
+  stroke-width: 1.5px;
+}
+
+    </style>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript">
+
+var width = 960,
+    height = 500,
+    node,
+    link,
+    root;
+
+var force = d3.layout.force()
+    .on("tick", tick)
+    .charge(function(d) { return d._children ? -d.size / 100 : -30; })
+    .linkDistance(function(d) { return d.target._children ? 80 : 30; })
+    .size([width, height]);
+
+var vis = d3.select("#chart").append("svg")
+    .attr("width", width)
+    .attr("height", height);
+
+/*d3.json("../data/flare.json", function(json) {
+  root = json;
+  root.fixed = true;
+  root.x = width / 2;
+  root.y = height / 2;
+  update();
+});*/
+
+d3.json("http://localhost/grisham/web/query.php?type=d3_citations&q=24", function(json) {
+  root = json;
+  root.fixed = true;
+  root.x = width / 2;
+  root.y = height / 2;
+  update();
+});
+
+
+
+
+function update() {
+  var nodes = flatten(root),
+      links = d3.layout.tree().links(nodes);
+
+  // Restart the force layout.
+  force
+      .nodes(nodes)
+      .links(links)
+      .start();
+
+  // Update the links…
+  link = vis.selectAll("line.link")
+      .data(links, function(d) { return d.target.id; });
+
+  // Enter any new links.
+  link.enter().insert("line", ".node")
+      .attr("class", "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; });
+
+  // Exit any old links.
+  link.exit().remove();
+
+  // Update the nodes…
+  node = vis.selectAll("circle.node")
+      .data(nodes, function(d) { return d.id; })
+      .style("fill", color);
+
+  node.transition()
+      .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; });
+
+  // Enter any new nodes.
+  node.enter().append("circle")
+      .attr("class", "node")
+      .attr("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; })
+      .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; })
+      .style("fill", color)
+      .on("click", click)
+      .call(force.drag);
+
+  // Exit any old nodes.
+  node.exit().remove();
+}
+
+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("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; });
+}
+
+// Color leaf nodes orange, and packages white or blue.
+function color(d) {
+  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
+}
+
+// Toggle children on click.
+function click(d) {
+  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.size = node.children.reduce(function(p, v) { return p + recurse(v); }, 0);
+    if (!node.id) node.id = ++i;
+    nodes.push(node);
+    return node.size;
+  }
+
+  root.size = recurse(root);
+  return nodes;
+}
+
+    </script>
+  </body>
+</html>
diff --git a/web/index.php b/web/index.php
@@ -155,7 +155,6 @@
 
 		<script type="text/javascript">
 
-
 // Code for the sliders
 <?php
 // This is a slider template, it takes an integer for topic id starting at 1

diff --git a/web/query.php b/web/query.php
@@ -432,6 +432,83 @@
 	// Close the connection
 	pg_close($dbconn);
 
+}
+else if(isset($_GET['q']) && isset($_GET['type']) && $_GET['type'] == "d3_citations") {
+	// Return the d3_citations according to the q=paperid	
+	// This changes the json format so that it can be read as a graph by d3
+	// This means a format of {"name": "", "size": "", "children" : [] }
+	header('Content-type: application/json');
+
+	$dbconn = pg_connect("host=128.227.176.46 dbname=dblp user=john password=madden options='--client_encoding=UTF8'") or die('Could not connect: ' . pg_last_error());
+
+	// Decode query
+	$pid = rawurldecode($_GET['q']);
+
+	$query = "SELECT p.id AS pid, p.papertitle AS title, p.pubyear AS year, p.venue AS venue, p.abstract AS abstract ".
+				", (SELECT topic_distribution FROM theta AS t WHERE t.pid = p.id LIMIT 1) AS topic ".
+				"FROM reference AS r INNER JOIN paper AS p ON (r.citation = p.id) ".
+				"WHERE r.pid = $pid ";
+
+	// Add LIMIT and OFFSET to the query if present
+	if(isset($_GET['limit']))
+		$thelimit = rawurldecode($_GET['limit']); 
+	else
+		$thelimit = 50;
+
+	$query = $query . " LIMIT $thelimit ";
+
+	if(isset($_GET['offset']))
+		$theoffset = rawurldecode($_GET['offset']);
+	else
+		$theoffset = 0;
+
+	$query = $query . " OFFSET $theoffset";
+
+	// END THE QUERY
+	$query = $query . ";";
+
+	// Make a query to the DB
+	list($tic_usec, $tic_sec) = explode(" ", microtime());
+	$result = pg_query($query) or die('Query failed: ' . pg_last_error());
+	list($toc_usec, $toc_sec) = explode(" ", microtime());
+
+	$querytime = $toc_sec + $toc_usec - ($tic_sec + $tic_usec); // Query time
+
+	// Iterate over results
+	$rows = array();
+	while ($line = pg_fetch_array($result, null, PGSQL_ASSOC)) {
+		$line["name"] = $line["pid"]; // This adds a duplicate field but it is ok
+		$line["size"] = 10000;
+		$rows[] = $line;
+	}
+
+	$graph = array();
+	$graph["q"] = urldecode($query);
+	$graph["querytime"] = $querytime;
+	$graph["rowcount"] = pg_num_rows($result);
+
+	if ($graph["rowcount"] > 0) {
+		$graph["headers"] = array_keys($rows[0]);
+	}
+	else {
+		// Some default header for no result
+		$graph["headers"] = array(0 => 100, "color" => "red"); 
+	}
+
+	$graph["name"] = $pid;
+	$graph["size"] = 5000;
+	$graph["children"] = $rows;
+
+	// Show the json result
+	print json_encode($graph); 
+	//print json_encode($rows); 
+
+	// Free the result set
+	pg_free_result($result);
+
+	// Close the connection
+	pg_close($dbconn);
+
 }
 else {
     //header('Content-type: text/plain');
-Original file line number
+Diff line change
@@ Expand Up / @@ -155,7 +155,6 @@ @@
     		<script type="text/javascript">
     // Code for the sliders
     <?php
     // This is a slider template, it takes an integer for topic id starting at 1
@@ Expand Down @@