Cut Out Tabs

A function to draw tabs for a cut out and fold model. Code for parallel coordinates from here.

<!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>
    var line1 = [{x: 200, y: 200},{x: 300, y: 300}];
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    
    var line = svg.append("line")
    	.attr("x1", line1[0].x)
    	.attr("y1", line1[0].y)
    	.attr("x2", line1[1].x)
    	.attr("y2", line1[1].y)
    	.style("stroke", "black");
    
    generateCutOutFlap(line1, 20, 0.1, 1);
   
    function generateCutOutFlap(line1, outDistance, inDistance, direction) {
      var t = calcLineTranslation(outDistance, line1, direction);
      
      var x1 = line1[0].x - t.dx,
          y1 = line1[0].y - t.dy,
          x2 = line1[1].x - t.dx,
          y2 = line1[1].y - t.dy;
      
      var newLine = [{x: x1, y: y1},{x: x2, y: y2}];
      
      var point1 = calcPointOnLine(newLine, inDistance),
      		point2 = calcPointOnLine(newLine, 1 - inDistance);
          
      var line2 = svg.append("line")
        .attr("x1", point1.x)
        .attr("y1", point1.y)
        .attr("x2", point2.x)
        .attr("y2", point2.y)
    		.style("stroke", "red");
      
      var connector1 = svg.append("line")
        .attr("x1", line1[0].x)
        .attr("y1", line1[0].y)
        .attr("x2", point1.x)
        .attr("y2", point1.y)
    		.style("stroke", "red");
      
      var connector2 = svg.append("line")
        .attr("x1", line1[1].x)
        .attr("y1", line1[1].y)
        .attr("x2", point2.x)
        .attr("y2", point2.y)
    		.style("stroke", "red");

}
    
    function calcLineTranslation(distance, line1, direction) {
      var x1_x0 = line1[1].x - line1[0].x,
          y1_y0 = line1[1].y - line1[0].y,
          x2_x0, y2_y0;
      
      if (y1_y0 === 0) {
        x2_x0 = 0;
        y2_y0 = distance;
      } else {
        var angle = Math.atan((x1_x0) / (y1_y0));
        x2_x0 = (direction*-1)*distance * Math.cos(angle);
        y2_y0 = direction*distance * Math.sin(angle);
      }
      
      return {
        dx: x2_x0,
        dy: y2_y0
      };
    }
    
    function calcPointOnLine(line1, percent) {
      var x1_x0 = line1[1].x - line1[0].x,
          y1_y0 = line1[1].y - line1[0].y;
                
      var newX = line1[0].x + percent*x1_x0,
          newY = line1[0].y + percent*y1_y0;
      
      return {
        x: newX,
        y: newY
      }
    }

</script>
</body>

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