javascript - d3 with jade template -

i new both d3 , jade. have jade template below,

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') 

i trying add small circle in div viz. when page loaded dont see circle, html code via inspector below,

<div id="viz"></div> <script type="text/javascript"><d3 body class="select"><div svg class="append"><div width 600 class="attr"></div><div height 300 class="attr"></div><div circle class="append"><div cx 300 class="attr"></div><div cy 150 class="attr"></div><div r 30 class="attr"></div><div fill #26963c class="attr"></div></div></div></d3></script> 

can put light on going wrong here.

you need . dot after script(type="text/javascript")

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') 

source