styling
avatars
This commit is contained in:
Jonas Obrist 2012-08-19 03:34:07 +02:00
parent 0ab9f790fe
commit 9e1a68aac5
3 changed files with 20 additions and 27 deletions

View file

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

View file

@ -1,6 +1,6 @@
{% extends "base.html" %} {% extends "graph_base.html" %}
{% block body %} {% block graph %}
<div id='chart'> </div> <div id='chart'> </div>
<style> <style>
circle.node { circle.node {
@ -12,11 +12,6 @@
stroke: #999; stroke: #999;
stroke-opacity: .6; stroke-opacity: .6;
} }
.nodetext {
pointer-events: none;
font: 10px sans-serif;
}
</style> </style>
<script src="{{ STATIC_URL }}d3/d3.v2.js"></script> <script src="{{ STATIC_URL }}d3/d3.v2.js"></script>
<script src="{{ STATIC_URL }}/js/jquery.js"></script> <script src="{{ STATIC_URL }}/js/jquery.js"></script>
@ -27,13 +22,13 @@
var map = {}; var map = {};
var w = 960, var w = 960,
h = 500; h = 800;
var color = d3.scale.category20(); var color = d3.scale.category20();
var force = d3.layout.force() var force = d3.layout.force()
.gravity(.05) .gravity(.05)
.distance(100) .distance(250)
.charge(-100) .charge(-200)
.size([w, h]); .size([w, h]);
var nodes = force.nodes(), var nodes = force.nodes(),
@ -67,18 +62,15 @@
.data(nodes, function(d) { return d.id;}); .data(nodes, function(d) { return d.id;});
var nodeEnter = node.enter().append("svg:g").attr('class', 'node').call(force.drag); var nodeEnter = node.enter().append("svg:g").attr('class', 'node').call(force.drag);
nodeEnter.append("circle") nodeEnter.append("svg:image")
.attr("class", "node") .attr("class", "circle")
.attr("r", 5) .attr("xlink:href", function(d){return d.avatar;})
.style("fill", function(d) { return color(d.group); }) .attr("x", "-16px")
.attr("x", "-8px") .attr("y", "-16px")
.attr("y", "-8px") .style("border-radius", "16px;")
.attr("width", "16px") .attr("width", "32px")
.attr("height", "16px"); .attr("height", "32px");
nodeEnter.append("svg:text") nodeEnter.append("title")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name }); .text(function(d) { return d.name });
node.exit().remove(); node.exit().remove();
@ -88,7 +80,7 @@
// Add three nodes and three links. // Add three nodes and three links.
function init() { 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); nodes.push(center);
for (var i = 0; i<followers.length;i++){ for (var i = 0; i<followers.length;i++){
nodes.push(followers[i]); nodes.push(followers[i]);

View file

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