title: Why are not all my text labels showing in my Scatterplot?
body: <p><strong>QUESTION:</strong></p>
  
  <p>Why are not all my text labels showing in my Scatterplot ?</p>
  
  <p>It should iterate over each element in my data, but it seems to stop after a few ?</p>
  
  <p>What have I done wrong ?</p>
  
  <p>Thanks in advance for your answers.</p>
  
  <hr>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" href="main.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container-fluid"&gt;
              &lt;h1 class="text-center title"&gt;Doping and Performance for Cyclists&lt;/h1&gt;
              &lt;div class="text-center"&gt;
                  &lt;div id="results"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
      &lt;script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;   
          d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json", function(error, json) {
            if (error) {
                return console.warn(error);
            }
            visualizeThe(json);
          });
  
          function visualizeThe(data) {
  
              const  margin = {
                  top: 10,
                  right: 6,
                  bottom: 20,
                  left: 70
              }
  
              const w = 900 - margin.left - margin.right;
              const h = 500 - margin.top - margin.bottom;
              const barWidth = Math.ceil(w / data.length);
              const parse = d3.timeParse("%m:%s");
              const format = d3.timeFormat("%m:%s");
  
              const  minTime = d3.min(data, (d) =&gt; (d["Seconds"]));
              const  maxTime = d3.max(data, (d) =&gt; (d["Seconds"]));
  
              const xScale = d3.scaleTime()
                  .domain([maxTime, minTime])    
                  .range([0, w]);   
  
              const yScale = d3.scaleLinear()
                  .domain([d3.max(data, (d) =&gt; d["Place"]), 0])
                  .range([h, 0]);
  
              const xAxis = d3.axisBottom(xScale);
  
              const yAxis = d3.axisLeft(yScale)
  
              const svg = d3.select("#results")
                  .append("svg")
                  .attr("width",  w + margin.left + margin.right)
                  .attr("height", h + margin.top + margin.bottom);
  
              var div = d3.select("body")
                      .append("div")  
                      .attr("class", "tooltip")               
                      .style("opacity", 0);
  
  
              svg.append("g")
                 .attr("transform", "translate(40," + (h+margin.top) + ")")
                 .call(xAxis);
  
              svg.append("g")
                 .attr("transform", "translate(40," + margin.top + ")")
                 .call(yAxis);
  
              svg.selectAll("circle")
                  .data(data)
                  .enter()
                  .append("circle")
                  .attr("class", "dot")
                  .attr("r", 4)
                  .attr("cx", (d) =&gt; 40+xScale(d["Seconds"]))
                  .attr("cy", (d) =&gt; yScale(d["Place"]))
                  .attr("fill", (d) =&gt;  (d["Doping"] == "" ? "black" : "red"))
                  .on("mouseover", function(d) {      
                  div.transition()        
                      .duration(200)      
                      .style("opacity", .9);      
                  div .html(d["Doping"] == "" ? "No Doping Allegations" : d["Doping"] )   
                      .style("left", (d3.event.pageX - 7) + "px")     
                      .style("top", (d3.event.pageY - 30) + "px");    
                  })                  
                  .on("mouseout", function(d) {       
                  div.transition()        
                      .duration(500)      
                      .style("opacity", 0);   
                  });
  
              svg.selectAll("text")
                  .data(data)
                  .enter()
                  .append("text")
                  .text((d) =&gt; d["Name"])
                  .attr("x", (d) =&gt;  40+xScale(d["Seconds"]))
                  .attr("y", (d) =&gt; yScale(d["Place"]))
                  .attr("transform", "translate(8,4)")
                  .style("font-size", 10);
          }
  
      &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>