spacing
styling avatars
This commit is contained in:
parent
0ab9f790fe
commit
9e1a68aac5
3 changed files with 20 additions and 27 deletions
|
@ -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
|
||||||
|
|
|
@ -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]);
|
2
urls.py
2
urls.py
|
@ -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'),
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue