title: D3 JS chart is cut off after adding labels for X and Y axis
body: <p>I am making a scatterplot in D3 with the code below and the textlabels of the right circles are being cut off, after putting textlabels on the X and Y axis.</p>
  
  <p>Here is a working jsFiddle:</p>
  
  <p><a href="https://jsfiddle.net/chemok78/1vcat0s8/4/" rel="nofollow noreferrer">https://jsfiddle.net/chemok78/1vcat0s8/4/</a> </p>
  
  <p>Adding the X and Y axis labels seems to move the whole chart to the right and up, making it move a bit out of the containing div. Anyone can help me how to fix this?</p>
  
  <pre><code>var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json";
  d3.json(url, function(json) {
  
    var data = json;
  
    var margin = {
      top: 40,
      right: 100,
      bottom: 80,
      left: 80
    };
    var w = 1000 - margin.left - margin.right;
    var h = 800 - margin.top - margin.bottom;
  
    var svg = d3.select("#chart")
      .append("svg")
      .attr("width", w + margin.left + margin.right)
      .attr("height", h + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
    var maxRank = d3.max(data, function(d) {
  
      return d.Place;
  
    });
  
    var minSeconds = d3.min(data, function(d) {
  
      return d.Seconds;
  
    });
  
    var maxSeconds = d3.max(data, function(d) {
  
      return d.Seconds;
  
    });
  
  
    var formatTime = d3.time.format("%M:%S");
    var formatSeconds = formatMinutes = function(d) {
      return formatTime(new Date(2016, 0, 0, 0, 1, d));
    };
  
    var xScale = d3.scale.linear()
      .domain([maxSeconds + 5, minSeconds])
      .range([0, w]);
  
    var yScale = d3.scale.linear()
      .domain([0, maxRank + 2])
      .range([0, h]);
  </code></pre>