D3 Examples - Position in Common and Unaligned Scales

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