| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Pcap secs vs. sequence number [TA/RA]</title> |
| <script type="text/javascript" src="d3/d3.v3.js"></script> |
| <style type="text/css"> |
| |
| .axis path, |
| .axis line { |
| fill: none; |
| stroke: black; |
| shape-rendering: crispEdges; |
| } |
| |
| .axis text { |
| font-family: sans-serif; |
| font-size: 11px; |
| } |
| |
| </style> |
| </head> |
| |
| <body> |
| |
| <script type="text/javascript"> |
| |
| var debug = true; |
| function log(o) { |
| if (debug) { |
| console.log(o); |
| } |
| } |
| |
| // TODO(katepek): Find better values; currently for 13" screen. |
| var width = 1350; |
| var height = 650; |
| var padding = 20; |
| |
| var dataset; |
| |
| var seqScale; |
| var pcapSecsScale; |
| |
| d3.csv('imaginary.data.prepared', function(error, data) { |
| if (error) { |
| console.log(error); |
| } else { |
| log(data); |
| dataset = data; |
| init(); |
| visualize(); |
| } |
| }); |
| |
| function raw_seq(d) { |
| return Number(d['seq']); |
| } |
| |
| function raw_pcapSecs(d) { |
| return parseFloat(d['pcap_secs']); |
| } |
| |
| function init() { |
| // Prepare scale for X axis |
| pcapSecsScale = d3.scale |
| .linear() |
| .domain([ d3.min(dataset, raw_pcapSecs), d3.max(dataset, raw_pcapSecs) ]) |
| .range([2 * padding, width - 2 * padding]); |
| |
| seqScale = d3.scale |
| .linear() |
| .domain([ d3.min(dataset, raw_seq), d3.max(dataset, raw_seq) ]) |
| .range([height - padding, padding]); |
| |
| } |
| |
| function seq(d) { |
| var seq = seqScale(Number(d['seq'])); |
| log('seq = ' + seq); |
| return seq; |
| } |
| |
| function pcapSecs(d) { |
| var pcapSecs = pcapSecsScale(parseFloat(d['pcap_secs'])); |
| log('pcapSecs = ' + pcapSecs); |
| return pcapSecs; |
| } |
| |
| function visualize() { |
| var svg = d3 |
| .select('body') |
| .append('svg') |
| .attr('width', width) |
| .attr('height', height) |
| .style("border", "1px solid black") |
| ; |
| |
| // Plot pcapSecs vs. seq for the first pair TA/RA |
| svg |
| .selectAll('pcap_vs_seq_01') |
| .data(dataset) |
| .enter() |
| .append('circle') |
| .filter(function(d) {return d["pair_num"] == "1"}) |
| .attr('cx', pcapSecs) |
| .attr('cy', seq) |
| .attr('r', 1) |
| .append('title') |
| .text( |
| function(d) { |
| return d['typestr'] |
| + ': pcapSecs=' |
| + d['pcap_secs'] |
| + '; seq=' |
| + d['seq']; |
| }); |
| ; |
| |
| // Plot pcapSecs vs. seq for the second pair TA/RA |
| svg |
| .selectAll('pcap_vs_seq_02') |
| .data(dataset) |
| .enter() |
| .append('circle') |
| .filter(function(d) {return d["pair_num"] == "2"}) |
| .attr('cx', pcapSecs) |
| .attr('cy', seq) |
| .attr('r', 1) |
| .attr('fill', 'red') |
| .append('title') |
| .text( |
| function(d) { |
| return d['typestr'] |
| + ': pcapSecs=' |
| + d['pcap_secs'] |
| + '; seq=' |
| + d['seq']; |
| }); |
| ; |
| var pcapSecsAxis = d3.svg.axis() |
| .scale(pcapSecsScale) |
| .orient('bottom') |
| .ticks(5); |
| var seqAxis = d3.svg.axis() |
| .scale(seqScale) |
| .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(seqAxis); |
| } |
| |
| </script> |
| |
| </body> |
| </html> |
