Recreate Marks and Channels

This is the recreate a example of Marks and Channels with a button to create new line.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    circle:hover {
      	fill: #F012BE;
    }
      div.tooltip {	
    		position: absolute;			
    		text-align: center;			
    		width: 150px;					
    		height: 30px;
      	vertical-align: middle;
      	line-height: 30px;
				font-family:'Open Sans', sans-serif;
    		background: #FFDC00;	
    		border: 0px;		
    		border-radius: 8px;			
    		pointer-events: none;			
		}
  </style>
</head>

<body>
  <div id="option">
    <input name="updateButton" 
           type="button" 
           value="New Line" 
           onclick="draw_line()" />
	</div>
  
  <script>
    const xValue = d => d.x;
    const yValue = d => d.y;
    const dxValue = d => d.dx;
    const dyValue = d => d.dy;
    const Name = d => d.sName;
    
    
    const xScale = d3.scaleLinear();
    const yScale = d3.scaleLinear();

const svg = d3.select("body").append("svg")
        .attr("width", 1000)
        .attr("height", 500);

var temp = d3.select('body').append('div')	
    							.attr('class', 'tooltip')				
    							.style('opacity', 0);
      
    const margin = { left: 120, right: 120, top: 20, bottom: 120 };
    const width = svg.attr('width');
    const height = svg.attr('height');
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;

yScale
         .domain(d3.extent(data, yValue))
         .range([innerHeight, 0])
         .nice();
    
      g.selectAll('circle').data(data)
        .enter().append('circle')
        .attr('cx', d => xScale(xValue(d)))
        .attr('cy', d => yScale(yValue(d))+50)
      	.attr('r', 20)
				.attr('fill', 'black')
        .attr('fill-opacity', 0.6)
        .on("mouseover", function(d) {
            temp.transition()		
                .duration(200)		
                .style("opacity", 1);		
          	temp.html(d.name)	
               .style("left", (d3.event.pageX - 60) + "px")		
               .style("top", (d3.event.pageY + 20) + "px");	
            })
        		.on("mouseout", function(d) {		
            	temp.transition()		
              	 .duration(500)		
               	.style("opacity", 0);	
        			});
      
    
   			function draw_line() {
         g.selectAll("line")
         	.filter(function() { return this.style.stroke == "red"; })
         	.remove()
   	     var xrandom = Math.floor(d3.randomUniform(0, 4)());
         var yrandom = Math.floor(d3.randomUniform(0, 2)());
    	   var xrandom_d = Math.floor(d3.randomUniform(0, 4)());
         var yrandom_d = Math.floor(d3.randomUniform(0, 2)());    
         while (xrandom == xrandom_d && yrandom==yrandom_d) {
           		var xrandom_d = Math.floor(d3.randomUniform(0, 4)());
         			var yrandom_d = Math.floor(d3.randomUniform(0, 2)());  
         }
    			g.append('line')
        			.style("stroke", "red")  
        			.style("stroke-linecap", "round")
    					.style("stroke-width", 10) 
        			.attr("x1", xScale(xrandom))     
    					.attr("y1", yScale(yrandom)+50)      
    					.attr("x2", xScale(xrandom_d))     
    					.attr("y2", yScale(yrandom_d)+50);           
    		}
    
    
    
    	g.append('line')
        .style("stroke", "black")  
        .style("stroke-linecap", "round")
    		.style("stroke-width", 10) 
        .attr("x1", xScale(0))     
    		.attr("y1", yScale(0)+50)      
    		.attr("x2", xScale(1))     
    		.attr("y2", yScale(1)+50);

g.append('line')
        .style("stroke", "black")  
        .style("stroke-linecap", "round")
        .style("stroke-width", 10) 
    		.attr("x1", xScale(2))     
    		.attr("y1", yScale(0)+50)      
    		.attr("x2", xScale(1))     
    		.attr("y2", yScale(1)+50);

</script>
</body>

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