From 74ff3c3fd9670fde06e603b3a4d3da17854d364c Mon Sep 17 00:00:00 2001
From: Lunar <lunar@anargeek.net>
Date: Sat, 23 Nov 2013 15:35:30 +0100
Subject: [PATCH] =?utf8?q?Read/write=20sur=20le=20m=C3=AAme=20graph=20et?=
=?utf8?q?=20animations=20pour=20la=20dur=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit
---
Services/Participation.html | 114 ++++++++++++++++++++++--------------
1 file changed, 70 insertions(+), 44 deletions(-)
diff --git a/Services/Participation.html b/Services/Participation.html
index aa935da..e3edb65 100644
--- a/Services/Participation.html
+++ b/Services/Participation.html
@@ -118,10 +118,10 @@ ExitPieDrawer.prototype.getFieldName = function() {
ExitPieDrawer.prototype.getField = function(r) {
return r.exit_probability;
};
-
+/*
new ConsensusPieDrawer().draw();
new ExitPieDrawer().draw();
-
+*/
</script>
<h2>Bandwidth</h2>
@@ -156,16 +156,12 @@ new ExitPieDrawer().draw();
shape-rendering: crispEdges;
}
-.relay text {
- text-anchor: end;
-}
-
</style>
<script type="text/javascript">
-var margin = {top: 50, right: 90, bottom: 90, left: 100},
- width = 600 - margin.left - margin.right,
+var margin = {top: 50, right: 90, bottom: 90, left: 130},
+ width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseTime = d3.time.format("%Y-%m-%d %H:%M:%S").parse,
@@ -186,19 +182,35 @@ var xAxis = d3.svg.axis()
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
- .tickFormat(function(d) { return bwFormatter(d) + "Â Mbit/s"; });
+ .tickFormat(function(d) { return (d == 0) ? "" : bwFormatter(Math.abs(d)) + "Â Mbit/s " + ((d > 0) ? "in" : "out"); });
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
-var stack = d3.layout.stack()
- .values(function(d) { return d.values; });
+var read_stack = d3.layout.stack()
+ .values(function(d) { console.log(JSON.stringify(d)); return d.read_values; });
+var write_stack = d3.layout.stack()
+ .values(function(d) { console.log(JSON.stringify(d)); return d.write_values; })
+ .y(function(d) { return -d.y; });
var onionoo_url = "https://onionoo.torproject.org/bandwidth?type=relay&contact=adminsys@nos-oignons.net";
-function draw_bandwidth_graph(raw_data, selector, direction, period) {
+function extract_values(history, minTime, maxTime) {
+ var values = [];
+ var first = parseTime(history.first);
+ var last = parseTime(history.last);
+ var i = 0;
+ for (var current = minTime; current <= maxTime; current = d3.time.second.offset(current, history.interval)) {
+ if (first <= current && current <= last) {
+ values.push({ date: current, y: history.factor * history.values[i++] * 8 / 1000000 });
+ }
+ }
+ return values;
+}
+
+function draw_bandwidth_graph(raw_data, selector, period) {
var svg = d3.select(selector).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
@@ -208,48 +220,59 @@ function draw_bandwidth_graph(raw_data, selector, direction, period) {
var valid_fingerprints = [];
nos_oignons_relays.forEach(function(r) {
var relay_data = raw_data["relays"].filter(function(d) { return d.fingerprint == r.fingerprint; })[0];
- if (relay_data && relay_data[direction][period]) {
+ if (relay_data && relay_data['read_history'][period] && relay_data['write_history'][period]) {
valid_fingerprints.push(r.fingerprint);
}
});
color.domain(valid_fingerprints);
- var minTime = d3.max(raw_data.relays.map(function(d) { return d[direction][period] && parseTime(d[direction][period].first); }));
- var maxTime = d3.min(raw_data.relays.map(function(d) { return d[direction][period] && parseTime(d[direction][period].last); }));
- var maxTotalBandwidth = 0;
-
- var data = stack(color.domain().map(function(fingerprint) {
- var relay_data = raw_data["relays"].filter(function(d) { return d.fingerprint == fingerprint; })[0];
- var history = relay_data[direction][period];
-
- var values = [];
- var first = parseTime(history.first);
- var last = parseTime(history.last);
- var i = 0;
- for (var current = minTime; current <= maxTime; current = d3.time.second.offset(current, history.interval)) {
- if (first <= current && current <= last) {
- values.push({ date: current, y: history.factor * history.values[i++] * 8 / 1000000 });
- }
- }
-
- maxTotalBandwidth = maxTotalBandwidth + d3.max(values.map(function(d) { return d.y; }));
+ var minTime = d3.max(raw_data.relays.map(function(d) {
+ return d['read_history'][period] && parseTime(d['read_history'][period].first) &&
+ d['write_history'][period] && parseTime(d['write_history'][period].first);
+ }));
+ var maxTime = d3.min(raw_data.relays.map(function(d) {
+ return d['read_history'][period] && parseTime(d['read_history'][period].last) &&
+ d['write_history'][period] && parseTime(d['write_history'][period].last);
+ }));
+ var maxReadBandwidth = 0;
+ var maxWriteBandwidth = 0;
+
+ var data = color.domain().map(function(fingerprint) {
+ var relay_data = raw_data["relays"].filter(function(d) { return d.fingerprint == fingerprint; })[0];
+ var read_history = relay_data['read_history'][period];
+ var write_history = relay_data['write_history'][period];
+ var read_values = extract_values(read_history, minTime, maxTime);
+ var write_values = extract_values(write_history, minTime, maxTime);
+
+ maxReadBandwidth = maxReadBandwidth + d3.max(read_values.map(function(d) { return d.y; }));
+ maxWriteBandwidth = maxWriteBandwidth + d3.max(write_values.map(function(d) { return d.y; }));
+
+ return {
+ fingerprint: fingerprint,
+ read_values: read_values,
+ write_values: write_values,
+ };
+ });
- return {
- fingerprint: fingerprint,
- values: values,
- };
- }));
x.domain([minTime, maxTime]);
- y.domain([0, maxTotalBandwidth]);
+ y.domain([-maxWriteBandwidth, maxReadBandwidth]);
- var relay = svg.selectAll(".relay")
- .data(data)
+ var read_graph = svg.selectAll(".read_graph")
+ .data(read_stack(data))
.enter().append("g")
- .attr("class", "relay");
+ .attr("class", "read_graph");
+ read_graph.append("path")
+ .attr("class", "area")
+ .attr("d", function(d) { return area(d.read_values); })
+ .style("fill", function(d) { return color(d.fingerprint); });
- relay.append("path")
+ var write_graph = svg.selectAll(".write_graph")
+ .data(write_stack(data))
+ .enter().append("g")
+ .attr("class", "write_graph");
+ write_graph.append("path")
.attr("class", "area")
- .attr("d", function(d) { return area(d.values); })
+ .attr("d", function(d) { return area(d.write_values); })
.style("fill", function(d) { return color(d.fingerprint); });
svg.append("g")
@@ -287,7 +310,9 @@ function draw_bandwidth_graph(raw_data, selector, direction, period) {
};
d3.json(onionoo_url, function(error, raw_data) {
- draw_bandwidth_graph(raw_data, "#bandwidth-3d-read", "read_history", "3_days");
+ draw_bandwidth_graph(raw_data, "#bandwidth-3d-read", "3_days");
+ draw_bandwidth_graph(raw_data, "#bandwidth-3d-read", "3_months");
+/*
draw_bandwidth_graph(raw_data, "#bandwidth-3d-write", "write_history", "3_days");
draw_bandwidth_graph(raw_data, "#bandwidth-1w-read", "read_history", "1_week");
draw_bandwidth_graph(raw_data, "#bandwidth-1w-write", "write_history", "1_week");
@@ -297,6 +322,7 @@ d3.json(onionoo_url, function(error, raw_data) {
draw_bandwidth_graph(raw_data, "#bandwidth-3m-write", "write_history", "3_months");
draw_bandwidth_graph(raw_data, "#bandwidth-1y-read", "read_history", "1_year");
draw_bandwidth_graph(raw_data, "#bandwidth-1y-write", "write_history", "1_year");
+*/
});
</script>
--
2.47.3