164 lines
5 KiB
HTML
164 lines
5 KiB
HTML
{% extends "graph_base.html" %}
|
|
|
|
{% block graph %}
|
|
<h1>People following you</h1>
|
|
<div id='chart'> </div>
|
|
<style>
|
|
#chart {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
circle.node {
|
|
stroke: #fff;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
line.link {
|
|
stroke: #999;
|
|
stroke-opacity: .6;
|
|
}
|
|
</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 = $('#chart').width();
|
|
h = $('#chart').height();
|
|
var color = d3.scale.category20();
|
|
|
|
var nodeSize = 64;
|
|
var borderSize = 3;
|
|
var nodeCenter = nodeSize / 2;
|
|
|
|
/* Use a "flexible force-directed graph layout". */
|
|
var force = d3.layout.force()
|
|
.gravity(.05)
|
|
.distance(250)
|
|
.charge(-500)
|
|
.size([w, h]);
|
|
|
|
var nodes = force.nodes(),
|
|
links = force.links();
|
|
|
|
var vis = d3.select("#chart").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;
|
|
nodeEnter = node.enter().append("svg:g")
|
|
.attr('class', 'node')
|
|
.call(force.drag);
|
|
|
|
// Node clip path
|
|
nodeEnter.append("svg:clipPath")
|
|
.attr("id", function(d) {return "clip-" + d.name;})
|
|
.append("svg:circle").attr("r", nodeCenter + "px");
|
|
|
|
// Border
|
|
nodeEnter.append("circle")
|
|
.attr("r", (nodeCenter + borderSize) + "px")
|
|
.attr("fill", "#2c2c2c");
|
|
|
|
// Node
|
|
nodeEnter.append("svg:image")
|
|
.attr("class", "circle")
|
|
.attr("clip-path", function(d) {return "url(#clip-" + d.name + ")";})
|
|
.attr("clip-rule", "nonzero")
|
|
.attr("xlink:href", function(d) {return d.avatar;})
|
|
.attr("x", -nodeCenter + "px")
|
|
.attr("y", -nodeCenter + "px")
|
|
.attr("width", nodeSize + "px")
|
|
.attr("height", nodeSize + "px");
|
|
|
|
// Node title/tooltip
|
|
nodeEnter.append("title")
|
|
.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 }}", "avatar": "{{ request.gh_user.avatar_url }}"};
|
|
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]);
|
|
}
|
|
|
|
/* Install an event handler for window resizes */
|
|
$(window).resize(function() {
|
|
var chart = $('#chart');
|
|
var svg = $('#chart svg');
|
|
var w = chart.width();
|
|
var h = chart.height();
|
|
|
|
force.size([w, h]);
|
|
svg.width(w);
|
|
svg.height(h);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|