title: d3 with jade template
body: <p>I am new to both d3 and jade. I have jade template as below,</p>
  
  <pre><code>div(id='viz')
  script(type="text/javascript")
    d3.select("#viz")
      .append("svg")
        .attr('width', 600)
        .attr('height', 300)
        .append('circle')
          .attr('cx', 300)
          .attr('cy', 150)
          .attr('r', 30)
          .attr('fill', '#26963c')
  </code></pre>
  
  <p>I am trying to add small circle in <code>div viz</code>. When page is loaded i dont see any circle, html code via inspector is as below,</p>
  
  <pre><code>&lt;div id="viz"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;&lt;d3 body class="select"&gt;&lt;div svg class="append"&gt;&lt;div width 600 class="attr"&gt;&lt;/div&gt;&lt;div height 300 class="attr"&gt;&lt;/div&gt;&lt;div circle class="append"&gt;&lt;div cx 300 class="attr"&gt;&lt;/div&gt;&lt;div cy 150 class="attr"&gt;&lt;/div&gt;&lt;div r 30 class="attr"&gt;&lt;/div&gt;&lt;div fill #26963c class="attr"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/d3&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Can anyone put some light on what is going wrong here.</p>