Position on common scale

This is a reproduction of a chart in chapter 5 of Visualization Analysis & Design by Tamara Munzner (2014) (Links to an external site.)Links to an external site. (ISBN 9781466508910)

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

//set up Canvas    
const svg = d3.select('body').append('svg').attr('width', 300).attr('height', 300);
    
//---------------------------------------------------------------------
// Circle
svg.append('circle').attr('cx', 200).attr('cy', 50).attr('r', 5).attr('fill', 'black');
    
//Line 
svg.append("line")
                          .attr("x1", 50)
                          .attr("y1", 50)
                         .attr("x2", 275)
                         .attr("y2", 50)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");
//Left endcap
svg.append("line")
                          .attr("x1", 50)
                          .attr("y1", 40)
                         .attr("x2", 50)
                         .attr("y2", 60)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");    
//right endcap
svg.append("line")
                          .attr("x1", 275)
                          .attr("y1", 40)
                         .attr("x2", 275)
                         .attr("y2", 60)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");    
    
//---------------------------------------------------------------------    
// Circle 2
svg.append('circle').attr('cx', 100).attr('cy', 75).attr('r', 5).attr('fill', 'black');

//Line 
svg.append("line")
                          .attr("x1", 50)
                          .attr("y1", 75)
                         .attr("x2", 275)
                         .attr("y2", 75)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");
//Left endcap
svg.append("line")
                          .attr("x1", 50)
                          .attr("y1", 65)
                         .attr("x2", 50)
                         .attr("y2", 85)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");

//right endcap
svg.append("line")
                          .attr("x1", 275)
                          .attr("y1", 65)
                         .attr("x2", 275)
                         .attr("y2", 85)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");

//---------------------------------------------------------------------
// Circle 3
svg.append('circle').attr('cx', 100).attr('cy', 125).attr('r', 5).attr('fill', 'black');

//Line 
svg.append("line")
                          .attr("x1", 50)
                          .attr("y1", 125)
                         .attr("x2", 125)
                         .attr("y2", 125)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");
//Left endcap
svg.append("line")
                          .attr("x1", 50)
                          .attr("y1", 115)
                         .attr("x2", 50)
                         .attr("y2", 135)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");

//right endcap
svg.append("line")
                          .attr("x1", 125)
                          .attr("y1", 115)
                         .attr("x2", 125)
                         .attr("y2", 135)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black"); 
    
    
//---------------------------------------------------------------------    
// Circle 4
svg.append('circle').attr('cx', 200).attr('cy', 150).attr('r', 5).attr('fill', 'black');
    
 //Line 
svg.append("line")
                          .attr("x1", 100)
                          .attr("y1", 150)
                         .attr("x2", 275)
                         .attr("y2", 150)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");    
//Left endcap
svg.append("line")
                          .attr("x1", 100)
                          .attr("y1", 140)
                         .attr("x2", 100)
                         .attr("y2", 160)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");

//right endcap
svg.append("line")
                          .attr("x1", 275)
                          .attr("y1", 140)
                         .attr("x2", 275)
                         .attr("y2", 160)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black"); 
            
  </script>
</body>

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