title: Why isn't my SVG being created?
body: <p>My code looks like this:</p>
  
  <p>Index.html</p>
  
  <pre><code>&lt;head&gt;
      &lt;script type="text/javascript" src="d3/d3.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script type="text/javascript" src="Fuel_Plan.js"&gt;&lt;/script&gt;
      &lt;div class="mydiv"&gt;
      &lt;/div&gt;   
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Fuel_Plan.js:</p>
  
  <pre><code>var width = 800;
  var height = 300;
  
  
  var svg = d3.select(".mydiv")
      .append("svg")
      .attr("width", width )
      .attr("height", height );
  </code></pre>
  
  <p>What am I trying to achieve? Draw a blank SVG (and append a background image to it, but that is for later!)
  So I select "mydiv" and i append an SVG to it, then I give it attrs, of width and height.</p>
  
  <p>When I go into my browser though, I am seeing this:</p>
  
  <p><a href="https://i.stack.imgur.com/JJk5a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JJk5a.png" alt="An image of my browser with the inspected element of the div"></a></p>
  
  <p>As you can see it's not correctly displaying the SVG, can someone help me what I'm doing wrong here? I'm sure i'm missing something basic!</p>
  
  <p><strong>Console is empty</strong></p>