D3 Examples - communicating with flashes

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
    path { stroke: #333; stroke-width: 1px; fill: none; }
  </style>
</head>
​
<body>
  <script>
    function getCrc(bytes) {
      var crc = 0;
      for (var b = 0; b < bytes.length; ++b) {
        crc ^= bytes[b] << 8;
        for (var i = 0; i < 8; ++i) {
          if (crc & 0x8000) {
            crc = (crc << 1) ^ 0x1021;
          } else {
            crc = (crc << 1) & 0xFFFF;
          }
        }
      }
      return crc & 0xFFFF;
    }
    function wrapBytes(bytes) {
      // console.log("sending bytes:", bytes);
      var data = []
      for (var i = 0; i < 8; ++i) {
        data.push(0xAA);
      }
      data.push(0x2A);
      data.push(bytes.length);
      
      data = data.concat(bytes);
      
      var crc = getCrc(data.slice(9));
      data.push(crc >> 8);
      data.push(crc & 0xFF);
​
      data.push(0xAA);
      return data;
    }
    function stringToBytes(s) {
      var bytes = [];
      for (i = 0; i < s.length; ++i) {
        bytes.push(s.charCodeAt(i));
      }
      return bytes;
    }
    function generateByteStream(network, password) {
            var bytes = wrapBytes([1, network.length].concat(stringToBytes(network)).concat([2, password.length]).concat(stringToBytes(password)));
      console.log("blinking bytes:", bytes.map(function (byte) {
        return '0x' + byte.toString(16);
      }));
      return bytes;
    }
    
    function bytesToBits(bytes) {
      var bits = [];
      for (var i = 0; i < bytes.length; ++i) {
        for (var j = 0; j < 8; ++j) {
          bits.push((bytes[i] & (1 << (7-j))) > 0 ? 1 : 0);
        }
      }
      return bits;
    }
    
    var margin = {top: 20, right: 10, bottom: 20, left: 200};
    var graphHeight = 10;
    var width = 1000 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
​
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
​
    
    var data = bytesToBits(generateByteStream("Burkina Faso", "Ouagadougou"));
    function generateDigitalOutputSignal() {
      var x = d3.scale.linear().domain([0, data.length-1]).range([0, width]);
      var y = d3.scale.linear().domain([0, 1]).range([graphHeight, 0]);
​
      var bitstream = svg.selectAll("path.bitstream")
          .data([data])
        .enter().append("path")
          .attr("class", "bitstream")
          .attr("d", d3.svg.line().interpolate("step-after")
                .x(function(d, i) { return x(i); })
                .y(y))
          .attr("transform", "translate("+margin.left+","+margin.top+")");
    }
    generateDigitalOutputSignal();
    
    d3.csv('real-bonafide-data.csv', function(error, samples) {
            var firstSample = 0;
      
      while (samples[firstSample].value > 900) {
        firstSample++;
      }
      samples = samples.slice(firstSample);
​
      var analogTotalTime = samples[samples.length-1].time - samples[0].time;
      var analogSamplesPerFrame = 76.7;
      
      function generateAnalogOutputSignal() {
        var x = d3.scale.linear().domain([samples[0].time, samples[samples.length-1].time]).range([0, width]);
        var y = d3.scale.linear().domain([1024, 240]).range([graphHeight, 0]);
​
        var analogSignal = svg.selectAll("path.analogSignal")
            .data([samples])
          .enter().append("path")
                .attr("class", "analogSignal")
                .attr("d", d3.svg.line()
                    .x(function(d, i) { return x(d.time); })
                    .y(function(d, i) { return y(d.value); }))
                .attr("transform", "translate("+margin.left+","+(margin.top*2+graphHeight)+")");
      }
      generateAnalogOutputSignal();
​
            function generateDigitizedSignal() {
        var x = d3.scale.linear().domain([samples[0].time, samples[samples.length-1].time]).range([0, width]);
        var y = d3.scale.linear().domain([0, 1]).range([graphHeight, 0]);
​
        var digitizedSignal = svg.selectAll("path.digitizedSignal")
            .data([samples])
          .enter().append("path")
                .attr("class", "digitizedSignal")
                .attr("d", d3.svg.line()
                    .x(function(d, i) { return x(d.time); })
                    .y(function(d, i) { return y(d.value > 500 ? 0 : 1); }))
                .attr("transform", "translate("+margin.left+","+(margin.top*3+graphHeight*2)+")");
        
      }
      generateDigitizedSignal();
    });
      
    function generateApproximatedAnalogOutputSignal() {
      var data = bytesToBits(generateByteStream("Burkina Faso", "Ouagadougou"));
​
      var x = d3.scale.linear().domain([0, data.length-1]).range([0, width]);
      var y = d3.scale.linear().domain([0, 1]).range([graphHeight, 0]);
​
      var outputsignal = svg.selectAll("path.outputsignal")
          .data([data])
        .enter().append("path")
          .attr("class", "outputsignal")
          .attr("d", d3.svg.line().interpolate(function(points) { return points.join("l5 0L"); })
            .x(function(d, i) { return x(i); })
            .y(y))
          .attr("transform", "translate("+margin.left+","+(margin.top*2+graphHeight)+")");
    }         
           
    
    console.log("you are now rocking with d3", d3);
  </script>
</body>
​
    