title: bootstrap layout with nvd3.js
body: <p>I recently started to look into d3.js. Though im pretty new in html/css/javascript; my current goal is to build a simple (static) dashboard using nvd3.js (for easier graphs) and bootstrap as layout component. </p>
  
  <p>I started off with nvd3.js example "pie.html" and try to <strong>arrange the graphs in one line</strong> using bootstraps grid system. I got it working with d3 only using the d3noob.org example. Sadly, its not working with nvd3.</p>
  
  <p>I pasted the full code below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link href="nvd3/src/nv.d3.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
  &lt;style&gt;
  
  body {
    overflow-y:scroll;
  }
  
  text {
    font: 12px sans-serif;
  }
  
  &lt;/style&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="span5" id="area1"&gt;&lt;/div&gt; 
      &lt;div class="span2"&gt; This is some random text which should be in the middle of these two charts &lt;/div&gt;
      &lt;div class="span5" id="area2"&gt;&lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;body class='with-3d-shadow with-transitions'&gt;
  &lt;!-- load the libraries --&gt;    
  &lt;script src="nvd3/lib/d3.v3.js"&gt;&lt;/script&gt;
  &lt;script src="nvd3/nv.d3.js"&gt;&lt;/script&gt;
  &lt;script src="nvd3/src/models/pie.js"&gt;&lt;/script&gt;
  &lt;script src="nvd3/src/utils.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
    var testdata = [
      { 
        key: "One",
        y: 5
      },
      { 
        key: "Two",
        y: 2
      },
      { 
        key: "Three",
        y: 9
      },
      { 
        key: "Four",
        y: 7
      },
      { 
        key: "Five",
        y: 4
      },
      {
          key: "Six",
          y: 3
      }
    ];
  
  
  nv.addGraph(function() {
      var width = nv.utils.windowSize().width - 40,
          height = nv.utils.windowSize().height / 2 - 40;
  
      var chart = nv.models.pie()
          .values(function(d) { return d })
          .width(width)
          .height(height);
  
      d3.select("#area1").append("svg")
          .datum([testdata])
        .transition().duration(1200)
          .attr('width', width)
          .attr('height', height)
          .call(chart);
  
      return chart;
  });
  
  nv.addGraph(function() {
      var width = nv.utils.windowSize().width - 40,
          height = nv.utils.windowSize().height / 2 - 40;
  
      var chart = nv.models.pie()
          .values(function(d) { return d })
          .width(width)
          .height(height)
          .donut(true);
  
      d3.select("#area2").append("svg")
          .datum([testdata])
        .transition().duration(1200)
          .attr('width', width)
          .attr('height', height)
          .call(chart);
  
      return chart;
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What it looks like:
  <img src="https://i.stack.imgur.com/T3HJ1.png" alt="my example"></p>
  
  <p>The d3+bootstrap example: <a href="https://gist.github.com/d3noob/6a3b59149cf3ebdb3fc4" rel="nofollow noreferrer">https://gist.github.com/d3noob/6a3b59149cf3ebdb3fc4</a></p>
  
  <p>What it should look like:<img src="https://i.stack.imgur.com/gSYTv.png" alt="taken from d3noob.org"></p>