title: how to Draw d3.js graph in particular <div> section
body: <p>i am new to d3.js, i want to generate graph as per example <a href="http://bl.ocks.org/mbostock/3885304" rel="nofollow noreferrer">here</a>.</p>
  
  <p>If I can store this file separately and runs it works fine. but I don't know how to add this into my particular  element of my html page. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;title&gt;Bootstrap 3, D3.JS implementation&lt;/title&gt;
      &lt;SCRIPT type="text/javascript" src="d3.v2.min.js"&gt;&lt;/SCRIPT&gt;
  
      &lt;meta name="description" content="Source code generated using layoutit.com"&gt;
      &lt;meta name="author" content="LayoutIt!"&gt;
  
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
    &lt;/head&gt;
  
    &lt;style&gt;
  
  nav {
    margin-top: 40px;
    padding: 24px;
    text-align: center;
    font-family: Raleway;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  }
  #nav-3 {
    background: #EEA200;
  }
  
  .link-3 {
    transition: 0.4s;
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    padding: 0 10px;
    margin: 0 10px;
  }
  .link-3:hover {
    background-color: #ffffff;
    color: #EEA200;
    padding: 24px 10px;
  }
  
  
  
  
  
  .axis text {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .x.axis path {
    display: none;
  }
  
  
  
  
  &lt;/style&gt;
    &lt;body&gt;
  
      &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;nav class="navbar navbar-inverse" role="navigation"&gt;
  
                  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="active"&gt;
                              &lt;a class="link-3" href="#"&gt;HOME&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a class="link-3" href="#"&gt;LOGIN&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;     
                      &lt;h3&gt;Sample page&lt;/h3&gt;        
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-12" &gt;
              &lt;div id="svgHere" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/scripts.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      var n = 20, // number of samples
      m = 4; // number of series
  
  var data = d3.range(m).map(function() { return d3.range(n).map(Math.random); });
  
  var margin = {top: 20, right: 30, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  var y = d3.scale.linear()
      .domain([0, 1])
      .range([height, 0]);
  
  var x0 = d3.scale.ordinal()
      .domain(d3.range(n))
      .rangeBands([0, width], .2);
  
  var x1 = d3.scale.ordinal()
      .domain(d3.range(m))
      .rangeBands([0, x0.rangeBand()]);
  
  var z = d3.scale.category10();
  
  var xAxis = d3.svg.axis()
      .scale(x0)
      .orient("bottom");
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
  
  var svg = d3.select("#svgHere").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("svg:g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
  
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
  svg.append("g").selectAll("g")
      .data(data)
    .enter().append("g")
      .style("fill", function(d, i) { return z(i); })
      .attr("transform", function(d, i) { return "translate(" + x1(i) + ",0)"; })
    .selectAll("rect")
      .data(function(d) { return d; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("height", y)
      .attr("x", function(d, i) { return x0(i); })
      .attr("y", function(d) { return height - y(d); });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>From the above code "here i want to draw graph using d3.js" in this section, I want to add my graph.</p>