title: D3 Rect elements not displaying
body: <p>I'm attempting to set up a simple bar chart using D3 version 4.x.x However, I believe I am doing everything correctly, but can not seem to get the rects to display. I've attached a codepen to see this. </p>
  
  <p>Thank you in advance for any noob issue that is causing this as I am new to D3. 
  <a href="http://codepen.io/PizzaPokerGuy/pen/XpoJxG?editors=0111" rel="nofollow noreferrer">http://codepen.io/PizzaPokerGuy/pen/XpoJxG?editors=0111</a></p>
  
  <pre><code>enter code here//Width of svg, will be used again down the road
  const width = 1000;
  //Height of svg, will be used again down the road
  const height = 800;
  //Padding so things have room to be displayed within svg
  const padding = 60;
  //Create our SVG container
  var svg = d3.select("body")
  .append('svg')
  .attr("width", width)
  .attr("height", height);
  
  //JSON Enter data
  var data =      d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/mast er/GDP-data.json',
    (error, data) =&gt; {
     var chartData = data.data;
     //Stores barWidth variable, math.ciel rounds up, used to set an equal width for each rect
    var barWidth = Math.ceil((width - padding) / chartData.length);
     //Define xScale
    const xScale = d3.scaleLinear()
    .domain([0, d3.max(chartData, (d) =&gt; d[0])])
    .range([padding, width - padding]);
    //Define yScale
  const yScale = d3.scaleLinear()
    .domain([0, d3.max(chartData, (d) =&gt; d[1])])
    .range([height - padding, padding]);
  
  //Selects SVG elements and selects all rect elements within it
  svg.selectAll("rect")
    //Adds data to use later
    .data(chartData)
    //Allows us to add items to the dom if data is larger than ammoutn of rect elements selected
    .enter()
    //Adds rect element
    .append("rect")
    //Adds x attribute to x based off of d(chartData), need to create a date as a string is not enough
    .attr("x", (d) =&gt; xScale(new Date(d[0])))
    //Sets y attribute of rectangle
    .attr("y", (d) =&gt; yScale(d[1]))
    //Sets height, we minus the value from height to invert the bars
    .attr("height", (d) =&gt; height - yScale(d[1]))
    //sets width of rect elements
    .attr("width", barWidth)
    //fill in color of rects
    .attr("fill", "black");
  </code></pre>
  
  <p>});</p>