title: Getting d3.scale is undefined - works in codepen
body: <p>For some reason I am getting <code>d3.scale</code> is undefined. D3 is properly loaded; I'm using the one listed on the main d3js.org site <a href="https://d3js.org/" rel="noreferrer">here.</a></p>
  
  <p>My JS file handling the D3 code:</p>
  
  <pre><code>InitiateChart_1();
  
  function InitiateChart_1()
  {
      var data = [5,10,15,20,25];
      var height = 500, width = 500;
  
      var xScale = d3.scale.linear()
          .domain([0,60])
          .range([0,width]);
  
      var canvas = d3.select("body")
          .append("svg")
          .attr("id","chart1")
          .attr("width",width)
          .attr("height",height);
  
      var bars = canvas.selectAll("rect")
          .data(data)
          .enter()
              .append("rect")
              .attr("height",10)
              .attr("width",function(d){return xScale(d);})
              .attr("y",function(d,i){return i * 12;})
  }
  </code></pre>
  
  <p>My entire HTML file:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;SHED Report Prototype&lt;/title&gt;
      &lt;meta charset='utf-8'&gt;
      &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src='js/studentloans.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help is greatly appreciated.</p>