title: getting D3.js to display using container
body: <p>I have a novice d3.js question. I have tried entering a lot of tutorial inputs but I can never seem to get the display output working. Here's one example. I have a d3.js page template example (from Scott Murray's D3 book.)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;D3 Page Template&lt;/title&gt;
          &lt;script type="text/javascript" src="d3/d3.v3.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript"&gt;
              // Your beautiful D3 code will go here
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So now, I go to: <a href="http://www.recursion.org/d3-for-mere-mortals/" rel="nofollow">http://www.recursion.org/d3-for-mere-mortals/</a> and try to enter the first code example in the D3 container:</p>
  
  <pre><code>var rectDemo = d3.select("#rect-demo").
    append("svg:svg").
    attr("width", 400).
    attr("height", 300);
  
  rectDemo.append("svg:rect").
    attr("x", 100).
    attr("y", 100).
    attr("height", 100).
    attr("width", 200);
  </code></pre>
  
  <p>I have scoured the Web searching for sources on exactly how to structure your D3 code within an html file, but unfortunately almost all of the tutorials assume that you'll know where to place the relevant code lines to make it all work when you open your browser. This general problem has plagued me for the past several weeks, in getting off the ground.</p>
  
  <p>When I entered the above in the container, I got no output:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;D3 Page Template&lt;/title&gt;
          &lt;script type="text/javascript" src="d3/d3.v3.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript"&gt;
              // Your beautiful D3 code will go here
              // http://www.recursion.org/d3-for-mere-mortals/
              var rectDemo = d3.select("#rect-demo").
                append("svg:svg").
                attr("width", 400).
                attr("height", 300);
  
              rectDemo.append("svg:rect").
                attr("x", 100).
                attr("y", 100).
                attr("height", 100).
                attr("width", 200);
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can someone explain briefly why this is, and what I have to do, to get this example to display? Many thanks! I've been working all day on trying to get examples to show up and minor modifications I try to make, make any example output that's copied and pasted, disappear!</p>