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.

143 lines
3.1 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}}, nodetype: "AS", asnumber: {{AS.number}}, label: "{{AS.number}}", neighbors: {{AS.getPeerings.count}}, crawled: {%if AS.directlyCrawled%}true{%else%}false{%endif%}, online: {%if AS.online%}true{%else%}false{%endif%}}{%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 = 800;
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(-500)
// .chargeDistance(300)
// .linkDistance(70)
.linkStrength(0.65)
.linkDistance(function(l) {
console.log(l);
neighs = Math.min(l.source.neighbors, l.target.neighbors);
console.log(neighs, "neighbors");
switch(neighs) {
case 0: return 40;
case 1:
case 2: return 120;
case 3:
case 4: return 200;
default: return 250;
}
})
.size([width, height])
.start();
var link = svg.selectAll(".link")
.data(peerings)
.enter()
.append("line")
.attr("class", "link")
.style("stroke-width", function(l) {
neighs = Math.min(l.source.neighbors, l.target.neighbors);
return 1 + Math.min(5, neighs);
});
//.style("stroke-width", 3);
var node = svg.selectAll('.node')
.data(asdata)
.enter()
.append("g")
.call(force.drag);
node.append("ellipse")
.attr("rx", 40)
.attr("ry", 20)
.attr("fill", function(d) {
if(d.crawled)
return "#94FF70";
else if(d.online)
return "#D1FFC2";
// return "#F0FFEB";
else
return "#FFCCCC";
})
.attr("stroke", "black")
.attr("stroke-width", "1px");
node.append('text')
.attr("font-family", "sans-serif")
.attr("font-size", "13px")
.attr("font-weight", "bold")
.attr("dy", "4")
.attr("text-anchor", "middle")
.text(function(d) { return d.label; });
force.on("tick", function() {
//node.attr('cx', function(d) { return d.x; })
// .attr('cy', function(d) { return d.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + 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();
</script>
{% endblock %}