just showing off, don't merge this!

2012-08-19 01:20:08 +02:00 · 2012-08-19 01:20:08 +02:00 · 8b988be06e
commit 8b988be06e
parent f7938a9dc1
8 changed files with 7203 additions and 1 deletions
--- a/templates/graph.html
+++ b/templates/graph.html
@ -0,0 +1,125 @@
+{% extends "base.html" %}
+
+{% block body %}
+    <div id='chart'> </div>
+    <style>
+        circle.node {
+            stroke: #fff;
+            stroke-width: 1.5px;
+        }
+
+        line.link {
+            stroke: #999;
+            stroke-opacity: .6;
+        }
+        .nodetext {
+            pointer-events: none;
+            font: 10px sans-serif;
+        }
+
+    </style>
+    <script src="{{ STATIC_URL }}d3/d3.v2.js"></script>
+    <script src="{{ STATIC_URL }}/js/jquery.js"></script>
+    <script>
+    $(document).ready(function(){
+
+        var followers = {{ followers|safe }};
+        var map = {};
+
+        var w = 960,
+            h = 500;
+        var color = d3.scale.category20();
+
+        var force = d3.layout.force()
+                .gravity(.05)
+                .distance(100)
+                .charge(-100)
+                .size([w, h]);
+
+        var nodes = force.nodes(),
+                links = force.links();
+
+        var vis = d3.select("body").append("svg:svg")
+                .attr("width", w)
+                .attr("height", h);
+
+        force.on("tick", function() {
+            vis.selectAll("g.node")
+                    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+            vis.selectAll("line.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; });
+        });
+
+        function restart() {
+            var link = vis.selectAll("line.link")
+                    .data(links, function(d) { return d.source.id + "-" + d.target.id; });
+
+            link.enter().insert("svg:line", "g.node")
+                    .attr("class", "link");
+
+            link.exit().remove();
+
+            var node = vis.selectAll("g.node")
+                    .data(nodes, function(d) { return d.id;});
+
+            var nodeEnter = node.enter().append("svg:g").attr('class', 'node').call(force.drag);
+                nodeEnter.append("circle")
+                    .attr("class", "node")
+                    .attr("r", 5)
+                    .style("fill", function(d) { return color(d.group); })
+                    .attr("x", "-8px")
+                    .attr("y", "-8px")
+                    .attr("width", "16px")
+                    .attr("height", "16px");
+                nodeEnter.append("svg:text")
+                    .attr("class", "nodetext")
+                    .attr("dx", 12)
+                    .attr("dy", ".35em")
+                    .text(function(d) { return d.name });
+
+            node.exit().remove();
+
+            force.start();
+        }
+
+        // Add three nodes and three links.
+        function init() {
+            var center = {"name": "{{ request.gh_user.gh_login }}", "group": 1};
+            nodes.push(center);
+            for (var i = 0; i<followers.length;i++){
+                nodes.push(followers[i]);
+                links.push({source:center, target:followers[i]});
+                map[followers[i].name] = followers[i];
+            }
+            restart();
+        }
+
+        function addLink(link) {
+            links.push(link);
+            restart();
+        }
+
+        restart();
+        init();
+        function loadFollowerFollowers(follower){
+            $.getJSON('{%  url get_user_followers %}?user=' + follower.name, function(data){
+                for (var i = 0; i<data.length; i++){
+                    var target = map[data[i]];
+                    if (target){
+                        addLink({source:follower, target:target})
+                    }
+                }
+            });
+            // addLink({source: followers[15], target: followers[5]});
+        }
+        for (var i = 0; i<followers.length; i++){
+            loadFollowerFollowers(followers[i]);
+        }
+    });
+    </script>
+{% endblock %}
+