You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.2 KiB
115 lines
2.2 KiB
{% extends "base.html" %}
|
|
{% block head %}
|
|
{% load static from staticfiles %}
|
|
<script src="{% static "js/d3.js" %}" charset="utf-8"></script>
|
|
<style>
|
|
.node {
|
|
stroke: #fff;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.link {
|
|
stroke: #999;
|
|
stroke-opacity: .6;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
{% block body %}
|
|
|
|
<h3>Crawl run {{crawl.pk}} from {{crawl.startTime}}</h3>
|
|
|
|
<div id="plotwin"></div>
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
var asdata = [
|
|
{% for AS in ASses %}
|
|
{id: {{AS.pk}}, numer: {{AS.number}}, label: 'MAUNZ'}{%if not forloop.last%},{%endif%}
|
|
{%endfor%}
|
|
];
|
|
|
|
var asdict = {
|
|
{% for AS in ASses %}
|
|
{{AS.number}}: {{forloop.counter0}}{%if not forloop.last%},{%endif%}
|
|
{% endfor %}
|
|
};
|
|
|
|
var peerings = [
|
|
{% for p in peerings %}
|
|
{
|
|
source: asdict[{{p.as1.number}}],
|
|
target: asdict[{{p.as2.number}}],
|
|
|
|
id: {{p.pk}},
|
|
as1id: {{p.as1.id}},
|
|
as1number: {{p.as1.number}},
|
|
as2id: {{p.as2.id}},
|
|
as2number: {{p.as2.number}},
|
|
|
|
origin: "{{p.get_origin_display}}"
|
|
}{%if not forloop.last%},{%endif%}
|
|
{%endfor%}
|
|
];
|
|
|
|
|
|
var width = 960,
|
|
height = 600;
|
|
|
|
var svg = d3.select('#plotwin')
|
|
.append('svg')
|
|
.attr('width', width)
|
|
.attr('height', height);
|
|
|
|
console.log(asdata);
|
|
var force = d3.layout.force()
|
|
.nodes(asdata)
|
|
.links(peerings)
|
|
.charge(-200)
|
|
.linkDistance(70)
|
|
.size([width, height])
|
|
.start();
|
|
// .charge(-120)
|
|
// .linkDistance(30)
|
|
|
|
|
|
var link = svg.selectAll(".link")
|
|
.data(peerings)
|
|
.enter()
|
|
.append("line")
|
|
.attr("class", "link")
|
|
.style("stroke-width", 3);
|
|
|
|
var node = svg.selectAll('.node')
|
|
.data(asdata)
|
|
.enter()
|
|
.append('circle')
|
|
.attr('class', 'node')
|
|
.attr('r', 10)
|
|
.call(force.drag);
|
|
|
|
node.append('text')
|
|
.text("maunz");
|
|
|
|
force.on("tick", function() {
|
|
node.attr('cx', function(d) { return d.x; })
|
|
.attr('cy', function(d) { return d.y; });
|
|
|
|
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; });
|
|
});
|
|
|
|
force.start();
|
|
|
|
//var node = svg.selectAll(".node").data(nodes).enter().append("circle");
|
|
//node.append("title").text(function(d) { return d.name });
|
|
</script>
|
|
|
|
|
|
<p>
|
|
{% for AS in ASses %}
|
|
{{ AS.number }}<br />
|
|
{% endfor %}
|
|
</p>
|
|
{% endblock %}
|