<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Magical waves in numbers</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 rateScale;
      var pcapSecsScale;

      d3.csv('imaginary.data', function(error, data) {
        if (error) {
          console.log(error);
        } else {
          console.log(data);
          dataset = data;
          init();
          visualize();
        }
      });

      function init() {
        pcapSecsScale = d3.scale
                 .linear()
                 .domain([
                          d3.min(dataset,
                            function(d) { return parseFloat(d['pcap_secs']); }),
                          d3.max(dataset,
                            function(d) { return parseFloat(d['pcap_secs']); })
                 ])
                 .range([2 * padding, width - 2 * padding]);

        seqScale = d3.scale
                 .linear()
                 .domain([
                          d3.min(dataset,
                            function(d) { return Number(d['seq']); }),
                          d3.max(dataset,
                            function(d) { return Number(d['seq']); })
                 ])
                 .range([height - padding, padding]);

        rateScale = d3.scale
                 .linear()
                 .domain([
                          d3.min(dataset,
                            function(d) { return Number(d['rate']); }),
                          d3.max(dataset,
                            function(d) { return Number(d['rate']); })
                 ])
                 .range([height - padding, padding]);
      }

      function seq(d) {
        var seq = seqScale(Number(d['seq']));
        log('seq = ' + seq);
        return seq;
      }

      function rate(d) {
        var rate = rateScale(Number(d['rate']));
        log('rate = ' + rate);
        return rate;
      }

      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. rate
        svg
          .selectAll('pcap_vs_rate')
          .data(dataset)
          .enter()
          .append('circle')
          .attr('cx', pcapSecs)
          .attr('cy', rate)
          .attr('r', 1)
          .append('title')
          .text(
             function(d) {
               return d['typestr']
                 + ': pcapSecs='
                 + d['pcap_secs']
                 + '; rate='
                 + d['rate'];
             });
        ;

        // Plot pcapSecs vs. seq
        svg
          .selectAll('pcap_vs_seq')
          .data(dataset)
          .enter()
          .append('circle')
          .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 rateAxis = d3.svg.axis()
          .scale(rateScale)
          .orient('left')
          .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(' + 2 * padding + ',0)')
          .call(rateAxis);
        svg.append('g')
          .attr('class', 'axis')
          .attr('fill', 'red')
          .attr('transform', 'translate(' + (width - 2 * padding) + ',0)')
          .call(seqAxis);
      }

    </script>

  </body>
</html>