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
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 %}
|