zamfi · August 3, 2017 20:24
diff --git a/.block b/.block
 license: mit
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://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
 </head>

 <body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!    
    var newSvg = (data, fname) => {
      var svg = d3.select("body").append("svg")
                    .attr("width", 960)
                    .attr("height", 71),
          margin = {top: 20, right: 20, bottom: 30, left: 50},
          width = +svg.attr("width") - margin.left - margin.right,
          height = +svg.attr("height") - margin.top - margin.bottom
          g = svg.append("g")
                 .attr("transform", "translate("+margin.left+","+margin.top+")");

      var x = d3.scaleLinear()
                .rangeRound([0, width]);
      var y = d3.scaleLinear()
                .rangeRound([height, 0]);
      
      x.domain(d3.extent(data, d => d.micros));
      y.domain(d3.extent(data, d => d.value));
      
      g.append("g")
         .attr("transform", "translate(0,"+height+")")
         .call(d3.axisBottom(x))
       .select(".domain")
         .remove();
      
      g.append("g")
         .call(d3.axisLeft(y).tickValues(y.domain()))
       .append("text")
         .attr("fill", "#000")
 //       	 .attr("transform", "rotate(-90)")
         .attr("y", height - 10)
      	 .attr("x", 6)
         .attr("dy", "0.71em")
      	 .attr("text-anchor", "start")
 //       	 .attr("font-size", 9)
      	 .attr("font-style", "italic")
      	 .text(fname)
      
      var line = d3.line()
           .x(d => x(d.micros))
           .y(d => y(d.value));

      return {svg, line, g};
    }
    
    var analogLine = data => {
 			var {svg, line, g} = newSvg(data, "analog");
          
      g.append("path")
      	.datum(data)
      	.attr("fill", "none")
      	.attr("stroke", "steelblue")
      	.attr("stroke-linejoin", "round")
      	.attr("stroke-linecap", "round")
      	.attr("stroke-width", 1.5)
      	.attr("d", line);
    }
    
    var digitalCutoffLine = data => {
 			data.forEach(d => {
        d.value = d.value < 512 ? 0 : 1;
      })
      var {svg, line, g} = newSvg(data, "digital");
      
      g.append("path")
      	.datum(data)
      	.attr("fill", "none")
      	.attr("stroke", "steelblue")
      	.attr("stroke-linejoin", "round")
      	.attr("stroke-linecap", "round")
      	.attr("stroke-width", 1.5)
      	.attr("d", line);
    }
    
    d3.csv('real-bonafide-data-cropped.csv', d => { 
      d.micros = +d.micros/1000000;
      d.value = +d.value;
      return d;
    }, (error, data) => {
      if (error) {
        svg.append("text")
          .text(error)
          .attr("y", 200)
          .attr("x", 120)
          .attr("font-size", 36)
          .attr("font-family", "monospace")
        throw error;
      }
      
      analogLine(data);
      digitalCutoffLine(data);
    });

  </script>
 </body>
diff --git a/real-bonafide-data-cropped.csv b/real-bonafide-data-cropped.csv
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var newSvg = (data, fname) => {
	var svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 71),
	margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom
	g = svg.append("g")
	.attr("transform", "translate("+margin.left+","+margin.top+")");

	var x = d3.scaleLinear()
	.rangeRound([0, width]);
	var y = d3.scaleLinear()
	.rangeRound([height, 0]);

	x.domain(d3.extent(data, d => d.micros));
	y.domain(d3.extent(data, d => d.value));

	g.append("g")
	.attr("transform", "translate(0,"+height+")")
	.call(d3.axisBottom(x))
	.select(".domain")
	.remove();

	g.append("g")
	.call(d3.axisLeft(y).tickValues(y.domain()))
	.append("text")
	.attr("fill", "#000")
	// .attr("transform", "rotate(-90)")
	.attr("y", height - 10)
	.attr("x", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "start")
	// .attr("font-size", 9)
	.attr("font-style", "italic")
	.text(fname)

	var line = d3.line()
	.x(d => x(d.micros))
	.y(d => y(d.value));

	return {svg, line, g};
	}

	var analogLine = data => {
	var {svg, line, g} = newSvg(data, "analog");

	g.append("path")
	.datum(data)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-linejoin", "round")
	.attr("stroke-linecap", "round")
	.attr("stroke-width", 1.5)
	.attr("d", line);
	}

	var digitalCutoffLine = data => {
	data.forEach(d => {
	d.value = d.value < 512 ? 0 : 1;
	})
	var {svg, line, g} = newSvg(data, "digital");

	g.append("path")
	.datum(data)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-linejoin", "round")
	.attr("stroke-linecap", "round")
	.attr("stroke-width", 1.5)
	.attr("d", line);
	}

	d3.csv('real-bonafide-data-cropped.csv', d => {
	d.micros = +d.micros/1000000;
	d.value = +d.value;
	return d;
	}, (error, data) => {
	if (error) {
	svg.append("text")
	.text(error)
	.attr("y", 200)
	.attr("x", 120)
	.attr("font-size", 36)
	.attr("font-family", "monospace")
	throw error;
	}

	analogLine(data);
	digitalCutoffLine(data);
	});

	</script>
	</body>