title: Is there any easy way to assign JSON data to svg element using Javascript?
body: <p>I am new to SVG, and trying to create a simple graph using it.
  But I don't know how assign JSON data to draw a rectangle in SVG dynamically using 'for loop'.Help me to get 1 loop and assigning each value to draw rectangle that I want to append to SVG element.</p>
  
  <pre><code>&lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  window.onload = function(){
  var data = [  
  {   
      "srno" : 1 ,
      "status" : "production" , 
      "duration" : 30,
      "color" : "#00ff00",
  },
  {
      "srno" : 2 ,
      "status" : "idle" , 
      "duration" : 5 ,
      "color" : "#ff0000"}];
    //Make an SVG Container
  var svgContainer = d3.select("body").append("svg")
  .attr("width", 720)
  .attr("height", 50);
   //Draw the Rectangle
   var rectangle = svgContainer.append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", machines [1].duration)
  .attr("height", 50)
  .attr("fill","green");//Here I want the color from JSON object
  //And I want duration to be the width property, 
  //Status be the tooltip , which is not working 
  &lt;/script&gt;   
  </code></pre>