summaryrefslogtreecommitdiff
path: root/gstudio/templates/gstudio/graph1.html
diff options
context:
space:
mode:
authorgnowgi <nagarjun@gnowledge.org>2012-03-15 16:19:20 +0530
committergnowgi <nagarjun@gnowledge.org>2012-03-15 16:19:20 +0530
commit7a4f561e851fdc7246d804c3abb6748b8a4199a6 (patch)
treed2afc3463fd49625a9be482012f5c3bfcf7c42b9 /gstudio/templates/gstudio/graph1.html
downloadgnowsys-7a4f561e851fdc7246d804c3abb6748b8a4199a6.tar.gz
master trunk of gnowsys-studio
Diffstat (limited to 'gstudio/templates/gstudio/graph1.html')
-rw-r--r--gstudio/templates/gstudio/graph1.html347
1 files changed, 347 insertions, 0 deletions
diff --git a/gstudio/templates/gstudio/graph1.html b/gstudio/templates/gstudio/graph1.html
new file mode 100644
index 0000000..587b703
--- /dev/null
+++ b/gstudio/templates/gstudio/graph1.html
@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html;charset=utf-8">
+ <title>Objecttype Force-Directed Graph</title>
+
+ <link rel="stylesheet" href="/static/gstudio/css/jquery-ui.css" type="text/css" media="all">
+
+ <style type="text/css">
+ .link {
+ stroke : #ccc;
+ }
+
+ .nodetext {
+ pointer-events : none;
+ font : 10px sans-serif;
+ }
+
+ .node {
+ border-width : 1px;
+ border-color : gray;
+ }
+ body {
+ background-color:white;
+ }
+
+ #chart {
+ height: 90%;
+ margin: 0 auto;
+ width: 90%;
+ }
+
+ svg {
+ margin-left: 10%;
+ margin-right: 10%;
+ display: block;
+ position:absolute;
+ }
+
+
+ </style>
+
+
+</head>
+
+
+<body marginwidth="0" marginheight="0">
+<div class="body" >
+ <div class="content">
+
+ <!--
+ <div id="relation_type" class="ui-buttonset">
+ <span>Relation type:</span>
+ <input checked="checked" value="follows" type="radio" id="follows" name="radio" class="ui-helper-hidden-accessible"><label for="follows" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" aria-pressed="false" role="button" aria-disabled="false"><span class="ui-button-text">Followers</span></label>
+ <input value="mentions" type="radio" id="mentions" name="radio" class="ui-helper-hidden-accessible"><label for="mentions" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active" role="button" aria-disabled="false"><span class="ui-button-text">Mentions</span></label>
+ <input value="hashtags" type="radio" id="hashtags" name="radio"/><label for="hashtags">Shared interests</label>
+ </div>
+ -->
+ <div id="chart"><svg width="960" height="700" style="opacity: 1; ">
+ </div>
+
+
+ <script type="text/javascript" src="/static/gstudio/js/jquery.min.js" ></script>
+ <script type="text/javascript" src="/static/gstudio/js/jquery-ui.js" ></script>
+
+ <script type="text/javascript" src="/static/gstudio/js/underscore.js" ></script>
+
+ <script type="text/javascript" src="/static/gstudio/js/d3.js"></script>
+ <script type="text/javascript" src="/static/gstudio/js/d3.layout.js"></script>
+ <script type="text/javascript" src="/static/gstudio/js/d3.geom.js"></script>
+<!-- <script type="text/javascript" src="/static/gstudio/js/force.js"></script>
+
+Javascript for Object type force graph
+-->
+ <script type="text/javascript" >
+
+ var w = 960,
+ h = 700,
+ fill = d3.scale.category20();
+
+ var vis = d3.select("#chart")
+ .append("svg:svg")
+ .attr("width", w)
+ .attr("height", h);
+
+ vis.append("svg:g").attr("class", "edges");
+ vis.append("svg:g").attr("class", "nodes");
+
+$(function() {
+ $.ajax({
+ url: '/gstudio/graphs/graph_json/{{ node_id }}' ,
+ //crossDomain: true,
+ dataType: 'json',
+ success : function(json) {
+
+ var force;
+
+ // this contains all the nodes as a dict with _id as the key
+
+ var nodes_by_id = _.reduce(json.node_metadata, function(acc, n) {
+ acc[n._id] = n;
+ return acc;
+ }, {});
+
+ var member_of_metatype = _(json.member_of_metatype).chain().map(function(e) {
+ e.source = nodes_by_id[e.from];
+ e.target = nodes_by_id[e.to];
+ e.type = 'member_of_metatype';
+ return e;
+ }).filter(function(e){
+ return nodes_by_id[e.from] && nodes_by_id[e.to]
+ }).value();
+
+ var contains_subtypes = _(json.contains_subtypes).chain().map(function(e) {
+ e.source = nodes_by_id[e.from];
+ e.target = nodes_by_id[e.to];
+ e.type = 'contains_subtypes';
+ return e;
+ }).filter(function(e){
+ return nodes_by_id[e.from] && nodes_by_id[e.to]
+ }).value();
+
+ var contains_members = _(json.contains_members).chain().map(function(e) {
+ e.source = nodes_by_id[e.from];
+ e.target = nodes_by_id[e.to];
+ e.type = 'contains_members';
+ return e;
+ }).filter(function(e){
+ return nodes_by_id[e.from] && nodes_by_id[e.to]
+ }).value();
+
+
+ var left_subjecttype_of = _(json.left_subjecttype_of).chain().map(function(e) {
+ e.source = nodes_by_id[e.from];
+ e.target = nodes_by_id[e.to];
+ e.type = 'left_subjecttype_of';
+ return e;
+ }).filter(function(e){
+ return nodes_by_id[e.from] && nodes_by_id[e.to]
+ }).value();
+
+
+ var subjecttype_of = _(json.subjecttype_of).chain().map(function(e) {
+ e.source = nodes_by_id[e.from];
+ e.target = nodes_by_id[e.to];
+ e.type = 'subjecttype_of';
+ return e;
+ }).filter(function(e){
+ return nodes_by_id[e.from] && nodes_by_id[e.to]
+ }).value();
+
+ var type_of = _(json.type_of).chain().map(function(e) {
+ e.source = nodes_by_id[e.from];
+ e.target = nodes_by_id[e.to];
+ e.type = 'type_of';
+ return e;
+ }).filter(function(e){
+ return nodes_by_id[e.from] && nodes_by_id[e.to]
+ }).value();
+
+
+ var right_subjecttype_of = _(json.right_subjecttype_of).chain().map(function(e) {
+ e.source = nodes_by_id[e.from];
+ e.target = nodes_by_id[e.to];
+ e.type = 'right_subjecttype_of';
+ return e;
+ }).filter(function(e){
+ return nodes_by_id[e.from] && nodes_by_id[e.to]
+ }).value();
+
+
+ var follows_edges = _(json.is_followed_by).chain().map(function(e) {
+ e.source = nodes_by_id[e.from];
+ e.target = nodes_by_id[e.to];
+ e.type = 'follows_edges';
+ return e;
+ }).filter(function(e){
+ return nodes_by_id[e.from] && nodes_by_id[e.to]
+ }).value();
+
+
+ var mentions_edges = _(json.is_mentioned_by).chain().map(function(e) {
+ e.source = nodes_by_id[e.from];
+ e.target = nodes_by_id[e.to];
+ e.type = 'mentions_edges';
+ return e;
+ }).filter(function(e){
+ return nodes_by_id[e.from] && nodes_by_id[e.to]
+ }).value();
+
+
+ nodes_by_id[{{ node_id }}].x = w/2.0;
+ nodes_by_id[{{ node_id }}].y = h/2.0;
+
+ all_edges = new Array();
+ all_edges = all_edges.concat(follows_edges, member_of_metatype, contains_members, contains_subtypes, mentions_edges, right_subjecttype_of, left_subjecttype_of, subjecttype_of, type_of);
+ /* all_edges.concat(follows_edges);
+ all_edges.concat(member_of_metatype);
+ all_edges.concat(contains_members);
+ all_edges.concat(contains_subtypes);
+ all_edges.concat(mentions_edges);
+
+
+ document.getElementById('debugbox1').value= follows_edges; //member_of_metatype
+ document.getElementById('debugbox2').value= mentions_edges;
+ //document.getElementById('debugbox2').value= member_of_metatype;
+ document.getElementById('debugbox3').value= all_edges;
+ */
+ var force = d3.layout.force()
+ .linkStrength(0.5)
+ .charge(-2000)
+ .friction(0.7)
+ .gravity(0.7)
+ .linkDistance(50)
+ .nodes([])
+ .links([])
+ .size([w, h])
+ .start();
+
+ function update(edges){
+ // for each func
+ _.each(nodes_by_id, function(n){n.added = false});
+ // reduce the nodes list to have only those nodes for a given rel.
+ nodes = _.reduce(edges, function(acc, e) {
+ if(nodes_by_id[e.from] && !nodes_by_id[e.from].added){
+ nodes_by_id[e.from].added = true;
+ acc.push(nodes_by_id[e.from]);
+ }
+ if(nodes_by_id[e.to] && !nodes_by_id[e.to].added){
+ nodes_by_id[e.to].added = true;
+ acc.push(nodes_by_id[e.to]);
+ }
+ return acc;
+ }, []);
+
+ force.nodes(nodes);
+ force.links(edges);
+ force.start();
+
+ link = d3.select("#chart g.edges").selectAll("line.link")
+ .data(edges, function(e){return e.from + "-" + e.to + "-" + e.type});
+
+ link.enter().append("svg:line")
+ .attr("class", "link")
+ .style("stroke-width", 2 /* function(d) {
+ return Math.sqrt(d.value);
+ } */ )
+ .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;
+ })
+ .append("a")
+ .text(function(d) { return d.type; });
+
+
+ var node = d3.select("#chart g.nodes").selectAll("g.node").data(nodes);
+
+ var new_g = node.enter().append("svg:g")
+ .attr("class", "node")
+ .call(force.drag);
+
+ /* new_g.append("svg:image").attr('xlink:href',
+ function(d) {
+ return d.profile_image_url;
+ }).attr('height', 32).attr('width', 32);
+ */
+
+ new_g.append("svg:circle")
+ .attr("cx", function(d) { return d.x - w/2.0 + 15; })
+ .attr("cy", function(d) { return d.y - h/2.0 + 15; })
+ .attr("r", 7)
+ .style("fill", "steelblue");
+ /*
+ new_g.append("svg:circle")
+ .attr("fill", "steelblue")
+ .attr("text-anchor", "middle")
+ .text(function(d) {
+ return d.screen_name;
+ });
+ */
+ new_g.append("svg:text")
+ .attr("dy", 20)
+ .attr("dx", 25)
+
+ /* .attr("text-anchor", "middle") */
+ .text(function(d) {
+ return d.screen_name;
+ });
+
+ node.exit().remove();
+
+
+ force.on("tick", function() {
+
+ var x_center = $("#chart").width() / 2;
+ var y_center = $("#chart").height() / 2;
+
+ 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-16) + "," + (d.y-16) + ")"; });
+
+ });
+ }
+
+ update(all_edges);
+ vis.style("opacity", 1e-6)
+ .transition()
+ .duration(1000)
+ .style("opacity", 1);
+
+ /* $('input#follows').change(function(){
+ update(all_edges);
+ });
+ */
+
+ /* $('input#mentions').change(function(){
+ update(all_edges);
+ }); */
+ }
+ });
+
+// $("#relation_type").buttonset();
+
+// $('input#mentions').change(function(){console.log(this)});
+// $('input#follows').change(function(){console.log(this)});
+});
+
+
+</script>
+
+ </div>
+
+</div>
+
+</body>
+</html>
generated by cgit v1.1 at 2024-08-22 12:44:31 +0000