title: running D3 code on DOM ready without jquery
body: <p>Following the advice of <a href="https://stackoverflow.com/questions/7169370/d3-js-and-document-onready">this</a> SO question/answer, I put my D3 code below the html and inside a function that's executed <code>onload</code>, however, when I test this on my MAMP local server, D3 code is not executing. Note, if I run the <code>runD3code</code> in the console then the intended bar chart appears, but if I  included that code inside the <code>runD3code</code> function in index.html then the bar chart doesn't appear. I also note that including the D3 below the html is how the library author does it <a href="http://bl.ocks.org/mbostock/7322386" rel="nofollow noreferrer">here</a>.  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  
  
      &lt;style type="text/css"&gt;   
        .chart div {
          font: 10px sans-serif;
          background-color: steelblue;
          text-align: right;
          padding: 3px;
          margin: 1px;
          color: white;
        }
      &lt;/style&gt;
  
    &lt;body onload="runD3code()"&gt;
        &lt;div class="chart"&gt;
  
        &lt;/div&gt;
          &lt;script src="./d3.js" charset="utf-8"&gt;
         &lt;script&gt;
         function runD3code() {
          console.log("not getting called");
           var data = [4, 8, 15, 16, 23, 42];
             d3.select(".chart")
              .selectAll("div")
              .data(data)
            .enter().append("div")
              .style("width", function(d) { return d * 10 + "px"; })
              .text(function(d) { return d; });
          }
          &lt;/script&gt;
  
    &lt;/body&gt;
  </code></pre>
  
  <p>Then, I even tried putting it in a <a href="https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery">document ready equivalent</a>, but the D3 code still didn't run</p>
  
  <pre><code>       (function(){
      var tId = setInterval(function(){if(document.readyState == "complete") onComplete()},11);
      function onComplete(){
          clearInterval(tId);    
  
           var data = [4, 8, 15, 16, 23, 42];
             d3.select(".chart")
              .selectAll("div")
              .data(data)
            .enter().append("div")
              .style("width", function(d) { return d * 10 + "px"; })
              .text(function(d) { return d; });
  
          };
  })()
  </code></pre>
  
  <p>Can you suggest a solution to this problem?</p>