| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>WiFi packets as seen from the space</title> |
| </head> |
| <body> |
| |
| <script type='text/javascript' |
| src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> |
| <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script> |
| <script type='text/javascript'> |
| // TODO(katepek): Move into a separate JS file |
| |
| var debug = true; |
| function log(o) { |
| if (debug) { |
| console.log(o); |
| } |
| } |
| |
| var w = window, |
| d = document, |
| e = d.documentElement, |
| g = d.getElementsByTagName('body')[0]; |
| |
| var total_width = w.innerWidth || e.clientWidth || g.clientWidth; |
| var total_height = w.innerHeight || e.clientHeight || g.clientHeight; |
| var width; // of a plot |
| var height; // of a plot |
| var padding = 20; |
| |
| // TODO(katepek): Pull in some standard library for this |
| var stream_colours = |
| ['black', 'red', 'blue', 'green', 'magenta', |
| 'gray', 'hotpink', 'chocolate', 'deepskyblue', 'gold']; |
| |
| var field_settings = { |
| 'pcap_secs': { |
| 'parser': parseFloat, |
| 'scale_type': d3.scale.linear(), |
| }, |
| 'seq': { |
| 'parser': Number, |
| 'scale_type': d3.scale.linear(), |
| }, |
| 'rate': { |
| 'parser': Number, |
| 'scale_type': d3.scale.log(), |
| }, |
| 'default': { |
| 'parser': parseFloat, |
| 'scale_type': d3.scale.linear(), |
| } |
| } |
| |
| function settings(field) { |
| if (field_settings.hasOwnProperty(field)) |
| return field_settings[field]; |
| return field_settings['default']; |
| } |
| |
| findIdxByPcapSecs = d3.bisector(raw('pcap_secs')).left; |
| |
| var to_plot = []; // fields to be plotted against X axis (time) |
| var scales = {}; // dict[field; scale], incl. X axis |
| var reticle = {}; // dict[field; crosshair] |
| |
| var dataset; // all packets |
| var streams; // pairs of (transmitter, receiver) |
| |
| try { |
| $.getJSON('/json/' + get_query_param('key')[0], function(json) { |
| begin = new Date().getTime(); |
| |
| init(JSON.stringify(json)); |
| for (idx in to_plot) { |
| visualize(to_plot[idx]); |
| } |
| |
| end = new Date().getTime(); |
| log('Spent on visualization ' + ((end - begin) / 1000) + ' sec.'); |
| }); |
| } catch (error) { |
| console.log(error); |
| } |
| |
| function get_key() { |
| parts = window.location.pathname.split('/'); |
| return parts[parts.length - 1]; |
| } |
| |
| function get_query_param(param) { |
| params = window.location.search.substring(1).split('&'); |
| for (idx in params) { |
| if (params[idx].indexOf(param + '=') == 0) |
| return params[idx].split('=')[1].split(','); |
| } |
| return []; |
| } |
| |
| function init(json_string) { |
| // TODO(katepek): Should sanitize here? E.g., discard bad packets? |
| // Packets w/o seq? |
| js_objects = JSON.parse(json_string); |
| dataset = JSON.parse(js_objects['js_packets']); |
| streams = JSON.parse(js_objects['js_streams']); |
| |
| to_plot = get_query_param('to_plot'); |
| |
| // Leave only packets that have all the fields that we want to plot |
| // and the values there are positive |
| filter_dataset(); |
| // Descending |
| dataset = dataset.sort(function(x, y) { |
| return raw('pcap_secs')(x) - raw('pcap_secs')(y); |
| }); |
| |
| height = (total_height - 4 * padding) / to_plot.length; |
| width = total_width - 4 * padding; |
| |
| var x_range = [2 * padding, width - 2 * padding]; |
| var y_range = [height - padding, padding]; |
| |
| log('total_height = ' + total_height); |
| log('height = ' + height); |
| |
| add_scale('pcap_secs', x_range); |
| for (idx in to_plot) { |
| add_scale(to_plot[idx], y_range); |
| } |
| } |
| |
| function filter_dataset() { |
| log('Before filtering: ' + dataset.length); |
| dataset = dataset.filter(function(d) { |
| if (!d.hasOwnProperty('pcap_secs')) return false; |
| if (raw('pcap_secs')(d) <= 0) return false; |
| |
| for (idx in to_plot) { |
| if (!d.hasOwnProperty(to_plot[idx])) return false; |
| if (raw(to_plot[idx])(d) <= 0) return false; |
| } |
| return true; |
| }); |
| log('After filtering: ' + dataset.length); |
| } |
| |
| function add_scale(field, range) { |
| scales[field] = settings(field)['scale_type'] |
| .domain([d3.min(dataset, raw(field)), |
| d3.max(dataset, raw(field))]) |
| .range(range); |
| } |
| |
| function raw(name) { |
| return function(d) { |
| return settings(name)['parser'](d[name]); |
| } |
| } |
| |
| function scaled(name) { |
| return function(d) { |
| return scales[name](settings(name)['parser'](d[name])); |
| } |
| } |
| |
| function visualize(field) { |
| log('About to visualize ' + field); |
| |
| var svg = d3 |
| .select('body') |
| .append('svg') |
| .attr('width', width) |
| .attr('height', height) |
| .style('border', '1px solid black'); |
| |
| var focus = svg.append('g') .style('display', null); |
| reticle[field] = focus; |
| |
| // TODO(katepek): Show a summary somewhere as a legend |
| // which pair corresponds to which colour |
| for (i = 0; i < streams.length; i++) { |
| log('pcap_vs_' + field + '_' + i + ' (' + get_colour(i) + ')'); |
| |
| svg |
| .selectAll('pcap_vs_' + field + '_' + i) |
| .data(dataset) |
| .enter() |
| .append('circle') |
| .filter(function(d) { |
| return d['ta'] == streams[i]['ta'] && |
| d['ra'] == streams[i]['ra']; |
| }) |
| .attr('cx', scaled('pcap_secs')) |
| .attr('cy', scaled(field)) |
| .attr('r', 2) |
| .attr('fill', get_colour(i)); |
| } |
| |
| // TODO(katepek): Axes seem to show range, not the domain |
| var pcapSecsAxis = d3.svg.axis() |
| .scale(scales['pcap_secs']) |
| .orient('bottom') |
| .ticks(5); |
| var yAxis = d3.svg.axis() |
| .scale(scales[field]) |
| .orient('right') |
| .ticks(5); |
| |
| svg.append('g') |
| .attr('class', 'axis') |
| .attr('transform', 'translate(0,' + (height - padding) + ')') |
| .call(pcapSecsAxis); |
| svg.append('g') |
| .attr('class', 'axis') |
| .attr('transform', 'translate(' + (width - 2 * padding) + ',0)') |
| .call(yAxis); |
| |
| // Add crosshairs |
| focus.append('line') |
| .attr('class', 'x') |
| .style('stroke', 'black') |
| .style('stroke-width', '3') |
| .style('stroke-dasharray', '13,13') |
| .style('opacity', 0.5) |
| .attr('y1', 0) |
| .attr('y2', height); |
| |
| focus.append('line') |
| .attr('class', 'y') |
| .style('stroke', 'blue') |
| .style('stroke-width', '3') |
| .style('stroke-dasharray', '13,13') |
| .style('opacity', 0.5) |
| .attr('x1', 0) |
| .attr('x2', width); |
| |
| focus.append('circle') |
| .attr('class', 'y') |
| .style('fill', 'none') |
| .style('stroke', 'blue') |
| .style('stroke-width', '3') |
| .attr('r', 4); |
| |
| focus.append('text') |
| .attr('class', 'y1') |
| .attr('font-family', 'sans-serif') |
| .attr('font-size', '20px') |
| .attr('fill', 'black') |
| .attr('dx', 8) |
| .attr('dy', '-.5em'); |
| |
| // append the rectangle to capture mouse movements |
| svg.append('rect') |
| .attr('width', width) |
| .attr('height', height) |
| .style('fill', 'none') |
| .style('pointer-events', 'all') |
| .on('mouseover', function() { |
| for (i in Object.keys(reticle)) { |
| current = reticle[Object.keys(reticle)[i]]; |
| current.style('display', null); |
| current.select('.y').style('display', null); |
| current.select('circle.y').style('display', null); |
| current.select('text.y1').style('display', null); |
| } |
| }) |
| .on('mouseout', function() { |
| x = d3.mouse(this)[0]; |
| if (x < scales['pcap_secs'].range()[0] || |
| x > scales['pcap_secs'].range()[1]) { |
| for (i in Object.keys(reticle)) { |
| reticle[Object.keys(reticle)[i]].style('display', 'none'); |
| } |
| } |
| }) |
| .on('mousemove', function() { |
| var x = d3.mouse(this)[0], |
| y = d3.mouse(this)[1]; |
| |
| if (x < scales['pcap_secs'].range()[0] || |
| x > scales['pcap_secs'].range()[1] || |
| y > total_height) |
| return; |
| |
| pcap_secs = scales['pcap_secs'].invert(x); |
| idx = findIdxByPcapSecs(dataset, pcap_secs, 1); |
| d0 = dataset[idx - 1]; |
| d1 = dataset[idx]; |
| d = Math.abs(x - scaled('pcap_secs')(d0)) > |
| Math.abs(x - scaled('pcap_secs')(d1)) ? |
| d1 : d0; |
| |
| for (i in Object.keys(reticle)) { |
| r_field = Object.keys(reticle)[i]; |
| |
| closest_x = scaled('pcap_secs')(d); |
| closest_y = scaled(r_field)(d); |
| |
| reticle[r_field].select('.x') |
| .attr('transform', 'translate(' + closest_x + ',0)'); |
| reticle[r_field].select('.y') |
| .attr('transform', 'translate(0,' + closest_y + ')'); |
| |
| reticle[r_field].select('circle.y') |
| .attr('transform', |
| 'translate(' + closest_x + ',' + closest_y + ')'); |
| reticle[r_field].select('text.y1') |
| .attr('transform', |
| 'translate(' + closest_x + ',' + closest_y + ')') |
| .text('secs=' + d['pcap_secs'] + |
| '; ' + r_field + '=' + d[r_field]); |
| } |
| }); |
| } |
| |
| function get_colour(i) { |
| if (i < stream_colours.length) |
| return stream_colours[i]; |
| return stream_colours[i % stream_colours.length]; |
| } |
| |
| </script> |
| |
| </body> |
| </html> |
| |
