D4
/
BGP-Ranking
mirror of https://github.com/D4-project/BGP-Ranking
2
0
Fork 0
Code Issues Releases Wiki Activity

fix: Rewrite the graph on the country page.

pull/12/head
Raphaël Vinot 2018-08-01 11:29:03 +02:00
parent b8ad28b1f4
commit 7c1678c2df
2 changed files with 70 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
website/web/static/linegraph_country.js
View File

@ -1,113 +1,80 @@
function linegraph(call_path) { function linegraph(call_path) {
var canvas = document.querySelector("canvas"), var svg = d3.select("svg"),
context = canvas.getContext("2d"); margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// set the dimensions and margins of the graph var parseTime = d3.timeParse("%Y-%m-%d");
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = canvas.width - margin.left - margin.right,
height = canvas.height - margin.top - margin.bottom;
// parse the date / time var x = d3.scaleTime().range([0, width]),
var parseTime = d3.timeParse("%Y-%m-%d"); y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
// set the ranges var line = d3.line()
var x = d3.scaleTime().range([0, width]); .curve(d3.curveBasis)
var y = d3.scaleLinear().range([height, 0]); .x(function(d) { return x(d.date); })
var z = d3.scaleOrdinal(d3.schemeCategory10); .y(function(d) { return y(d.rank); });
// define the line d3.json(call_path, {credentials: 'same-origin'}).then(function(data) {
var line = d3.line()
.x(function(d) { return x(parseTime(d[0])); })
.y(function(d) { return y(d[1]); })
.curve(d3.curveStep)
.context(context);
context.translate(margin.left, margin.top); var country_ranks = d3.entries(data).map(function(country_rank) {
x.domain(d3.extent(country_rank.value, function(d) { return parseTime(d[0]); }));
return {
country: country_rank.key,
values: d3.values(country_rank.value).map(function(d) {
return {date: parseTime(d[0]), rank: d[1]};
})
};
});
// Get the data y.domain([
d3.json(call_path, {credentials: 'same-origin'}).then(function(data) { d3.min(country_ranks, function(c) { return d3.min(c.values, function(d) { return d.rank; }); }),
var color = d3.scaleOrdinal(d3.schemeCategory10); d3.max(country_ranks, function(c) { return d3.max(c.values, function(d) { return d.rank; }); })
var i = 0; ]);
for (country in data) {
var country_data = data[country] z.domain(country_ranks.map(function(c) { return c.country; }));
x.domain(d3.extent(country_data, function(d) { return parseTime(d[0]); }));
y.domain(d3.extent(country_data, function(d) { return d[1]; })); g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Rank");
var country = g.selectAll(".country")
.data(country_ranks)
.enter().append("g")
.attr("class", "country");
country.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return z(d.country); });
country.append("text")
.datum(function(d) { return {id: d.country, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.rank) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.text(function(d) { return d.id; });
context.beginPath();
line(country_data);
context.lineWidth = 1.5;
context.strokeStyle = color(i);
context.stroke();
i += 1;
};
xAxis();
yAxis();
d3.json(call_path + '_callback', d3.json(call_path + '_callback',
{credentials: 'same-origin', {credentials: 'same-origin',
method: 'POST', method: 'POST',
body: JSON.stringify(data), body: JSON.stringify(data),
// headers: {'Content-Type': 'application/json'} // headers: {'Content-Type': 'application/json'}
}).then(function(data) { }).then(function(data) {
d3.select('#asn_details').html(data); d3.select('#asn_details').html(data);
}); });
}); });
};
function xAxis() {
var tickCount = 10,
tickSize = .1,
ticks = x.ticks(tickCount),
tickFormat = x.tickFormat();
context.beginPath();
ticks.forEach(function(d) {
context.moveTo(x(d), height);
context.lineTo(x(d), height + tickSize);
});
context.strokeStyle = "black";
context.stroke();
context.textAlign = "center";
context.textBaseline = "top";
ticks.forEach(function(d) {
context.fillText(tickFormat(d), x(d), height + tickSize);
});
}
function yAxis() {
var tickCount = 20,
tickSize = 1,
tickPadding = 1,
ticks = y.ticks(tickCount),
tickFormat = y.tickFormat(tickCount);
context.beginPath();
ticks.forEach(function(d) {
context.moveTo(0, y(d));
context.lineTo(-6, y(d));
});
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(-tickSize, 0);
context.lineTo(0.5, 0);
context.lineTo(0.5, height);
context.lineTo(-tickSize, height);
context.strokeStyle = "black";
context.stroke();
context.textAlign = "right";
context.textBaseline = "middle";
ticks.forEach(function(d) {
context.fillText(tickFormat(d), -tickSize - tickPadding, y(d));
});
context.save();
context.rotate(-Math.PI / 2);
context.textAlign = "right";
context.textBaseline = "top";
context.font = "bold 10px sans-serif";
context.fillText("Rank", -10, 10);
context.restore();
}
}

2
website/web/templates/country.html
View File

@ -18,6 +18,6 @@
<h1>Ranking - {{ ' '.join(country) }}</h1></br></br> <h1>Ranking - {{ ' '.join(country) }}</h1></br></br>
</center> </center>
{% include ['top_forms.html'] %} {% include ['top_forms.html'] %}
<canvas width="1024" height="800"></canvas> <svg width="1024" height="800"></svg>
<div id="asn_details"></div> <div id="asn_details"></div>
{% endblock %} {% endblock %}