spacing

styling
avatars

githubnetwork/views.py

@@ -1,8 +1,9 @@
 # -*- coding: utf-8 -*-
 from django.contrib.auth.decorators import login_required
-from django.http import HttpResponse
+from django.http import HttpResponse, HttpResponseBadRequest
 from django.shortcuts import render_to_response
 from django.template.context import RequestContext
+from django.utils import simplejson
 from django.utils.decorators import method_decorator
 from django.views.generic.detail import DetailView
 from ghapi import api
@@ -85,8 +86,8 @@ class NetworkView(DetailView):
 def me(request):
     context = RequestContext(request)
     context['followers'] = simplejson.dumps(
-        [{'name': unicode(follower), 'group': 2} for follower in request.gh_user.following.all()])
-    return render_to_response('graph.html', context)
+        [{'name': unicode(follower), 'avatar': follower.avatar_url} for follower in request.gh_user.following.all()])
+    return render_to_response('me.html', context)
 
 
 @login_required

templates/me.html

@@ -1,6 +1,6 @@
-{% extends "base.html" %}
+{% extends "graph_base.html" %}
 
-{% block body %}
+{% block graph %}
     <div id='chart'> </div>
     <style>
         circle.node {
@@ -12,11 +12,6 @@
             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>
@@ -27,13 +22,13 @@
         var map = {};
 
         var w = 960,
-            h = 500;
+            h = 800;
         var color = d3.scale.category20();
 
         var force = d3.layout.force()
                 .gravity(.05)
-                .distance(100)
-                .charge(-100)
+                .distance(250)
+                .charge(-200)
                 .size([w, h]);
 
         var nodes = force.nodes(),
@@ -67,18 +62,15 @@
                     .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")
+                nodeEnter.append("svg:image")
+                    .attr("class", "circle")
+                    .attr("xlink:href", function(d){return d.avatar;})
+                    .attr("x", "-16px")
+                    .attr("y", "-16px")
+                    .style("border-radius", "16px;")
+                    .attr("width", "32px")
+                    .attr("height", "32px");
+                nodeEnter.append("title")
                     .text(function(d) { return d.name });
 
             node.exit().remove();
@@ -88,7 +80,7 @@
 
         // Add three nodes and three links.
         function init() {
-            var center = {"name": "{{ request.gh_user.gh_login }}", "group": 1};
+            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]);

urls.py

@@ -15,7 +15,7 @@ urlpatterns = patterns('',
         name='graph_followers'),
     url(r'^login/$', views.login, name='login'),
     url(r'^me/$', 'githubnetwork.views.me', name='me'),
-    url(r'^ajax/$', 'githubnetwork.views.get_user_followers', name='get_user_followers'),
+    url(r'^~followers/$', 'githubnetwork.views.get_user_followers', name='get_user_followers'),
     url(r'^repo/(?P<user>\w+)/(?P<repo>\w+)/', views.graph_repo,
         name='graph_repo'),
     url(r'^$', views.index, name='index'),