Position in Common and Unaligned Scales

Built from scratch an example from Tamara Munzner's "Visualization Analysis & Design"

<!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 xScale = d3.scaleLinear().domain([0,500]).range([0,500]);
    var yScale = d3.scaleLinear().domain([0,500]).range([0,500]);
    var data = [
      					{x1:0, y1:20, x2:200, y2:20, mark:25},
      					{x1:0, y1:50, x2:200, y2:50, mark:150},
      					{x1:0, y1:200, x2:100, y2:200, mark:75},
      					{x1:50, y1:230, x2:200, y2:230, mark:150}
      				];
      
        
        
      
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    var g = svg.append("g")
    					.attr('transform', 'translate(300,100)');
    
    
    var enter = g.selectAll('line').data(data).enter()
    	
    enter.append('line')
    	.attr('x1', function(d){return(xScale(d.x1));})
    	.attr('x2', function(d){return(xScale(d.x2));})
    	.attr('y1', function(d){return(yScale(d.y1));})
    	.attr('y2', function(d){return(yScale(d.y2));})
    	.attr('stroke','black')
    	.attr('stroke-width',2)
    
    enter.append('rect')
   		.attr('x', function(d){return(d.mark);})
   		.attr('y', function(d){return(d.y1-5);})
   		.attr('height',10)
   		.attr('width', 10)
   		.attr("fill", "black");
    
    enter.append('line')
    	.attr('x1',function(d){return(d.x1);})
    	.attr('x2',function(d){return(d.x1);})
    	.attr('y1',function(d){return(d.y1 + 5);})
    	.attr('y2',function(d){return(d.y1 - 5);})
    	.attr('stroke-width',2)
    	.attr('stroke','black');
    
    
    enter.append('line')
    	.attr('x1',function(d){return(d.x2);})
    	.attr('x2',function(d){return(d.x2);})
    	.attr('y1',function(d){return(d.y2 + 5);})
    	.attr('y2',function(d){return(d.y2 - 5);})
    	.attr('stroke-width',2)
    	.attr('stroke','black');

var textlabels = g.append('g')
    
    svg.append("text")
      .text("Exercise in mechanics:  Length and Position")
      .attr("y", 30)
      .attr("x", 70)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
    
    
    	textlabels.append('text')
    	.text('Points on common Scale:')
    	.attr('x', -275)
    	.attr('y', 40)
    	.attr('font-size', 20)

textlabels.append("text")
      .text("Points on unaligned scales:")
      .attr("y", 225)
      .attr("x", -275)
      .attr("font-size", 20);
      //.attr("font-family", "monospace")

</script>
</body>

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