zamfi · November 2, 2015 20:47
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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>
diff --git a/real-bonafide-data.csv b/real-bonafide-data.csv
	<!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.top3+graphHeight2)+")");

	}
	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>