title: How to use D3 from external file
body: <p>I am trying to create a simple tree map with D3.js but want to include the d3 code from an external file. I have 2 files, treemap.js and treemap.html. However, the treemap is not displaying and there is no errors popping up in the console. Am I referencing the d3 file correctly? Thank you.</p>
  
  <p>This is the code inside the treemap.js</p>
  
  <pre><code>var tree = {
      name: "tree",
      children: [
          { name: "Word-wrapping comes for free in HTML", size: 16000 },
          { name: "animate makes things fun", size: 8000 },
          { name: "data data everywhere...", size: 5220 },
          { name: "display something beautiful", size: 3623 },
          { name: "flex your muscles", size: 984 },
          { name: "physics is religion", size: 6410 },
          { name: "query and you get the answer", size: 2124 }
      ]
  };
  
  var width = innerWidth-40,
      height = innerHeight-40,
      color = d3.scale.category20c(),
      div = d3.select("#treemap").append("div")
         .style("position", "relative");
  
  var treemap = d3.layout.treemap()
      .size([width, height])
      .sticky(true)
      .value(function(d) { return d.size; });
  
  var node = div.datum(tree).selectAll(".node")
        .data(treemap.nodes)
      .enter().append("div")
        .attr("class", "node")
        .call(position)
        .style("background-color", function(d) {
            return d.name == 'tree' ? '#fff' : color(d.name); })
        .append('div')
        .style("font-size", function(d) {
            // compute font size based on sqrt(area)
            return Math.max(20, 0.18*Math.sqrt(d.area))+'px'; })
        .text(function(d) { return d.children ? null : d.name; });
  
  function position() {
    this.style("left", function(d) { return d.x + "px"; })
        .style("top", function(d) { return d.y + "px"; })
        .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
        .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
  } 
  </code></pre>
  
  <p>And this is the code inside the body tag inside the treemap.html</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="treemap"&gt;&lt;/div&gt;
      &lt;script src="d3.v3.js"&gt;&lt;/script&gt;
      &lt;script src="treemap.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>