title: Display multiple d3.js charts in a single html page
body: <p>I have the the d3.js code which is pasted <a href="http://pastebin.com/s81DE9FK" rel="noreferrer">here</a>.</p>
  
  <p>I am trying to display more than one graphs in the same page. Though the d3.js code is same. Say one from data1.json and the other from data2.json. Following is the snippet which is bothering me.</p>
  
  <pre><code>&lt;svg width="960" height="960"&gt;&lt;/svg&gt;
  
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var svg2 = d3.select("svg"),
      margin = 20,
      diameter = +svg2.attr("width"),
      g = svg2.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
  </code></pre>
  
  <p>As per different answers in SO <a href="https://stackoverflow.com/questions/19792578/how-to-show-two-d3-js-diagrams-on-the-same-page">here</a>, <a href="https://stackoverflow.com/questions/24812418/is-there-a-working-implemenation-to-fit-multiple-d3-charts-like-line-bar-etc-o">here</a>, <a href="https://stackoverflow.com/questions/27830399/d3-dimple-how-to-show-multiple-dimple-charts-on-same-page">here</a>, <a href="https://stackoverflow.com/questions/16714271/trying-to-add-multiple-d3-graphs">here</a> or <a href="https://stackoverflow.com/questions/21581277/d3-js-two-graphs-on-same-page-is-on-top-of-each-other">here</a>, the solution seems to be one of the following:</p>
  
  <ul>
  <li>Use different variable name to hold svgs such as svg1, svg2.. etc..
  which I have done. </li>
  <li><p>Use a method as described <a href="http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html" rel="noreferrer">here</a>.</p>
  
  <pre><code>   var chart1 = d3.select("#area1")
         .append("svg")
  </code></pre></li>
  </ul>
  
  <p>Method two is not working for me, as it shows blank page.</p>
  
  <p>How to resolve this. I am sure that I am not getting the syntax correctly.</p>