testing data

forked from anonymous's block: testing data

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

https://d3js.org/d3.v4.min.js