Bus Breakdown, Accident, and Injury

Working through the book Getting Started with D3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    /*svg { width:100%; height: 100% }*/
    svg{margin-left: 50;}
        
    .axis path{
        fill:none;
        stroke: black;
    }
    .axis {
        font-size:8pt;
        font-family:sans-serif;
    }
    .tick {
        fill:none;
        stroke:black;
    }
    circle{
        stroke:black;
        stroke-width:0.5px;
        fill:RoyalBlue;
        opacity:0.6;
    }
    
  </style>
</head>

<body>
  <script>
    
    d3.json('bus_perf.json', draw);
    
    function draw(data) {
        "use strict";
        
        var margin = 50,
            width = 700,
            height = 400,
            x_extent = d3.extent(data, function(d){return d.collision_with_injury}),
            y_extent = d3.extent(data, function(d){return d.dist_between_fail});
            
        var x_scale = d3.scale.linear()
            .range([margin,width-margin])
            .domain(x_extent)
        
        var y_scale = d3.scale.linear()
            .range([height-margin, margin])
            .domain(y_extent)
        
        var x_axis = d3.svg.axis().scale(x_scale)
        var y_axis = d3.svg.axis().scale(y_scale).orient('left')
        
        
        d3.select("body")
          .append('svg')
            .attr('width', width)
            .attr('height', height)
          .selectAll('circle')
          .data(data)
          .enter()
          .append('circle')
            .attr('cx', function(d){return x_scale(d.collision_with_injury)})
            .attr('cy', function(d){return y_scale(d.dist_between_fail)})
            .attr('r', 5)
        
        d3.select("svg") 
          .append("g") 
            .attr("class", "x axis") 
            .attr("transform", "translate(0," + (height-margin) + ")") 
          .call(x_axis);
        
        d3.select("svg") 
          .append("g") 
            .attr("class", "y axis") 
            .attr("transform", "translate(" + margin + ", 0 )") 
          .call(y_axis);
         
        d3.select('.y.axis')
            .append('text')
            .text('mean distance between failure (miles)')
            .attr('transform', "rotate (-90, -43, 0) translate(-280)")
                    
        d3.select('.x.axis')
          .append('text')
            .text('collisions with injury (per million miles)')
            .attr('x', function(){return (width / 2) - margin})
            .attr('y', margin/1.5)
        
    }
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js