title: Where to attach d3 visualization scripts in a jade file in node/express
body: <p>I am learning d3 visualization library and I understand how to use it on html. However my requirement is to use the library in Jade.</p>
  
  <p>The following works when invoked as a html</p>
  
  <pre><code>//File: server.js (node)
   app.engine('html', require('ejs').renderFile);
   response.render('playg.html');
  
  //File: play.html
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;D3.js Playground&lt;/title&gt;
  &lt;script src="d3/d3.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/playground.css"&gt;
  &lt;style type="text/css" id="user-css"&gt;&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>According to d3 documentation, I am supposed to add the following code on the console window in Chrome</p>
  
  <pre><code>var circleRadii = [40, 20, 10];
  var svgContainer = d3.select("body").append("svg")
      .attr("width", 200)
      .attr("height", 200);
  var circles = svgContainer.selectAll("circle")
      .data(circleRadii)
      .enter()
      .append("circle");
  var circleAttributes = circles
      .attr("cx", 50)
      .attr("cy", 50)
      .attr("r", function (d) { return d; })
      .style("fill", function(d) {
          var returnColor;
          if (d === 40) { returnColor = "green";
          } else if (d === 20) { returnColor = "purple";
          } else if (d === 10) { returnColor = "red"; }
          return returnColor;
      });
  </code></pre>
  
  <p>All this work perfectly and yield the svg concentric circles on the browser. I now decided to switch over to Jade as this is my requirement. The following code does not work. There are no errors either. Please help!</p>
  
  <pre><code>//File: server.js (node)    
  response.render('chartex');
  
  //File: chartex.jade
  doctype html
  html(lang="en")
  head
      title HEllO
      script(src='d3/d3.min.js')
      link(rel="stylesheet", href="css/playground.css", type="text/css")
  body
      p Hey!
  script
      var circleRadii = [40, 20, 10];
  var svgContainer = d3.select("body").append("svg")
      .attr("width", 200)
      .attr("height", 200);
  var circles = svgContainer.selectAll("circle")
      .data(circleRadii)
      .enter()
      .append("circle");
  var circleAttributes = circles
      .attr("cx", 50)
      .attr("cy", 50)
      .attr("r", function (d) { return d; })
      .style("fill", function(d) {
          var returnColor;
          if (d === 40) { returnColor = "green";
          } else if (d === 20) { returnColor = "purple";
          } else if (d === 10) { returnColor = "red"; }
          return returnColor;
      });
  </code></pre>