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