title: Is it possible to pass an ejs variable to embedded JavaScript File
body: <p>I have four files, and I'm using node for this project. 
  I have <strong>index.ejs</strong>,<strong>app.js</strong>,<strong>countymap.js</strong>,<strong>countries.geo.json</strong>.</p>
  
  <p>app.js renders the index.ejs file with an array of country codes (i.e. ["MEX","USA"]. Then index.ejs calls countrymap.js which uses d3 to render a map using the json in countries.geo.json. </p>
  
  <p>What I'd like to be able to do is take the country codes being passed through to index.ejs and use them to color the countries with the corresponding country codes according to the countries.geo.json file. I've tried several methods so far and none have seemed to work. </p>
  
  <p>If anybody has any ideas, I could really use the help. This is my final portfolio peace, and I'm stuck on the first hurdle. Also if you think I'm going about it all wrong and have another solution, I'd love to hear that too. </p>
  
  <p>Thanks, 
  George</p>
  
  <p>index.ejs</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;title&gt;Passport Social&lt;/title&gt;
  
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script type="text/javascript" src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://d3js.org/topojson.v2.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;div class="list-group"&gt;
                      &lt;li class="list-group-item active"&gt;Info 1&lt;/li&gt;
                      &lt;li class="list-group-item"&gt;Info 2&lt;/li&gt;
                      &lt;li class="list-group-item"&gt;Info 3&lt;/li&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-9"&gt;
                  &lt;div class="thumbnail"&gt;
                      &lt;svg style="background:grey;"&gt;&lt;/svg&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="js/countrymap.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>var express     = require("express"),
      app         = express(),
      bodyParser  = require("body-parser");
  
  
  var countrydata = ["MEX","USA"];
  
  app.get("/", function(req, res){
      res.render("index",{countries:countrydata});
  });
  
  app.use(bodyParser.urlencoded({extended:true}));
  app.set("view engine","ejs");
  app.use(express.static(__dirname+"/public"));
  
  
  app.listen(process.env.PORT,process.env.IP,function(){
      console.log("Passport Social Server is Running.")
  })
  </code></pre>
  
  <p>countrymap.js</p>
  
  <pre><code>/*global d3*/
  
  var w = 500,
      h = 300;
  
  var projection = d3.geo.mercator()
          .scale(1)
          .translate([0, 0]);
  var path = d3.geo.path()
          .projection(projection);
  
  var svg = d3.select("svg")
      .attr("width", w)
      .attr("height", h);
  
  d3.json("json/countries.geo.json", function(error, world) {
    if (error) return console.log(error);
    world.features.forEach(function(path){
    })
  
    var b = path.bounds(world),
        s = .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h),
        t = [(w - s * (b[1][0] + b[0][0])) / 2, (h - s * (b[1][1] + b[0][1])) / 2];
    projection.scale(s)
        .translate(t);
  
    svg.selectAll("path")
        .data(world.features).enter()
        .append("path")
        //.style("fill", "black")
        .style("stroke", "grey")
        .style("stroke-width", "1px")
        .attr("d", path)
        .attr("id", function(d, i) {return (d.id);});
  
  });
  </code></pre>